/* ============================================================================
   Tőzsdék-hub és tőzsde-aloldalak — oldal-stíluslap
   Forrás: 03-DESIGN-HANDOVER/import/design_handoff_tozsdek/prototype/*.dc.html <style> blokkjai.

   MIÉRT KÜLÖN FÁJL, NEM A BUNDLE-BEN: a CSS-bundle-bontás (2026-08-17) pontosan azért
   választotta ketté a stílusokat, hogy egy oldal-család rétege ne legyen renderblokkoló
   halott súly a többi ~4700 oldalon. Ez a réteg 11 oldalé — a közös bundle-be téve minden
   publikus letöltés fizetné. Sima .css (nincs benne nesting/változó, amihez fordító kellene),
   ezért build-lépés sem kell hozzá; a cache-bustert az `assetVersion "tozsdek.css"` adja.

   HATÓKÖR: minden szabály a `.cf-tozsdek` (a `<main>` osztálya) alatt él. A prototípus
   globális `html/body/a` resetjei SZÁNDÉKOSAN kimaradtak: azok az előnézeti keret részei,
   és a portálnak saját, dokumentált site-wide szabálya van rájuk (pl. a link-hover 2026-08-23
   óta SZÍNT vált, nem aláhúz — l. _kozos-2-zaro.scss).
   ============================================================================ */

/* --- 1. Token-réteg -------------------------------------------------------
   A prototípus design-systeme (live-site.css) ezeket a tokeneket használja. A portálon
   `--field-bd`, `--chip-bg`, `--pale-text`, `--rn-glow`, `--hb-sub` már megvan a publikus
   rétegben; az `--accent-text` viszont CSAK a hub-bundle-ben él (_falka-hub.scss), az
   `--up-text`/`--down-text` pedig sehol. Ezért itt, az oldalcsaládra szűkítve definiáljuk.

   🔴 A `--cf-ink-*` tokenek a prototípus `tintInk()`-jének SSR-párja: ott render-időben,
   a téma ismeretében dőlt el a hex; szerveren ezt nem tudjuk, ezért a két érték itt áll.
   Számok a hub lightInk/darkInk-térképéből, AA mindkét témában (mérve 2026-09-01). */
.cf-tozsdek {
  --accent-text: #1ed760;
  --up-text: #16c784;
  --down-text: #ec3d6b;
  --cf-ink-bad: #e9858f;
  --cf-ink-partner: #4d9fd6;
  --cf-ink-accent-tint: var(--accent-text);
}
body:not(.darkmode) .cf-tozsdek {
  --accent-text: #0d8040;
  --up-text: #0b7a4b;
  --down-text: #c0244f;
  --cf-ink-bad: #b8394a;
  --cf-ink-partner: #2b6c9e;
  /* Zöldes tinten a márkazöld AA alá esik világosban (4,04-4,47) — sötétebb zöld megy rá. */
  --cf-ink-accent-tint: #0a6e37;
}

/* --- 2. A prototípus oldal-szabályai (szó szerint, hatókörre szűkítve) ----- */
.cf-tozsdek a.btn:hover,
.cf-tozsdek a.badge:hover,
.cf-tozsdek a.cta-btn:hover,
.cf-tozsdek a.cf-hb__cta:hover { text-decoration: none; }

/* A falka-bónusz kártyán belül SEMMI ne kapjon aláhúzást, hoverre sem: a ds-base kártya-hover
   szabálya a kártya bármely pontján hoverelve aláhúzza a címet (a hubon a kártya kattintható,
   ott ez szándékos) — itt a kártya nem link, ezért lekapcsoljuk (Roland 09-01, 3. kör). */
.cf-tozsdek .cf-hb-wrap a:hover,
.cf-tozsdek .cf-hb-wrap a:hover *,
.cf-tozsdek .cf-hb-wrap .cf-hb--board,
.cf-tozsdek .cf-hb-wrap .cf-hb--board * { text-decoration: none !important; }

