/* ============================================================
   DistriX — nyilvános termékoldal.

   Rokona az admin design-rendszerének (admin/assets/distrix.css): ugyanaz az
   akcent és ugyanazok a domain-színek, hogy aki a bemutató után belép a
   rendszerbe, ugyanazt a terméket lássa. A skála viszont más: ez olvasásra
   készül, nem operálásra — nagyobb típus, több levegő.
   ============================================================ */

:root {
  color-scheme: light dark;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;

  --fs-sm: 13px; --fs-md: 15px; --fs-base: 17px; --fs-lg: 19px;
  --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px; --fs-4xl: 58px;

  --radius: 6px; --radius-lg: 12px;

  /* A semleges skála kékes irányba húz — nem szürke, hanem a márkaszín
     kifakult változata. Így a fehér mellett is „választottnak" olvasódik. */
  --c-bg: #ffffff;
  --c-bg-sunken: #f4f6fa;
  --c-bg-raised: #ffffff;
  --c-line: #dfe4ed;
  --c-line-strong: #c3cbd9;
  --c-text: #111725;
  --c-text-muted: #5b6478;
  --c-text-faint: #8a93a6;

  --c-accent: #1a56db;
  --c-accent-mely: #143fa0;
  --c-accent-bg: #eef3fe;

  --c-ok: #067647;
  --c-danger: #b42318;

  /* Domain-színek — az admin rendszerből, jelentéshordozók */
  --c-wms: #0f766e;
  --c-tms: #1a56db;
  --c-fleet: #7c3aed;
  --c-comp: #c2410c;
  --c-fin: #0e7490;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --focus: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);
  --arnyek: 0 1px 2px rgba(17, 23, 37, .05), 0 8px 24px rgba(17, 23, 37, .06);
  --arnyek-eros: 0 2px 4px rgba(17, 23, 37, .06), 0 16px 40px rgba(17, 23, 37, .10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #10141b;
    --c-bg-sunken: #0b0e14;
    --c-bg-raised: #171c25;
    --c-line: #262d39;
    --c-line-strong: #3a4453;
    --c-text: #e9ecf1;
    --c-text-muted: #9aa4b6;
    --c-text-faint: #6c7789;
    --c-accent: #6395f5;
    --c-accent-mely: #8fb3f8;
    --c-accent-bg: #17233a;
    --c-ok: #4ade80;
    --c-danger: #f87171;
    --c-wms: #2dd4bf;
    --c-tms: #6395f5;
    --c-fleet: #a78bfa;
    --c-comp: #fb923c;
    --c-fin: #22d3ee;
    --arnyek: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .32);
    --arnyek-eros: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --c-bg: #10141b;
  --c-bg-sunken: #0b0e14;
  --c-bg-raised: #171c25;
  --c-line: #262d39;
  --c-line-strong: #3a4453;
  --c-text: #e9ecf1;
  --c-text-muted: #9aa4b6;
  --c-text-faint: #6c7789;
  --c-accent: #6395f5;
  --c-accent-mely: #8fb3f8;
  --c-accent-bg: #17233a;
  --c-ok: #4ade80;
  --c-danger: #f87171;
  --c-wms: #2dd4bf;
  --c-tms: #6395f5;
  --c-fleet: #a78bfa;
  --c-comp: #fb923c;
  --c-fin: #22d3ee;
  --arnyek: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .32);
  --arnyek-eros: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fs-base)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-accent-mely); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }

.sav { width: min(1180px, 100% - var(--sp-6)); margin-inline: auto; }
.szuk-sav { width: min(720px, 100% - var(--sp-6)); }
.szuk { max-width: 62ch; }

.cimke {
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--c-accent); margin-bottom: var(--sp-3);
}
.apro { font-size: var(--fs-md); color: var(--c-text-muted); }

