/* =====================================================
   RUET Esports Community
   JOIN / REGISTRATION PAGE
   SINGLE PAGE FORM
===================================================== */


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

.join-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(50, 230, 118, 0.10),
            transparent 34%
        ),
        var(--color-background);
}


.join-page__main {
    position: relative;

    min-height: 100vh;

    padding:
        34px 0
        90px;

    overflow: hidden;
}


.join-page__container {
    position: relative;
    z-index: 2;
}


.join-page__glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;

    opacity: 0.12;
}


.join-page__glow--one {
    top: 180px;
    left: -240px;

    background:
        var(--color-primary);
}


.join-page__glow--two {
    top: 900px;
    right: -260px;

    background:
        #1f6fff;
}


/* =====================================================
   BACK BUTTON
===================================================== */

.join-page__back {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--color-text-muted);

    text-decoration: none;

    font-size: 0.92rem;

    font-weight: 500;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.join-page__back:hover {

    color:
        var(--color-primary);

    transform:
        translateX(-3px);
}


/* =====================================================
   HERO
===================================================== */

.join-page__hero {

    max-width: 1100px;

    margin:
        42px auto
        38px;

    text-align: center;
}


.join-page__banner {

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(50, 230, 118, 0.22);

    border-radius: 20px;

    background:
        #050708;

    box-shadow:
        0 0 0 1px
        rgba(50, 230, 118, 0.04),

        0 18px 60px
        rgba(0, 0, 0, 0.35);
}


.join-page__banner-image {

    display: block;

    width: 100%;

    height: auto;

    max-height: 520px;

    object-fit: cover;
}


/* =====================================================
   REGISTRATION CARD
===================================================== */

.registration-card {

    position: relative;

    max-width: 1100px;

    margin:
        0 auto;

    padding:
        clamp(22px, 3vw, 40px);

    border:
        var(--card-border);

    border-radius:
        var(--card-radius);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        var(--shadow-lg);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    overflow: hidden;
}


.registration-card__topline {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-primary),
            transparent
        );
}


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

.registration-header {

    text-align: center;

    max-width: 850px;

    margin:
        10px auto
        35px;
}


.registration-header__tag {

    display: inline-block;

    color:
        var(--color-primary);

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        1.6px;
}


.registration-header h1 {

    margin:
        10px 0
        16px;

    font-size:
        clamp(
            1.8rem,
            4vw,
            3rem
        );

    line-height:
        1.2;

    letter-spacing:
        -1px;
}


.registration-header__lead {

    margin:
        0 0
        10px;

    color:
        var(--color-primary);
}


.registration-header > p:last-child {

    max-width:
        720px;

    margin:
        0 auto;

    color:
        var(--color-text-muted);

    line-height:
        1.7;
}


/* =====================================================
   INFORMATION SECTIONS
===================================================== */

.info-section {

    padding:
        26px 0;

    margin:
        0 0
        25px;

    border-bottom:
        1px solid
        var(--color-border);
}


.info-section__title {

    margin-bottom:
        18px;

    font-size:
        1.05rem;

    font-weight:
        700;

    color:
        var(--color-text);
}


.info-section > p {

    margin:
        0 0
        18px;

    color:
        var(--color-text-muted);

    font-size:
        0.9rem;

    line-height:
        1.6;
}


.info-grid {

    display:
        grid;

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

    gap:
        14px;
}


.info-grid article {

    display:
        flex;

    gap:
        12px;

    padding:
        16px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        14px;

    background:
        rgba(255,255,255,0.025);
}


.info-grid article > span {

    flex:
        0 0 auto;

    font-size:
        1.25rem;
}


.info-grid strong {

    display:
        block;

    margin-bottom:
        4px;
}


.info-grid p {

    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        0.78rem;

    line-height:
        1.55;
}


/* =====================================================
   NETWORK
===================================================== */

.network-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;
}


.network-links a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        11px 15px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        10px;

    color:
        var(--color-text-muted);

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

    text-decoration:
        none;

    font-size:
        0.82rem;

    transition:
        0.25s ease;
}


.network-links a:hover {

    color:
        var(--color-primary);

    border-color:
        rgba(50,230,118,0.35);

    background:
        rgba(50,230,118,0.06);

    transform:
        translateY(-2px);
}


