/*
  Urlap-alapstilus - ADR-010.

  Ez NEM a docs/design/components.md szerinti Input/Button/Form
  komponenskonyvtar: az a design audit (docs/design/design-audit.md) utan,
  brand-dontes alapjan epul. Ez itt a minimalis, funkcionalis stilus, ami
  ahhoz kell, hogy a Register/Login/ForgotPassword/ResetPassword oldalak
  hasznalhatok es akadalymentesek legyenek - KIZAROLAG a mar letezo
  szemantikus tokenekkel, uj primitiv vagy nyers szin nelkul.

  Amikor a valodi komponenskonyvtar elkeszul, ez a fajl attol felulirhato
  vagy lecserelheto.
*/

@layer components {
    .auth-form {
        max-width: 28rem;
    }

    /*
      ---------- F1: urlap-oldalak vaza (facelift-terv-2026-09.md) ----------

      A panasz magja az volt, hogy az urlapok a keskeny konteneren belul is
      a bal szelre tapadtak, felulet-elkulonites nelkul - nagy kepernyon a
      lap 60%-a ures sotet maradt. Ket minta:

      .auth-shell/.auth-card: a fiok-oldalak (belepes, regisztracio, torles,
      elfogadas) a lap KOZEPTENGELYERE kerulnek, emelt feluletu kartyan.

      .form-section/.form-grid: a kezelo-urlapok szekcio-kartyakat kapnak
      fejleccel, es nagy kepernyon KETHASABOS mezoracsot - az osszetartozo
      mezok (iranyitoszam + telepules + kerulet) egy sorba kerulnek, a
      hosszu mezok .span-2-vel teljes szelesek.
    */
    .auth-shell {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: var(--space-8) var(--space-12);
    }

    .auth-card {
        width: 100%;
        max-width: 30rem;
        background: var(--surface-subtle);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: var(--space-8);
    }

    .auth-card > h1 {
        margin-block-end: var(--space-2);
    }

    /* Ket ut egymas mellett (belepes / regisztracio szalonkent es szakemberkent,
       role-split, Dani 2026-09-14): szeles shell, ket kartya racsban, a hivott
       szerep kartyaja kiemelt kerettel. Keskenyen egymas ala. */
    .auth-shell-wide > .auth-split-title,
    .auth-shell-wide > .auth-split-lead,
    .auth-shell-wide > .auth-split-foot {
        margin: 0;
        text-align: center;
    }

    .auth-shell-wide > .auth-split-lead {
        margin-block: var(--space-2) var(--space-6);
    }

    .auth-shell-wide > .auth-split-foot {
        margin-block-start: var(--space-6);
    }

    .auth-split {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-6);
        width: 100%;
        max-width: 64rem;
    }

    @media (min-width: 768px) {
        .auth-split {
            grid-template-columns: 1fr 1fr;
            align-items: start;
        }
    }

    .auth-split > .auth-card {
        max-width: none;
    }

    .auth-split > .auth-card.is-active {
        border-color: var(--brand-primary);
    }

    .auth-split > .auth-card > h2 {
        margin-block-end: var(--space-1);
    }

    /* A szekcio-kartyas urlap-oldal torzse: szelesebb, mint a regi
       .form-wide, mert a kethasabos racsnak ter kell - de tovabbra sem
       toltodik szet a teljes kepernyore. */
    .form-page {
        max-width: 52rem;
        margin-inline: auto;
    }

    /*
      Kozzeteteli figyelmeztetes: a Piszkozat allapot korabban egy apro
      "Aktualis statusz" sor volt, a gomb pedig a lap aljan - az elso
      probalo felhasznalo (2026-09-02) nem vette eszre, hogy a szalonja
      meg nem nyilvanos. Ez a sav feltuno, es a muveletet is odaadja.
    */
    .publish-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-6);
        background: var(--surface-elevated);
        border: 1px solid var(--status-warning);
        border-inline-start-width: 6px;
        border-radius: var(--radius-md);
    }

    .publish-banner strong {
        color: var(--status-warning);
    }

    .publish-banner p {
        margin: 0;
        max-width: 34rem;
    }

    .status-attention {
        color: var(--status-warning);
    }

    .action-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
    }

    .form-section {
        background: var(--surface-subtle);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
    }

    .form-section > h2 {
        font-size: var(--font-size-h3);
        letter-spacing: 0.01em;
        margin-block-end: var(--space-4);
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-5) var(--space-4);
    }

    @media (min-width: 768px) {
        .form-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .form-grid > .span-2 {
            grid-column: span 2;
        }
    }

    .form-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /*
      F1 suruseg-javitas: a 14px-es halvany cimke + 4px-es koz adta a
      "kis betu, kis sorkoz" erzetet. A cimke a mezo NEVE, nem
      mellekinformacio - kozel teljes kontrasztot es olvashato meretet kap.
    */
    .form-field label {
        font-size: 0.9375rem;
        color: var(--text-primary);
    }

    /*
      MOZGAS-MODELL (Ruben #68): a mezo NEVE kis, nagybetus, ritkitott cimke -
      a modell egyik legfelismerhetobb vonasa.

      KOMPROMISSZUM az F1 dontessel (fent): a modell halvany (--text-muted)
      szint ad, az F1 viszont szandekosan teljes kontrasztot, mert "a cimke a
      mezo NEVE, nem mellekinformacio". A nagybetus forma itt a modelle, a
      szin a masodlagos szoveg - ami a halvanynal jobban olvashato, es a
      13 px-es meret mellett ez szamit.

      CSAK A MEZO NEVE, nem minden label: a jelolonegyzet cimkeje egy MONDAT
      ("Elfogadom az ASZF-et..."), es csupa nagybetuvel olvashatatlan lenne.
      Ezert a kozvetlen gyerek, es nem a .form-field-checkbox.
    */
    .form-field:not(.form-field-checkbox) > label {
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

    /*
      MINDEN urlapvezerlo, nem csak az email/password/text.

      Korabban csak harom tipus volt felsorolva, ezert a keresooldal
      datum-, ido- es szammezoi, a legordulok es a textareak stilus nelkul
      maradtak - ugyanazon az urlapon ketfele kinezetu mezo latszott.
    */
    .form-field input:not([type="checkbox"]):not([type="radio"]),
    .form-field select,
    .form-field textarea {
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-strong);
        /* Mozgas-modell: a mezo ugyanazt a sugarat kapja, mint a gomb es a kartya-
           elemek (--radius-md) - a Rez temaban ez 4 px, tehat ott szogletes marad. */
        border-radius: var(--radius-md);
        background: var(--surface-default);
        color: var(--text-primary);
        font-size: var(--font-size-body);
        font-family: inherit;
        /* Enelkul a bongeszo sajat szelessegevel szamol, es a mezok
           kulonbozo szelesek lesznek egymas alatt. */
        inline-size: 100%;
        max-inline-size: 100%;
        transition: border-color var(--duration-fast);
    }

    /*
      A fokuszban levo mezo kerete a markaszinre valt (mozgas-modell). A
      fokusz-GYURU (base.css :focus-visible) ettol fuggetlenul megmarad - a
      keret-szin kiegeszites, nem a billentyuzetes jelzes helyettesitoje.
    */
    .form-field input:not([type="checkbox"]):not([type="radio"]):focus,
    .form-field select:focus,
    .form-field textarea:focus {
        border-color: var(--brand-primary);
    }

    .form-field textarea {
        min-block-size: calc(var(--touch-target-min) * 2);
        resize: vertical;
    }

    .form-field input:hover,
    .form-field select:hover,
    .form-field textarea:hover {
        border-color: var(--text-secondary);
    }

    .form-field-checkbox {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-2);
    }

    /*
      A cimke KET elemu flex-kontener: negyzet + egyetlen szoveg-gyerek.
      Ha a szoveg linket is tartalmaz, azt a Razor oldalon <span> fogja
      ossze - kulonben minden szovegcsomo es minden <a> kulon flex-elem
      lenne, es a mondat egymas ala tordelt darabokra esne szet.
      A lenti szabaly ezt a feltetelezest teszi lathatova: a negyzet
      utani szoveg egyetlen, normal sorkent folyo blokk.
    */
    .form-field-checkbox label {
        display: flex;
        /* Kozepre igazitva, mert a jelolonegyzet mostantol nagyobb: a
           flex-start mellett a szoveg a doboz teteje mellett lebegett. */
        align-items: center;
        gap: var(--space-2);
        /*
          A jelolonegyzet maga 13x13 px-es bongeszo-alapertelmezes, ami
          ujjal alig eltalalhato. A CIMKE a tenyleges kattintofelulet
          (korbeveszi a negyzetet), ezert a WCAG 2.5.8 meretet ott
          ervenyesitjuk - a negyzet nagyitasa onmagaban nem lenne eleg.
        */
        min-block-size: var(--touch-target-min);
        color: var(--text-primary);
        font-size: var(--font-size-body);
        cursor: pointer;
    }

    /*
      A szoveg-gyerek kapja a maradek helyet, es SAJAT sortoresi
      kontextust nyit: enelkul egy hosszabb cimke a flex-elem
      alapertelmezett min-width:auto miatt kitolna a fejlecet.
    */
    .form-field-checkbox label > span {
        min-inline-size: 0;
    }

    /*
      A bongeszo alapertelmezett negyzete sotet teman is helyes szinu
      (color-scheme: dark), de tul kicsi. Az accent-color a bepipalt
      allapotot koti az arculathoz - enelkul a rendszerkek maradna, ami
      az egyetlen idegen szin lenne az oldalon.
    */
    .form-field-checkbox input[type="checkbox"],
    .form-field-checkbox input[type="radio"] {
        inline-size: 1.15rem;
        block-size: 1.15rem;
        flex: none;
        accent-color: var(--brand-primary);
        cursor: pointer;
    }

    /*
      Telefonszam-mezo (BR-SAL-030 / BR-PRO-024): a +36 a felulet FIX
      elotagja, nem gepelendo - a mezobe csak a nemzeti resz kerul.
      Ugyanez a forma a weboldal-mezo "https://" elotagja
      (.prefixed-input, docs/features/weboldal-cim.md).
    */
    .phone-input,
    .prefixed-input {
        display: flex;
        align-items: stretch;
    }

    .phone-input .phone-prefix,
    .prefixed-input .input-prefix {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding-inline: var(--space-3);
        border: 1px solid var(--border-strong);
        border-inline-end: none;
        /* A mezo sarka az 1. fazis ota radius-md - az elotag is az, kulonben a ket resz nem illeszkedik. */
        border-start-start-radius: var(--radius-md);
        border-end-start-radius: var(--radius-md);
        background: var(--surface-elevated);
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .phone-input input,
    .prefixed-input input {
        flex: 1 1 auto;
        min-inline-size: 0;
        border-start-start-radius: 0 !important;
        border-end-start-radius: 0 !important;
    }

    .field-error {
        color: var(--status-danger);
        font-size: 0.9375rem;
    }

    /* Az ures hibahely ne foglaljon flex-kozt - a ket belepo kartya igy all egy magassagban. */
    .field-error:empty {
        display: none;
    }

    /*
      #12 G1: a hibas MEZO is jelezzen, ne csak a szoveg alatta - a szerver
      az ervenytelen mezore az input-validation-error osztalyt teszi.
    */
    input.input-validation-error,
    select.input-validation-error,
    textarea.input-validation-error {
        border-color: var(--status-danger);
    }

    /*
      F5: a form-hint eddig definialatlan osztaly volt - orokolt, ottleges
      megjelenessel. A sugoszoveg masodlagos, de olvashato.
    */
    .form-hint {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        max-width: 60ch;
    }

    /*
      A begepelendo nev masolhato dobozban (szalon torlese, BR-SAL-041): egy kattintassal
      kijelolheto, hogy a megerosites ne gepelesi teszt legyen.
    */
    .copyable-name {
        display: inline-block;
        padding: 0.125rem 0.5rem;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        background: var(--surface-subtle);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 1rem;
        user-select: all;
    }

    /* Accessibility: a hiba ne csak szinnel jelezzen (docs/design/accessibility.md). */
    .field-error:not(:empty)::before {
        content: "! ";
    }

    /*
      A .button linken (<a>) is hasznalt, nem csak <button>-on. Ezert kell
      ide is a touch target es az alahuzas kikapcsolasa: enelkul a
      "Regisztracio" gomb a fejlecben alahuzott szovegkent latszott, es a
      magassaga is kisebb volt a gomboknal.
    */
    /*
      MOZGAS-MODELL (Ruben #68): a gomb a kartya-elemekkel azonos sugarat
      kap (--radius-md), es minden gomb felkover (700). Korabban csak a
      fo gomb volt 600-as, a masodlagos normal sulyu - egymas mellett ugy
      hatottak, mintha ket kulon rendszerbol jonnenek. A nyomas-visszajelzes
      (3%-os zsugorodas) a motion.css-ben el, mert az mozgas.
    */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-block-size: var(--touch-target-min);
        padding: var(--space-2) var(--space-5);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        font-size: var(--font-size-body);
        font-weight: 700;
        font-family: inherit;
        line-height: var(--line-height-base);
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    .button-primary {
        background: var(--action-primary-background);
        color: var(--action-primary-text);
        font-weight: 700;
        /* A CTA "hivo" erzeset a teal glow adja (design-audit.md: KEEP). */
        box-shadow: var(--shadow-glow);
    }

    .button-primary:hover {
        background: var(--action-primary-hover);
    }

    .button-primary:active {
        background: var(--action-primary-active);
    }

    .button-primary:disabled {
        background: var(--action-primary-disabled);
        cursor: not-allowed;
    }

    /* Egyszeri bekuldes (nav.js, data-submit-once): a kuldes folyamatban - a gomb nem tiltott, csak jelzi. */
    .button[aria-disabled="true"] {
        opacity: 0.6;
        cursor: progress;
    }

    .button-secondary {
        background: transparent;
        color: var(--text-primary);
        border: 1px solid var(--border-strong);
    }

    /*
      Sotet teman a --surface-subtle alig valik el az alap hattertol, ezert a
      hover a VILAGOSABB emelt feluletet hasznalja - kulonben a gomb ugy
      viselkedne, mintha nem lenne hover allapota.
    */
    .button-secondary:hover {
        background: var(--surface-elevated);
    }

    /*
      Visszafordithatatlan muveletek gombja (fiok torlese). SZANDEKOSAN nem
      ugyanugy nez ki, mint egy mentes: ha egy veglegesen torlo gomb a
      tobbivel azonos, akkor a felulet maga bizik ra tul sokat a
      figyelemre. A --status-danger tokent hasznalja, ugyanazt, amit a
      hibas notice szegelye.
    */
    .button-danger {
        background: transparent;
        color: var(--status-danger);
        border: 1px solid var(--status-danger);
        font-weight: 600;
    }

    .button-danger:hover {
        background: var(--status-danger);
        color: var(--action-primary-text);
    }


    /* Halk, keret nelkuli masodlagos gomb - kartyasorok masodik muvelete (pl. Lemondas). */
    .button-ghost {
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid transparent;
    }

    .button-ghost:hover {
        color: var(--text-primary);
        background: var(--surface-elevated);
    }
    /* .notice alap a layout.css-ben; ezek csak a sav HANGJAT valtjak (--notice-tone). */
    .notice-danger {
        --notice-tone: var(--status-danger);
    }

    .notice-success {
        --notice-tone: var(--status-success);
    }

    .notice-warning {
        --notice-tone: var(--status-warning);
    }

    .notice-info {
        --notice-tone: var(--status-info);
    }

    /*
      Ures validation-summary ne foglaljon helyet es ne latszodjon dobozkent.
      Az asp-validation-summary mindig kirendel egy <ul>-t, akkor is, ha nincs
      hiba - ezert az ASP.NET Core sajat "valid" osztalyat celozzuk, nem
      a :empty szelektort.
    */
    .notice.validation-summary-valid {
        display: none;
    }

    /*
      #8: a foglalasi oldal idosav-chipjei. A cel, hogy a foglalhato savok
      LATSSZANAK, ne szovegbol kelljen oket kikovetkeztetni. (A napsav 2026-09-26
      ota havi naptar - wizard.css, "foglalasi naptar".)
    */
    .slot-chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .slot-chip {
        display: inline-block;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
        text-decoration: none;
        color: inherit;
        font-variant-numeric: tabular-nums;
    }

    .slot-chip:hover {
        border-color: var(--action-primary-background);
    }

    /*
      Workshop W1/W2 (dashboard-es-urlap-workshop-2026-09.md): kis kepek a
      foglalas-sorokban es statusz-jelvenyek. A kep dekoracio (ures alt),
      monogram-fallbackkel - ures hely es tort kep helyett.
    */
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .avatar-sq {
        border-radius: var(--radius-sm);
    }

    /* Tablazat-cellaban a kep es a nev egy sorban, fuggolegesen kozepre. */

    /* ------------------------------------------------------------------
       Foglalas-lista kartyakkal (_BookingList). 2026-09-14: a hetoszlopos
       tabla helyett kartya. 2026-09-21 (Ruben mobil prototipusa, docs/design/
       mobil/README.md "bookings"): MOBILE-FIRST - a statusz-cimke a kartya
       tetejen (+ a reszlet: indok), alatta a kep + nev + masik fel, a mikor
       es az osszeg egy sorban, alul a kontextus-akcio a halk kerdessel es a
       Bejelentes link. Szeles kepernyon (900px+) a kep balra, a tobbi egy
       jobb oszlopban ugyanebben a sorrendben - nincs kulon "asztali" tabla.
       ------------------------------------------------------------------ */
    .booking-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    /*
      Mozgas-modell (#68, 9. fazis - asztali elrendezes): ket oszlop. Egy 1150 px szeles
      kartyan a cim es az osszeg egy teljes kepernyonyire kerult egymastol. A sorrend
      soronkent balrol jobbra olvasodik; a lenyitott kartya csak a sajat oszlopat nyujtja
      (align-items: start), a szomszedja nem nyulik vele.
    */
    @media (min-width: 768px) {
        .booking-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
        }

        /* Egy foglalas reszletei (Details, Manage): rovid tenysorok - olvashato szelesseg. */
        .booking-details {
            max-inline-size: 48rem;
        }
    }

    /*
      Mozgas-modell (#68, 6. fazis): a kartya LENYITHATO. A .booking-row a keret, benne a
      <details> (feje a racs: statusz, kep, cim + masik fel, mikor, osszeg, nyil), alatta a
      mindig lathato akcio-sor. A nyil rugosan fordul (motion.css).
    */
    .booking-row {
        display: grid;
        background: var(--surface-subtle);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: border-color var(--duration-fast);
    }

    .booking-row:has(> .booking-card[open]) {
        border-color: var(--border-strong);
    }

    .booking-card-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "status status chevron"
            "avatar main main"
            "when when price";
        align-items: center;
        gap: var(--space-2) var(--space-3);
        padding: var(--space-3) var(--space-4);
        cursor: pointer;
        list-style: none;
    }

    .booking-card-head::-webkit-details-marker {
        display: none;
    }

    .booking-card-head:hover {
        background: var(--surface-raised);
    }

    .booking-card-head:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: -2px;
    }

    .booking-card-chevron {
        grid-area: chevron;
        justify-self: end;
        display: inline-grid;
        place-items: center;
        color: var(--text-secondary);
    }

    .booking-card[open] .booking-card-chevron {
        transform: rotate(180deg);
    }

    .booking-row-status {
        grid-area: status;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        min-inline-size: 0;
    }

    /* A cimke melle a reszlet (az elutasitas indoka, a lemondas oka) - halk, torhet. */
    .booking-row-status-detail {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
        min-inline-size: 0;
    }

    .booking-card-head > .avatar {
        grid-area: avatar;
        align-self: start;
    }

    .booking-row-main {
        grid-area: main;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-inline-size: 0;
    }

    .booking-row-title {
        color: var(--text-primary);
        font-weight: 700;
        font-size: 1.0625rem;
    }

    .booking-row-subject {
        display: flex;
        flex-direction: column;
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }

    /* Bejaras 2026-09-15 (P8): a nowrap idosav 800px-en raszaladt a jelvenyre - tordelheto. */
    .booking-row-when {
        grid-area: when;
        min-inline-size: 0;
        color: var(--text-primary);
    }

    .booking-row-price {
        grid-area: price;
        white-space: nowrap;
        font-weight: 700;
        justify-self: end;
    }

    /* ---- a lenyitott resz ---- */
    .booking-card-body {
        display: grid;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-4) var(--space-4);
        border-block-start: 1px solid var(--border-default);
        background: var(--surface-elevated);
    }

    .booking-card-facts {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-1) var(--space-4);
        margin: 0;
        font-size: var(--font-size-body-small);
    }

    .booking-card-facts dt {
        color: var(--text-secondary);
    }

    .booking-card-facts dd {
        margin: 0;
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    .booking-card-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-4);
        margin: 0;
    }

    .booking-row-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-3);
        padding: var(--space-2) var(--space-4) var(--space-3);
        border-block-start: 1px solid var(--border-default);
    }

    /* A halk kerdes az akcio elott, a maradek helyet kitolti - az akcio jobbra kerul. */
    .booking-row-hint {
        flex: 1 1 12ch;
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }

    .booking-row-link {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
        text-decoration: underline;
    }

    .booking-row-link:hover {
        color: var(--text-primary);
    }

    .booking-row-report {
        margin-inline-start: auto;
    }

    @media (min-width: 900px) {
        .booking-card-head {
            grid-template-areas:
                "avatar status chevron"
                "avatar main price"
                "avatar when when";
            column-gap: var(--space-4);
        }
    }

    /* Kis gomb a kartya akcio-sorahoz - a normal gomb a kartyat szetnyomna. */
    .button-small {
        min-block-size: 36px;
        padding: var(--space-1) var(--space-3);
        font-size: var(--font-size-body-small);
        /* Mozgas-modell: a kis gomb a kisebb sugarat kapja (btn-sm). */
        border-radius: var(--radius-sm);
    }


    /* Tablazat-cellak, amik NE torjenek (datum, ar, statusz, muveletek): a
       nev es a cim torhet, a tobbi egy darabban all. */
    .data-table .cell-nowrap {
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------
       Lapfej (2026-09-14): a cim folott halk vissza-link, alatta egy sor
       meta - eddig ez harom, egymasra torlodott bekezdes volt.
       ------------------------------------------------------------------ */
    .page-head {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-block-end: var(--space-6);
    }

    .page-head-back {
        display: inline-block;
        font-size: var(--font-size-body-small);
        color: var(--text-secondary);
        text-decoration: none;
    }

    .page-head-back:hover {
        color: var(--text-primary);
    }

    /* Profilom: a torles szakasza lathatoan mas - a szem ne tevessze ossze a tobbivel. */
    .profile-danger {
        border-color: var(--status-danger);
    }

    /*
      MOZGAS-MODELL (Ruben #68): az alkalmazas-lapok cime KOMPAKT - a modell
      telefonon 21 px-es, erosen dontott cimsorral nyit, nem a nyilvanos lapok
      nagy H1-evel. Egy "Foglalasaim" vagy "+Seatek" lapnal a cim tajekoztat,
      nem hirdet; a nagy cimsor az elso kepernyo harmadat vitte el.

      Csak a .page-head H1-e - a nyitooldal es a nyilvanos lapok cime marad.
    */
    .page-head > h1 {
        margin: 0;
        font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.15;
    }

    .page-head > .page-head-meta {
        margin: 0;
        color: var(--text-muted);
        font-size: var(--font-size-body-small);
    }

    .page-head > .action-row {
        margin-block-start: var(--space-2);
    }

    .page-head-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .page-head-row > .action-row {
        margin: 0;
    }

    .page-head-row > .page-head {
        margin: 0;
    }
    .cell-with-avatar {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .avatar-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-subtle);
        border: 1px solid var(--border-default);
        color: var(--text-secondary);
        font-weight: 600;
    }

    /*
      MOZGAS-MODELL (Ruben #68): SZINEZETT PIRULA, keret nelkul - a modell
      .status cimkeje. Korabban keretes, atlatszo cimke volt; a kitoltott
      hatter a listaban messzebbrol olvashato.

      A hatter a statusz sajat szinenek 12%-os arnyalata (color-mix), a szoveg
      a teljes szin. A kontraszt-kapu a color-mix()-et nem tudja merni - a
      legszorosabb eset (hiba a sajat arnyalatan, Porcelanon) kezzel szamolva
      kb. 4,7:1, lasd tokens.css --brand-dim.
    */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px var(--space-3);
        /*
          ATLATSZO KERET, szandekosan. Normal modban lathatatlan; a Windows nagy
          kontrasztu (forced-colors) modjaban viszont a HATTERSZIN eltunik, a
          keret pedig rendszerszinnel kirajzolodik. Enelkul a cimke ott puszta
          szovegge esne szet a sor tobbi szovege kozott.
        */
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        color: var(--text-secondary);
        background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    }

    /*
      A DONTEST VARO KERES kap pottyot - a modellben ez lelegzik (motion.css).
      A potty NEM csak dekoracio: a szin mellett ez a masodik jel, ami a
      "valaszra var" allapotot a tobbitol megkulonbozteti (WCAG 1.4.1).

      A modell ezt markaszinnel mutatja, ahogy az elfogadottat is. Itt a
      kerés a markaszint kapja, az ELFOGADOTT viszont zold marad: ket
      egymas melletti, egyforma szinu cimke kozott csak a szoveg donthetne.
    */
    /*
      A CIMKE SZOVEGE a tonus es az alap szovegszin 70/30-as kevereke - nem a tiszta tonus.
      A tiszta tonus a sajat 10-12 %-os hattere elott Porcelanon 3,9-4,4 : 1 volt (kicsi,
      felkover szovegnel a hatar 4,5); a keverek minden temaban 6 : 1 folott, es sotet
      teman vilagosabb, vilagoson sotetebb lesz, tehat a tonus felismerheto marad.
      A negy temas kontraszt-meres fogta meg (mozgas-modell, 10. fazis, 2026-09-27).
    */
    .status-badge-requested {
        color: color-mix(in srgb, var(--brand-primary) 70%, var(--text-primary));
        background: var(--brand-dim);
    }

    .status-badge-requested::before {
        content: "";
        inline-size: 6px;
        block-size: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .status-badge-accepted {
        color: color-mix(in srgb, var(--status-success) 70%, var(--text-primary));
        background: color-mix(in srgb, var(--status-success) 12%, transparent);
    }

    .status-badge-completed {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    }

    .status-badge-negative {
        color: color-mix(in srgb, var(--status-danger) 70%, var(--text-primary));
        background: color-mix(in srgb, var(--status-danger) 12%, transparent);
    }

    /*
      W3: kompakt allapotkartya a szerkesztok fejlece mellett - a "elo-e a
      hirdetesem?" kerdes valasza ne a lap aljan lakjon.
    */
    .edit-head {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    @media (min-width: 900px) {
        .edit-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
        }

        /* A jobb oszlop: statusz-kartya (kotott szelesseg) vagy gombsor (jobbra zarva, egy sorban). */
        .edit-head > .status-card {
            inline-size: 22rem;
            max-inline-size: 100%;
        }

        .edit-head > .action-row {
            justify-content: flex-end;
            margin: 0;
        }
    }

    .status-card {
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    /*
      Kattints-vagy-huzd-ide feltolto (upload.js): a nyers file-input
      helyett hivogato ejtozona. JS nelkul a nativ mezo es a gomb latszik
      (progressziv) - a .js osztalyt a layout inline szkriptje adja.
    */
    .upload-drop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-5);
        border: 2px dashed var(--border-strong);
        border-radius: var(--radius-md);
        text-align: center;
        cursor: pointer;
    }

    .upload-drop:hover,
    .upload-drop-active {
        border-color: var(--action-primary-background);
        background: var(--surface-subtle);
    }

    .upload-drop-icon {
        font-size: 1.75rem;
    }

    .upload-drop-text {
        font-weight: 600;
    }

    .upload-drop-hint {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }

    /* JS-sel: a nativ mezo lathatatlan (a label kattinthato), a gomb felesleges. */
    .js .upload-drop input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .js .upload-drop-button {
        display: none;
    }

    /* JS nelkul a mezo a zonan belul, olvashatoan. */
    .upload-drop input[type="file"] {
        margin-block-start: var(--space-2);
    }

    /*
      "VAN MAR KEP" ALLAPOT (Ruben javaslata, 2026-09-22).
      A baj, amit megold: a kesz allapot majdnem ugyanugy nezett ki, mint az
      ures - ugyanaz a nagy szaggatott ejtozona allt ott akkor is, ha mar
      volt logo. Innentol a betoltott kep MAGA a felulet, az ejtozona pedig
      csak akkor latszik, amikor tenyleg nincs mit mutatni.

      Nincs benne fajlnev es keppixel-meret, pedig a javaslat mockja mutatta:
      azt az adatot NEM taroljuk (a modell (Id, ThumbnailUrl) part ad), es
      kitalalni nem szabad. Enelkul ez tisztan markup + CSS valtozas marad,
      ahogy a javaslat is igerte.
    */
    .upload-filled {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-subtle);
    }

    .upload-thumb {
        flex: none;
        inline-size: 72px;
        block-size: 72px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: var(--surface-default);
    }

    .upload-meta {
        flex: 1 1 auto;
        min-inline-size: 0;
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }

    .upload-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /*
      A galeria kesz allapota: a kepek bélyegkepkent, a hozzaadas EGY VEKONY
      SOR - nem egy masodik nagy ejtozona a kepek alatt.
    */
    .upload-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--space-3);
    }

    .upload-tile {
        position: relative;
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--surface-subtle);
    }

    .upload-tile img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        display: block;
    }

    /*
      A torles gomb a kepen ul. Sajat szinei vannak, mert a kep BARMILYEN
      lehet mogotte - egy attetszo gomb egy vilagos fenykepen lathatatlan.
      Ez nem token-megkerules: a kontraszt itt a kepponttol fugg, nem a
      temanak kell megfelelnie.
    */
    .upload-tile-remove {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-end: var(--space-2);
        inline-size: 2rem;
        block-size: 2rem;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        color: var(--overlay-control-text);
        background: var(--overlay-control-background);
    }

    .upload-tile-remove:hover,
    .upload-tile-remove:focus-visible {
        background: var(--overlay-control-background-hover);
    }

    /* Az ELSO kep a borito - a szalon- es talalati kartyan ez latszik. */
    .upload-tile-cover {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        padding: 0.125rem var(--space-2);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-body-small);
        color: var(--overlay-control-text);
        background: var(--overlay-control-background);
    }

    /*
      A .upload-add EGYUTT all a .upload-drop-pal (az upload.js a
      "label.upload-drop"-ra kapcsol, onnan jon a huzas es az automatikus
      bekuldes). Ezert a flex-direction-t KI KELL irni: a .upload-drop
      column-t ad, es azt a .upload-add kulonben csendben orokolne - a
      vekony sorbol harom sor lenne.
    */
    .upload-add {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-3);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-md);
        cursor: pointer;
        text-align: center;
    }

    .upload-add:hover,
    .upload-drop-active.upload-add {
        border-color: var(--action-primary-background);
        background: var(--surface-subtle);
    }

    .js .upload-add input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    /*
      Felszereltseg (BR-RTU-050): a pipalista tobb oszlopban, hogy husz elem
      se legyen husz sornyi gorgetes. A publikus lista chip-szeru, mert ott
      olvasas a feladat, nem valasztas.
    */
    .amenity-grid {
        display: grid;
        gap: var(--space-2) var(--space-4);
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }

    .amenity-check {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .amenity-check:hover {
        background: var(--surface-subtle);
    }

    /*
      A felszereltseg-szuro a szurosav TELJES szelesseget kapja (kulonben a
      pipalista egyetlen keskeny racs-oszlopba szorulna), es csukva indul -
      a nyito nyil a nativ <details> sajatja, nem kell hozza JS.
    */
    .filter-details {
        grid-column: 1 / -1;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        padding: var(--space-3) var(--space-4);
    }

    .filter-details summary {
        cursor: pointer;
        font-weight: 600;
    }

    .filter-details[open] summary {
        margin-block-end: var(--space-3);
    }

    .amenity-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .amenity-list li {
        padding: 2px var(--space-2);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
        font-size: var(--font-size-body-small);
        color: var(--text-secondary);
    }

    /* W3a: a Logo es a Galeria egy "Kepek" szekcioban, egymas mellett. */
    .images-grid {
        display: grid;
        gap: var(--space-4);
    }

    @media (min-width: 768px) {
        .images-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        }
    }
}