/* Aláhúzás helyett alulról felfutó vonal (a design saját link-jelzése). */
.cf-tozsdek a.cf-xa { text-decoration: none !important; }
.cf-tozsdek a.cf-xa b { position: relative; padding-bottom: 2px; }
.cf-tozsdek a.cf-xa b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.cf-tozsdek a.cf-xa:hover b::after { transform: scaleX(1); }

.cf-tozsdek .cf-only-mobile { display: none; }
@media (max-width: 920px) {
  .cf-tozsdek .cf-only-desktop { display: none !important; }
  .cf-tozsdek .cf-only-mobile { display: flex; }
}

@keyframes cfPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cfHero  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cfRise  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cfDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-16px,12px,0); } }
@keyframes cfBar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cfPulse {
  0%   { box-shadow: 0 0 0 1px var(--field-bd), 0 0 0 0 rgba(30,215,96,.4); }
  70%  { box-shadow: 0 0 0 1px var(--field-bd), 0 0 0 13px rgba(30,215,96,0); }
  100% { box-shadow: 0 0 0 1px var(--field-bd), 0 0 0 0 rgba(30,215,96,0); }
}

/* Hero promó-slot: mobilon a címke a cím fölé kerül, nem fut rá (double-check P1-3). */
@media (max-width: 560px) {
  .cf-tozsdek .cf-hero-promo { flex-wrap: wrap !important; }
  .cf-tozsdek .cf-hero-badge {
    position: static !important; width: 100% !important; padding: 0 0 3px !important; background: transparent !important;
  }
}

/* Vízszintesen görgethető tábla: mobilon halványuló jobb szél jelzi, hogy van még oszlop. */
.cf-tozsdek .cf-scrollwrap { position: relative; }
.cf-tozsdek .cf-swipe-fade { display: none; }
@media (max-width: 920px) {
  .cf-tozsdek .cf-swipe-fade {
    display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 38px; pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0), var(--primary-bg));
  }
}

/* Kiemelt falka-ajánlat mobilon: egymás alá rendezve, teljes szélességű gombbal — asztalin
   marad a sáv-forma (Roland, 2026-09-01). */
@media (max-width: 920px) {
  .cf-tozsdek .cf-promo { flex-direction: column !important; align-items: stretch !important; gap: .8em !important; padding: 16px !important; }
  .cf-tozsdek .cf-promo__body { min-width: 0 !important; }
  .cf-tozsdek .cf-promo__steps { flex-direction: column !important; gap: .5em !important; margin-top: .6em !important; }
  .cf-tozsdek .cf-promo__cta { width: 100% !important; }
  .cf-tozsdek .cf-promo__cta .cta-btn { width: 100% !important; box-sizing: border-box !important; height: 46px !important; }
  /* A feltétel-buborék jobb szélhez horgonyzott: mobilon a sáv teljes szélessége legyen a
     horgony, különben kilóg balra. */
  .cf-tozsdek .cf-promo__cta > span { align-self: stretch !important; justify-content: center !important; }
}

/* Gyorsajánló mobilon: tömörebb kártyák és koppintható méretű részletek-linkek (Roland, 2026-09-01). */
@media (max-width: 920px) {
  .cf-tozsdek #gyorsajanlo > div > div { padding: 15px !important; gap: .45em !important; }
  .cf-tozsdek #gyorsajanlo > div > div p { font-size: 13px !important; line-height: 1.5 !important; }
  .cf-tozsdek #gyorsajanlo a.cf-xa {
    align-self: flex-start !important; width: auto !important; min-height: 36px !important; padding: 0 .9em !important;
    border: 1px solid var(--field-bd) !important; border-radius: 100px !important;
    display: inline-flex !important; align-items: center !important; gap: .45em !important;
  }
}

