/* Konfigurátor + ár-összesítő (TERV 4.1, 4.5, 4.6, 5.). Színt csak a B2 tokenjeiből vesz (var(--…)); saját szín nincs.
   A betűméretek a 4.1 skála tokenjei (--t-h2, --t-h3, --t-data, --t-small, --t-ar). */

.konf { display: grid; gap: var(--s6); min-width: 0; font-family: var(--font); color: var(--ink); }
.konf [hidden] { display: none !important; }
.konf :focus-visible { outline: 3px solid var(--brand-1); outline-offset: 3px; }
.konf-fo, .konf-sav, .konf-osszesito { min-width: 0; }

/* lépés-sáv: a saját dobozán belül görgethető, az oldal nem görget vízszintesen */
.konf-sav ol { display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.konf-sav li { flex: none; scroll-snap-align: start; }
.konf-lepes-gomb { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-l);
  border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: var(--t-data); cursor: pointer;
  transition: background-color 180ms var(--e), color 180ms var(--e); }
.konf-lepes-gomb[aria-current="step"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.konf-lepes-szam { font-variant-numeric: tabular-nums; font-weight: 600; }

.konf-lepes h2 { margin: 0 0 var(--s3); font-size: var(--t-h2); font-weight: 450; font-variation-settings: "wdth" 110; line-height: 1.05; }
.konf-segitseg, .konf-megjegyzes, .konf-brutto, .konf-ures { color: var(--mute-l); font-size: var(--t-small); line-height: 1.5; max-width: 68ch; }
.konf-segitseg { margin-bottom: var(--s5); }  /* P2: a súgó-sor ne tapadjon az első csoport címére */
.konf-csoport { display: grid; gap: var(--s2); min-width: 0; margin: 0 0 var(--s6); padding: 0; border: 0; }
.konf-csoport legend, .konf-kategoria h3 { margin: 0 0 var(--s2); padding: 0; font-size: var(--t-h3); font-weight: 560; line-height: 1.2; }
.konf-kategoria { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }  /* 10-20: a hosszú tartozéknév ne szélesítse a sávot (320 px, 4. lépés) */
.konf-kategoria h3 { font-size: var(--t-data); font-weight: 500; font-variation-settings: "wdth" 85; }

/* választók: radio a címkében, kapcsoló gomb; érintési cél ≥ 44 px */
.konf-valaszto, .konf-kapcsolo { position: relative; display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px;
  box-sizing: border-box; padding: var(--s3) var(--s4); border: 1px solid var(--line-l); border-radius: 6px; background: var(--white);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 180ms var(--e); }
.konf-valaszto input { flex: none; margin: 0; width: 20px; height: 20px; accent-color: var(--brand-1); }
.konf-valaszto:has(input:checked), .konf-kapcsolo[aria-pressed="true"] { border-color: var(--brand-1); }
.konf-valaszto:has(input:checked)::before, .konf-kapcsolo[aria-pressed="true"]::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px;
  width: 4px; border-radius: 6px 0 0 6px; background: var(--grad); }
.konf-nev { min-width: 0; overflow-wrap: break-word; font-size: var(--t-data); font-weight: 500; font-variation-settings: "wdth" 85; }
.konf-ar { margin-left: auto; padding-left: var(--s3); white-space: nowrap; font-size: var(--t-data); font-weight: 500; font-variant-numeric: tabular-nums; }
.konf-minta { flex: none; width: 24px; height: 24px; border: 1px solid var(--mute-l); border-radius: 999px; }  /* P2: fehér minta fehér alapon is látsszon */
/* 320 px (2026-10-20): a 359 px alatti nézetben az ár a név alá kerül (a hosszú változatnév és az ár együtt nem fér el);
   a 4. lépés kapcsoló-gombjain is (a hosszú tartozéknév + ár a választó-lépések állapot-mérése szerint kilógott) */
@media (max-width: 359px) { .konf-valaszto, .konf-kapcsolo { flex-wrap: wrap; } .konf-valaszto .konf-nev, .konf-kapcsolo .konf-nev { flex: 1 1 0; }
  .konf-valaszto .konf-ar, .konf-kapcsolo .konf-ar { flex-basis: 100%; padding-left: 0; text-align: right; } }