/* ----------------------------------------------------------------------
   Belepo es regisztracio OSSZECSUKVA (Dani 2026-09-14): a kartyan alapbol
   csak a gombok - a Google (ha van) es az "e-mail cimmel" -, a mezok a
   gombra nyilnak, lefele animalva. <details>, tehat JS nelkul is megy; a
   nyitott allapotban a gomb eltunik, a helyet az urlap veszi at.
   ---------------------------------------------------------------------- */
@layer components {
    .auth-reveal > summary {
        list-style: none;
        inline-size: 100%;
        text-align: center;
        cursor: pointer;
    }

    .auth-reveal > summary::-webkit-details-marker {
        display: none;
    }

    .auth-reveal[open] > summary {
        display: none;
    }

    .auth-reveal-body {
        overflow: hidden;
    }

    .auth-reveal[open] > .auth-reveal-body {
        animation: auth-reveal-down 260ms ease-out;
    }

    /* A "vagy" elvalaszto a ket gomb kozott, kozepre. */
    .external-providers .auth-divider {
        margin: 0;
        text-align: center;
        font-size: var(--font-size-body-small);
    }

    .external-providers form .button {
        inline-size: 100%;
    }

    @keyframes auth-reveal-down {
        from {
            opacity: 0;
            max-block-size: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            max-block-size: 60rem;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .auth-reveal[open] > .auth-reveal-body {
            animation: none;
        }
    }
}

/* ----------------------------------------------------------------------
   Megerosito modal (<dialog>, dialog.js) - szalon torlese (2026-09-14).
   A natív dialog a sajat ::backdrop-jat hozza; a doboz a kartyak
   feluleten, kozepen. JS nelkul nem nyilik - akkor a link a lapra visz.
   ---------------------------------------------------------------------- */
@layer components {
    .dialog {
        inline-size: min(32rem, calc(100vw - 2 * var(--space-4)));
        padding: 0;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        background: var(--surface-elevated);
        color: var(--text-primary);
        box-shadow: var(--shadow-md);
    }

    .dialog::backdrop {
        background: var(--overlay-scrim);
    }

    .dialog-body {
        padding: var(--space-6);
    }

    .dialog-title {
        margin: 0;
        font-size: var(--font-size-h3);
    }

    .dialog[open] {
        animation: dialog-in 160ms ease-out;
    }

    @keyframes dialog-in {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .dialog[open] {
            animation: none;
        }
    }
}

@layer components {
    .link-danger {
        color: var(--status-danger);
    }
}


/*
  ---------- Temavalaszto (BR-IDN-064) ----------

  A kartya kis elonezete a tema SAJAT tokenjeibol epul: a .theme-thumb-on a
  data-theme attributum a tokens.css blokkjat kapcsolja be a resz-fara, ezert
  itt is csak szemantikus token szerepel - a negy tema kulon CSS nelkul rajzolodik.
*/
@layer components {
    .theme-picker {
        border: 0;
        padding: 0;
        margin: 0;
        display: grid;
        gap: var(--space-3);
    }

    .theme-picker legend {
        font-family: var(--font-family-display);
        font-weight: 600;
        font-size: var(--font-size-h3);
        padding: 0;
        margin-block-end: var(--space-1);
    }

    .theme-picker-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--space-3);
    }

    .theme-card {
        position: relative;
        display: grid;
        gap: var(--space-2);
        padding: var(--space-2);
        border: 2px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-elevated);
        cursor: pointer;
        transition: border-color var(--motion-fast), transform var(--motion-fast);
    }

    .theme-card:hover {
        transform: translateY(-2px);
    }

    .theme-card:has(input:checked) {
        border-color: var(--brand-primary);
        box-shadow: var(--shadow-glow);
    }

    .theme-card:has(input:focus-visible) {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
    }

    /* A radio maga lathatatlan, de a kartya egesze kattinthato es fokuszalhato. */
    .theme-card input {
        position: absolute;
        inset: 0;
        opacity: 0;
        margin: 0;
        cursor: pointer;
    }

    .theme-card-name {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-2);
        font-family: var(--font-family-display);
    }

    .theme-card-name small {
        color: var(--text-muted);
        font-family: var(--font-family-base);
        font-size: 0.75rem;
    }

    .theme-card-who {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
        line-height: 1.35;
    }

    /* ---- A kis elonezet ---- */
    .theme-thumb {
        display: grid;
        grid-template-rows: auto 1fr;
        aspect-ratio: 16 / 10;
        border-radius: var(--radius-sm);
        overflow: hidden;
        background: var(--surface-default);
        border: 1px solid var(--border-default);
    }

    .theme-thumb-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 7px;
        background: var(--surface-subtle);
        border-block-end: 1px solid var(--border-default);
    }

    .theme-thumb-logo {
        width: 10px;
        height: 10px;
        border-radius: 3px;
        background: var(--brand-primary);
    }

    .theme-thumb-nav {
        display: flex;
        gap: 5px;
    }

    .theme-thumb-nav i {
        display: block;
        width: 14px;
        height: 3px;
        border-radius: 2px;
        background: var(--text-muted);
    }

    .theme-thumb-nav i:first-child {
        background: var(--brand-primary);
    }

    .theme-thumb-cta {
        margin-inline-start: auto;
        width: 20px;
        height: 8px;
        border-radius: var(--radius-pill);
        background: var(--action-cta-background);
    }

    .theme-thumb-body {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 6px;
        padding: 6px;
    }

    .theme-thumb-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        align-content: start;
    }

    .theme-thumb-grid b {
        display: block;
        height: 7px;
        border-radius: 2px;
        background: var(--surface-elevated);
    }

    .theme-thumb-grid b.is-requested {
        background: color-mix(in srgb, var(--status-warning) 45%, var(--surface-elevated));
    }

    .theme-thumb-grid b.is-accepted {
        background: var(--brand-primary);
    }

    .theme-thumb-grid b.is-closed {
        background: repeating-linear-gradient(135deg, var(--surface-subtle) 0 2px, var(--surface-elevated) 2px 4px);
    }

    .theme-thumb-card {
        display: grid;
        gap: 4px;
        align-content: start;
        padding: 6px;
        border-radius: var(--radius-sm);
        background: var(--surface-elevated);
    }

    .theme-thumb-line {
        display: block;
        height: 3px;
        width: 70%;
        border-radius: 2px;
        background: var(--text-secondary);
    }

    .theme-thumb-line.is-short {
        width: 40%;
        background: var(--text-muted);
    }

    .theme-thumb-button {
        display: block;
        height: 9px;
        width: 60%;
        margin-block-start: 2px;
        border-radius: var(--radius-pill);
        background: var(--action-primary-background);
    }

    @media (prefers-reduced-motion: reduce) {
        .theme-card {
            transition: none;
        }

        .theme-card:hover {
            transform: none;
        }
    }
}