.ugras {
  position: absolute; left: -9999px;
  background: var(--c-accent); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius); z-index: 100;
}
.ugras:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---------------------------------------------------------- gombok */
.gomb {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line-strong); background: var(--c-bg-raised);
  color: var(--c-text); text-decoration: none; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius); font-size: var(--fs-md);
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.gomb:hover { border-color: var(--c-text-faint); color: var(--c-text); }
.gomb.nagy { padding: 13px 24px; font-size: var(--fs-base); }
.gomb.elsodleges {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}
.gomb.elsodleges:hover { background: var(--c-accent-mely); border-color: var(--c-accent-mely); color: #fff; }
.gomb[disabled] { opacity: .55; cursor: progress; }

/* ---------------------------------------------------------- fejléc */
.fejlec {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.fejlec .sav {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-block: var(--sp-3);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.02em;
  color: var(--c-text); text-decoration: none;
}
.fejlec nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-5); }
.fejlec nav a { color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-md); font-weight: 500; }
.fejlec nav a:hover { color: var(--c-text); }
.fejlec nav a.gomb { color: var(--c-text); }
.fejlec nav a.gomb.elsodleges { color: #fff; }
@media (max-width: 720px) {
  .fejlec nav { gap: var(--sp-3); }
  .fejlec nav a:not(.gomb) { display: none; }
}

/* ------------------------------------------------------------ hero */
.hero {
  padding-block: var(--sp-9) var(--sp-8);
  background:
    radial-gradient(60rem 30rem at 15% -10%, var(--c-accent-bg), transparent 70%),
    var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.hero-racs {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-8); align-items: center;
}
@media (max-width: 900px) {
  .hero { padding-block: var(--sp-8) var(--sp-7); }
  .hero-racs { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: var(--fs-3xl); }
}
.bevezeto { font-size: var(--fs-lg); color: var(--c-text-muted); margin-top: var(--sp-5); max-width: 54ch; }
.gombsor { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero .apro { margin-top: var(--sp-4); }

/* A túra-rajz: a vonal a fuvar, a körök a megállók, a doboz a depó. */
.tura { width: 100%; height: auto; max-width: 420px; justify-self: center; }
.tura .ut { stroke: var(--c-accent); stroke-width: 2.5; stroke-dasharray: 5 7; opacity: .85; }
.tura .megallo circle { fill: var(--c-bg); stroke: var(--c-accent); stroke-width: 2.5; }
.tura .depo rect { fill: var(--c-accent-bg); stroke: var(--c-accent); stroke-width: 2; }
.tura .depo path { stroke: var(--c-accent); stroke-width: 2; }
.tura .jelolo text {
  font-family: var(--font-mono); font-size: 11px; fill: var(--c-text-faint);
}
@media (prefers-reduced-motion: no-preference) {
  .tura .ut {
    stroke-dasharray: 620; stroke-dashoffset: 620;
    animation: ut-rajzol 2.4s ease-out .2s forwards;
  }
  @keyframes ut-rajzol { to { stroke-dashoffset: 0; } }
}

/* --------------------------------------------------------- szekciók */
.szekcio { padding-block: var(--sp-9); }
.szekcio.kiemelt { background: var(--c-bg-sunken); border-block: 1px solid var(--c-line); }
.szekcio h2 + .bevezeto { margin-top: var(--sp-4); }
@media (max-width: 900px) { .szekcio { padding-block: var(--sp-8); } }

.racs { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
.racs.harom { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.racs.negy { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.racs.otos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.kartya {
  background: var(--c-bg-raised); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  box-shadow: var(--arnyek);
}
.kartya h3 + p { margin-top: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-md); }

/* A csoport-kártya fejlécében a pont a modul-csoport színe. */
.kartya.csoport h3 { display: flex; align-items: center; gap: var(--sp-3); }
.pont { width: 9px; height: 9px; border-radius: 50%; background: var(--szin, var(--c-accent)); flex: none; }
.kartya.csoport ul { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.kartya.csoport li { display: flex; flex-direction: column; gap: 2px; }
.kartya.csoport li strong { font-size: var(--fs-md); }
.kartya.csoport li span { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; }

/* A jelző-kártya bal széle hordozza a témát — nem díszcsík, az adja meg,
   melyik területről beszélünk. */
.kartya.jelzo { border-left: 3px solid var(--szin, var(--c-accent)); }

[data-szin="wms"]   { --szin: var(--c-wms); }
[data-szin="tms"]   { --szin: var(--c-tms); }
[data-szin="fleet"] { --szin: var(--c-fleet); }
[data-szin="comp"]  { --szin: var(--c-comp); }
[data-szin="fin"]   { --szin: var(--c-fin); }

.kiemelt-doboz {
  margin-top: var(--sp-7); padding: var(--sp-6);
  background: var(--c-accent-bg); border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  border-radius: var(--radius-lg);
}
.kiemelt-doboz p { margin-top: var(--sp-3); color: var(--c-text-muted); max-width: 68ch; }

/* ------------------------------------------------------------ űrlap */
.urlap { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.mezo-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); }
.mezo { display: flex; flex-direction: column; gap: var(--sp-2); }
.mezo label { font-size: var(--fs-md); font-weight: 600; }
/* CSAK a kötelező-csillag piros. Ha ez `.mezo label span` volna, ráillene a
   jelölőnégyzet melletti magyarázó szövegre is — és az egész adatkezelési
   mondat pirosan, hibaüzenetnek látszana. */
.mezo label .kotelezo { color: var(--c-danger); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
  font: var(--fs-md)/1.5 var(--font);
  color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: 10px 12px; width: 100%;
}
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--c-accent); box-shadow: var(--focus);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-danger); }

.hiba { font-size: var(--fs-sm); color: var(--c-danger); min-height: 1em; }
.hiba:empty { display: none; }

.jelolo { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start; cursor: pointer; }
.jelolo input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-accent); }
.jelolo span { font-size: var(--fs-md); color: var(--c-text-muted); font-weight: 400; line-height: 1.5; }
.jelolo-mezo label { font-weight: 400; }