/* Bónusz-kártyák mobilon: teljes kártya csak ott, ahol élő falka-ajánlat van (Roland, 2026-09-01). */
@media (max-width: 920px) {
  .cf-tozsdek .cf-deal.is-lean { padding: 14px 15px !important; gap: .55em !important; }
  .cf-tozsdek .cf-deal.is-lean .cf-deal__bullets { display: none !important; }
  .cf-tozsdek .cf-deal.is-lean .cf-deal__terms { display: none !important; }
  .cf-tozsdek .cf-deal.is-lean .cf-deal__value { font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; }
  .cf-tozsdek .cf-deal.is-lean .btn,
  .cf-tozsdek .cf-deal.is-lean a[style*="height:42px"] { height: 38px !important; }
}

/* Mobil sorrend: a „Melyik tőzsdét válasszam?" a rangsor + tagsági CTA után jön, ne a lap
   alján (Roland, 2026-09-01). Az asztali sorrend változatlan: a szabály csak a mobil
   töréspont alatt él, a többi blokk DOM-sorrendben marad.
   🔴 CSAK A HUBRA (`[data-cf-hub]`, Roland 2026-09-04). A `.cf-tozsdek` osztályt a 10 aloldal
   is viseli, ahol `#rangsor` és `#gyorsajanlo` nincs — ott a szabály a Falka-bónusz boardot
   (`order:3`) rögtön a hero mögé emelte, a kulcs-adatok, a készlet-megoszlás ÉS a tőzsde
   leírása elé. Az aloldalak mobilon DOM-sorrendben maradnak. */
@media (max-width: 920px) {
  .cf-tozsdek[data-cf-hub] { display: flex !important; flex-direction: column !important; }
  .cf-tozsdek[data-cf-hub] > * { order: 5; }
  .cf-tozsdek[data-cf-hub] > section:first-child { order: 1; }
  .cf-tozsdek[data-cf-hub] > #rangsor { order: 2; }
  .cf-tozsdek[data-cf-hub] > .cf-hb-wrap { order: 3; }
  .cf-tozsdek[data-cf-hub] > #gyorsajanlo { order: 4; }
}

/* Szekció-fejléc mobilon: az ikon a cím mellett marad, nem esik külön sorba (Roland, 2026-09-01). */
@media (max-width: 920px) {
  .cf-tozsdek .cf-h2row { flex-wrap: nowrap !important; align-items: flex-start !important; }
  .cf-tozsdek .cf-h2row h2 { font-size: 20px !important; line-height: 1.25 !important; }
}

/* MOBIL (≤920px): a hero Feltételek-buborék horgonya a teljes CTA-sor legyen (a span
   position:static-ra vált, így a buborék a sor bal szélétől nyílik) — enélkül a gombhoz
   horgonyzott 300px-es buborék jobbra kilóg (390px-en 147px, és az androidos Chrome emiatt
   ki is zoomolja az oldalt). A box-sizing a max-width-et a teljes dobozra érteti; a
   láthatatlan padding+ellenmargó a koppintó-célt növeli ~40px-re, layout-mozgás nélkül. */
@media (max-width: 920px) {
  .cf-tozsdek .cf-terms [role="tooltip"] { box-sizing: border-box; }
  .cf-tozsdek .cf-terms [role="button"] { padding: 1.2em 0; margin: -1.2em 0; }
  .cf-tozsdek .cf-cta-row { position: relative; }
  .cf-tozsdek .cf-cta-row .cf-terms { position: static !important; }
}

/* A board két halvány felirata a ds-base --hb-meta/--hb-label-muted szürkéjével AA alatt van
   (világosban 3,11, sötétben 3,74) — a témánként definiált --hb-sub mindkét témában 7 körüli. */
.cf-tozsdek .cf-hb-wrap .cf-hb__meta,
.cf-tozsdek .cf-hb-wrap .cf-hb__checks-label { color: var(--hb-sub); }

