/* Kódszabó – a bolt-asszisztens (wa, wam) átszínezése a látogató színére (lásd ceg.css).
   A valodi.css UTÁN töltődik; csak a [data-ceg] gyökérre hat. A felület sötét marad, de a látogató színe felé hangolva:
   a háttér a --ceg-s-ből, a gombok és a kiemelés a --ceg-ből. A piros, sárga, zöld állapotszínek maradnak. */
:is(.wa, .wam)[data-ceg] {
  --wa-lap: color-mix(in srgb, var(--ceg-s) 25%, #07070a); --wa-fel: color-mix(in srgb, var(--ceg-s) 38%, #0f0f14); --wa-fel2: color-mix(in srgb, var(--ceg-s) 50%, #16161d);
  --wa-sz: color-mix(in srgb, var(--ceg) 22%, #1f1f28); --wa-sz2: color-mix(in srgb, var(--ceg) 35%, #2c2c38);
  --wa-szoveg: color-mix(in srgb, var(--ceg-h) 30%, #f1f1f4); --wa-halk: color-mix(in srgb, var(--ceg-h) 35%, #a3a3ad);
  --wa-ib: color-mix(in srgb, var(--ceg) 45%, #fff); --wa-ib2: color-mix(in srgb, var(--ceg) 30%, #fff); --wa-gomb: var(--ceg);
  --wa-vil: color-mix(in srgb, var(--ceg-h) 40%, #cacad2); /* a halvány magyarázó szöveg (a régi #cfcce6, #dcd9f2 helyett) */
  --wa-nyom: color-mix(in srgb, var(--ceg) 28%, var(--wa-fel)); --wa-nyom-sz: color-mix(in srgb, var(--ceg) 60%, var(--wa-fel)); /* kiválasztott, kiemelt */
  background: radial-gradient(ellipse at 70% -10%, color-mix(in srgb, var(--ceg-s) 75%, var(--ceg)) 0%, transparent 55%), var(--wa-lap);
}
/* fejléc és márkajel; a hosszú név ne tolja le a menüt */
.wa[data-ceg] .wa-fej { background: color-mix(in srgb, var(--wa-lap) 80%, transparent); }
:is(.wa, .wam)[data-ceg] .wa-logo { background: linear-gradient(135deg, color-mix(in srgb, var(--ceg) 80%, #fff), color-mix(in srgb, var(--ceg) 85%, #000)); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--ceg) 67%, transparent); }
:is(.wa, .wam)[data-ceg] .wa-proba { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--wa-vil); }
.wa[data-ceg] .wa-proba { max-width: 20em; }
.wa[data-ceg] .wa-nav button, :is(.wa, .wam)[data-ceg] .wa-gomb.szellem { color: color-mix(in srgb, var(--ceg-h) 50%, #d4d4dc); }
.wa[data-ceg] .wa-nav button[aria-pressed="true"] { background: var(--wa-nyom); border-color: var(--wa-nyom-sz); color: #fff; }
.wa[data-ceg] .wa-test { scrollbar-color: var(--wa-sz2) transparent; }
/* kártyák, sávok */
:is(.wa, .wam)[data-ceg] :is(.wa-roviden, .wa-szamok .wa-kartya.kiemelt) { border-color: color-mix(in srgb, var(--ceg) 55%, var(--wa-fel)); background: linear-gradient(160deg, color-mix(in srgb, var(--ceg) 16%, var(--wa-fel)), var(--wa-fel)); }
:is(.wa, .wam)[data-ceg] .wa-dontes-sav:not(.kesz) { border-color: var(--wa-nyom-sz); background: color-mix(in srgb, var(--ceg) 14%, var(--wa-fel)); }
:is(.wa, .wam)[data-ceg] .wa-banner { border-color: color-mix(in srgb, var(--ceg) 50%, var(--wa-fel)); background: color-mix(in srgb, var(--ceg) 12%, var(--wa-fel)); }
:is(.wa, .wam)[data-ceg] .wa-tipus { border-color: color-mix(in srgb, var(--ceg) 55%, var(--wa-fel)); background: color-mix(in srgb, var(--ceg) 14%, var(--wa-fel)); color: var(--wa-ib2); }
:is(.wa, .wam)[data-ceg] :is(.wa-sorok small, .wa-meres > small, .wa-terulet small, .wa-meta, .wa-miert, .wa-tabla tfoot td) { color: var(--wa-vil); }
:is(.wa, .wam)[data-ceg] :is(.wa-besz p, .wa-nagy, .wa-szov, .wa-szurok button) { color: color-mix(in srgb, var(--ceg-h) 40%, #d8d8de); }
:is(.wa, .wam)[data-ceg] .wa-gomb.fo:hover { background: color-mix(in srgb, var(--ceg) 85%, #000); }
:is(.wa, .wam)[data-ceg] .wa-kor.halk { border-color: var(--wa-sz2); color: var(--wa-halk); background: var(--wa-fel2); }
:is(.wa, .wam)[data-ceg] .wa-ok.halk { border-color: var(--wa-sz2); color: var(--wa-halk); }
:is(.wa, .wam)[data-ceg] .wa-szurok button[aria-pressed="true"] { background: color-mix(in srgb, var(--ceg) 30%, var(--wa-fel)); border-color: color-mix(in srgb, var(--ceg) 75%, #fff); color: #fff; }
:is(.wa, .wam)[data-ceg] :is(.wa-tabla th, .wa-tabla tfoot td) { background: color-mix(in srgb, var(--wa-fel) 60%, var(--wa-fel2)); }
:is(.wa, .wam)[data-ceg] .wa-terulet i { background: var(--wa-fel2); }
:is(.wa, .wam)[data-ceg] .wa-toast { background: var(--wa-fel2); }
/* forgalmi oszlopok */
:is(.wa, .wam)[data-ceg] .wa-oszlopok i { background: linear-gradient(180deg, color-mix(in srgb, var(--ceg) 70%, #fff), color-mix(in srgb, var(--ceg) 80%, #000)); }
:is(.wa, .wam)[data-ceg] .wa-oszlopok i.most { box-shadow: 0 0 18px color-mix(in srgb, var(--ceg) 35%, transparent); }
/* a telefon alsó menüje */
.wam[data-ceg] .wam-also { background: color-mix(in srgb, var(--wa-lap) 85%, #000); }
.wam[data-ceg] .wam-also button { color: var(--wa-halk); }
.wam[data-ceg] .wam-also button[aria-pressed="true"] { background: var(--wa-nyom); color: #fff; }
