/* =============================================================================
   RESYD MULTI STEP FORM EXPERIENCE
   DETERMINISTIC STEP FLOW
   ONLY ONE STEP VISIBLE AT A TIME
   ALIGNED WITH submit-engine.js + form partial
   ============================================================================= */

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

.form {

    position:
        relative;

    padding:
        110px 0 140px;

    background:
        linear-gradient(
            180deg,
            #070809 0%,
            #0b0d10 100%
        );

    overflow:
        hidden;

    isolation:
        isolate;
}

.form::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top right,
            rgba(199,170,116,.10),
            transparent 34%
        );

    pointer-events:
        none;
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.form-container {

    width:
        min(100% - 2rem, 1380px);

    margin-inline:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(320px,460px)
        minmax(0,620px);

    gap:
        72px;

    align-items:
        start;

    position:
        relative;

    z-index:
        2;
}

/* =============================================================================
   LEFT SIDE
   ============================================================================= */

.form-left {

    position:
        sticky;

    top:
        140px;
}

.form-left h2 {

    color:
        #ffffff;

    font-size:
        clamp(2.4rem,5vw,4.8rem);

    line-height:
        .96;

    letter-spacing:
        -.06em;

    margin-bottom:
        24px;
}

.form-sub {

    color:
        rgba(255,255,255,.72);

    font-size:
        1.02rem;

    line-height:
        1.8;

    margin-bottom:
        32px;
}

/* =============================================================================
   LIVE BOXES
   ============================================================================= */

.form-live,
.form-urgency,
.form-speed {

    position:
        relative;

    padding:
        18px 22px;

    border-radius:
        22px;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.06);

    color:
        #ffffff;

    font-size:
        .9rem;

    font-weight:
        700;

    margin-bottom:
        18px;

    backdrop-filter:
        blur(12px);
}

.form-live strong,
.form-speed strong {

    color:
        #d7bc8a;
}

.form-live::before {

    content:
        "";

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #9fe18d;

    box-shadow:
        0 0 14px rgba(159,225,141,.72);

    display:
        inline-block;

    margin-right:
        10px;

    animation:
        resydFormPulse 2s infinite;
}

/* =============================================================================
   TRUST
   ============================================================================= */

.form-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        24px;
}

.form-trust span {

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 16px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

    color:
        #ece2d2;

    font-size:
        .74rem;

    font-weight:
        800;

    letter-spacing:
        .03em;
}

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

.form-card {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        38px;

    background:
        linear-gradient(
            180deg,
            rgba(18,20,22,.98),
            rgba(8,10,12,.98)
        );

    border:
        1px solid rgba(255,255,255,.06);

    box-shadow:
        0 34px 90px rgba(0,0,0,.44);

    padding:
        38px;
}

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

.form-header {

    margin-bottom:
        28px;
}

.form-header h3 {

    color:
        #ffffff;

    font-size:
        1.8rem;

    line-height:
        1.2;

    margin-bottom:
        14px;
}

.form-mini-signal {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 16px;

    border-radius:
        999px;

    background:
        rgba(199,170,116,.08);

    border:
        1px solid rgba(199,170,116,.16);

    color:
        #e4c896;

    font-size:
        .74rem;

    font-weight:
        800;
}

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

.resyd-form-wrap {

    position:
        relative;
}

/* =============================================================================
   MULTI STEP ENGINE
   ============================================================================= */

.resyd-submit-form {

    position:
        relative;

    min-height:
        480px;
}

/* =============================================================================
   STEP
   ============================================================================= */

.submit-step {

    position:
        absolute;

    inset:
        0;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(30px);

    transition:
        opacity .34s ease,
        transform .34s ease,
        visibility .34s ease;

    pointer-events:
        none;

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}

.submit-step.active {

    position:
        relative;

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0);

    pointer-events:
        auto;
}

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

.submit-step h4 {

    color:
        #ffffff;

    font-size:
        1.5rem;

    line-height:
        1.3;

    margin-bottom:
        12px;
}

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

