/* ESIR felület v3 — a szerver-oldali oldalak közös rétege. KÉT rész:
   1) „csak szín + betű" réteg a portál / admin / ajánlat oldalaknak (portal.php, admin, dashboard, meghívó…): az új színek és a betű (Plus Jakarta Sans, lágyabb sarkok, a v3 márkapiros és háttér);
      a szerkezeti átépítésük később. A tokenek az oldalak közös változóneveire (--brand/--bg/--panel/--ink/--line és a landing --accent/--bg-elev) képeznek le.
      Az oldalak saját <style>-ja után töltődik be. A szabályok :where(body:not(.v3-pub))-ba csomagoltak: a specificitásuk változatlan, a `.v3-pub` oldalakra NEM hatnak.
   2) a nyilvános (belépés nélküli) oldalak KÖZÖS v3 sablonja (`body.v3.v3-pub`: belépés, megrendelői belépés, regisztráció, jelszó-visszaállítás, aktiválás) — H1.
      A tokenek és az alapkomponensek az etc/modules/esir-v3.css-ből jönnek (a PHP-oldalak `html.v3-ui` + `body.v3 v3-pub`); itt csak a sablon saját elrendezése él.
      Szabály: csak tokenek (`var(--…)`), nincs !important, hexa / rgb szín, Tailwind-utility. Téma: a html[data-theme] (a tokenek automatikusan követik). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --brand: #e11d2a; --brand-2: #ff5a63; --brand-soft: rgba(225, 29, 42, .09);
  --ink: #0b0b0f; --ink-2: #4a4a55; --muted: #6e6e7a; --line: rgba(0, 0, 0, .08);
  --bg: #f3f3f7; --panel: #ffffff;
  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(20, 20, 40, .07);
  /* landing.css-alapú oldalak (--accent / --bg-elev…) */
  --accent: #e11d2a; --accent-hover: #b3121d; --accent-tint: rgba(225, 29, 42, .09); --accent-fg: #fff;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
[data-theme="dark"] {
  --ink: #f5f5f7; --ink-2: #c4c4ce; --muted: #9a9aa6; --line: rgba(255, 255, 255, .1);
  --bg: #0b0b0f; --panel: #17171d; --brand-soft: rgba(225, 29, 42, .18);
  --bg-elev: #17171d; --bg-elev-2: #22222a; --fg: #f5f5f7; --fg-2: #c4c4ce; --fg-3: #9a9aa6;
}
html:not([data-theme="dark"]) { --bg-elev: #ffffff; --bg-elev-2: #f3f3f7; }

:where(body:not(.v3-pub)) { font-family: var(--font-sans) !important; -webkit-font-smoothing: antialiased; }
:where(body:not(.v3-pub)) h1, :where(body:not(.v3-pub)) h2, :where(body:not(.v3-pub)) h3, :where(body:not(.v3-pub)) h4,
:where(body:not(.v3-pub)) button, :where(body:not(.v3-pub)) input, :where(body:not(.v3-pub)) select, :where(body:not(.v3-pub)) textarea,
:where(body:not(.v3-pub)) .btn, :where(body:not(.v3-pub)) label { font-family: var(--font-sans); }
:where(body:not(.v3-pub)) h1, :where(body:not(.v3-pub)) h2 { letter-spacing: -.02em; }
:where(body:not(.v3-pub)) code, :where(body:not(.v3-pub)) kbd, :where(body:not(.v3-pub)) pre, :where(body:not(.v3-pub)) .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

/* gombok és mezők: v3 forma (8–10 px sarok, magasabb érintési felület), a márkapiros */
:where(body:not(.v3-pub)) button, :where(body:not(.v3-pub)) .btn, :where(body:not(.v3-pub)) input[type="submit"], :where(body:not(.v3-pub)) a.btn { border-radius: var(--radius-sm); font-weight: 700; }
:where(body:not(.v3-pub)) .btn-primary, :where(body:not(.v3-pub)) button.btn-primary, :where(body:not(.v3-pub)) .btn.primary, :where(body:not(.v3-pub)) .cta, :where(body:not(.v3-pub)) .login-btn, :where(body:not(.v3-pub)) button[type="submit"].primary { background: var(--brand, #e11d2a); border-color: var(--brand, #e11d2a); }
:where(body:not(.v3-pub)) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), :where(body:not(.v3-pub)) select, :where(body:not(.v3-pub)) textarea { border-radius: var(--radius-sm); }
:where(body:not(.v3-pub)) input:focus-visible, :where(body:not(.v3-pub)) select:focus-visible, :where(body:not(.v3-pub)) textarea:focus-visible, :where(body:not(.v3-pub)) button:focus-visible, :where(body:not(.v3-pub)) a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
[data-theme="dark"] :where(body:not(.v3-pub)) input:focus-visible, [data-theme="dark"] :where(body:not(.v3-pub)) select:focus-visible, [data-theme="dark"] :where(body:not(.v3-pub)) textarea:focus-visible, [data-theme="dark"] :where(body:not(.v3-pub)) button:focus-visible, [data-theme="dark"] :where(body:not(.v3-pub)) a:focus-visible { outline-color: #60a5fa; }

/* ═══════════════ 2) a nyilvános oldalak közös v3 sablonja (H1–H3, H8, H9) ═══════════════ */
html.v3-ui { background: var(--app); color: var(--fg); color-scheme: light; }
html.v3-ui[data-theme="dark"] { color-scheme: dark; }
body.v3-pub { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--app); color: var(--fg); -webkit-text-size-adjust: 100%;
  /* a hivatkozás színe: világosban a márkapiros (≥ 4,5 : 1 a fehér kártyán), sötétben a márkapiros és a fehér keveréke (a piros SZÖVEG sötét kártyán ≥ 4,5 : 1). Az `--accent-fg` név a régi oldalaknál „a márkapiroson álló felirat" (fehér) → itt nem használjuk. */
  --pub-link: var(--accent); }
html[data-theme="dark"] body.v3-pub { --pub-link: color-mix(in srgb, var(--accent) 70%, white); }
.v3-pub__skip { position: absolute; left: 8px; top: -64px; z-index: 100; padding: 12px 16px; border-radius: var(--r); background: var(--fg); color: var(--app); font: 700 14px/20px var(--f); text-decoration: none; }
.v3-pub__skip:focus { top: 8px; }

/* fejléc: logó + téma-váltó */
.v3-pub__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
.v3-pub__brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min); color: var(--fg); text-decoration: none; }
.v3-pub__mark { width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--r); background: var(--accent); color: white; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font: 800 18px/1 var(--f); }
.v3-pub__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-pub__word { display: inline-flex; flex-direction: column; font: 800 17px/18px var(--f); letter-spacing: -.02em; }
.v3-pub__tag { font: 600 12px/16px var(--f); letter-spacing: 0; color: var(--fg-3); }
.v3-pub__act { display: flex; align-items: center; gap: 8px; }
/* a fejléc-gomb felirata telefonon rövid (H4: „Felülvizsgálói regisztráció" → „Regisztráció"; a teljes név az aria-labelben marad) */
.v3-pub__ctashort { display: none; }
@media (max-width: 520px) { .v3-pub__ctalong { display: none; } .v3-pub__ctashort { display: inline; } }
.v3-pub__moon, .v3-pub__sun { display: inline-flex; }
.v3-pub__sun { display: none; }
html[data-theme="dark"] .v3-pub__moon { display: none; }
html[data-theme="dark"] .v3-pub__sun { display: inline-flex; }

