/* =========================================
   CONTACT FORM COMPONENT
   JSON DRIVEN
========================================= */


/* =========================================
   COMPONENT
========================================= */

.contact-form-component {
    width:
        calc(
            100%
            - var(--cf-desktop-margin-left, 0px)
            - var(--cf-desktop-margin-right, 0px)
        );

    margin-top:
        var(
            --cf-desktop-margin-top,
            0px
        );

    margin-right:
        var(
            --cf-desktop-margin-right,
            0px
        );

    margin-bottom:
        var(
            --cf-desktop-margin-bottom,
            0px
        );

    margin-left:
        var(
            --cf-desktop-margin-left,
            0px
        );
}


/* =========================================
   FORM CARD
========================================= */

.contact-form {

    box-sizing: border-box;

    width: 100%;

    max-width:
        var(
            --cf-desktop-max-width,
            1100px
        );

    margin:
        0 auto;

    padding:
        var(--cf-desktop-padding-top, 50px)
        var(--cf-desktop-padding-right, 50px)
        var(--cf-desktop-padding-bottom, 50px)
        var(--cf-desktop-padding-left, 50px);

    background:
        var(
            --cf-desktop-background,
            #ffffff
        );

    border-width:
        var(
            --cf-desktop-border-width,
            0px
        );

    border-style:
        var(
            --cf-desktop-border-style,
            solid
        );

    border-color:
        var(
            --cf-desktop-border-color,
            transparent
        );

    border-radius:
        var(
            --cf-desktop-radius,
            24px
        );

    box-shadow:
        var(
            --cf-desktop-shadow,
            none
        );

    box-sizing: border-box;

}


/* =========================================
   HEADER
========================================= */

.contact-form-header {

    width: 100%;

}


/* =========================================
   TITLE
========================================= */

.contact-form-title {

    margin:
        0 0
        var(
            --cf-desktop-heading-margin,
            12px
        );

    font-size:
        var(
            --cf-desktop-heading-size,
            36px
        );

    line-height:
        var(
            --cf-desktop-heading-line-height,
            1.2
        );

    text-align:
        var(
            --cf-desktop-heading-align,
            left
        );

}


/* =========================================
   DESCRIPTION
========================================= */

.contact-form-description {

    margin:
        0 0
        var(
            --cf-desktop-description-margin,
            30px
        );

    font-size:
        var(
            --cf-desktop-description-size,
            16px
        );

    line-height:
        var(
            --cf-desktop-description-line-height,
            1.6
        );

}


/* =========================================
   FIELDS GRID
========================================= */

.contact-form-fields {

    display: grid;

    grid-template-columns:
        repeat(
            var(--cf-desktop-columns, 2),
            minmax(0, 1fr)
        );

    column-gap:
        var(
            --cf-desktop-column-gap,
            24px
        );

    row-gap:
        var(
            --cf-desktop-row-gap,
            20px
        );

}


/* =========================================
   FIELD
========================================= */

.contact-form-field {

    min-width: 0;

    grid-column:
        span
        var(
            --cf-field-desktop-columns,
            1
        );

}


/* =========================================
   LABEL
========================================= */

.contact-form-label {

    display: block;

    margin-bottom: 8px;

    font-size:
        var(
            --cf-desktop-label-font-size,
            15px
        );

    line-height: 1.4;

    font-weight: 500;

}


/* =========================================
   REQUIRED
========================================= */

.contact-form-required {

    font-weight: 600;

}


/* =========================================
   INPUTS
========================================= */