/* A csapda-mező nem `display:none`: azt sok robot felismeri. Kiesik a
   képernyőről, de a DOM-ban ott van. */
.csapda {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.urlap-labl { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.urlap-uzenet { font-size: var(--fs-md); }
.urlap-uzenet.ok { color: var(--c-ok); }
.urlap-uzenet.rossz { color: var(--c-danger); }

.figyelem {
  padding: var(--sp-4); border-radius: var(--radius);
  background: var(--c-accent-bg); border: 1px solid var(--c-line);
}

/* ------------------------------------------------------- kalkulátor */
.kalk { margin-top: var(--sp-7); }

/* --- árlista-váltó --- */
.piac-valto {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--sp-5);
  background: var(--c-bg-raised); border: 1px solid var(--c-line); border-radius: 999px;
}
.piac-gomb {
  font: 600 var(--fs-md)/1 var(--font); color: var(--c-text-muted);
  background: none; border: none; border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
}
.piac-gomb:hover { color: var(--c-text); }
.piac-gomb.aktiv { background: var(--c-accent); color: #fff; }

/* --- csomagok --- */
.csomag-racs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.csomag {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--c-bg-raised); color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--arnyek);
}
.csomag:hover { border-color: var(--c-line-strong); }
.csomag.aktiv {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent), var(--arnyek-eros);
}
.csomag.kiemelt { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.csomag-jel {
  position: absolute; top: -11px; left: var(--sp-5);
  font-size: var(--fs-sm); font-weight: 700; color: #fff;
  background: var(--c-accent); border-radius: 999px; padding: 3px 12px;
}
.csomag-nev { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.csomag-alcim { font-size: var(--fs-md); color: var(--c-text-muted); margin-top: -6px; }
.csomag-ar { display: flex; align-items: baseline; gap: 4px; margin-top: var(--sp-2); }
.csomag-ar strong {
  font-size: var(--fs-2xl); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.csomag-ar-egyseg { color: var(--c-text-muted); font-size: var(--fs-md); }
.csomag-kinek {
  font-size: var(--fs-md); color: var(--c-text-muted); line-height: 1.5;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
.csomag-tartalom { display: flex; flex-direction: column; gap: var(--sp-2); }
.csomag-tartalom li {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text-muted);
}
.csomag-tartalom strong { color: var(--c-text); }
.pipa { color: var(--c-ok); font-weight: 700; }
.csomag-keret {
  margin-top: auto; padding-top: var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-text-faint);
}

.testreszab-sor { grid-column: 1 / -1; display: flex; justify-content: center; }
.testreszab-gomb {
  font: 600 var(--fs-md)/1.4 var(--font); color: var(--c-accent);
  background: none; border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius); padding: 11px 20px; cursor: pointer;
}
.testreszab-gomb:hover { border-color: var(--c-accent); background: var(--c-accent-bg); }
.testreszab-gomb.aktiv { background: var(--c-accent-bg); border-style: solid; border-color: var(--c-accent); }

.modul.tiltott { opacity: .5; cursor: not-allowed; }

.kalk-racs {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-5); align-items: start;
}
@media (max-width: 980px) { .kalk-racs { grid-template-columns: minmax(0, 1fr); } }

.kalk-bal { display: flex; flex-direction: column; gap: var(--sp-5); }

.blokk {
  background: var(--c-bg-raised); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--arnyek);
}
.blokk-fej { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.blokk-fej h3 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-faint); }
.csoport-jel { margin-left: auto; font-size: var(--fs-sm); color: var(--c-text-muted); }
.csoport-jel.jo { color: var(--c-ok); font-weight: 600; }