/* Téma-tudatos tinták osztály-formában (a prototípus `.cf-ink-*` / `.cf-tint-ink` osztályai). */
.cf-tozsdek .cf-ink-bad { color: var(--cf-ink-bad); }
.cf-tozsdek .cf-ink-partner { color: var(--cf-ink-partner); }
.cf-tozsdek .cf-tint-ink { color: var(--cf-ink-accent-tint) !important; }

/* --- 3. SSR-állapot: a buborékok alapból zárva ---------------------------
   A prototípusban a buborék csak nyitott állapotban KERÜLT BE a DOM-ba; SSR-ben mindig
   kirendereljük (a tartalom így a forrásban van), és a láthatóságot ez a két szabály adja.
   JS nélkül a buborék rejtve marad — a benne lévő információ minden esetben megjelenik
   máshol is a lapon (rangsor-cellák, MiCA-tábla, bónusz-kártya), tehát nem vész el. */
.cf-tozsdek [data-cf-enter] > [role="tooltip"] { display: none; }
.cf-tozsdek [data-cf-enter].is-open > [role="tooltip"] { display: block; }

/* --- 4. Vízszintes túllógás elzárása ---------------------------------------
   A hero dekoratív fény-foltja SZÁNDÉKOSAN kilóg a tartalomsávból (`left:-8%;right:-8%`),
   a prototípusban ezt a `body{overflow-x:clip}` fogta meg. Globális body-szabályt nem viszünk
   át (az előnézeti keret része, és minden más oldalt is érintene), ezért a vágás itt, az
   oldal gyökerén ül.
   ⚠️ `clip`, NEM `hidden`: a `hidden` görgetési kontextust nyitna és az Y tengelyt is
   `auto`-ra rántaná (elvágná a felfelé nyíló buborékokat); a `clip` csak vág. */
.cf-tozsdek { overflow-x: clip; }

/* --- 5. Osztálynév-ütközés a portál site-wide CSS-ével (Roland, 2026-09-03) ------
   „a Regisztrálok gomb nem látszik" / „nem látszik a színe".

   A prototípusban a `.cta-btn` MAGA a kitöltött zöld gomb volt. A portálon viszont a
   `.cta-btn` (_buttons.scss) CSAK méret-módosító: padding, 48px magasság, kerek sarok,
   600-as vastagság — kitöltést és feliratszínt NEM ad, azt a `.btn-primary*` osztályok
   adnák. Az áthozott markupon így átlátszó gomb maradt (mért: background rgba(0,0,0,0),
   color rgb(242,242,242)), hoverre pedig a globális `a:hover{color:var(--link-hover)}`
   (2026-08-23) zöldre váltotta a feliratot.

   A kitöltést itt adjuk meg, az oldalcsaládra szűkítve, PONTOSAN azokkal az értékekkel,
   amiket a lapon a másik CTA, a `.cf-hb__cta` házibanner-gomb használ (--hb-lime /
   --hb-lime-ink: #1ed760 / #07130b) — azok a tokenek a `.cf-hb`-re vannak szűkítve, ezért
   itt a literál érték áll. A hover feliratszíne szándékosan ugyanaz marad: a sötét felirat
   a zöld kitöltésen mindkét témában AA felett van, a globális zöld hover viszont eltüntetné.

   ⚠️ A teljes ütközés-audit (a sablonok osztálynevei vs. a site-wide SCSS) lefutott: ez volt
   az EGYETLEN nem szándékolt találat. A `.cf-hb__*`, `.rn-*`, `.related-grid`, `.badge*`,
   `.cf-arrow`, `.jump-to-top` és a `.btn-primary-color` szándékos portál-komponens-átvétel. */
