/* Layer: feature-specific */
/* Scope: kosársor és pénztár-elrendezés – tételek, összegzés, űrlap-kártyák */
/* Used by: prototypes/webshop/kosar.html, prototypes/webshop/penztar.html */

.kosar-sor {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--uspm); padding: var(--usps);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.kosar-kep { inline-size: 5.5rem; flex: none; aspect-ratio: 1 / 1; }
.kosar-adat { flex: 1 1 12rem; }
.kosar-adat .termekkartya-cim, .osszegzes .termekkartya-cim { font-size: var(--ust-1); font-weight: 600; }
.kosar-mennyiseg { display: flex; flex-direction: column; gap: var(--usp2xs); }
.kosar-mennyiseg .input { inline-size: 6rem; }
.kosar-osszeg { margin-inline-start: auto; font-size: var(--ust1); color: var(--c1); }
.torles-gomb .ikon { inline-size: 1.5em; block-size: 1.5em; }

/* „Érdeklődöm” – halk gomb: a vásárlás marad a hangsúlyos akció */
.btn-halk {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); font-weight: 500;
}
.btn-halk:hover {
  background: transparent; color: var(--c1); border-color: var(--c1);
  background-size: 0% 100%;
}

.penztar-elrendezes { display: grid; gap: var(--uspm); align-items: start; margin-block-start: 0; }
@media (min-width: 56rem) {
  .penztar-elrendezes { grid-template-columns: minmax(0, 1fr) 28rem; }
}

/* Összegzés: rendezett sorok – címke balra, összeg jobbra */
.osszegzes { display: grid; grid-template-columns: 1fr auto; gap: var(--uspxs) var(--usps); margin: 0; }
.osszegzes dt { color: var(--text-muted); font-size: var(--ust-1); }
.osszegzes dd { margin: 0; text-align: end; min-inline-size: 0; }
.osszegzes dd.vegso { white-space: nowrap; }
.osszegzes dt.vegso {
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--usps);
  font-size: var(--ust0); color: var(--text); font-weight: 600;
}
.osszegzes dd.vegso {
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--usps);
  font-size: var(--ust2); color: var(--c1); font-weight: 800;
}
.penztar-mezo { border: 0; padding: 0; margin: 0; }
.penztar-mezo legend { font-family: var(--font-cim); font-size: var(--ust1); font-weight: 500; margin-block-end: var(--usps); }
.mezo-hiba { color: var(--c-danger); font-size: var(--ust-1); }
.radio-sor { display: flex; align-items: center; gap: var(--uspxs); padding-block: var(--usp2xs); }

/* Főcím utáni térköz: feszes, hogy a lényeg hamarabb jöjjön */
h1.szekcio-cim { margin-block-end: var(--uspxs); }
h1.szekcio-cim + p, h1.szekcio-cim + .vendeg-valaszto, h1.szekcio-cim + .penztar-elrendezes, h1.szekcio-cim + .lista-elrendezes { margin-block-start: 0; }
.vendeg-valaszto { margin-block-start: 0; }

/* Pénztár: tömörebb, átláthatóbb űrlap */
.penztar-elrendezes .card { padding: var(--usps); }
.penztar-mezo { --stack-gap: var(--uspxs); }
.ceges-adatok { gap: var(--uspxs) !important; }
.penztar-mezo legend { font-size: var(--ust0); margin-block-end: 0; display: flex; align-items: center; }
.penztar-elrendezes .field { gap: var(--usp2xs); }
.penztar-elrendezes .label { font-size: var(--ust-1); }
.penztar-elrendezes .input { padding-block: var(--usp2xs); font-size: var(--ust-1); }
.lepesszam {
  display: inline-grid; place-items: center;
  inline-size: 1.5em; block-size: 1.5em; margin-inline-end: var(--uspxs);
  background: var(--c3-elo); color: var(--c2);
  font-family: var(--font-cim); font-size: var(--ust-1); font-weight: 500;
  border-radius: var(--radius-sm);
}

/* Vendég vásárlás / regisztráció: opcióként, nem szövegként */
.reg-blokk { display: none; }
.vendeg-valaszto:has(#vasarlas-reg:checked) .reg-blokk {
  display: flex; align-items: center; gap: var(--usps); flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--radius);
  padding: var(--uspxs) var(--usps);
}

/* Magánszemély/cég: a céges adatok csak „Cég” választásakor jelennek meg */
.ceges-adatok { display: none; }
.penztar-mezo:has(#szamla-ceg:checked) .ceges-adatok { display: flex; flex-direction: column; gap: var(--usps); }
@media (prefers-reduced-motion: reduce) {
  .termek-kep img, .btn { transition: none; }
}