.konf-lepes-lab, .konf-lezaro { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.konf-gomb, .konf-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 0 var(--s5);
  border-radius: 999px; font: inherit; font-size: var(--t-data); font-weight: 600; text-decoration: none; cursor: pointer; }
.konf-gomb { border: 1px solid var(--ink); background: var(--white); color: var(--ink); }
.konf-gomb-fo, .konf-cta { border: 0; background: var(--grad); color: var(--ink); }

/* ár-összesítő */
.konf-osszesito { box-sizing: border-box; background: var(--white); color: var(--ink); }
.konf-lap-fej { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.konf-lap-gomb { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-h3); font-weight: 560; cursor: pointer; min-height: 44px; }
.konf-osszeg { margin-left: auto; font-size: var(--t-ar); font-weight: 600; font-variation-settings: "wdth" 90; font-variant-numeric: tabular-nums; white-space: nowrap; }
.konf-brutto { flex-basis: 100%; text-align: right; }
.konf-tetelek { display: grid; gap: var(--s2); margin: var(--s4) 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line-l); list-style: none; }
.konf-tetelek li { display: flex; align-items: baseline; gap: var(--s3); }
.konf-kiesett del { color: var(--mute-l); }
.konf-hiba { color: var(--err); }

/* 1440: jobb oldali ragadós panel (4.6) */
@media (min-width: 1024px) {
  .konf { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; column-gap: var(--s8); }
  .konf-sav { grid-column: 1 / -1; }
  .konf-osszesito { position: sticky; top: calc(var(--fejlec) + var(--s5)); grid-column: 2; grid-row: 2; padding: var(--s5); border: 1px solid var(--line-l); }
  .konf-lap-gomb { cursor: default; }
}

/* 390: alsó lap (4.6) — az összeg mindig látszik, a tételes lista a gombbal nyílik */
@media (max-width: 1023.98px) {
  .konf { padding-bottom: 168px; }
  .konf-osszesito { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 80svh; overflow-y: auto;
    padding: var(--s3) var(--margo, 20px) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-l); }
  .konf-osszesito[data-nyitott="false"] .konf-lap-test { display: none; }
}

/* összehasonlítás (5.6): a tábla a saját dobozában görget, az oldal nem */
.osz { display: grid; gap: var(--s6); min-width: 0; font-family: var(--font); color: var(--ink); }
.osz :focus-visible { outline: 3px solid var(--brand-1); outline-offset: 3px; }
.osz-modellek { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.osz-gomb { min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-l); border-radius: 999px; background: var(--white);
  color: var(--ink); font: inherit; font-size: var(--t-data); cursor: pointer; transition: background-color 180ms var(--e), color 180ms var(--e); }
.osz-gomb[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.osz-gomb:disabled { color: var(--mute-l); cursor: not-allowed; }
.osz-tabla { min-width: 0; overflow-x: auto; }
.osz-tabla table { width: 100%; border-collapse: collapse; font-size: var(--t-data); font-variant-numeric: tabular-nums; }
.osz-tabla th, .osz-tabla td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line-l); text-align: left; vertical-align: top; }
.osz-tabla thead th { min-width: 160px; font-size: var(--t-h3); font-weight: 560; }
.osz-tabla tbody th { font-weight: 500; color: var(--mute-l); white-space: nowrap; }
.osz-kat { display: block; margin-top: var(--s1); color: var(--mute-l); font-size: var(--t-small); font-weight: 400; }
.osz-teszt { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-ink); font-size: var(--t-data); font-weight: 600; }
.osz-ures { color: var(--mute-l); font-size: var(--t-small); }

@media (prefers-reduced-motion: reduce) {
  .konf * { transition: none !important; }
}

@media print {
  .konf-sav, .konf-lepes-lab, .konf-lezaro, .konf-lap-gomb, .konf-cta { display: none !important; }
  .konf-osszesito { position: static; border: 0; }
  .konf-osszesito .konf-lap-test { display: block !important; }
}