/* =====================================================
   PAYMENT NOTICE
===================================================== */

.payment-notice {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    padding:
        20px;

    margin:
        10px 0
        32px;

    border:
        1px solid
        rgba(50,230,118,0.18);

    border-radius:
        16px;

    background:
        rgba(50,230,118,0.045);
}


.payment-notice__icon {

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    color:
        var(--color-primary);

    background:
        rgba(50,230,118,0.08);

    font-size:
        1.1rem;
}


.payment-notice strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--color-primary);
}


.payment-notice p {

    margin:
        0 0
        12px;

    color:
        var(--color-text-muted);

    font-size:
        0.82rem;
}


.payment-notice__details {

    display:
        grid;

    gap:
        6px;

    color:
        var(--color-text-muted);

    font-size:
        0.78rem;

    line-height:
        1.5;
}


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

.form-intro {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        10px 0
        28px;
}


.form-intro__tag {

    color:
        var(--color-primary);

    font-size:
        0.74rem;

    font-weight:
        700;

    letter-spacing:
        1.5px;
}


.form-intro h2 {

    margin:
        6px 0
        5px;

    font-size:
        clamp(
            1.5rem,
            3vw,
            2rem
        );
}


.form-intro p {

    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        0.85rem;
}


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

.form-message {

    display:
        none;

    margin:
        0 0
        22px;

    padding:
        14px 16px;

    border-radius:
        12px;

    font-size:
        0.86rem;

    line-height:
        1.5;
}


.form-message.is-visible {

    display:
        block;
}


.form-message.is-error {

    color:
        #ffb7b7;

    background:
        rgba(255,80,80,0.08);

    border:
        1px solid
        rgba(255,80,80,0.18);
}


.form-message.is-success {

    color:
        #bfffd5;

    background:
        rgba(50,230,118,0.08);

    border:
        1px solid
        rgba(50,230,118,0.18);
}


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

.form-step {

    display:
        block;

    min-width:
        0;

    margin:
        0 0
        32px;

    padding:
        0 0
        32px;

    border:
        0;

    border-bottom:
        1px solid
        var(--color-border);
}


.form-section-visible:last-of-type {

    margin-bottom:
        25px;
}


.form-step legend {

    width:
        100%;

    padding:
        0;

    margin:
        0 0
        8px;

    color:
        var(--color-text);

    font-size:
        1.15rem;

    font-weight:
        700;
}


.step-description {

    margin:
        0 0
        22px;

    color:
        var(--color-text-muted);

    font-size:
        0.8rem;
}


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

.form-grid {

    display:
        grid;

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

    gap:
        20px;
}


.form-field {

    min-width:
        0;

    margin-bottom:
        20px;
}


.form-field:last-child {

    margin-bottom:
        0;
}


.form-field > label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--color-text);

    font-size:
        0.88rem;

    font-weight:
        600;
}


.form-field > label span {

    color:
        var(--color-primary);
}


.form-field > label small {

    color:
        var(--color-text-muted);

    font-weight:
        400;

    font-size:
        0.72rem;
}


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

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius:
        12px;

    outline:
        none;

    color:
        var(--color-text);

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

    font:
        inherit;

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


.form-field textarea {

    min-height:
        120px;

    resize:
        vertical;
}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        #6f7a8c;
}


.form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color:
        rgba(50,230,118,0.55);

    background:
        rgba(50,230,118,0.025);

    box-shadow:
        0 0 0 4px
        rgba(50,230,118,0.07);
}


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

.field-hint {

    margin-top:
        5px;

    color:
        var(--color-text-muted);

    font-size:
        0.7rem;
}


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

.field-error {

    display:
        block;

    min-height:
        0;

    margin-top:
        6px;

    color:
        #ff8d8d;

    font-size:
        0.74rem;

    line-height:
        1.4;
}


.form-field.has-error
input:not([type="checkbox"]):not([type="radio"]),
.form-field.has-error select,
.form-field.has-error textarea {

    border-color:
        rgba(255,80,80,0.60);

    box-shadow:
        0 0 0 3px
        rgba(255,80,80,0.07);
}


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

.check-grid {

    display:
        grid;

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

    gap:
        10px;
}


.radio-stack {

    display:
        grid;

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

    gap:
        10px;
}


