/* Oldalspecifikus stíluslap.
   Korábban inline blokk volt a register.html sablonban. Külön fájlban a böngésző
   gyorsítótárazza, így nem tölti le minden oldalletöltéskor újra. A hivatkozás
   a blokk eredeti helyén áll, ezért a sorrend és a viselkedés változatlan. */
/* --- JELSZÓ HASÁB ---
       A két jelszómező egymás alatt, a széles űrlap bal hasábjában. A grid
       egyetlen cellát ad neki, a belső elrendezést ez a flex adja. */
    .password-column {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* --- CSOMAGVÁLASZTÓ --- */
    .module-picker {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .module-option {
        position: relative;
        display: flex;
        align-items: center;
        gap: 14px;
        background-color: #18191e;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 13px 16px;
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }

    .module-option:hover {
        border-color: rgba(167, 243, 208, 0.35);
        background-color: #1c1e24;
    }

    /* A rádiógombot elrejtjük, de a fókuszt nem: a kártya kapja a
       fókuszgyűrűt, hogy billentyűzettel is látszódjon, hol tartunk. */
    .module-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        pointer-events: none;
    }

    .module-option:focus-within {
        border-color: rgba(167, 243, 208, 0.55);
        box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.18);
    }

    .module-option.is-selected {
        border-color: rgba(110, 231, 183, 0.65);
        background-color: rgba(110, 231, 183, 0.07);
        box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.25) inset;
    }

    .module-icon {
        font-size: 20px;
        line-height: 1;
        flex-shrink: 0;
    }

    .module-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .module-name {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #e5e7eb;
        font-size: 14.5px;
        font-weight: 700;
    }

    .module-option.is-selected .module-name {
        color: #a7f3d0;
    }

    .module-desc {
        color: #6b7280;
        font-size: 12.5px;
        line-height: 1.4;
    }

    .module-badge {
        color: #6ee7b7;
        background-color: rgba(110, 231, 183, 0.12);
        border: 1px solid rgba(110, 231, 183, 0.28);
        border-radius: 999px;
        padding: 1px 8px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* A pipa helye mindig foglalt, hogy a kártyák ne ugráljanak választáskor. */
    .module-check {
        margin-left: auto;
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        transition: border-color 0.2s, background-color 0.2s;
    }

    .module-option.is-selected .module-check {
        border-color: #6ee7b7;
        background-color: #6ee7b7;
    }

    .module-option.is-selected .module-check::after {
        content: '';
        display: block;
        width: 5px;
        height: 9px;
        margin: 3px auto 0;
        border: solid #0f1115;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    @media (max-width: 760px) {
        .module-desc { font-size: 12px; }
    }

    /* ---------------------------------------------------
       IGAZÍTÁS A KÉPERNYŐ MAGASSÁGÁHOZ
       A regisztráció egy lépés: ha görgetni kell, a látogató nem látja a
       csomagválasztót és a gombot, és könnyen félbehagyja. Ezért az űrlap
       ritmusa a képernyő magasságához igazodik - két fokozatban, hogy nagy
       kijelzőn semmit ne veszítsünk a levegőből.
       --------------------------------------------------- */

    /* Folyamatos skálázás: minden függőleges térköz a képernyő magasságából
       (vh) számolódik, alsó és felső korláttal. Így nincs ugrás egy-egy
       töréspontnál, és 620 és 1080 képpont között is végig kifér. */
    .auth-card.is-wide {
        padding: clamp(12px, 2.4vh, 32px) clamp(28px, 3.5vw, 56px) clamp(14px, 2.6vh, 28px);
    }

    .auth-card.is-wide form { gap: clamp(6px, 1.35vh, 18px) clamp(20px, 2.2vw, 32px); }
    .auth-card.is-wide input { padding: clamp(7px, 1.25vh, 12px) 14px; }
    .auth-card.is-wide .field-label { margin-bottom: clamp(2px, 0.5vh, 6px); }
    .auth-card.is-wide h2 { margin-bottom: clamp(2px, 0.6vh, 8px); }
    .auth-card.is-wide .subtitle { margin-bottom: clamp(6px, 1.5vh, 16px); }
    .auth-card.is-wide .checkbox-group { padding: clamp(7px, 1.4vh, 16px) 16px; }
    .auth-card.is-wide .btn-wrapper { margin-top: clamp(2px, 0.7vh, 10px); }

    .auth-card.is-wide .astronaut-container {
        transform: scale(clamp(0.42, 0.08vh, 0.72));
        margin-bottom: clamp(0px, 0.6vh, 6px);
    }

    .module-picker { gap: clamp(5px, 1vh, 10px); }
    .module-option { padding: clamp(6px, 1.2vh, 13px) clamp(11px, 1.2vw, 16px); }
    .password-column { gap: clamp(7px, 1.4vh, 14px); }

    body { padding: clamp(6px, 1.2vh, 20px); }

    /* A tartalmat fontossági sorrendben hagyjuk el, ahogy fogy a hely.
       Az űrlap MEZŐI és a gomb végig megmaradnak - csak a dísz és a
       magyarázat tűnik el, ami nélkül is egyértelmű a kitöltés. */

    /* 1. Az űrmanó csak dekoráció, ő megy elsőként. */
    @media (max-height: 1000px) {
        .auth-card.is-wide .astronaut-container { display: none; }
        .auth-card.is-wide h2 { font-size: 1.55em; }
        .auth-card.is-wide .subtitle { font-size: 0.85em; }
    }

    /* 2. A magyarázó jegyzetek: a mezőnevek önmagukban is érthetők, a
       jelszószabályokat pedig a hibaüzenet kiírja, ha tényleg kell. */
    @media (max-height: 940px) {
        .auth-card.is-wide .password-hint { display: none; }
    }

    /* 3. A csomagleírások: a csomagok NEVE önmagában is beszédes. */
    @media (max-height: 880px) {
        .module-desc { display: none; }
        .module-icon { font-size: 18px; }

        /* A "vissza a kezdőoldalra" keskenyebb sávot kap - alatta az
           auth-footer amúgy is kínál bejelentkezési linket. */
        .back-to-landing { margin-top: 10px; }
        .back-to-landing a { padding: 6px 14px; font-size: 13px; }

        .auth-card.is-wide h2 { font-size: 1.4em; }
    }

    /* 4. Legszűkebb eset: az alcím is elmarad, a címsor elmondja ugyanazt. */
    @media (max-height: 680px) {
        .auth-card.is-wide .subtitle { display: none; }
        .back-to-landing { margin-top: 6px; }
    }