/* ============================================================
   ASMC
   PHASE 8B
   PARTICIPANT REGISTRATION
============================================================ */


/* ============================================================
   PAGE
============================================================ */

.participant-registration-page {
    background:
        #F6F2F9;
}


.reg8b-page {
    width:
        100%;

    overflow-x:
        hidden;
}


.reg8b-container {
    width:
        min(
            1160px,
            calc(100% - 3rem)
        );

    margin-inline:
        auto;
}



/* ============================================================
   COMPACT INTRO
============================================================ */

.reg8b-intro {
    padding:
        clamp(
            3.5rem,
            5vw,
            5rem
        )
        0;

    background:
        linear-gradient(
            145deg,
            #211627 0%,
            #2D1737 52%,
            #432052 100%
        );

    color:
        #FFFFFF;
}


.reg8b-intro-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    gap:
        clamp(
            4rem,
            8vw,
            8rem
        );

    align-items:
        end;
}



/* ============================================================
   BACK LINK
============================================================ */

.reg8b-back {
    display:
        inline-flex;

    margin-bottom:
        2rem;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.78rem;

    text-decoration:
        none;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    transition:
        color
        180ms
        ease;
}


.reg8b-back:hover {
    color:
        #FFFFFF;
}



/* ============================================================
   INTRO COPY
============================================================ */

.reg8b-kicker,
.reg8b-section-kicker {
    margin:
        0
        0
        0.85rem;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.74rem;

    font-weight:
        600;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        #F7941D;
}


.reg8b-intro h1 {
    margin:
        0
        0
        1.2rem;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        clamp(
            3.8rem,
            6vw,
            6.4rem
        );

    font-weight:
        700;

    line-height:
        0.9;

    letter-spacing:
        -0.06em;

    color:
        #FFFFFF;
}


.reg8b-intro h1 span {
    display:
        block;

    color:
        #CFAFE8;
}


.reg8b-intro-text {
    max-width:
        560px;

    margin:
        0;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        1rem;

    line-height:
        1.7;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );
}



/* ============================================================
   EVENT META
============================================================ */

.reg8b-event-meta {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.17
        );
}


.reg8b-event-row {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0.35rem;

    padding:
        1.15rem
        0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.17
        );
}


.reg8b-event-row > span {
    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    color:
        #F7941D;
}


.reg8b-event-row strong {
    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        1rem;

    color:
        #FFFFFF;
}


.reg8b-event-row small {
    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.82rem;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );
}



/* ============================================================
   REGISTRATION WORKSPACE
============================================================ */

.reg8b-registration {
    padding:
        clamp(
            4.5rem,
            7vw,
            7rem
        )
        0;

    background:
        linear-gradient(
            180deg,
            #FBF9FC 0%,
            #F6F2F9 100%
        );
}


.reg8b-registration-grid {
    display:
        grid;

    grid-template-columns:
        minmax(310px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(
            3rem,
            7vw,
            7rem
        );

    align-items:
        start;
}



/* ============================================================
   PACKAGE PANEL
============================================================ */

.reg8b-package-panel {
    min-width:
        0;
}


.reg8b-package-panel-inner {
    position:
        sticky;

    top:
        calc(
            var(--header-height)
            +
            2rem
        );
}


.reg8b-package-panel h2 {
    margin:
        0
        0
        1rem;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        clamp(
            2.8rem,
            4vw,
            4.4rem
        );

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:
        -0.05em;

    color:
        #211627;
}


.reg8b-package-intro {
    max-width:
        400px;

    margin:
        0
        0
        2rem;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.92rem;

    line-height:
        1.65;

    color:
        #3A2D40;
}



/* ============================================================
   PACKAGE CARD
============================================================ */

.reg8b-package-card {
    position:
        relative;

    display:
        block;

    margin-bottom:
        1rem;

    cursor:
        pointer;
}


.reg8b-package-card input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;
}


