/*
 * Form dialog — the overlay a button opens with a JetFormBuilder form in it.
 * Loaded on every page (see functions.php enqueue()); js/global/form-dialog.js
 * switches it on. Without JS the dialog is an ordinary block on the page.
 */

.form-dialog {
    padding:          50px 20px;
    background-color: var(--color-bg-alt);
}

.js .form-dialog {
    position:         fixed;
    inset:            0;
    z-index:          var(--z-modal);
    display:          none;
    align-items:      center;
    justify-content:  center;
    padding:          20px;
    overflow-y:       auto;
    background-color: rgba(0, 0, 0, .5);
}

.js .form-dialog.is-open {
    display: flex;
}

.form-dialog__panel {
    position:         relative;
    width:            675px;
    max-width:        100%;
    margin:           0 auto;
    padding:          60px 40px;
    border:           1px solid var(--color-primary);
    background-color: #16181d;
}

/* There is nothing to close when the dialog is part of the page. */
.form-dialog__close {
    display: none;
}

.js .form-dialog__close {
    position:        absolute;
    top:             14px;
    right:           14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    padding:         0;
    border:          0;
    background:      none;
    color:           var(--color-text);
    cursor:          pointer;
    transition:      color var(--transition);
}

.js .form-dialog__close:hover,
.js .form-dialog__close:focus-visible {
    color: var(--color-primary);
}

.form-dialog__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      40px;
    line-height:    1.2;
    text-transform: uppercase;
    color:          var(--color-text);
}

.form-dialog__item {
    margin:      8px 0 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size:   16px;
    line-height: 1.25;
    color:       var(--color-primary);
}

.form-dialog__item:empty {
    display: none;
}

.form-dialog__form {
    margin-top: 24px;
}

@media (max-width: 1024px) {

    .form-dialog__title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {

    .form-dialog {
        padding: 28px 16px;
    }

    .js .form-dialog {
        padding:     16px;
        align-items: flex-start;
    }

    .form-dialog__panel {
        padding: 40px 20px;
    }

    .form-dialog__title {
        font-size: 24px;
    }
}