/*
   Mobil 6. kor (Ruben, 2026-09-21, "review" / "booking-action"): csillag-sor az
   ertekeleshez (radio-gombok, CSS-sel rajzolva - a hover/checked a testverekre
   hat, ezert a DOM-sorrend 5..1 es a sor vizualisan megforditva), es a lemondas
   megerosito panelje opcionalis indoklassal. Csak szemantikus tokenek.
*/
@layer components {
    .star-rating {
        display: inline-flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: var(--space-1);
        margin: 0;
        padding: 0;
        border: 0;
    }

    .star-rating input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .star-rating label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: var(--touch-target-min);
        block-size: var(--touch-target-min);
        font-size: 2rem;
        line-height: 1;
        color: var(--border-strong);
        cursor: pointer;
    }

    /* A megjelolt csillag es az elotte allok (a DOM-ban utana allok) kitoltve. */
    .star-rating input:checked ~ label,
    .star-rating label:hover,
    .star-rating label:hover ~ label {
        color: var(--status-warning);
    }

    .star-rating input:focus-visible + label {
        outline: 2px solid var(--action-primary-background);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    .review-form {
        max-inline-size: 36rem;
    }

    .danger-panel summary {
        list-style: none;
        cursor: pointer;
        inline-size: auto;
    }

    .danger-panel summary::-webkit-details-marker {
        display: none;
    }

    .danger-panel-body {
        margin-block-start: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--status-danger);
        border-radius: var(--radius-md);
        max-inline-size: 36rem;
    }
}

/*
   Mobil 8. kor (Ruben, 2026-09-22, "auth"): Belepes / Regisztracio fulpar a kartya tetejen -
   a korabbi halk "Meg nincs fiokod? ..." sor helyett, amit mobilon a lap aljan kellett
   megkeresni. A szerepet nem ez donti el (BR-RSX-001), csak a ket ut kozott valt.
*/
@layer components {
    .auth-tabs {
        display: flex;
        gap: var(--space-1);
        padding: var(--space-1);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
        background: var(--surface-default);
    }

    .auth-tab {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: 36px;
        padding-inline: var(--space-3);
        border-radius: var(--radius-pill);
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 600;
    }

    .auth-tab:hover,
    .auth-tab:focus-visible {
        color: var(--text-primary);
    }

    .auth-tab-active {
        background: var(--action-primary-background);
        color: var(--action-primary-text);
    }

    .auth-tab-active:hover,
    .auth-tab-active:focus-visible {
        color: var(--action-primary-text);
    }
}