.reg8b-package-card-content {
    display:
        block;

    padding:
        1.5rem;

    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.15
        );

    border-radius:
        22px;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    transition:
        border-color
        180ms
        ease,
        background-color
        180ms
        ease,
        transform
        180ms
        ease;
}


.reg8b-package-card:hover
.reg8b-package-card-content {
    transform:
        translateY(-2px);
}


.reg8b-package-card input:checked
+
.reg8b-package-card-content {
    border-color:
        #662E93;

    background:
        #FFFFFF;

    box-shadow:
        0 16px 38px
        rgba(
            33,
            22,
            39,
            0.07
        );
}



/* ============================================================
   PACKAGE TOP
============================================================ */

.reg8b-package-top {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        1rem;

    margin-bottom:
        1.3rem;
}


.reg8b-package-name {
    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        1rem;

    font-weight:
        600;

    color:
        #211627;
}


.reg8b-package-selector {
    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.66rem;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        #662E93;
}



/* ============================================================
   PACKAGE PRICE
============================================================ */

.reg8b-package-price {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0.15rem;

    margin-bottom:
        1.25rem;
}


.reg8b-package-price strong {
    font-family:
        var(--font-display, "Poppins", sans-serif);

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

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -0.04em;

    color:
        #662E93;
}


.reg8b-package-price small {
    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.76rem;

    color:
        #3A2D40;
}



/* ============================================================
   PACKAGE INCLUSIONS
============================================================ */

.reg8b-package-inclusions {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0.55rem;
}


.reg8b-package-inclusions > span {
    position:
        relative;

    padding-left:
        1rem;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.78rem;

    line-height:
        1.45;

    color:
        #3A2D40;
}


.reg8b-package-inclusions > span::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0.55em;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #F7941D;
}



/* ============================================================
   DEADLINES
============================================================ */

.reg8b-deadlines {
    margin-top:
        2rem;

    border-top:
        1px solid
        rgba(
            33,
            22,
            39,
            0.15
        );
}


.reg8b-deadlines > div {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        1.5rem;

    padding:
        1rem
        0;

    border-bottom:
        1px solid
        rgba(
            33,
            22,
            39,
            0.15
        );
}


.reg8b-deadlines span {
    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.72rem;

    color:
        #3A2D40;
}


.reg8b-deadlines strong {
    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.78rem;

    font-weight:
        600;

    text-align:
        right;

    color:
        #211627;
}



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

.reg8b-form-panel {
    min-width:
        0;

    padding:
        clamp(
            2rem,
            3.5vw,
            3.5rem
        );

    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.12
        );

    border-radius:
        30px;

    background:
        rgba(
            255,
            255,
            255,
            0.86
        );

    box-shadow:
        0 22px 54px
        rgba(
            33,
            22,
            39,
            0.06
        );
}



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

.reg8b-form-heading {
    margin-bottom:
        3rem;
}


.reg8b-form-heading h2 {
    margin:
        0
        0
        1rem;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        clamp(
            2.7rem,
            4vw,
            4.2rem
        );

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:
        -0.05em;

    color:
        #211627;
}


.reg8b-form-heading h2 span {
    display:
        block;

    color:
        #662E93;
}


.reg8b-form-heading > p:last-child {
    max-width:
        530px;

    margin:
        0;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.92rem;

    line-height:
        1.65;

    color:
        #3A2D40;
}



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

.reg8b-form-section {
    margin:
        0
        0
        3rem;

    padding:
        0;

    border:
        0;
}


.reg8b-form-section legend {
    width:
        100%;

    margin-bottom:
        1.5rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(
            33,
            22,
            39,
            0.13
        );

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        1rem;

    font-weight:
        600;

    color:
        #211627;
}



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

.reg8b-fields {
    display:
        grid;

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

    gap:
        1.8rem
        1.6rem;
}


.reg8b-field-full {
    grid-column:
        1 / -1;
}



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

.reg8b-field label {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        0.55rem;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.74rem;

    font-weight:
        600;

    color:
        #211627;
}