/* --- választó gombok (sáv, támogatás, üzemeltetés, hűség) --- */
.valaszto { display: grid; gap: var(--sp-2); }
.valaszto.negyes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.valaszto.harmas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.valaszto.ketto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.valasz {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  text-align: left; font-family: inherit; font-size: var(--fs-md);
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: var(--sp-3); cursor: pointer;
}
.valasz:hover { border-color: var(--c-text-faint); }
.valasz.aktiv { border-color: var(--c-accent); background: var(--c-accent-bg); box-shadow: inset 0 0 0 1px var(--c-accent); }
.valasz.szeles { flex-direction: row; align-items: center; gap: var(--sp-4); }
.valasz-szoveg { display: flex; flex-direction: column; gap: 2px; }
.valasz-ar { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); white-space: nowrap; }
.halvany { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.4; }

/* --- darabszám mezők --- */
.darab-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
.darab-racs .mezo label { font-size: var(--fs-sm); font-weight: 600; }
.darab-racs input, .darab-racs select { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.darab-racs select { font-family: var(--font); }
.szeles-mezo { grid-column: 1 / -1; }
.sugo { font-size: var(--fs-sm); color: var(--c-text-faint); }

/* --- modulok --- */
.modul-lista { display: flex; flex-direction: column; gap: var(--sp-5); }
.csoport-cim {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--szin, var(--c-accent)); margin-bottom: var(--sp-3);
}
.modul-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: var(--sp-2); }

/* Két sor: fent a jelölő, a név és az ár; alatta a leírás a teljes
   szélességben. Egy sorban a leírás szavanként törne. */
.modul {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: var(--sp-3); row-gap: var(--sp-1);
  align-items: start; padding: var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-bg); cursor: pointer;
}
.modul:hover { border-color: var(--c-line-strong); }
.modul.aktiv { border-color: var(--szin, var(--c-accent)); box-shadow: inset 3px 0 0 var(--szin, var(--c-accent)); }
.modul input { grid-column: 1; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--c-accent); }
.modul-nev { grid-column: 2; font-weight: 600; font-size: var(--fs-md); }
.modul-ar {
  grid-column: 3; justify-self: end;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--c-text-muted); white-space: nowrap;
}
.modul-also { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modul-fugg { font-size: var(--fs-sm); color: var(--c-text-faint); }
.modul-leiras { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.45; }

/* --- szerződés --- */
.ket-blokk { display: flex; flex-direction: column; gap: var(--sp-4); }
.jelolok { display: flex; flex-direction: column; gap: var(--sp-2); }
.jelolo-sor {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-md); cursor: pointer;
}
.jelolo-sor input { width: 17px; height: 17px; accent-color: var(--c-accent); }
.jelolo-ar { margin-left: auto; color: var(--c-ok); font-size: var(--fs-sm); font-weight: 600; }

/* --- összegző --- */
.osszegzo {
  position: sticky; top: 84px;
  background: var(--c-bg-raised); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  box-shadow: var(--arnyek-eros);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
@media (max-width: 980px) { .osszegzo { position: static; } }
.osszeg-cimke { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-faint); }
.osszeg-nagy {
  font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.osszeg-alcim { color: var(--c-text-muted); font-size: var(--fs-md); margin-top: calc(var(--sp-2) * -1); }
.osszeg-sorok { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.sor { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-md); }
.sor-cimke { color: var(--c-text-muted); }
.sor-ertek { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sor.jo .sor-ertek { color: var(--c-ok); }
.sor.elvalaszto { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); margin-top: var(--sp-2); }
.osszegzo-gombok { display: flex; flex-direction: column; gap: var(--sp-2); }
.osszeg-labjegyzet { font-size: var(--fs-sm); color: var(--c-text-faint); }

/* --- tételes bontás --- */
.reszletek { margin-top: var(--sp-5); }
.reszletek.rejtve { display: none; }
.tabla-doboz {
  overflow-x: auto; background: var(--c-bg-raised);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
}
.tetel-tabla { border-collapse: collapse; width: 100%; font-size: var(--fs-md); }
.tetel-tabla th, .tetel-tabla td { text-align: left; padding: 10px var(--sp-4); border-bottom: 1px solid var(--c-line); }
.tetel-tabla th { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-faint); }
.tetel-tabla .szam { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tetel-tabla tr:last-child td { border-bottom: none; }
.tetel-tabla tr.osszeg td { font-weight: 700; border-top: 2px solid var(--c-line-strong); }

/* ----------------------------------------------------------- lábléc */
.labl { border-top: 1px solid var(--c-line); background: var(--c-bg-sunken); padding-block: var(--sp-7); }
.labl-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); }
.labl .logo { margin-bottom: var(--sp-2); }
.labl .apro + .apro { margin-top: var(--sp-2); }
.labl a { color: var(--c-text-muted); text-decoration: none; }
.labl a:hover { color: var(--c-accent); }