/* a kártya a lap közepén (H9: függőlegesen is) */
.v3-pub__main { flex: 1 0 auto; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); } /* szimmetrikus függőleges tér: a kártya pontosan a fejléc és a lábléc közti sáv közepén (H9) */
.v3-pub__card { width: min(100%, 440px); display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; background: var(--card); border-radius: var(--r-sheet); box-shadow: var(--shadow); }
.v3-pub__card--wide { width: min(100%, 520px); }
.v3-pub__title { margin: 0; font: 800 26px/32px var(--f); letter-spacing: -.03em; color: var(--fg); }
.v3-pub__lead { margin: 0; font: 600 15px/22px var(--f); color: var(--fg-2); }
.v3-pub__lead strong { color: var(--fg); font-weight: 800; }
.v3-pub__small { margin: 0; font: 600 13px/18px var(--f); color: var(--fg-3); }
.v3-pub__small strong { color: var(--fg-2); font-weight: 800; }
.v3-pub__form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.v3-pub__row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v3-pub__badge { align-self: flex-start; }
/* a mezők a v3 méreteivel: 52 px magas, 16 px szöveg, a címke 13 px / 700 (nem mono, nem nagybetűs) */
.v3-pub .v3-field__label { font: 700 13px/18px var(--f); color: var(--fg-2); }
.v3-pub__otp { height: 64px; text-align: center; font: 800 28px/32px var(--mono); letter-spacing: .3em; padding-left: calc(16px + .3em); }
.v3-pub__otp::placeholder { letter-spacing: .3em; }
/* jelölőnégyzet-sor (eszköz megjegyzése) */
.v3-pub__check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap-min); padding: 6px 0; cursor: pointer; font: 600 14px/20px var(--f); color: var(--fg-2); }
.v3-pub__check input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; display: inline-grid; place-content: center; width: 24px; height: 24px; margin: 0; border-radius: 6px; background: var(--field); box-shadow: inset 0 0 0 2px var(--line-2); cursor: pointer; }
.v3-pub__check input:checked { background: var(--accent); box-shadow: none; }
.v3-pub__check input:checked::after { content: ''; width: 12px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; transform: translateY(-1px) rotate(-45deg); }
.v3-pub__check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* értesítők: a v3-notice, bekezdésekkel */
.v3-pub .v3-notice p { margin: 0; }
.v3-pub .v3-notice p + p { margin-top: 6px; }
.v3-pub .v3-notice strong { color: var(--fg); font-weight: 800; }
.v3-pub .v3-notice a { color: var(--fg); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.v3-pub .v3-notice--tile { background: var(--tile); }
/* gombok a kártyán belül egymás alatt (aktiválás hibánál, kész-állapotokban) */
.v3-pub__actions { display: flex; flex-direction: column; gap: 10px; }
/* hivatkozás-sor a kártya alján */
.v3-pub__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.v3-pub__links a, .v3-pub__link { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--pub-link); font: 700 14px/20px var(--f); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.v3-pub__links a:hover, .v3-pub__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.v3-pub__links a:focus-visible, .v3-pub__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.v3-pub__links--center { justify-content: center; }
/* lábléc */
.v3-pub__foot { flex: 0 0 auto; display: flex; justify-content: center; padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); font: 600 12px/16px var(--f); color: var(--fg-3); }
/* teszt-környezet jelvénye (a _dev-badge.php, csak teszt-környezetben jelenik meg): a jobb alsó sarokba, hogy ne takarja a téma-váltót */
body.v3-pub .kik-dev-badge { top: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) { body.v3-pub .kik-dev-badge { top: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); } }

@media (max-width: 480px) {
  .v3-pub__card { padding: 24px 20px; border-radius: var(--r-card); }
  .v3-pub__row2 { grid-template-columns: minmax(0, 1fr); }
  .v3-pub__title { font-size: 24px; line-height: 30px; }
  .v3-pub__main { padding-top: 8px; }
}