.cf-tozsdek .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1ed760;
  color: #07130b;
  font-weight: 700;
}
.cf-tozsdek .cta-btn:hover,
.cf-tozsdek .cta-btn:active,
.cf-tozsdek .cta-btn:focus-visible {
  color: #07130b;
  background: var(--color-primary-dark, #1ccc5b);
}

/* A falka-bónusz board egésze kattintható (Roland, 2026-09-03: „lehessen magára a kártyára
   is kattintani"). A kurzort a JS teszi ki, és CSAK ott, ahol valódi ref-link van — a
   markup inline `cursor:default`-ját így nem írjuk felül placeholder (`#`) linknél. */
.cf-tozsdek .cf-hb--board[data-cf-kattinthato] { cursor: pointer !important; }
/* `!important`, mert az áthozott markup inline `cursor:default`-ot visel (a prototípusban a
   kártya nem volt kattintható) — inline stílust csak ez üt. */

/* --- 6. Hover-réteg: a prototípus `style-hover` attribútumainak CSS-párja ------
   🔴 GYÖKÉROK (Roland, 2026-09-03: „az oldalon voltak hoover effektek … ezeket hozd vissza").
   A design-prototípusban a hover NEM CSS `:hover`, hanem egy `style-hover="…"` ATTRIBÚTUM,
   amit a keret futásidőben inline stílusként tett rá az elemre. A port ezt helyesen
   osztálynévre (`cfh-01` … `cfh-23`) cserélte — a CSS-szabályokat viszont soha nem írta meg,
   így a 152 elem MINDEGYIKÉN néma maradt a hover. Ugyanez a csapda a hub-portnál is előjött
   (l. _falka-hub.scss „a hover a protóban ATTRIBÚTUM"), ott is kézzel írt szabály oldotta meg.

   AZ ÉRTÉKEK FORRÁSA nem ízlés, hanem a prototípus attribútumai, elemenként párosítva:
   Tozsdek-v3.dc.html (hub: cfh-01…16) és Tozsde-*.dc.html (aloldalak: cfh-17…23).

   ⚠️ MIÉRT `!important` — és miért CSAK ott, ahol áll: az áthozott markup mindent INLINE
   stílusban visel (`border:1px solid …`, `background:…`, `color:…`), az inline stílust pedig
   semmilyen specificitás nem üti, csak az `!important`. Ezért minden olyan tulajdonság kap
   `!important`-ot, amit az elem inline is beállít (border-color, background, color) — a
   `transform`, `box-shadow` és `text-decoration` nincs inline, azok jelölés nélkül nyernek.

   A `transition` szándékosan NEM ismétlődik: ahol az elem inline visel átmenetet (a többség),
   az úgyis üti a miénket; ahol nincs inline (cfh-09, cfh-23), ott a base-szabály adja.

   🔑 Gépi kapu: tozsdek.spec.ts „hover-réteg" — ha új `cfh-NN` kerül sablonba szabály nélkül,
   a teszt elhasal. Enélkül ez a hiba pontosan úgy csúszna vissza, ahogy először bejött. */

/* Röviden-kártya (hero) */
.cf-tozsdek .cfh-01:hover { border-color: rgba(30,215,96,.55) !important; transform: translateY(-2px); }
/* Szövegközi linkek és a „Pontos feltételek" buborék-nyitók */
.cf-tozsdek .cfh-02:hover { color: var(--accent-text) !important; }
/* Hero-promó (kiemelt falka-ajánlat) */
.cf-tozsdek .cfh-03:hover { border-color: rgba(30,215,96,.55) !important; transform: translateY(-2px); text-decoration: none; }
/* Táblázat-sor — a rangsor ÉS a MiCA-tábla (Roland: „színeződik a sor, érződik, hogy
   kattintható"); azonos érték, mint az árfolyam-oldalon (_coins.scss `tbody>tr:hover`). */
.cf-tozsdek .cfh-04:hover { background: var(--chip-bg); }
/* Logó-chip a sorban */
.cf-tozsdek .cfh-05:hover { transform: scale(1.12); }
/* i-gomb (részletek-buborék nyitója) */
.cf-tozsdek .cfh-06:hover { background: rgba(30,215,96,.14) !important; color: var(--accent-text) !important; transform: scale(1.1); }
/* „Regisztrálok" badge — ez Roland „zöld halós" effektje */
.cf-tozsdek .cfh-07:hover { transform: translateY(-2px); box-shadow: 0 7px 16px -7px rgba(30,215,96,.55); }
/* Másodlagos chip-gomb (részletek / info-CTA) */
.cf-tozsdek .cfh-08:hover { border-color: rgba(30,215,96,.45) !important; text-decoration: none; }
/* Mobil kártya részletek-gombja. A prototípus itt csak `text-decoration:none`-t ad, ami ezen a
   markupon nem látszik; a desktop testvérének (cfh-08) keret-hoverét kapja, hogy legyen jelzés. */
.cf-tozsdek .cfh-09 { transition: border-color .15s ease; }
.cf-tozsdek .cfh-09:hover { border-color: rgba(30,215,96,.45) !important; text-decoration: none; }
/* Falka-bónusz kártya */
.cf-tozsdek .cfh-10:hover { border-color: rgba(30,215,96,.4) !important; transform: translateY(-4px); box-shadow: var(--rn-glow); }
/* Kiemelt falka-ajánlat sáv (cf-promo) — a protó itt NEM vált keretszínt, csak emel és világít */
.cf-tozsdek .cfh-11:hover { transform: translateY(-4px); box-shadow: var(--rn-glow); }
/* „Kinek melyik?" kártyák */
.cf-tozsdek .cfh-12:hover { border-color: rgba(30,215,96,.4) !important; transform: translateY(-3px); box-shadow: var(--rn-glow); }
/* „Összes tőzsdei cikk" fejléc-link */
.cf-tozsdek .cfh-13:hover { transform: translateX(3px); text-decoration: none; }
/* Cikk-szűrő csip */
.cf-tozsdek .cfh-14:hover { transform: translateY(-2px); }
/* „További cikkek betöltése" */
.cf-tozsdek .cfh-15:hover { border-color: rgba(30,215,96,.45) !important; transform: translateY(-2px); }
/* GYIK-válasz belső linkje */
.cf-tozsdek .cfh-16:hover { text-decoration: underline; }
/* Aloldal: „Ugrás az adatlapra" horgony */
.cf-tozsdek .cfh-17:hover { background: var(--chip-hover-bg) !important; text-decoration: none; }
/* Aloldal: hivatalos link-chipek (weboldal, X, díjtáblázat, státusz, app) */
.cf-tozsdek .cfh-18:hover { background: var(--chip-hover-bg) !important; color: var(--primary-text) !important; }
/* Aloldal: adatlap-kártya */
.cf-tozsdek .cfh-19:hover { border-color: rgba(30,215,96,.4) !important; transform: translateY(-3px); box-shadow: var(--rn-glow); }
/* Aloldal: szövegközi cikk-link */
.cf-tozsdek .cfh-20:hover { color: var(--accent-text) !important; text-decoration: none; }
/* Aloldal: „további tőzsdék" kártya-link */
.cf-tozsdek .cfh-21:hover { border-color: rgba(30,215,96,.4) !important; transform: translateY(-3px); box-shadow: var(--rn-glow); text-decoration: none; }
/* Aloldal: oldalsáv-link */
.cf-tozsdek .cfh-22:hover { border-color: rgba(30,215,96,.4) !important; transform: translateY(-2px); text-decoration: none; }
/* Aloldal: záró bekezdés tagsági linkje */
.cf-tozsdek .cfh-23 { transition: color .15s ease; }
.cf-tozsdek .cfh-23:hover { color: var(--accent-text) !important; }

/* Mozgás-érzékenység: a keret- és színváltás marad, az elmozdulás nem (a portál mintája,
   l. _falka-hub.scss `prefers-reduced-motion` blokkjai). */
@media (prefers-reduced-motion: reduce) {
  .cf-tozsdek [class*="cfh-"],
  .cf-tozsdek [class*="cfh-"]:hover { transform: none !important; transition: none !important; }
}