.resyd-submit-form input,
.resyd-submit-form textarea,
.resyd-submit-form select {

    width:
        100%;

    min-height:
        60px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        18px;

    outline:
        none;

    background:
        rgba(255,255,255,.03);

    color:
        #ffffff;

    padding:
        0 18px;

    font-size:
        .92rem;

    font-weight:
        600;

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

.resyd-submit-form textarea {

    min-height:
        140px;

    padding:
        18px;

    resize:
        vertical;
}

.resyd-submit-form input:focus,
.resyd-submit-form textarea:focus,
.resyd-submit-form select:focus {

    border-color:
        rgba(199,170,116,.28);

    background:
        rgba(255,255,255,.05);

    box-shadow:
        0 0 0 4px rgba(199,170,116,.08);
}

.resyd-submit-form input::placeholder,
.resyd-submit-form textarea::placeholder {

    color:
        rgba(255,255,255,.38);
}

/* =============================================================================
   LABELS
   ============================================================================= */

.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}

.form-group label {

    color:
        rgba(255,255,255,.82);

    font-size:
        .82rem;

    font-weight:
        800;

    letter-spacing:
        .03em;
}

/* =============================================================================
   INTENT OPTIONS
   ============================================================================= */

.intent-options {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        14px;
}

.intent-btn {

    min-height:
        68px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        22px;

    background:
        rgba(255,255,255,.03);

    color:
        rgba(255,255,255,.82);

    font-size:
        .92rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .24s ease,
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease;
}

.intent-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(199,170,116,.18);
}

.intent-btn.active {

    background:
        linear-gradient(
            135deg,
            #d7bc8a,
            #b58545
        );

    border-color:
        transparent;

    color:
        #ffffff;

    box-shadow:
        0 18px 34px rgba(181,133,69,.28);
}

/* =============================================================================
   NAVIGATION
   ============================================================================= */

.submit-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        34px;
}

.submit-back,
.submit-next {

    min-width:
        180px;

    height:
        58px;

    padding:
        0 24px;

    border:
        0;

    border-radius:
        18px;

    font-size:
        .86rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .24s ease,
        opacity .24s ease,
        box-shadow .24s ease;
}

.submit-back {

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    color:
        #ffffff;
}

.submit-next {

    background:
        linear-gradient(
            135deg,
            #d7bc8a,
            #b58545
        );

    color:
        #ffffff;

    margin-left:
        auto;

    box-shadow:
        0 18px 40px rgba(181,133,69,.24);
}

.submit-next:hover,
.submit-back:hover {

    transform:
        translateY(-2px);
}

.submit-next:disabled {

    opacity:
        .42;

    cursor:
        not-allowed;

    transform:
        none;
}

.submit-next.active {

    opacity:
        1;
}

/* =============================================================================
   SIGNALS
   ============================================================================= */

.submit-signals {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        34px;
}

.submit-signal {

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 16px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.06);

    color:
        #ece2d2;

    font-size:
        .72rem;

    font-weight:
        800;
}

/* =============================================================================
   ERRORS
   ============================================================================= */

.error {

    border-color:
        rgba(255,59,48,.44) !important;

    box-shadow:
        0 0 0 4px rgba(255,59,48,.08) !important;
}

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

.submit-next.success {

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        ) !important;
}

/* =============================================================================
   NOTE
   ============================================================================= */

.form-note {

    margin-top:
        26px;

    color:
        rgba(255,255,255,.52);

    font-size:
        .76rem;

    line-height:
        1.7;
}

/* =============================================================================
   HIDDEN
   ============================================================================= */

.hidden {

    display:
        none !important;
}

.hp-field {

    position:
        absolute !important;

    left:
        -9999px !important;

    opacity:
        0 !important;
}

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

@media (max-width: 1080px) {

    .form-container {

        grid-template-columns:
            1fr;

        gap:
            54px;
    }

    .form-left {

        position:
            relative;

        top:
            auto;
    }
}

@media (max-width: 720px) {

    .form {

        padding:
            72px 0 90px;
    }

    .form-card {

        padding:
            24px;
    }

    .intent-options {

        grid-template-columns:
            1fr;
    }

    .submit-nav {

        flex-direction:
            column;
    }

    .submit-back,
    .submit-next {

        width:
            100%;
    }

    .submit-step {

        gap:
            14px;
    }

    .resyd-submit-form {

        min-height:
            560px;
    }
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

@keyframes resydFormPulse {

    0%,100% {

        opacity:
            1;
    }

    50% {

        opacity:
            .42;
    }
}