.reg8b-field label span {
    font-family:
        var(--font-body, "Inter", sans-serif);

    font-weight:
        400;

    color:
        rgba(
            58,
            45,
            64,
            0.55
        );
}



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

.reg8b-field input,
.reg8b-field textarea {
    width:
        100%;

    box-sizing:
        border-box;

    border:
        0;

    border-bottom:
        1px solid
        rgba(
            33,
            22,
            39,
            0.23
        );

    border-radius:
        0;

    outline:
        none;

    background:
        transparent;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        1rem;

    color:
        #211627;

    transition:
        border-color
        180ms
        ease;
}


.reg8b-field input {
    height:
        48px;

    padding:
        0
        0.15rem;
}


.reg8b-field textarea {
    min-height:
        130px;

    padding:
        0.75rem
        0.15rem;

    resize:
        vertical;
}


.reg8b-field input:focus,
.reg8b-field textarea:focus {
    border-color:
        #662E93;
}


.reg8b-field input::placeholder,
.reg8b-field textarea::placeholder {
    color:
        rgba(
            58,
            45,
            64,
            0.42
        );
}



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

.reg8b-form-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        1rem;
}


.reg8b-form-footer p {
    max-width:
        330px;

    margin:
        0;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.72rem;

    line-height:
        1.5;

    color:
        rgba(
            58,
            45,
            64,
            0.64
        );
}



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

.reg8b-submit {
    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1rem;

    padding:
        0.85rem
        1.3rem;

    border:
        0;

    border-radius:
        999px;

    background:
        #662E93;

    cursor:
        pointer;

    font-family:
        var(--font-display, "Poppins", sans-serif);

    font-size:
        0.86rem;

    font-weight:
        600;

    color:
        #FFFFFF;

    transition:
        transform
        180ms
        ease,
        background-color
        180ms
        ease;
}


.reg8b-submit:hover {
    transform:
        translateY(-2px);

    background:
        #92278F;
}


.reg8b-submit:focus-visible,
.reg8b-back:focus-visible,
.reg8b-package-card input:focus-visible
+
.reg8b-package-card-content {
    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.42
        );

    outline-offset:
        4px;
}



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

@media (max-width: 950px) {

    .reg8b-intro-grid {
        grid-template-columns:
            1fr;

        gap:
            3rem;
    }


    .reg8b-registration-grid {
        grid-template-columns:
            1fr;

        gap:
            3.5rem;
    }


    .reg8b-package-panel-inner {
        position:
            static;
    }


    .reg8b-package-panel {
        max-width:
            720px;
    }

}



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

@media (max-width: 700px) {

    .reg8b-container {
        width:
            min(
                100% - 2rem,
                1160px
            );
    }


    .reg8b-intro {
        padding:
            3.5rem
            0;
    }


    .reg8b-intro h1 {
        font-size:
            clamp(
                3.3rem,
                14vw,
                4.8rem
            );
    }


    .reg8b-registration {
        padding:
            4rem
            0;
    }


    .reg8b-form-panel {
        padding:
            2rem
            1.4rem;

        border-radius:
            24px;
    }


    .reg8b-fields {
        grid-template-columns:
            1fr;
    }


    .reg8b-field-full {
        grid-column:
            auto;
    }


    .reg8b-form-footer {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .reg8b-form-footer p {
        max-width:
            none;
    }


    .reg8b-submit {
        width:
            100%;
    }

}



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

@media (max-width: 480px) {

    .reg8b-package-card-content {
        padding:
            1.25rem;
    }


    .reg8b-deadlines > div {
        flex-direction:
            column;

        gap:
            0.35rem;
    }


    .reg8b-deadlines strong {
        text-align:
            left;
    }


    .reg8b-form-heading h2 {
        font-size:
            clamp(
                2.5rem,
                11vw,
                3.5rem
            );
    }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .reg8b-back,
    .reg8b-package-card-content,
    .reg8b-field input,
    .reg8b-field textarea,
    .reg8b-submit {
        transition:
            none;
    }

}