.contact-form-control {

    display: block;

    width: 100%;

    box-sizing: border-box;

    min-width: 0;

    height:
        var(
            --cf-desktop-input-height,
            52px
        );

    padding:
        var(
            --cf-desktop-input-padding,
            14px 16px
        );

    border:
        var(
            --cf-desktop-input-border-width,
            1px
        )
        solid
        var(
            --cf-desktop-input-border-color,
            #d1d5db
        );

    border-radius:
        var(
            --cf-desktop-input-radius,
            10px
        );

    background:
        var(
            --cf-desktop-input-background,
            #ffffff
        );

    font-size:
        var(
            --cf-desktop-input-font-size,
            16px
        );

    font-family:
        inherit;

    line-height: 1.4;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


/* =========================================
   TEXTAREA
========================================= */

textarea.contact-form-control {

    height: auto;

    min-height:
        150px;

    resize: vertical;

}


/* =========================================
   FILE
========================================= */

input[type="file"].contact-form-control {

    height: auto;

    min-height:
        var(
            --cf-desktop-input-height,
            52px
        );

}


/* =========================================
   FOCUS
========================================= */

.contact-form-control:focus {

    border-color:
        #9ca3af;

    box-shadow:
        0 0 0 3px
        rgba(
            156,
            163,
            175,
            0.15
        );

}


/* =========================================
   ERROR FIELD
========================================= */

.contact-form-field.has-error
.contact-form-control {

    border-color:
        #dc2626;

}


/* =========================================
   ERROR MESSAGE
========================================= */

.contact-form-field-error {

    min-height:
        0;

    margin-top:
        6px;

    font-size:
        13px;

    line-height:
        1.4;

}


/* =========================================
   FILE MESSAGE
========================================= */

.contact-form-file-message {

    margin-top:
        6px;

    font-size:
        13px;

}


/* =========================================
   SUBMIT CONTAINER
========================================= */

.contact-form-submit-container {

    margin-top:
        28px;

}


/* =========================================
   SUBMIT BUTTON
========================================= */

.contact-form-submit {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        13px 24px;

    border:
        0;

    border-radius:
        8px;

    background:
        #111827;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

}


/* =========================================
   BUTTON HOVER
========================================= */

.contact-form-submit:hover {

    opacity:
        0.9;

}


/* =========================================
   BUTTON DISABLED
========================================= */

.contact-form-submit:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

}


/* =========================================
   SUBMITTING
========================================= */

.contact-form.is-submitting {

    cursor:
        wait;

}


/* =========================================
   STATUS
========================================= */

.contact-form-status {

    display:
        none;

    margin-top:
        20px;

    padding:
        14px 16px;

    border-radius:
        8px;

    font-size:
        14px;

    line-height:
        1.5;

}


/* =========================================
   SUCCESS
========================================= */

.contact-form-status.is-success {

    display:
        block;

    background:
        #ecfdf5;

    color:
        #065f46;

}


/* =========================================
   ERROR
========================================= */

.contact-form-status.is-error {

    display:
        block;

    background:
        #fef2f2;

    color:
        #991b1b;

}


/* =========================================
   POPUP
========================================= */

.contact-form-popup {

    position:
        fixed;

    z-index:
        1001;

    top:
        50%;

    left:
        50%;

    width:
        min(
            92vw,
            var(--cf-desktop-max-width, 1100px)
        );

    max-height:
        90vh;

    transform:
        translate(
            -50%,
            -50%
        );

    overflow:
        auto;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

}


/* =========================================
   POPUP OPEN
========================================= */

.contact-form-popup.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* =========================================
   POPUP OVERLAY
========================================= */

.contact-form-popup-overlay {

    position:
        fixed;

    z-index:
        1000;

    inset:
        0;

    background:
        rgba(
            0,
            0,
            0,
            0.55
        );

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

}


/* =========================================
   OVERLAY VISIBLE
========================================= */

