/* GLIDE O3.1.3 — belépő (magic-link) képernyők. Token-vezérelt (glide-tokens.css).
 * A Figma „🔑 J1 O3.1.1 · Belépés (magic link)" design szerint. MVP: asztali nézet. */

.glide-auth-body {
    margin: 0;
    min-height: 100vh;
    background: var(--glide-surface-base);          /* PAPER */
    color: var(--glide-text-primary);
    font-family: var(--glide-font-body);
    font-size: var(--glide-type-body);
    line-height: 1.5;
}

/* full-width brand-gradient felső sáv (INK -> TEAL -> GOLD) */
.glide-auth__topbar {
    height: 4px;
    background: var(--glide-gradient-brand);
}

.glide-auth {
    padding: 0 var(--glide-space-lg);
}

/* balra igazított, ~720px tartalomoszlop, felül-igazítva (a designban x=360/720/1440 = középre) */
.glide-auth__col {
    max-width: var(--glide-content-form);           /* 720px */
    margin: 0 auto;
    padding: var(--glide-space-xxl) 0 var(--glide-space-xl);  /* ~64px felül */
}

/* --- meta-fejléc (a kártyán kívül) ------------------------------------ */
.glide-auth__kicker {
    margin: 0 0 var(--glide-space-md);
    font-size: var(--glide-type-kicker);            /* 12px */
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--glide-color-teal);
}
.glide-auth__title {
    margin: 0 0 var(--glide-space-md);
    font-family: var(--glide-font-body);            /* Inter — DS „Title" text-style (Ági O3.2 review) */
    font-size: var(--glide-type-title);             /* 28px */
    font-weight: 600;                               /* Semi Bold — DS „Title", nem page-override */
    line-height: 1.286;                             /* 36/28 — így a hosszú cím 1 sorba fér 720px-en */
    color: var(--glide-text-primary);               /* INK */
}
.glide-auth__subtitle {
    margin: 0;
    max-width: 640px;
    color: var(--glide-text-secondary);
}

/* --- form-kártya (fehér, felső akcentussal) --------------------------- */
.glide-card {
    position: relative;
    margin-top: var(--glide-space-lg);
    padding: var(--glide-space-xl);                 /* ~40px */
    background: var(--glide-surface-raised);        /* fehér */
    border: 1px solid var(--glide-border-hairline);
    border-radius: var(--glide-radius-lg);          /* 16px */
    box-shadow: var(--glide-shadow-raised);
    overflow: hidden;                               /* a felső akcentus a lekerekítéshez */
}
/* a kártya felső akcentus-sávja (4px) — alap: brand-gradient */
.glide-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--glide-gradient-brand);
}
/* hiba/lejárat állapot: piros akcentus */
.glide-card--danger::before { background: #C0392B; }

.glide-card__note {
    margin: var(--glide-space-md) 0 0;
    font-size: var(--glide-type-caption);
    color: var(--glide-color-teal-text);            /* teal, biztonsági megnyugtatás */
}
.glide-card__text {
    margin: 0;
    color: var(--glide-text-secondary);
}

/* --- űrlap-mezők ------------------------------------------------------ */
.glide-field { margin: 0; }
.glide-field__label {
    display: block;
    font-size: var(--glide-type-caption);
    font-weight: 600;                               /* radió-/választó-KÉRDÉS (<legend>) félkövér marad */
    color: var(--glide-text-primary);
    margin-bottom: var(--glide-space-sm);           /* címke→kontroll 8px (DS-skála, Ági O3.2 review) */
}
/* O3.2 review (Ági F10) — a DS „Input Field" címke NORMÁL súlyú; csak a <label>-ös
 * (input/select) mezőcímkékre hat, a radió-/választó-csoport <legend> kérdése félkövér marad. */
label.glide-field__label { font-weight: 400; }
.glide-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px var(--glide-space-md);
    font-size: var(--glide-type-body);
    font-family: inherit;
    color: var(--glide-text-primary);
    background: var(--glide-surface-raised);
    border: 1px solid var(--glide-border-control-a11y);
    border-radius: var(--glide-radius-md);          /* 8px */
}
.glide-input::placeholder { color: var(--glide-text-tertiary); }
/* szám-mező: a natív léptető-nyilak rejtve (Figma: sima szövegmező, hardening-0 [number-spinner]) */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.glide-input:focus {
    outline: 2px solid var(--glide-color-teal);
    outline-offset: 1px;
    border-color: var(--glide-color-teal);
}

/* --- CTA (a kártya ALATT, balra, auto-szélesség) --------------------- */
.glide-cta { margin-top: var(--glide-space-lg); }
.glide-btn {
    display: inline-block;
    padding: 10px var(--glide-space-lg);
    font-size: var(--glide-type-body);
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--glide-radius-md);
    background: var(--glide-action-cta-bg);         /* GOLD */
    color: var(--glide-action-cta-text);            /* INK */
}
.glide-btn:hover { filter: brightness(.97); }
.glide-btn:focus-visible { outline: 2px solid var(--glide-color-ink); outline-offset: 2px; }

/* --- apró betűs adatkezelési tájékoztató (a CTA alatt) ----------------
 * Figma node 2320:1152 (Ági+Máté 2026-09-30): tájékoztató sor, NEM elfogadás.
 * Szín = ink-70 (secondary), link = teal-text; méret = body (14px), mint az alcím. */
.glide-auth__fineprint {
    margin: var(--glide-space-md) 0 0;
    font-size: var(--glide-type-body);
    color: var(--glide-text-secondary);
}
.glide-auth__fineprint a { color: var(--glide-text-link); }
/* --ghost — a D4 „Elutasítom” másodlagos gombja (glide-system-state.css --ghost mintája). */
.glide-btn--ghost {
    background: transparent;
    color: var(--glide-text-link);
    border-color: var(--glide-border-control-a11y);
}
.glide-btn--ghost:hover { filter: none; background: var(--glide-surface-hover); }

/* --- D4 (B15) — kliens jóváhagyó-form: korábban/javasolt/csatorna kv-sorok --------- */
.glide-confirm__kv {
    display: flex;
    justify-content: space-between;
    gap: var(--glide-space-md);
    padding: var(--glide-space-sm) 0;
    border-bottom: 1px solid var(--glide-border-hairline);
}
.glide-confirm__kv:last-of-type { border-bottom: none; }
.glide-confirm__delta { color: var(--glide-status-warning-text); font-weight: 700; }
.glide-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--glide-space-md);
}

/* --- login inline hiba (formátum-validáció; a designban nincs, de kell) */
.glide-auth__error {
    margin: 0 0 var(--glide-space-md);
    padding: var(--glide-space-sm) var(--glide-space-md);
    background: #FBE9E7;
    border: 1px solid #C0392B;
    color: #8E2A1F;
    border-radius: var(--glide-radius-md);
    font-size: var(--glide-type-body);
}

/* --- töltő (auto-submit) spinner ------------------------------------- */
.glide-confirm__auto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;                        /* a designban balra, felül */
    gap: var(--glide-space-md);
}
.glide-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--glide-color-teal-tint);
    border-top-color: var(--glide-color-teal);
    border-radius: 50%;
    animation: glide-spin .8s linear infinite;
}
@keyframes glide-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .glide-spinner { animation-duration: 2s; } }