.check-option {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        46px;

    padding:
        10px 12px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        11px;

    color:
        var(--color-text-muted);

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

    cursor:
        pointer;

    transition:
        0.25s ease;
}


.check-option:hover {

    color:
        var(--color-text);

    border-color:
        rgba(50,230,118,0.25);
}


.check-option:has(input:checked) {

    color:
        var(--color-primary);

    border-color:
        rgba(50,230,118,0.42);

    background:
        rgba(50,230,118,0.06);
}


.check-option input {

    flex:
        0 0 auto;

    accent-color:
        var(--color-primary);
}


.check-grid.has-error .check-option,
.radio-stack.has-error .check-option {

    border-color:
        rgba(255,80,80,0.35);
}


/* =====================================================
   OTHER GAME
===================================================== */

.other-game-input {

    margin-top:
        12px;
}


/* =====================================================
   FINAL REMINDER
===================================================== */

.final-reminder {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        10px;

    padding:
        14px;

    border-radius:
        12px;

    color:
        var(--color-text-muted);

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

    border:
        1px solid
        rgba(255,255,255,0.07);

    font-size:
        0.78rem;

    line-height:
        1.55;
}


.final-reminder i {

    margin-top:
        2px;

    color:
        var(--color-primary);
}


.final-reminder p {

    margin:
        0;
}


/* =====================================================
   CONFIRMATION
===================================================== */

.form-confirmation {

    padding:
        20px;

    margin:
        0 0
        25px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        14px;

    background:
        rgba(255,255,255,0.025);
}


.consent-option {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    color:
        var(--color-text-muted);

    font-size:
        0.82rem;

    line-height:
        1.65;

    cursor:
        pointer;
}


.consent-option input {

    flex:
        0 0 auto;

    margin-top:
        4px;

    accent-color:
        var(--color-primary);
}


.consent-option strong {

    color:
        var(--color-primary);
}


.consent-option.has-error {

    color:
        #ffb7b7;
}


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

.form-actions {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        25px;
}


.form-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        13px 24px;

    border:
        1px solid
        transparent;

    border-radius:
        12px;

    font:
        inherit;

    font-size:
        0.88rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        0.25s ease;
}


.form-button--primary {

    width:
        100%;

    color:
        #06100a;

    background:
        var(--color-primary);

    box-shadow:
        var(--glow-primary);
}


.form-button--primary:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.05);
}


.form-button--primary:disabled {

    opacity:
        0.7;

    cursor:
        wait;

    transform:
        none;
}


.form-button.is-loading {

    cursor:
        wait;
}


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

.join-form__note {

    margin:
        12px 0
        0;

    text-align:
        center;

    color:
        var(--color-text-muted);

    font-size:
        0.74rem;
}


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

.join-footer {

    min-height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        20px;

    border-top:
        1px solid
        var(--color-border);

    color:
        #6f7a8c;

    font-size:
        0.78rem;
}


.join-footer img {

    width:
        25px;

    height:
        25px;

    object-fit:
        contain;
}


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

@media (max-width: 850px) {

    .form-grid {

        grid-template-columns:
            1fr;
    }


    .check-grid {

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


    .info-grid {

        grid-template-columns:
            1fr;
    }
}


@media (max-width: 650px) {

    .join-page__main {

        padding-top:
            24px;
    }


    .join-page__hero {

        margin-top:
            30px;
    }


    .join-page__banner {

        border-radius:
            14px;
    }


    .registration-card {

        padding:
            20px 16px;

        border-radius:
            18px;
    }


    .registration-header h1 {

        font-size:
            1.65rem;
    }


    .payment-notice {

        flex-direction:
            column;
    }


    .check-grid {

        grid-template-columns:
            1fr;
    }


    .radio-stack {

        grid-template-columns:
            1fr;
    }


    .network-links {

        flex-direction:
            column;
    }


    .network-links a {

        width:
            100%;

        box-sizing:
            border-box;
    }
}


@media (max-width: 430px) {

    .registration-card {

        padding:
            18px 13px;
    }


    .form-step {

        margin-bottom:
            26px;

        padding-bottom:
            26px;
    }


    .form-confirmation {

        padding:
            15px;
    }


    .form-button {

        min-height:
            48px;
    }
}