.contact-form-popup-overlay.is-visible {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* =========================================
   POPUP FORM
========================================= */

.contact-form-popup
.contact-form {

    max-width:
        100%;

}


/* =========================================
   POPUP CLOSE BUTTON
========================================= */

.contact-form-popup-close {

    position:
        absolute;

    z-index:
        5;

    top:
        15px;

    right:
        15px;

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(
            0,
            0,
            0,
            0.06
        );

    font-size:
        24px;

    line-height:
        1;

    cursor:
        pointer;

}


/* =========================================
   BODY LOCK
========================================= */

body.contact-form-popup-open {

    overflow:
        hidden;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 767px) {


     /* =====================================
       COMPONENT
    ===================================== */

    .contact-form-component {
    width:
        calc(
            100%
            - var(--cf-mobile-margin-left, 0px)
            - var(--cf-mobile-margin-right, 0px)
        );

    margin-top:
        var(
            --cf-mobile-margin-top,
            0px
        );

    margin-right:
        var(
            --cf-mobile-margin-right,
            0px
        );

    margin-bottom:
        var(
            --cf-mobile-margin-bottom,
            0px
        );

    margin-left:
        var(
            --cf-mobile-margin-left,
            0px
        );
}


    /* =====================================
       FORM
    ===================================== */

    .contact-form {

        max-width:
            var(
                --cf-mobile-max-width,
                100%
            );

        padding:
            var(--cf-mobile-padding-top, 28px)
            var(--cf-mobile-padding-right, 20px)
            var(--cf-mobile-padding-bottom, 28px)
            var(--cf-mobile-padding-left, 20px);

        background:
            var(
                --cf-mobile-background,
                #ffffff
            );

        border-width:
            var(
                --cf-mobile-border-width,
                0px
            );

        border-style:
            var(
                --cf-mobile-border-style,
                solid
            );

        border-color:
            var(
                --cf-mobile-border-color,
                transparent
            );

        border-radius:
            var(
                --cf-mobile-radius,
                18px
            );

        box-shadow:
            var(
                --cf-mobile-shadow,
                none
            );

    }


    /* =====================================
       TITLE
    ===================================== */

    .contact-form-title {

        margin-bottom:
            var(
                --cf-mobile-heading-margin,
                10px
            );

        font-size:
            var(
                --cf-mobile-heading-size,
                28px
            );

        line-height:
            var(
                --cf-mobile-heading-line-height,
                1.25
            );

        text-align:
            var(
                --cf-mobile-heading-align,
                left
            );

    }


    /* =====================================
       DESCRIPTION
    ===================================== */

    .contact-form-description {

        margin-bottom:
            var(
                --cf-mobile-description-margin,
                24px
            );

        font-size:
            var(
                --cf-mobile-description-size,
                15px
            );

        line-height:
            var(
                --cf-mobile-description-line-height,
                1.6
            );

    }


    /* =====================================
       GRID
    ===================================== */

    .contact-form-fields {

        grid-template-columns:
            repeat(
                var(--cf-mobile-columns, 1),
                minmax(0, 1fr)
            );

        column-gap:
            var(
                --cf-mobile-column-gap,
                0px
            );

        row-gap:
            var(
                --cf-mobile-row-gap,
                18px
            );

    }


    /* =====================================
       FIELD
    ===================================== */

    .contact-form-field {

        grid-column:
            span
            var(
                --cf-field-mobile-columns,
                1
            );

    }


    /* =====================================
       LABEL
    ===================================== */

    .contact-form-label {

        font-size:
            var(
                --cf-mobile-label-font-size,
                14px
            );

    }


    /* =====================================
       INPUT
    ===================================== */

    .contact-form-control {

        height:
            var(
                --cf-mobile-input-height,
                50px
            );

        padding:
            var(
                --cf-mobile-input-padding,
                13px 14px
            );

        border-width:
            var(
                --cf-mobile-input-border-width,
                1px
            );

        border-color:
            var(
                --cf-mobile-input-border-color,
                #d1d5db
            );

        border-radius:
            var(
                --cf-mobile-input-radius,
                9px
            );

        background:
            var(
                --cf-mobile-input-background,
                #ffffff
            );

        font-size:
            var(
                --cf-mobile-input-font-size,
                16px
            );

    }


    /* =====================================
       TEXTAREA
    ===================================== */

    textarea.contact-form-control {

        min-height:
            140px;

    }


    /* =====================================
       SUBMIT
    ===================================== */

    .contact-form-submit-container {

        margin-top:
            24px;

    }


    .contact-form-submit {

        width:
            100%;

    }


    /* =====================================
       POPUP
    ===================================== */

    .contact-form-popup {

        width:
            calc(
                100vw - 24px
            );

        max-height:
            92vh;

    }


}