/* A háttér a wa-page main-content RÉSZÉRE kerül, így a teljes rendelkezésre álló
   magasságot kitölti (nem csak a tartalom mögött látszik). */
main,
wa-page::part(main-content) {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(27,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%231FA9AE'/%3E%3Cstop offset='1' stop-color='%230194F9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='9' height='9' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='4.5' cy='4.5' r='4.5'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

.wa-dark .only-light, .only-dark:not(.wa-dark, .wa-dark *) {
    display: none;
}

footer{
    border-top:2px dotted #cce7ff;
    padding:0;
}
.footer-content{
    padding:20px;
    max-width:1440px;
    width:100%;
    margin:0 auto;
}
.copyright{
    background-color:#00B7C8;
    color:white;
    padding:10px;
}

/* ── App shell ──────────────────────────────────────────────────────────────
   Az oldal (footerrel együtt) mindig legalább a viewport magas; a main a
   maradékot kitölti. A bal nav flex-oszlop: az alsó csoport (Beállítások +
   Kijelentkezés) a sáv aljára kerül.
*/
wa-page { min-height: 100dvh; }
/* A main-content flex-oszlop → a slottolt <main> (flex:1) kitölti a rendelkezésre
   álló magasságot (header fent, footer a hajtás alatt). Ezt használja az auth is. */
wa-page::part(main-content) { display: flex; flex-direction: column; }
.app-nav { display: flex; flex-direction: column; min-height: 100%; padding: 8px; }
.app-nav-bottom { margin-top: auto; }

/* ── Auth zóna ──────────────────────────────────────────────────────────────
   Bejelentkezés / regisztráció / aktiválás űrlapok. A guest layout <main>-je
   flex-konténer; az .auth-page kitölti és függőlegesen középre rendezi a kártyát.
*/
.auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wa-space-xl) var(--wa-space-m);
    width: 100%;
}
.auth-card {
    width: 100%;
    max-width: 420px;
}
.auth-card--wide { max-width: 520px; }

.auth-muted { color: var(--wa-color-neutral-60); }

/* ── OTP (6 jegyű aktiváló kód) — 3-3 csoport, gap csak a csoportok között ──── */
.otp-row {
    display: flex;
    gap: var(--wa-space-xs);
    max-width: 280px;
    margin: 0 auto;
}
.otp-group {
    display: flex;
    flex: 1 1 0;
}
.otp-digit {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: 70px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--wa-color-neutral-border-normal, #d1d5db);
    border-radius: 0;
    background: var(--wa-color-surface-default, #fff);
    color: var(--wa-color-on-surface, inherit);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    padding: 0;
}
/* A csoporton belül a mezők osztott szegéllyel összeérnek (input-group látvány). */
.otp-group .otp-digit + .otp-digit { margin-left: -2px; }
.otp-group .otp-digit:first-child {
    border-top-left-radius: var(--wa-border-radius-m, 8px);
    border-bottom-left-radius: var(--wa-border-radius-m, 8px);
}
.otp-group .otp-digit:last-child {
    border-top-right-radius: var(--wa-border-radius-m, 8px);
    border-bottom-right-radius: var(--wa-border-radius-m, 8px);
}
.otp-digit:focus {
    position: relative;
    z-index: 1;
    border-color: var(--wa-color-brand-fill-loud, #0194F9);
    box-shadow: 0 0 0 3px var(--wa-color-brand-fill-quiet, rgba(1,148,249,.18));
}

/* ── Social login gombok (hover-szín a provider brandjéhez) ─────────────────── */
.google-btn::part(start)        { filter: grayscale(1) contrast(0) brightness(0.7); }
.google-btn:hover::part(start)  { filter: grayscale(0); }
.google-btn:hover::part(base)   { background-color: #fff; }
.google-btn:hover::part(label)  { color: #000; }

.apple-btn:hover::part(base)    { background-color: #000; }
.apple-btn:hover::part(start)   { color: #fff; }
.apple-btn:hover::part(label)   { color: #fff; }

.facebook-btn:hover::part(base)  { background-color: #1877F2; border-color: #1877F2; }
.facebook-btn:hover::part(start) { color: #fff; }
.facebook-btn:hover::part(label) { color: #fff; }

/* ── Turnstile — invisible mód: nem foglal helyet; látható widgetnél középre ── */
.cf-turnstile { display: flex; justify-content: center; }