/* ============================================================
   LIFED CURATED PROGRAM INQUIRY MODAL
============================================================ */


/* ============================================================
   BASE
============================================================ */

.lfd-curated-modal,
.lfd-curated-modal * {
    box-sizing: border-box;
}


/* ============================================================
   MODAL ROOT
============================================================ */

.lfd-curated-modal {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.lfd-curated-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/*
|--------------------------------------------------------------------------
| Prevent background page scrolling
|--------------------------------------------------------------------------
*/

body.lfd-curated-modal-open {
    overflow: hidden;
}


/* ============================================================
   BACKDROP
============================================================ */

.lfd-curated-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(15, 33, 31, 0.58);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* ============================================================
   DIALOG
============================================================ */

.lfd-curated-dialog {
    position: relative;

    width: min(
        880px,
        100%
    );

    max-height:
        calc(100dvh - 56px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-radius: 28px;

    box-shadow:
        0 30px 80px
        rgba(15, 33, 31, 0.22);

    transform:
        translateY(18px)
        scale(0.985);

    transition:
        transform 0.25s ease;
}


.lfd-curated-modal.is-open
.lfd-curated-dialog {
    transform:
        translateY(0)
        scale(1);
}


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

.lfd-curated-close {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 20;

    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        #dce7e5;

    border-radius: 50%;

    background: #ffffff;
    color: #263a38;

    font-size: 18px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.lfd-curated-close:hover {
    background: #eef9f7;

    border-color: #00ae9d;

    color: #00a896;

    transform:
        rotate(5deg);
}


.lfd-curated-close:focus-visible {
    outline:
        3px solid
        rgba(0, 174, 157, 0.18);

    outline-offset: 2px;
}


/* ============================================================
   FIXED MODAL HEADING
============================================================ */

.lfd-curated-heading {
    flex: 0 0 auto;

    margin: 0;

    padding:
        38px
        76px
        24px
        44px;

    background: #ffffff;

    border-bottom:
        1px solid
        #e7efed;
}


.lfd-curated-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    font-family:
        "Nunito",
        sans-serif;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #00a896;
}


.lfd-curated-title {
    margin: 0;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        clamp(
            28px,
            3vw,
            38px
        );

    font-weight: 800;

    line-height: 1.15;

    color: #1e2928;
}


.lfd-curated-subtitle {
    max-width: 700px;

    margin:
        12px 0 0;

    font-family:
        "Nunito",
        sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.6;

    color: #6d7c7a;
}


/* ============================================================
   INTERNAL SCROLL AREA
============================================================ */

.lfd-curated-scroll {
    flex:
        1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    padding:
        28px
        36px
        40px
        44px;

    scrollbar-gutter: stable;

    scrollbar-width: thin;

    scrollbar-color:
        #b9cdca
        transparent;
}


.lfd-curated-scroll::-webkit-scrollbar {
    width: 7px;
}


.lfd-curated-scroll::-webkit-scrollbar-track {
    background: transparent;
}


.lfd-curated-scroll::-webkit-scrollbar-thumb {
    background: #bfd0cd;

    border-radius: 20px;
}


.lfd-curated-scroll::-webkit-scrollbar-thumb:hover {
    background: #9db7b3;
}


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

#lfdCuratedInquiryForm {
    width: 100%;
}


.lfd-curated-fields {
    display: flex;
    flex-direction: column;

    gap: 26px;
}


/* ============================================================
   HONEYPOT
============================================================ */

.lfd-curated-honeypot {
    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}


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

.lfd-curated-field {
    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
}


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

.lfd-curated-label {
    display: block;

    margin:
        0 0 9px;

    font-family:
        "Nunito",
        sans-serif;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.4;

    color: #243432;
}


.lfd-curated-required {
    color: #00a896;
}


.lfd-curated-optional {
    margin-left: 5px;

    font-size: 13px;
    font-weight: 500;

    color: #909c9a;
}


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

.lfd-curated-input,
.lfd-curated-textarea {
    display: block;

    width: 100%;

    border:
        1px solid
        #d7e2e0;

    border-radius: 12px;

    background: #ffffff;

    font-family:
        "Nunito",
        sans-serif;

    font-size: 15px;
    font-weight: 500;

    color: #263735;

    outline: none;

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


.lfd-curated-input {
    min-height: 50px;

    padding:
        12px 15px;
}


.lfd-curated-textarea {
    min-height: 120px;

    padding:
        14px 15px;

    line-height: 1.55;

    resize: vertical;
}


.lfd-curated-input::placeholder,
.lfd-curated-textarea::placeholder {
    color: #a1acab;
}


.lfd-curated-input:focus,
.lfd-curated-textarea:focus {
    border-color: #00ae9d;

    box-shadow:
        0 0 0 3px
        rgba(0, 174, 157, 0.10);

    background: #ffffff;
}


/* ============================================================
   INVALID INPUT STATE
============================================================ */

.lfd-curated-input.is-invalid,
.lfd-curated-textarea.is-invalid {
    border-color: #dc6b6b;
}


.lfd-curated-input.is-invalid:focus,
.lfd-curated-textarea.is-invalid:focus {
    border-color: #dc6b6b;

    box-shadow:
        0 0 0 3px
        rgba(220, 107, 107, 0.10);
}


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

.lfd-curated-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}


.lfd-curated-input[type="number"]::-webkit-inner-spin-button,
.lfd-curated-input[type="number"]::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


/* ============================================================
   HELP TEXT
============================================================ */

.lfd-curated-help {
    margin:
        -2px 0 10px;

    font-family:
        "Nunito",
        sans-serif;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.55;

    color: #84918f;
}


/* ============================================================
   RADIO / CHECKBOX OPTIONS
============================================================ */

.lfd-curated-options {
    display: grid;

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

    gap: 10px;
}


.lfd-curated-choice {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 48px;

    margin: 0;

    padding:
        11px 14px;

    border:
        1px solid
        #dce6e4;

    border-radius: 12px;

    background: #ffffff;

    cursor: pointer;

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


.lfd-curated-choice:hover {
    border-color: #8fdad2;

    background: #f6fcfb;
}


.lfd-curated-choice input {
    flex:
        0 0 auto;

    width: 18px;
    height: 18px;

    margin:
        0 10px 0 0;

    accent-color: #00ae9d;

    cursor: pointer;
}


.lfd-curated-choice span {
    font-family:
        "Nunito",
        sans-serif;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.35;

    color: #455452;
}


/* Selected */

.lfd-curated-choice:has(
    input:checked
) {
    border-color: #00ae9d;

    background: #eefaf8;

    box-shadow:
        0 0 0 1px
        rgba(0, 174, 157, 0.05);
}


.lfd-curated-choice:has(
    input:checked
)
span {
    color: #087f74;
}


/* Keyboard focus */

.lfd-curated-choice:has(
    input:focus-visible
) {
    border-color: #00ae9d;

    box-shadow:
        0 0 0 3px
        rgba(0, 174, 157, 0.10);
}


/* ============================================================
   CONSENT
============================================================ */

.lfd-curated-consent {
    margin-top: 30px;

    padding:
        15px 17px;

    border-radius: 12px;

    background: #f5f9f8;

    font-family:
        "Nunito",
        sans-serif;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.55;

    color: #73817f;
}


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

.lfd-curated-submit {
    width: 100%;

    min-height: 54px;

    margin-top: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 0;
    border-radius: 12px;

    padding:
        14px 22px;

    background: #00ae9d;

    color: #ffffff;

    font-family:
        "Nunito",
        sans-serif;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.2;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.lfd-curated-submit:hover {
    background: #009f90;

    box-shadow:
        0 10px 26px
        rgba(0, 174, 157, 0.20);

    transform:
        translateY(-1px);
}


.lfd-curated-submit:focus-visible {
    outline:
        3px solid
        rgba(0, 174, 157, 0.20);

    outline-offset: 3px;
}


.lfd-curated-submit i {
    transition:
        transform 0.2s ease;
}


.lfd-curated-submit:hover i {
    transform:
        translateX(3px);
}


.lfd-curated-submit:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   LOADING
============================================================ */

.lfd-curated-submit.is-loading {
    pointer-events: none;
}


.lfd-curated-submit.is-loading span {
    opacity: 0.75;
}


/* ============================================================
   TABLET / MOBILE
============================================================ */

@media (
    max-width: 767.98px
) {

    .lfd-curated-modal {
        align-items: flex-end;

        padding: 0;
    }


    .lfd-curated-dialog {
        width: 100%;

        max-height: 94dvh;

        border-radius:
            24px 24px 0 0;

        transform:
            translateY(30px);
    }


    .lfd-curated-modal.is-open
    .lfd-curated-dialog {
        transform:
            translateY(0);
    }


    .lfd-curated-heading {
        padding:
            28px
            58px
            18px
            20px;
    }


    .lfd-curated-eyebrow {
        margin-bottom: 7px;

        font-size: 11px;
    }


    .lfd-curated-title {
        font-size: 25px;

        line-height: 1.18;
    }


    .lfd-curated-subtitle {
        margin-top: 8px;

        font-size: 14px;

        line-height: 1.55;
    }


    .lfd-curated-close {
        top: 14px;
        right: 14px;

        width: 38px;
        height: 38px;

        font-size: 16px;
    }


    .lfd-curated-scroll {
        padding:
            20px
            16px
            28px
            20px;
    }


    .lfd-curated-fields {
        gap: 22px;
    }


    .lfd-curated-options {
        grid-template-columns: 1fr;
    }


    .lfd-curated-consent {
        margin-top: 24px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (
    max-width: 479.98px
) {

    .lfd-curated-dialog {
        max-height: 96dvh;

        border-radius:
            20px 20px 0 0;
    }


    .lfd-curated-heading {
        padding:
            24px
            54px
            16px
            17px;
    }


    .lfd-curated-title {
        font-size: 23px;
    }


    .lfd-curated-subtitle {
        font-size: 13.5px;
    }


    .lfd-curated-scroll {
        padding:
            18px
            13px
            24px
            17px;
    }


    .lfd-curated-choice {
        min-height: 46px;

        padding:
            10px 12px;
    }


    .lfd-curated-input {
        min-height: 48px;
    }


    .lfd-curated-textarea {
        min-height: 110px;
    }


    .lfd-curated-submit {
        min-height: 52px;
    }

}