/* Kódszabó – az ügyfélszerző (tfp) átszínezése a látogató színére (lásd ceg.css).
   A valodi.css UTÁN töltődik, és csak a [data-ceg] gyökérre hat. A márkaszínek helyére a látogató színe kerül
   (--ceg kiemelés, --ceg-s sötét sáv, --ceg-h halvány háttér); a pont- és állapotszínek (piros, sárga, zöld) és a semleges szürkék maradnak. */
.tfp[data-ceg] {
  --tfp-sz: color-mix(in srgb, var(--ceg) 80%, #000);   /* kiemelt szöveg világos alapon */
  --tfp-v: color-mix(in srgb, var(--ceg) 45%, #fff);    /* világos kiemelés a sötét sávon */
  --tfp-s2: color-mix(in srgb, var(--ceg-s), #fff 12%); /* a sötét sáv kiemelt sora */
  --tfp-vs: color-mix(in srgb, var(--ceg-s), #fff 16%); /* vonal a sötét sávon */
  --tf-kek: var(--ceg); --tf-navy: var(--ceg-s);
}

/* oldalsáv */
.tfp[data-ceg] .tfp-oldal { background: linear-gradient(180deg, var(--ceg-s), color-mix(in srgb, var(--ceg-s) 82%, #000)); color: #eceaf0; }
.tfp[data-ceg] .tfp-oldal .tf-marka, .tfp[data-ceg] .tfp-menu { border-bottom-color: var(--tfp-vs); }
.tfp[data-ceg] .tfp-oldal-cim { color: color-mix(in srgb, var(--ceg-h) 70%, #8f8f99); }
.tfp[data-ceg] .tfp-menu button { color: #f1f0f4; }
.tfp[data-ceg] .tfp-menu button:hover { background: color-mix(in srgb, var(--ceg-s), #fff 7%); }
.tfp[data-ceg] .tfp-menu button .mi { color: color-mix(in srgb, var(--ceg-h) 75%, #8f8f99); }
.tfp[data-ceg] .tfp-menu button.aktiv { background: var(--tfp-s2); border-left-color: var(--tfp-v); }
.tfp[data-ceg] .tfp-menu button.aktiv::after { background: var(--tfp-v); }
.tfp[data-ceg] .tfp-menu em { background: var(--ceg); }

/* fejléc, cím, mutatók, fülek, gombok */
.tfp[data-ceg] .tfp-fej .mi, .tfp[data-ceg] .tfp-keret .mi, .tfp[data-ceg] .tfp-koltseg .mi { color: var(--ceg); }
.tfp[data-ceg] .tfp-szem { color: var(--tfp-sz); }
.tfp[data-ceg] .tfp-szem::before { background: var(--ceg); }
.tfp[data-ceg] .tfp-kpi p span { background: var(--ceg-h); color: var(--tfp-sz); }
.tfp[data-ceg] .tfp-kpi.sotet { background: var(--ceg-s); border-color: var(--ceg-s); box-shadow: inset 0 3px 0 var(--tfp-v); }
.tfp[data-ceg] .tfp-kpi.sotet small { color: color-mix(in srgb, var(--ceg-h) 72%, #8f8f99); }
.tfp[data-ceg] .tfp-kpi.sotet p span { background: var(--tfp-s2); color: var(--tfp-v); }
.tfp[data-ceg] .tfp-kpi.piros p span { background: #fbe9ea; color: #b3261e; }
.tfp[data-ceg] .tfp-fulek button[aria-pressed="true"] { border-bottom-color: var(--ceg); background: color-mix(in srgb, var(--ceg-h) 60%, #fff); }
.tfp[data-ceg] .tfp-gomb.fo { background: var(--ceg); border-color: var(--ceg); }
.tfp[data-ceg] .tfp-gomb.fo:hover { background: color-mix(in srgb, var(--ceg) 82%, #000); }

/* tábla, kártyák, pontok */
.tfp[data-ceg] .tfp-oszlop.k-meg { border-top-color: var(--ceg-s); }
.tfp[data-ceg] .tfp-oszlop.k-val { border-top-color: var(--ceg); }
.tfp[data-ceg] .tfp-kartya.villan { animation-name: tfpc-villan; }
@keyframes tfpc-villan { 0% { box-shadow: 0 0 0 3px var(--tfp-v); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tfp[data-ceg] .tfp-pont.kozep { background: var(--ceg-h); color: var(--tfp-sz); box-shadow: inset 0 -3px 0 var(--ceg); }
.tfp[data-ceg] .tfp-pont.eros { background: var(--ceg); color: #fff; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--ceg) 65%, #000); }
.tfp[data-ceg] .tfp-all.a-valaszolt { background: var(--ceg-h); color: var(--tfp-sz); }

/* keresés */
.tfp[data-ceg] .tfp-mezo input[type="range"], .tfp[data-ceg] .tfp-csip input { accent-color: var(--ceg); }
.tfp[data-ceg] .tfp-csip.be { border-color: var(--ceg); background: var(--ceg-h); }
.tfp[data-ceg] .tfp-korabbi-sor.aktiv { border-color: color-mix(in srgb, var(--ceg) 35%, #fff); background: var(--ceg-h); }
.tfp[data-ceg] .tfp-reszek i b { background: var(--ceg); }

/* partnerjelölt-panel */
.tfp[data-ceg] .tfp-panel-hatter { background: color-mix(in srgb, var(--ceg-s) 50%, transparent); }
.tfp[data-ceg] .tfp-panel, .tfp[data-ceg] .tfp-bontas { border-top-color: var(--ceg); }
.tfp[data-ceg] .tfp-panel-fej small { color: var(--tfp-sz); }
.tfp[data-ceg] .tfp-bontas i b { background: var(--ceg-s); }
.tfp[data-ceg] .tfp-sotet-jelzes { background: var(--ceg-s); color: #f1f0f4; }
.tfp[data-ceg] .tfp-sotet-jelzes .mi { color: var(--tfp-v); }

/* a telefonos teendőlista pontjai (a lista maga a ceg-tf.css-ben színeződő .tfm-ben van; itt csak a pontdobozok) */
[data-ceg] .tfp-tel-lista .tfp-pont.kozep { background: var(--ceg-h); color: color-mix(in srgb, var(--ceg) 80%, #000); box-shadow: inset 0 -3px 0 var(--ceg); }
[data-ceg] .tfp-tel-lista .tfp-pont.eros { background: var(--ceg); color: #fff; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--ceg) 65%, #000); }