/**
 * Vitrina Hub — un DOM, șase layouturi.
 *
 * Layoutul și varianta de stil sunt COMBINAȚII DE TOKENI, nu foi de stil
 * paralele. Markup-ul e identic pentru toate cele șase: `cards`, `list`, `grid`,
 * `table`, `compact`, `spotlight` schimbă doar cum se așază zonele. Asta ține
 * fișierul mic și face comutarea de layout o schimbare pur vizuală.
 *
 * Culorile, radius-urile și spațierile sunt cele din modulele existente
 * (`casino-table`, `bonus-cards`, `casino-index`) — paleta navy/teal a
 * cazino.ro. Token-urile stau pe blocul rădăcină, cu prefix propriu, exact ca
 * la celelalte module: fără `:root`, ca să nu scape nimic în restul paginii.
 *
 * Responsive prin `@container` (pattern-ul din `bonus-cards-block.css`): un
 * bloc pus în sidebar trebuie să se comporte ca pe mobil chiar dacă ecranul e
 * lat. `@media` a rămas doar unde chiar depinde de viewport.
 */

.cdh-sh {
  /* text */
  --sh-ink: #203540;
  --sh-ink-2: #26404C;
  --sh-mut: #59737F;
  --sh-mut-2: #8A97A3;
  /* suprafețe */
  --sh-bg: #FFFFFF;
  --sh-soft: #F8FAFB;
  --sh-line: #DDE6EB;
  --sh-line-strong: #C1CFD6;
  --sh-divider: #F0F3F5;
  /* accente */
  --sh-orange: #F36620;
  --sh-orange-press: #D55515;
  --sh-orange-050: #FFF1EB;
  --sh-green: #09AE4E;
  --sh-green-deep: #067434;
  --sh-green-050: #E1F4E9;
  --sh-navy: #172E52;
  --sh-blue: #2F80ED;
  --sh-amber-bg: #FBEFD3;
  --sh-amber-tx: #946200;
  --sh-pill-bg: #EDF1F4;
  --sh-pill-tx: #59737F;
  --sh-red: #E13011;
  --sh-gold: #F7CE74;
  /* geometrie */
  --sh-r: 14px;
  --sh-r-el: 10px;
  --sh-r-sm: 8px;
  --sh-shadow: 0 4px 14px rgba(23, 46, 82, .07);
  /* spațiere */
  --sh-gap: 12px;
  --sh-pad: 16px;
  /* grilă (setate inline de bloc) */
  --sh-cols: 1;
  --sh-cols-m: 1;

  /* Blocul e el însuși container de interogare: „cât spațiu am" e o întrebare
     despre lățimea blocului, nu despre ecran. Un bloc de 390px într-un sidebar
     pe un ecran de 1440px trebuie să arate ca pe mobil. */
  container-type: inline-size;
  container-name: shblock;

  margin: 24px 0;
  color: var(--sh-ink);
  font-size: 15px;
  line-height: 1.5;
}

.cdh-sh *,
.cdh-sh *::before,
.cdh-sh *::after { box-sizing: border-box; }

/**
 * `line-height` RELATIV pe rând, nu absolut.
 *
 * Rândurile blocului sunt `<li>`, iar tema are `li, p { line-height: 26px }` — o
 * valoare absolută, care se moștenește ca 26px la fiecare descendent. Efectul: un
 * text de 10px primea un rând de 26px, deci fiecare etichetă și fiecare valoare
 * mică veneau cu 10-15px de aer invizibil. Pe un card cu opt informații mici, asta
 * e o sută de pixeli de nimic, și de asta blocul părea „aerisit" fără motiv.
 *
 * Cu un număr, fiecare element își calculează rândul din propria dimensiune.
 * Două clase, ca să bată selectorul de tip al temei.
 */
.cdh-sh .cdh-sh__item,
.cdh-sh .cdh-sh__tr { line-height: 1.5; }

.cdh-sh :focus-visible {
  outline: 2px solid var(--sh-blue);
  outline-offset: 2px;
}

/* Densitate și variante de stil — doar token-uri rescrise. Densitatea are prefixul
   `--d-`, ca să nu se confunde cu layoutul care se numește tot „compact". */
.cdh-sh--d-compact { --sh-gap: 8px; --sh-pad: 11px; font-size: 14px; }
.cdh-sh--flat { --sh-shadow: none; }
.cdh-sh--elevated { --sh-shadow: 0 6px 20px rgba(23, 46, 82, .12), 0 1px 2px rgba(23, 46, 82, .06); }
.cdh-sh--bordered { --sh-shadow: none; --sh-line: var(--sh-line-strong); }

/**
 * Varianta „ca ND Cards".
 *
 * Reproduce semnătura vizuală a cardului de bonus fără depunere din temă
 * (`blocks/cards-bonus/style.css`): bandă de 3px sus în degrade portocaliu→verde,
 * radius 12px, ridicare la hover, poziția ca etichetă lipită în colțul din
 * dreapta sus.
 *
 * NU refolosim clasele `cz-ndcard` și CSS-ul temei. Acela e cuplat la markup-ul
 * lui (`__left` / `__center` / `__right`, grid pe trei coloane fixe) și l-am fi
 * moștenit întreg, inclusiv bug-ul de clasă de pe `__terms`. Aici sunt aceleași
 * valori aplicate structurii noastre pe zone — arată la fel, dar rămâne un singur
 * sistem de layout.
 */
.cdh-sh--ndcard {
  --sh-r: 12px;
  /* 30px sus: eticheta de poziție e absolută în zona de padding și are ~24px.
     Cu 22px se suprapunea pe butonul din dreapta. `cz-ndcard` are 1.5rem din
     același motiv. */
  --sh-pad: 30px 20px 16px;
  --sh-gap: 16px;
  --sh-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}

/**
 * Varianta „editorial".
 *
 * Reproduce tabelul scris de mână în articol (`figure.custom-table` + regulile de
 * temă pe `.entry-content table`): bandă gri deschis în cap, sentence case, celule
 * de 14px/400, linii subțiri, colț de 10px și umbră discretă. Alea sunt valorile
 * exacte din main.css, nu aproximări — un tabel din Hub pus lângă unul scris de
 * mână trebuie să se citească la fel, altfel cititorul vede două tabele „de la
 * doi autori" în aceeași secțiune.
 *
 * Ce NU preluăm: culoarea portocalie pe numele operatorului. Tema colorează orice
 * link din tabel, dar numele rămâne pe culoarea textului — regula e a noastră și e
 * mai veche decât varianta asta.
 */
.cdh-sh--editorial {
  --sh-r: 10px;
  --sh-shadow: 0 1px 3px rgba(32, 53, 64, .10), 0 4px 16px rgba(32, 53, 64, .07);
  --sh-line: #DDE6EB;
  --sh-divider: #EEF1F3;
}

/* Patru clase: baza tabelului are trei și e declarată mai jos în fișier, deci la
   egalitate ar câștiga ea. Vezi comentariul de la secțiunea de tabel. */
.cdh-sh.cdh-sh--editorial .cdh-sh__table .cdh-sh__th {
  padding: 10px 14px !important;
  background: #F0F3F5 !important;
  color: var(--sh-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  /* Fără majuscule și fără spațiere: capul editorial e propoziție („Pachet de bun
     venit"), nu etichetă de interfață. */
  letter-spacing: normal;
  text-transform: none;
}

.cdh-sh.cdh-sh--editorial .cdh-sh__table .cdh-sh__td { padding: 8px 14px !important; }

/* Densitate uniformă: în tabelul editorial nimic nu e titlu. Oferta, headline-ul
   și numele coboară la 14px, iar numele păstrează doar atâta greutate cât să
   ancoreze rândul — restul rămâne text. */
.cdh-sh--editorial .cdh-sh__td .cdh-sh__offer b,
.cdh-sh--editorial .cdh-sh__td .cdh-sh__headline {
  font-size: 14px;
  font-weight: 400 !important;
}

.cdh-sh--editorial .cdh-sh__td--name .cdh-sh__name,
.cdh-sh--editorial .cdh-sh__td--name .cdh-sh__name a {
  font-size: 14px;
  font-weight: 700 !important;
}

.cdh-sh--editorial .cdh-sh__op .cdh-sh__logo { width: 46px; }
.cdh-sh--editorial .cdh-sh__td--name { min-width: 150px; }
.cdh-sh--editorial .cdh-sh__td--rank { width: 40px; }

/* Butonul se strânge la dimensiunea rândului: un buton de 38px într-un rând de
   8px padding îl umflă la dublu. Cine vrea linkul portocalii îl are din
   `cta_style`, exact ca în tabelul scris de mână. */
.cdh-sh--editorial .cdh-sh__td--cta { width: 140px; }
.cdh-sh--editorial .cdh-sh__td--cta .cdh-sh__cta,
.cdh-sh--editorial .cdh-sh__td--cta .cdh-sh__review {
  min-height: 32px;
  font-size: 13px;
}

/**
 * Paleta cardului ND, preluată integral.
 *
 * `cz-cards-nodeposit` are propriul set de tokeni (gri Tailwind: #111827, #374151,
 * #6B7280, #9CA3AF, #E5E7EB, #D1D5DB), diferit de paleta blocului (albastru-verzui:
 * #203540, #59737F, #DDE6EB). Diferența e mică pe fiecare culoare și enormă pe
 * card întreg: două carduri unul sub altul se văd imediat ca „de la doi autori".
 * Valorile de aici sunt cele măsurate pe cardul real, nu aproximări.
 */
.cdh-sh--ndcard {
  --sh-ink: #111827;
  --sh-ink-2: #374151;
  --sh-mut: #6B7280;
  --sh-mut-2: #9CA3AF;
  --sh-line: #E5E7EB;
  --sh-line-strong: #D1D5DB;
  --sh-divider: rgba(0, 0, 0, .08);
  --sh-soft: #F5F6F8;
  --sh-pill-bg: #EEF1F5;
  --sh-pill-tx: #374151;
  --sh-orange: #F06800;
  --sh-green: #00B34A;
  --sh-r: 12px;
  --sh-r-el: 8px;
  --sh-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  /* `.cz-cards-nodeposit` are `max-width: 860px`. Îl păstrăm, ca un bloc din Hub pus
     în aceeași coloană cu cardurile existente să se alinieze cu ele — altfel se vede
     imediat că sunt două module diferite. */
  max-width: 860px;
}

.cdh-sh--ndcard .cdh-sh__row {
  position: relative;
  overflow: hidden;
  /* 24px sus: insigna de poziție atârnă din margine și are ~24px. 16px jos: acolo
     stă bara „Detalii complete", care își adaugă propriul spațiu. */
  padding: 24px 20px 16px;
  min-height: 160px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  background: linear-gradient(160deg, var(--sh-bg) 0%, var(--sh-bg) 70%, rgba(0, 179, 74, .024) 100%);
  box-shadow: var(--sh-shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Banda de sus: portocaliu → verde, exact ca `.cz-ndcard::before`. */
.cdh-sh--ndcard .cdh-sh__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sh-orange) 0%, var(--sh-green) 100%);
  border-radius: var(--sh-r) var(--sh-r) 0 0;
}

.cdh-sh--ndcard .cdh-sh__row:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  border-color: var(--sh-line-strong);
  transform: translateY(-3px);
}

/**
 * Scheletul cardului ND: logo sus-stânga, numele și datele lui DEDESUBT, oferta și
 * descrierea la mijloc, butoanele în dreapta.
 *
 * Diferența față de cardul implicit al blocului, unde numele stă în dreapta
 * logo-ului: acolo coloana din stânga e doar o imagine, aici e o fișă de operator
 * (logo, nume, notă, licență) care se citește ca un bloc. De asta `lead` și `id`
 * ocupă două rânduri în prima coloană, iar `main` și `act` le traversează.
 */
/* Trei clase: grila implicită a cardului („lead id act") are două și e declarată
   mai jos în fișier, deci la egalitate ar câștiga ea. */
@container shrow (min-width: 560px) {
  .cdh-sh.cdh-sh--ndcard .cdh-sh__row {
    /**
     * 124px = lățimea măsurată a coloanei din stânga pe cardul original.
     *
     * Fixă, nu `auto`: cu `auto`, un rând de marcaje („RECOMANDAT NOU") lățea
     * coloana la 160px+ și împingea titlul spre dreapta, lăsând un gol lângă un logo
     * de 100px. Fixă, marcajele se rup pe rândul următor și titlul rămâne lipit de
     * fișa operatorului, ca la original. Col-gap 20px, iar rândul de 5.6px e
     * distanța reală logo→nume: pe cardul original sunt în același element, la noi
     * sunt două zone, deci distanța trece în `row-gap`.
     */
    grid-template-columns: 124px 1fr auto;
    grid-template-areas:
      "lead main act"
      "id   main act"
      "data data data"
      "end  end  end";
    align-items: start;
    column-gap: 20px;
    row-gap: 5.6px;
  }

  /* Coloana din stânga e ancorată sus (`margin-bottom: auto` la original), iar
     conținutul și butoanele se centrează pe verticală (`align-items: center`). */
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--main,
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--act { align-self: center; }

  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--lead {
    grid-area: lead;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 100px;
  }

  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--id {
    grid-area: id;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4px;
  }

  /* Faptele și bara de detalii își recuperează distanța de 16px a cardului, pe care
     `row-gap: 5.6px` le-a luat-o. */
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--data { margin-top: 10px; }
}

/**
 * Pe îngust, cardul ND se așază ca originalul: logo ȘI fișa operatorului pe același
 * rând, restul pe toată lățimea, butoanele unul lângă altul.
 *
 * Stiva pe o singură coloană dădea logo pe un rând, numele pe altul, nota pe altul —
 * jumătate de ecran per card înainte de a ajunge la ofertă. Valorile sunt cele din
 * `@media (max-width: 767px)` al cardului original: gap 12px, padding 18.4/13.6/10.4,
 * logo 86px cu raport 100/60, butoane pe rând, nota T&C pe toată lățimea, la stânga.
 *
 * `min-height: 320px` din original NU se preia: pe carduri cu puțin conținut e spațiu
 * gol impus, exact ce deranja.
 */
@container shrow (max-width: 559px) {
  .cdh-sh.cdh-sh--ndcard .cdh-sh__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "lead id"
      "main main"
      "data data"
      "act  act"
      "end  end";
    align-items: start;
    column-gap: 12px;
    row-gap: 12px;
    padding: 18.4px 13.6px 10.4px;
  }

  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--lead { grid-area: lead; }
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--id { grid-area: id; align-self: center; }
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--main { grid-area: main; }
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--data { grid-area: data; margin-top: 0; }
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--end { grid-area: end; }

  .cdh-sh.cdh-sh--ndcard .cdh-sh__logo {
    width: 86px;
    height: auto;
    aspect-ratio: 100 / 60;
  }

  /* Butoanele împart rândul; nota legală trece dedesubt, pe toată lățimea. */
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--act {
    grid-area: act;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 0;
  }

  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--act .cdh-sh__cta,
  .cdh-sh.cdh-sh--ndcard .cdh-sh__z--act .cdh-sh__review {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .cdh-sh.cdh-sh--ndcard .cdh-sh__fine {
    flex-basis: 100%;
    text-align: left;
  }

  .cdh-sh.cdh-sh--ndcard .cdh-sh__rank { right: 12px; }
}

/* Poziția: etichetă lipită sub marginea de sus, în dreapta. */
.cdh-sh--ndcard .cdh-sh__z--lead { position: static; }

/* 100×60 cu `contain` și colț de 8px — dimensiunea fixă din original. */
.cdh-sh--ndcard .cdh-sh__logo {
  width: 100px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
}

.cdh-sh--ndcard .cdh-sh__name,
.cdh-sh--ndcard .cdh-sh__name a { font-size: 15.2px; line-height: 1.3; }

/* Nota utilizatorilor: 11px/700 pe stea, 11.5px/500 pe numărul de voturi. */
.cdh-sh--ndcard .cdh-sh__urate { font-size: 11px; font-weight: 700; color: var(--sh-mut); gap: 2px; }
.cdh-sh--ndcard .cdh-sh__urate span { font-size: 11.5px; font-weight: 500; color: var(--sh-mut); }

.cdh-sh--ndcard .cdh-sh__lic {
  gap: 4px;
  margin-top: 2px;
  color: var(--sh-mut);
  font-size: 11.5px;
  font-weight: 600;
  /* Fără line-height explicit, rândul moștenea 1.5 de pe bloc și ieșea 26px în loc
     de 16px — 10px de aer invizibil în fișa operatorului. */
  line-height: 1.4;
}

.cdh-sh--ndcard .cdh-sh__lic b { font-weight: 600; }
.cdh-sh--ndcard .cdh-sh__onjn { width: 16px; height: 16px; border-radius: 50%; }

/**
 * „Verificat" ca la original: text discret cu bifă albastră, nu text verde.
 *
 * Două clase, fiindcă verdele e declarat mai jos în fișier. Bifa e imagine de
 * fundal, nu SVG în markup: apare pe fiecare card, iar un `<svg>` repetat de 10 ori
 * e greutate degeaba când nu poartă nicio informație.
 */
.cdh-sh .cdh-sh--ndcard .cdh-sh__verif,
.cdh-sh--ndcard .cdh-sh__z--main .cdh-sh__verif,
.cdh-sh--ndcard .cdh-sh__verif {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6.4px;
  color: var(--sh-ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.cdh-sh--ndcard .cdh-sh__verif::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z' stroke='%231D9BF0' stroke-width='1.8'/%3E%3Cpath d='M9 12l2 2 4-4' stroke='%231D9BF0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cdh-sh--ndcard .cdh-sh__summary,
.cdh-sh--ndcard .cdh-sh__desc {
  color: var(--sh-ink-2);
  font-size: 13.1px;
  line-height: 1.6;
}

/* Butoanele: 44px, 13.1px/700, contur de 2px. Verdele e #008C3A, nu verdele
   blocului — cardul original are propria nuanță de acțiune. */
.cdh-sh--ndcard .cdh-sh__z--act { gap: 6.4px; min-width: 175px; }

.cdh-sh--ndcard .cdh-sh__cta:not(.cdh-sh__cta--plain),
.cdh-sh--ndcard .cdh-sh__review:not(.cdh-sh__review--plain) {
  min-height: 44px;
  padding: 0 19.2px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 13.1px;
  font-weight: 700;
}

.cdh-sh--ndcard .cdh-sh__fine {
  margin-top: 2px;
  color: var(--sh-mut-2);
  font-size: 10.4px;
  line-height: 1;
  text-align: center;
}

/**
 * Oferta ca etichetă cu accent pe stânga — `.cz-ndcard__bon`.
 *
 * În cardul real oferta e o casetă, nu un titlu liber: o casetă se vede ca „asta
 * primești", iar restul textului rămâne explicație. Aceleași valori (fundal
 * #FFF8F4, contur de 1px, accent de 2px la stânga, radius 4px).
 */
.cdh-sh--ndcard .cdh-sh__z--main > .cdh-sh__offer,
.cdh-sh--ndcard .cdh-sh__z--main > .cdh-sh__headline,
.cdh-sh--ndcard .cdh-sh__z--main > .cdh-sh__sz > .cdh-sh__offer,
.cdh-sh--ndcard .cdh-sh__z--main > .cdh-sh__sz > .cdh-sh__headline {
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--sh-line);
  border-left: 2px solid var(--sh-orange);
  border-radius: 4px;
  background: #FFF8F4;
  color: var(--sh-ink);
  font-size: 14.1px;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: normal;
}

.cdh-sh--ndcard .cdh-sh__z--main > .cdh-sh__offer b { font-size: 14.1px; line-height: 1.4; }
.cdh-sh--ndcard .cdh-sh__z--main > .cdh-sh__offer span { font-size: 12px; }

.cdh-sh--ndcard.cdh-sh--dark .cdh-sh__z--main > .cdh-sh__offer,
.cdh-sh--ndcard.cdh-sh--dark .cdh-sh__z--main > .cdh-sh__headline {
  background: rgba(255, 140, 0, .07);
  border-color: rgba(255, 140, 0, .35);
}

/**
 * Faptele de pe card: grilă cu linii subțiri, nu casete gri.
 *
 * Se aplică pe TOATE cardurile, nu doar pe varianta ND. Două motive:
 *
 * 1. Pe un rând continuu — „DEPUNERE MIN. 30 RON VERIFICARE CONT sub 5 minute
 *    PLĂȚI … BONUSURI 3 oferte active" — nu se vede unde se termină o informație
 *    și începe următoarea; ochiul citește o propoziție, nu patru date.
 * 2. Varianta cu celule gri (`.cdh-sh__facts` cu fundal) arăta ca un tabel lipit
 *    sub card: o placă gri pe toată lățimea, despărțită de card. Liniile de 1px
 *    fac aceeași separare fără să adauge o suprafață nouă.
 *
 * Structura e cea din `.cz-ndcard__dl`: etichetă mică deasupra valorii groase,
 * două coloane pe lat, una pe îngust.
 */
.cdh-sh--cards .cdh-sh__z--data,
.cdh-sh--grid .cdh-sh__z--data,
.cdh-sh--spotlight .cdh-sh__z--data {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--sh-divider);
}

.cdh-sh--cards .cdh-sh__z--data > .cdh-sh__datum,
.cdh-sh--grid .cdh-sh__z--data > .cdh-sh__datum,
.cdh-sh--spotlight .cdh-sh__z--data > .cdh-sh__datum,
.cdh-sh--cards .cdh-sh__z--data > .cdh-sh__sz > .cdh-sh__datum,
.cdh-sh--grid .cdh-sh__z--data > .cdh-sh__sz > .cdh-sh__datum,
.cdh-sh--spotlight .cdh-sh__z--data > .cdh-sh__sz > .cdh-sh__datum {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 0;
  border-bottom: 1px solid var(--sh-divider);
}

@container shrow (min-width: 560px) {
  .cdh-sh--cards .cdh-sh__z--data,
  .cdh-sh--grid .cdh-sh__z--data,
  .cdh-sh--spotlight .cdh-sh__z--data {
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
  }
}

/* Pe rând îngust — un card de grilă are ~170px — două coloane cu 36px de gol între
   ele nu încap, iar `gap` nu se poate strânge: cardul ieșea din bloc. */
@container shrow (max-width: 559px) {
  .cdh-sh--cards .cdh-sh__facts,
  .cdh-sh--grid .cdh-sh__facts,
  .cdh-sh--spotlight .cdh-sh__facts { grid-template-columns: 1fr; }
}

/**
 * Sub 340px de rând, textul are voie să curgă.
 *
 * O pastilă cu `white-space: nowrap` are lățimea minimă egală cu tot textul din
 * ea, deci nu se poate strânge: „100% până la 8.888 RON + 888 rotiri" cerea 228px
 * într-un card de grilă de 174px și ieșea în afara blocului. Pe lat nowrap-ul e
 * corect — o pastilă ruptă în două rânduri arată ca o eroare —, dar sub lățimea
 * asta alternativa e depășirea.
 */
@container shrow (max-width: 340px) {
  /* Două clase: `nowrap` e declarat mai jos în fișier, la definiția pastilei, deci
     la specificitate egală ar câștiga el — o interogare de container nu adaugă
     specificitate. */
  .cdh-sh .cdh-sh__pill,
  .cdh-sh .cdh-sh__badge,
  .cdh-sh .cdh-sh__chip { white-space: normal; }
  .cdh-sh .cdh-sh__offer b,
  .cdh-sh .cdh-sh__headline,
  .cdh-sh .cdh-sh__name { overflow-wrap: anywhere; }
}

/* Grila compusă (câmpul `facts`) primește același tratament: fără plăci gri, fără
   contur propriu — altfel pe același card ar fi două limbaje pentru aceeași idee.
   `grid-column: 1 / -1` fiindcă are deja două coloane proprii: fără el s-ar
   îngrămădi în prima coloană a zonei și ar lăsa jumătate de card gol. */
.cdh-sh--cards .cdh-sh__facts,
.cdh-sh--grid .cdh-sh__facts,
.cdh-sh--spotlight .cdh-sh__facts {
  grid-column: 1 / -1;
  gap: 0 36px;
  border-radius: 0;
  background: none;
}

.cdh-sh--cards .cdh-sh__fact,
.cdh-sh--grid .cdh-sh__fact,
.cdh-sh--spotlight .cdh-sh__fact {
  padding: 5px 0;
  border-bottom: 1px solid var(--sh-divider);
  background: none;
}

/* Valoarea e ce se caută, deci primește greutatea; eticheta rămâne discretă. */
.cdh-sh--cards .cdh-sh__z--data .cdh-sh__k,
.cdh-sh--grid .cdh-sh__z--data .cdh-sh__k,
.cdh-sh--spotlight .cdh-sh__z--data .cdh-sh__k,
.cdh-sh--cards .cdh-sh__fact .cdh-sh__k,
.cdh-sh--grid .cdh-sh__fact .cdh-sh__k,
.cdh-sh--spotlight .cdh-sh__fact .cdh-sh__k { font-size: 10.5px; }

.cdh-sh--cards .cdh-sh__z--data .cdh-sh__v,
.cdh-sh--grid .cdh-sh__z--data .cdh-sh__v,
.cdh-sh--spotlight .cdh-sh__z--data .cdh-sh__v,
.cdh-sh--cards .cdh-sh__fact .cdh-sh__v,
.cdh-sh--grid .cdh-sh__fact .cdh-sh__v,
.cdh-sh--spotlight .cdh-sh__fact .cdh-sh__v { font-size: 13.5px; font-weight: 700; }

/* Nota de sub butoane. */
.cdh-sh__fine {
  display: block;
  width: 100%;
  color: var(--sh-mut-2);
  font-size: 11px;
  line-height: 1.4;
}

/**
 * Punctele forte: bifă în cerc verde plin, 16px, ca `.cz-ndcard__checks li`.
 *
 * Bifa implicită a blocului e un „v" desenat din două borduri — corectă, dar altă
 * semnătură. Aici cercul plin e parte din identitatea cardului.
 */
.cdh-sh--ndcard .cdh-sh__hl { gap: 4.8px; }

.cdh-sh--ndcard .cdh-sh__hl li {
  padding-left: 21px;
  color: var(--sh-ink-2);
  font-size: 14.4px;
  font-weight: 500;
  line-height: 1.4;
}

.cdh-sh--ndcard .cdh-sh__hl li::before {
  top: .18em;
  width: 16px;
  height: 16px;
  border: 0;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2300B34A'/%3E%3Cpath d='M5.5 8L7 9.5 10.5 6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* „Detalii complete" ca bară pe toată lățimea, sub card: `grid-column: 1 / -1`,
   linie de 1px la 8% negru, 4px deasupra. */
.cdh-sh--ndcard .cdh-sh__z--end {
  margin-top: 4px;
  border-top: 1px solid var(--sh-divider);
}

.cdh-sh--ndcard .cdh-sh__terms > summary {
  justify-content: center;
  gap: 7px;
  padding-top: 9px;
  padding-bottom: 2px;
  color: #203540;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  opacity: .85;
}

/**
 * Insigna de poziție atârnă din marginea de sus, în dreapta.
 *
 * `line-height` explicit: insigna trebuie să se termine DEASUPRA conținutului,
 * altfel cade peste primul buton din coloana de acțiune. Cardul are 24px de padding
 * sus, deci insigna are voie să ocupe cel mult atât; cu line-height moștenit (1.5)
 * ieșea 33px și exact asta se întâmpla. `right: 16px` = 1rem, ca la original.
 */
.cdh-sh--ndcard .cdh-sh__rank {
  position: absolute;
  top: 0;
  right: 16px;
  min-width: 0;
  height: auto;
  padding: 3.2px 9.6px 4px;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(135deg, #F06800, #FF8C00);
  box-shadow: 0 2px 6px rgba(240, 104, 0, .3);
  color: #fff;
  font-size: 12.8px;
  font-weight: 800;
  line-height: 1.3;
  z-index: 2;
}

/* Insigna originală scrie „#1", nu „1". Diezul e prezentare, nu dată — de asta e
   pus din CSS și nu în markup, unde ar fi ajuns și în JSON-LD. */
.cdh-sh--ndcard .cdh-sh__rank::before { content: "#"; }

/**
 * Butonul secundar, exact ca `.cz-ndcard__btn--ghost`: contur de 2px, text
 * discret, aceeași înălțime de 44px ca butonul principal. Cel implicit al blocului
 * are contur de 1px și 38px — lângă un CTA de 44px se citea ca un buton „de altă
 * clasă", nu ca alternativa lui.
 */
.cdh-sh--ndcard .cdh-sh__review:not(.cdh-sh__review--plain) {
  border-color: var(--sh-line);
  background: transparent;
  color: var(--sh-mut);
}

.cdh-sh--ndcard .cdh-sh__review:not(.cdh-sh__review--plain):hover {
  border-color: var(--sh-line-strong);
  background: var(--sh-soft);
  color: var(--sh-ink-2);
}

.cdh-sh--ndcard .cdh-sh__rank--m1,
.cdh-sh--ndcard .cdh-sh__rank--m2,
.cdh-sh--ndcard .cdh-sh__rank--m3 {
  border: 0;
  background: linear-gradient(135deg, #F06800, #FF8C00);
  color: #fff;
}

/* Pastila de ofertă cu accent pe stânga, ca `.cz-ndcard__bon`: 14.1px/700, colț de
   4px, fundal #FFF8F4, contur de 1px și accent de 2px portocaliu la stânga. */
.cdh-sh--ndcard .cdh-sh__pill {
  padding: 6px 12px 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--sh-line);
  border-left: 2px solid var(--sh-orange);
  background: #FFF8F4;
  color: var(--sh-ink);
  font-size: 14.1px;
  font-weight: 700;
}

.cdh-sh--ndcard .cdh-sh__pill--fast { border-left-color: var(--sh-green); background: var(--sh-green-050); }
.cdh-sh--ndcard .cdh-sh__pill--slow { border-left-color: #E5941F; background: var(--sh-amber-bg); }

/* CTA-ul verde al cardului ND. */
.cdh-sh--ndcard .cdh-sh__cta:not(.cdh-sh__cta--plain),
.cdh-sh--ndcard .cdh-sh__cta:not(.cdh-sh__cta--plain):visited {
  border: 2px solid #008C3A;
  background: #008C3A;
}

.cdh-sh--ndcard .cdh-sh__cta:not(.cdh-sh__cta--plain):hover {
  border-color: #007A32;
  background: #007A32;
}

.cdh-sh--ndcard .cdh-sh__cta--warn { border-width: 2px; }

/* Codul de bonus, verde punctat. */
.cdh-sh--ndcard .cdh-sh__copy {
  border: 1px dashed #86EFAC;
  border-radius: 4px;
  background: #F0FDF4;
  color: #166534;
}

.cdh-sh--ndcard .cdh-sh__copy:hover { border-color: #22C55E; background: #DCFCE7; }
.cdh-sh--ndcard .cdh-sh__copy-l { color: #15803D; }

.cdh-sh--ndcard.cdh-sh--dark .cdh-sh__row {
  background: linear-gradient(160deg, var(--sh-bg) 0%, var(--sh-bg) 70%, rgba(0, 179, 74, .06) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cdh-sh--ndcard .cdh-sh__row:hover { transform: none; }
}

/* Suprafață închisă — aceleași valori ca heroul de păcănele, ca un bloc pus
   într-o zonă dark să nu pară străin. */
.cdh-sh--dark {
  --sh-ink: #FFFFFF;
  --sh-ink-2: #E8F0EF;
  --sh-mut: #B7CBC8;
  --sh-mut-2: #7E9996;
  --sh-bg: #234442;
  --sh-soft: rgba(255, 255, 255, .05);
  --sh-line: rgba(255, 255, 255, .14);
  --sh-line-strong: rgba(255, 255, 255, .28);
  --sh-divider: rgba(255, 255, 255, .08);
  --sh-green-050: rgba(9, 174, 78, .16);
  --sh-orange-050: rgba(243, 102, 32, .16);
  --sh-amber-bg: rgba(245, 178, 26, .18);
  --sh-amber-tx: #FDD279;
  --sh-pill-bg: rgba(255, 255, 255, .10);
  --sh-pill-tx: #D8E6E4;
  --sh-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

/* ============ cap ============ */

.cdh-sh__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sh-ink);
}

.cdh-sh__intro {
  margin: 0 0 14px;
  color: var(--sh-mut);
  font-size: 14px;
  line-height: 1.6;
}

.cdh-sh__bar {
  display: flex;
  align-items: center;
  gap: var(--sh-gap);
  flex-wrap: wrap;
  margin-bottom: var(--sh-gap);
}

.cdh-sh__search { flex: 1 1 200px; min-width: 160px; }

.cdh-sh__search-in {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--sh-line-strong);
  border-radius: var(--sh-r-el);
  background: var(--sh-bg);
  color: var(--sh-ink);
  font: inherit;
  font-size: 14px;
}

.cdh-sh__search-in:focus {
  border-color: var(--sh-orange);
  box-shadow: 0 0 0 3px rgba(243, 102, 32, .15);
  outline: none;
}

.cdh-sh__count { color: var(--sh-mut); font-size: 13px; }
.cdh-sh__count b { color: var(--sh-ink); font-weight: 700; }

/* ============ listă ============ */

.cdh-sh__rows {
  display: grid;
  grid-template-columns: repeat(var(--sh-cols-m), minmax(0, 1fr));
  gap: var(--sh-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `<li>` = containerul de interogare. Un element nu poate reacționa la propriul
   `@container`, deci grila trebuie să fie un descendent — altfel zonele primesc
   `grid-area` fără `grid-template-areas` și se suprapun toate. */
.cdh-sh__item {
  container-type: inline-size;
  container-name: shrow;
  display: block;
  min-width: 0;
  list-style: none;
}

.cdh-sh__item::marker { content: none; }

/**
 * Culoarea se declară EXPLICIT, nu se moștenește.
 *
 * Tema colorează elementele de listă (un `<li>` gol pus în bloc iese #26404C,
 * deși părintele e alb) — deci pe varianta închisă textul rămânea închis pe
 * fundal închis. Nu ne batem pe specificitate cu tema: punem culoarea pe
 * elementele noastre și lăsăm restul să moștenească de la ele.
 */
.cdh-sh__item,
.cdh-sh__row { color: var(--sh-ink); }

.cdh-sh__row {
  display: grid;
  /* Plasă de siguranță: implicit, o grilă e cel puțin cât conținutul ei minim,
     deci un card cu o zonă lată iese din coloană în loc să se strângă. `<li>`-ul
     are deja regula asta; fără ea aici, tot ce încape greu se revarsă în afara
     blocului, iar pe telefon peste marginea ecranului. */
  min-width: 0;
  gap: var(--sh-gap);
  padding: var(--sh-pad);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  background: var(--sh-bg);
  box-shadow: var(--sh-shadow);
}

.cdh-sh__offer b,
.cdh-sh__fact,
.cdh-sh__facts,
.cdh-sh__z { color: inherit; }

/* Operator pe lista neagră: bandă roșie în stânga, fără CTA de afiliere.
   Semnalul e vizual, nu doar textual — recenzia rămâne utilă, oferta nu. */
.cdh-sh__row--bl { border-left: 3px solid var(--sh-red); }

/**
 * Colapsarea rândurilor peste `visible_count`.
 *
 * Se aplică DOAR când JS-ul rulează (clasa `cdh-js`, pusă de frontend înainte de
 * primul paint). Fără JS — și pentru orice crawler care nu execută JS — lista e
 * completă în HTML și vizibilă. `casino-licente` ascunde rândurile pe server,
 * deci un crawler fără JS nu le vede niciodată; `nd-cards` le randează vizibile
 * și le colapsează în JS, ceea ce produce salt de layout. Varianta asta nu are
 * niciunul din cele două defecte.
 */
.cdh-js .cdh-sh--folds .cdh-sh__row--fold { display: none; }
.cdh-sh--folds.is-open .cdh-sh__row--fold { display: block; }
.cdh-js .cdh-sh--folds tr.cdh-sh__row--fold { display: none; }
.cdh-sh--folds.is-open tr.cdh-sh__row--fold { display: table-row; }

/* Ascunderea din căutare — clasă, nu atribut, ca butonul de load-more să poată
   decide independent. */
.cdh-sh__item.is-out,
.cdh-sh__tr.is-out { display: none !important; }

/* ============ zone ============ */

.cdh-sh__z {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cdh-sh__z--id,
.cdh-sh__z--main { flex-direction: column; align-items: flex-start; gap: 5px; }
.cdh-sh__z--act { gap: 10px; }
.cdh-sh__z--end { display: block; }

/* ============ câmpuri ============ */

.cdh-sh__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1.5px solid var(--sh-line-strong);
  border-radius: 999px;
  background: var(--sh-bg);
  color: var(--sh-mut);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cdh-sh__rank--m1 { border-color: #E9B10A; background: #FDF6DE; color: #9A7100; }
.cdh-sh__rank--m2 { border-color: #C4CED6; background: #F3F6F8; color: #5B6C78; }
.cdh-sh__rank--m3 { border-color: #DDA06A; background: #FAF0E6; color: #7E4E22; }

.cdh-sh__logo {
  display: block;
  flex: 0 0 auto;
  width: 92px;
  border-radius: var(--sh-r-sm);
}

.cdh-sh__logo img {
  display: block;
  width: 100%;
  height: auto;
  /* Rezervă spațiul înainte de încărcare: fără asta, fiecare logo împinge
     cardul la sosire. */
  aspect-ratio: 100 / 60;
  object-fit: contain;
  border-radius: var(--sh-r-sm);
}

.cdh-sh__name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

/**
 * Numele operatorului: culoarea textului, nu a linkului.
 *
 * Era pe navy (#172E52), care citește albăstrui și deci ca un link. Acum e
 * culoarea de text a blocului, în toate contextele — inclusiv pe fundal închis.
 *
 * `!important` pe culoare ȘI pe greutate, fiindcă tema stilează linkurile cu
 * specificitate mai mare: `font-weight: 700` de pe `.cdh-sh__name` ieșea 600 pe
 * `<a>`-ul din interior. `casino-table` are exact același `!important` pe
 * `.cdh-tc__name`, din exact același motiv.
 */
.cdh-sh__name,
.cdh-sh__name a,
.cdh-sh__name a:visited {
  color: var(--sh-ink) !important;
  font-weight: 700 !important;
  text-decoration: none;
}

/* Hover-ul rămâne singurul semnal că numele e clicabil. */
.cdh-sh__name a:hover { color: var(--sh-orange) !important; }

/**
 * Numele metodei de plată, când e link către pagina ei.
 *
 * Aceeași regulă ca la numele operatorului, din același motiv: tema colorează
 * portocaliu și subliniază orice link din `.entry-content`, iar o coloană
 * întreagă de nume portocalii subliniate țipă mai tare decât datele din tabel și
 * nu se potrivește cu numele operatorului de lângă, care rămâne pe culoarea
 * textului. `!important` fiindcă selectorul temei are specificitate mai mare.
 */
.cdh-sh__payname a,
.cdh-sh__payname a:visited {
  color: var(--sh-ink) !important;
  text-decoration: none !important;
}

.cdh-sh__payname a:hover {
  color: var(--sh-orange) !important;
  text-decoration: underline !important;
}

.cdh-sh__badges { display: flex; flex-wrap: wrap; gap: 4px; }

.cdh-sh__badge {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--sh-pill-bg);
  color: var(--sh-pill-tx);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cdh-sh__badge--rec { background: #FFF1EB; color: #B23A16; }
.cdh-sh__badge--nou { background: #E6F1FB; color: #0C447C; }
.cdh-sh__badge--excl { background: #EEEDFE; color: #3C3489; }
.cdh-sh__badge--custom { background: #FAEEDA; color: #633806; }
.cdh-sh__badge--bl { background: #FDECE8; color: #B02209; }

/* Scorul — același inel conic ca în tabelul comparativ, aceleași praguri. */
.cdh-sh__score {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(var(--sh-ring) calc(var(--sh-pct) * 1%), #EAEEF1 0);
  --sh-ring: var(--sh-blue);
  --sh-pct: 0;
}

.cdh-sh__score::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--sh-bg);
}

.cdh-sh__score b,
.cdh-sh__score span {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.cdh-sh__score b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cdh-sh__score span { font-size: 6.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-mut-2); }

.cdh-sh__score--exc { --sh-ring: var(--sh-green); }
.cdh-sh__score--exc b { color: var(--sh-green-deep); }
.cdh-sh__score--good { --sh-ring: var(--sh-blue); }
.cdh-sh__score--good b { color: #1E63C4; }
.cdh-sh__score--ok { --sh-ring: #E5941F; }
.cdh-sh__score--ok b { color: #B5720C; }
/**
 * „Scor în evaluare" — refolosim markup-ul din `casino-table`
 * (`score_pending_svg()`), ca semnul să fie identic pe tot site-ul. Dar CSS-ul
 * lui trăiește în `casino-table-block.css`, care NU e un modul partajat (doar
 * `score-popover.css` e). Fără regulile de mai jos, eprubeta nu are poziționare
 * și se suprapune pe butonul de acțiune. Le declarăm aici, scoped pe bloc.
 */
.cdh-sh__score--pending { width: auto; height: auto; background: none; }
.cdh-sh__score--pending::before { content: none; }

.cdh-sh .cdh-tc__pending-ico {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}

.cdh-sh .cdh-tc__pending-ico > svg { display: block; width: 44px; height: 44px; }

.cdh-sh .cdh-tc__pending-tube {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdh-sh .cdh-tc__pending-tube svg { display: block; }

.cdh-sh__verif { color: var(--sh-green-deep); font-size: 12px; font-weight: 600; }
.cdh-sh--dark .cdh-sh__verif { color: #5FE39A; }

/**
 * Nota utilizatorilor.
 *
 * Aceeași formă ca în `nd-cards`: o stea mică, media, numărul de voturi. Nu
 * inelul de progres — ăla e nota editorială, iar două inele identice pe același
 * card ar sugera că sunt același lucru.
 */
.cdh-sh__urate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sh-mut);
  font-size: 12px;
}

.cdh-sh__urate-b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sh-ink-2);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Steaua: SVG inline ca data-URI, pe aceeași formă ca widgetul de rating al
   site-ului. Culoarea e aurul din temă (#F7CE74), nu grri ca la nd-cards —
   o notă dată de oameni merită să se vadă. */
.cdh-sh__urate-b::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F7CE74'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cdh-sh__urate-n { font-size: 11.5px; font-weight: 500; }

/* Licența */
.cdh-sh__lic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sh-mut);
  font-size: 12px;
}

.cdh-sh__lic b { font-weight: 600; color: var(--sh-ink-2); }

/**
 * Sigla ONJN.
 *
 * `border-radius: 50%` fiindcă fișierul are fundal pătrat — aceeași corecție ca
 * la `.cz-ndcard__onjn` din temă. Dimensiunea e fixă în HTML (18×18) ca să nu
 * producă salt de layout.
 */
.cdh-sh__onjn {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  vertical-align: middle;
}

.cdh-sh__lic--logo { gap: 0; }
.cdh-sh__lic--logo .cdh-sh__onjn { width: 26px; height: 26px; }

/* Siglă + număr, fără text: numărul rămâne singurul conținut, deci merită cifre de
   lățime egală — altfel două licențe una sub alta par de lungimi diferite. */
.cdh-sh__lic--num b { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Oferta principală */
.cdh-sh__offer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* `!important` pe greutate: tema are `b, strong { font-weight: 600 !important }`
   în main.css, deci fără el oferta se subțiază pe site, dar nu în editor sau pe
   o pagină de probă — exact felul de diferență care se descoperă târziu.
   `casino-table` scapă de asta fiindcă pune bonusul într-un `<span>` cu clasă. */
.cdh-sh__offer b { font-size: 17px; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.2; }
.cdh-sh__offer span { color: var(--sh-mut); font-size: 13px; }

/**
 * Oferta pe tip anume (coloane separate: „Bun venit", „Fără depunere"…).
 *
 * Mai mică decât oferta principală: când sunt trei una lângă alta, la 17px fiecare
 * niciuna nu mai e principală. Cea fără depunere primește accent verde — e
 * argumentul cel mai puternic dintr-o listă și merită să sară în ochi.
 */
.cdh-sh--list .cdh-sh__offer b { font-size: 15px; }

.cdh-sh__offer--nd b { color: var(--sh-green-deep); }
.cdh-sh--dark .cdh-sh__offer--nd b { color: #5FE39A; }

.cdh-sh__headline {
  margin: 0;
  font-size: 18px;
  /* Ca la ofertă: tema impune 600 cu `!important` pe elementele de titlu, deci
     fără el headline-ul ar arăta altfel pe site decât în probe. */
  font-weight: 800 !important;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.cdh-sh__summary,
.cdh-sh__desc {
  margin: 0;
  color: var(--sh-mut);
  font-size: 14px;
  line-height: 1.6;
}

/**
 * Dimensiune de text pe câmp (`field_sizes`: mic / normal / mediu / mare).
 *
 * `display: contents` — învelișul nu generează cutie, deci nu schimbă nici grila,
 * nici flexul, nici `gap`-ul; moștenirea de `font-size` merge însă pe arborele
 * DOM, nu pe cel de cutii, așa că ajunge la copii. Un `<span>` normal ar fi rupt
 * exact layouturile pe care blocul le construiește cu grid-area.
 *
 * Selectorii au `.cdh-sh` în față ca să bată, fără să depind de ordine, regulile
 * de layout care fixează dimensiunea (tabel uniform, spotlight, listă, mobil) —
 * toate au două clase, deci trei clase le întrec sigur.
 */
.cdh-sh__sz { display: contents; }
.cdh-sh .cdh-sh__sz--s { font-size: 13px; }
.cdh-sh .cdh-sh__sz--m { font-size: 16px; }
.cdh-sh .cdh-sh__sz--l { font-size: 19px; }

/* Elementele care își fixează singure dimensiunea trebuie să o lase moștenită
   când câmpul are o dimensiune cerută. Etichetele (`__k`) NU intră: ele rămân
   mici indiferent de valoare, altfel un „mare" ar îngroșa și eticheta. */
.cdh-sh [class*="cdh-sh__sz--"] :is(
  .cdh-sh__offer b,
  .cdh-sh__headline,
  .cdh-sh__name,
  .cdh-sh__name a,
  .cdh-sh__v,
  .cdh-sh__summary,
  .cdh-sh__desc,
  .cdh-sh__pill
) { font-size: inherit; }

/* A doua linie a ofertei rămâne subordonată primei, la orice dimensiune. */
.cdh-sh [class*="cdh-sh__sz--"] .cdh-sh__offer span { font-size: .8em; }

/* Pastile și chips */
.cdh-sh__pills,
.cdh-sh__cats,
.cdh-sh__chips { display: flex; flex-wrap: wrap; gap: 5px; }

.cdh-sh__pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sh-pill-bg);
  color: var(--sh-pill-tx);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cdh-sh__pill--fast { background: var(--sh-green-050); color: var(--sh-green-deep); }
.cdh-sh__pill--mid { background: var(--sh-pill-bg); color: var(--sh-ink-2); }
.cdh-sh__pill--slow { background: var(--sh-amber-bg); color: var(--sh-amber-tx); }
.cdh-sh__pill--nd { background: var(--sh-orange-050); color: #B23A16; }

.cdh-sh__cat {
  padding: 2px 9px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  color: var(--sh-mut);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cdh-sh__chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sh-soft);
  color: var(--sh-ink-2);
  font-size: 12px;
  font-weight: 600;
}

/* „+3" nu e un tip de joc, e o notă despre listă: fără fundal, ca să nu se
   citească drept încă o pastilă. */
.cdh-sh__chip--more { background: none; color: var(--sh-mut); padding-left: 2px; }

.cdh-sh__type {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sh-mut);
}

.cdh-sh__type--nd { color: var(--sh-green-deep); }
.cdh-sh__type--w { color: var(--sh-navy); }
.cdh-sh--dark .cdh-sh__type--nd { color: #5FE39A; }
.cdh-sh--dark .cdh-sh__type--w { color: var(--sh-gold); }

/* Puncte forte */
.cdh-sh__hl { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }

.cdh-sh__hl li {
  position: relative;
  padding-left: 17px;
  color: var(--sh-ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.cdh-sh__hl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 10px;
  height: 6px;
  border-left: 1.8px solid var(--sh-green);
  border-bottom: 1.8px solid var(--sh-green);
  transform: rotate(-45deg);
}

/* Date */
.cdh-sh__datum { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.cdh-sh__k { color: var(--sh-mut); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.cdh-sh__v { color: var(--sh-ink); font-size: 13px; font-weight: 600; }
/* O restricție („metode excluse") nu se citește ca o informație neutră. */
.cdh-sh__v--warn { color: var(--sh-red); }


/* Grila de fapte: liniile sunt fundalul care se vede prin gap — același truc ca
   în `bonus-cards`, cu aceeași corecție pentru număr impar de celule. */
.cdh-sh__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--sh-r-el);
  background: var(--sh-line);
}

.cdh-sh__fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  background: var(--sh-soft);
}

.cdh-sh__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cdh-sh__fact .cdh-sh__datum { flex-direction: column; align-items: flex-start; gap: 1px; }

/* Nota pe criterii — aceeași descompunere ca popover-ul din tabel. */
.cdh-sh__sb {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  width: 100%;
}

.cdh-sh__sb-r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.cdh-sh__sb-r b { color: var(--sh-green-deep); font-weight: 800; font-variant-numeric: tabular-nums; }
.cdh-sh--dark .cdh-sh__sb-r b { color: #5FE39A; }

/* Motivul avertizării: pe un card de operator nerecomandat e informația
   centrală, nu un detaliu — de aceea are bandă roșie, nu forma cheie-valoare. */
.cdh-sh__warn {
  margin: 0;
  padding: 8px 11px;
  border-left: 3px solid var(--sh-red);
  border-radius: 0 var(--sh-r-sm) var(--sh-r-sm) 0;
  background: #FDECE8;
  color: #8E1B06;
  font-size: 13px;
  line-height: 1.5;
}

.cdh-sh--dark .cdh-sh__warn { background: rgba(225, 48, 17, .16); color: #FFB4A2; }

/* Cod bonus */
.cdh-sh__code { display: flex; flex-direction: column; gap: 3px; }

.cdh-sh__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1.5px dashed var(--sh-line-strong);
  border-radius: var(--sh-r-el);
  background: var(--sh-bg);
  color: var(--sh-ink);
  font: inherit;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.cdh-sh__copy b { font-size: 15px; font-weight: 800; letter-spacing: .05em; }
.cdh-sh__copy-l { color: var(--sh-mut); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cdh-sh__copy:hover { background: var(--sh-soft); }
.cdh-sh__copy.is-copied { border-color: #ABEDC7; background: var(--sh-green-050); border-style: solid; }
.cdh-sh__copy.is-copied .cdh-sh__copy-l { color: var(--sh-green-deep); }
.cdh-sh__code-more { color: var(--sh-mut); font-size: 11px; }

/* Butoane. Verde = afiliere (ieși din site), portocaliu = acțiune internă —
   aceeași convenție ca în tabelul comparativ și în cardurile de bonus. */
.cdh-sh__cta,
.cdh-sh__review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--sh-r-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background .14s ease, transform .14s ease;
}

.cdh-sh__cta,
.cdh-sh__cta:visited { background: var(--sh-green); color: #fff !important; }
.cdh-sh__cta:hover { background: var(--sh-green-deep); transform: translateY(-1px); }

.cdh-sh__cta--warn,
.cdh-sh__cta--warn:visited { background: var(--sh-bg); border: 1.5px solid var(--sh-red); color: var(--sh-red) !important; }
.cdh-sh__cta--warn:hover { background: #FDECE8; }

.cdh-sh__review,
.cdh-sh__review:visited {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--sh-line-strong);
  background: transparent;
  color: var(--sh-ink-2) !important;
  font-size: 13px;
}

.cdh-sh__review:hover { border-color: var(--sh-orange); color: var(--sh-orange) !important; }

/**
 * CTA ca link simplu în text.
 *
 * Aceleași valori ca varianta `cta_style: link` din `casino-licente`
 * (`.cdhl__cta--link`): portocaliu, subliniat, verde la hover. Ca aceeași setare
 * să arate la fel în tot ecosistemul, nu doar să se numească la fel.
 *
 * `min-height` cade la `auto`: un link în text nu trebuie să ocupe 44px, iar
 * ținta de atingere nu mai e relevantă când nu arată ca un buton.
 */
.cdh-sh__cta--plain,
.cdh-sh__cta--plain:visited,
.cdh-sh__review--plain,
.cdh-sh__review--plain:visited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sh-orange) !important;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/**
 * Zona de acțiune, când acțiunile sunt linkuri.
 *
 * Ca butoane, ele au lățime proprie și se așază previzibil. Ca text, lățimea
 * variază cu eticheta („Joacă acum" vs. „Joacă la Princess"), iar `flex-wrap`
 * rupea rândul altfel la fiecare operator — scorul ajungea când deasupra, când
 * lângă link. O coloană le aliniază identic pe toate rândurile.
 */
.cdh-sh--cta-plain .cdh-sh__z--act {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.cdh-sh--cta-plain .cdh-sh__z--act .cdh-sh__score { align-self: flex-start; }
.cdh-sh--cta-plain .cdh-sh__cta--plain,
.cdh-sh--cta-plain .cdh-sh__review--plain { white-space: nowrap; }

/* În tabel rămân pe un rând: celula are deja lățime rezervată. */
.cdh-sh--cta-plain .cdh-sh__td--cta .cdh-sh__op-meta { gap: 4px; }

/* Săgeata nu se subliniază cu textul și alunecă puțin la hover. */
.cdh-sh__arrow {
  flex: 0 0 auto;
  transition: transform .14s ease;
}

.cdh-sh__cta--plain:hover .cdh-sh__arrow,
.cdh-sh__review--plain:hover .cdh-sh__arrow { transform: translateX(2px); }

.cdh-sh__cta--plain:hover,
.cdh-sh__review--plain:hover {
  background: transparent;
  color: var(--sh-green-deep) !important;
  transform: none;
}

/* Avertizarea rămâne roșie și în varianta de link — semnalul contează mai mult
   decât consecvența cromatică. */
.cdh-sh__cta--warn.cdh-sh__cta--plain,
.cdh-sh__cta--warn.cdh-sh__cta--plain:visited { color: var(--sh-red) !important; }
.cdh-sh__cta--warn.cdh-sh__cta--plain:hover { color: #8E1B06 !important; }

.cdh-sh--dark .cdh-sh__cta--plain,
.cdh-sh--dark .cdh-sh__cta--plain:visited,
.cdh-sh--dark .cdh-sh__review--plain,
.cdh-sh--dark .cdh-sh__review--plain:visited { color: #FDD279 !important; }

.cdh-sh--dark .cdh-sh__cta--plain:hover,
.cdh-sh--dark .cdh-sh__review--plain:hover { color: #5FE39A !important; }

/* În tabel, coloana de acțiune nu mai are nevoie de lățime de buton. */
.cdh-sh__td--cta .cdh-sh__cta--plain,
.cdh-sh__td--cta .cdh-sh__review--plain { width: auto; min-height: 0; padding: 0; font-size: inherit; }

/* Acordeon T&C — `<details>` nativ, conținutul e mereu în HTML. */
.cdh-sh__terms { border-top: 1px solid var(--sh-divider); }

.cdh-sh__terms > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0 2px;
  color: var(--sh-mut);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.cdh-sh__terms > summary::-webkit-details-marker { display: none; }
.cdh-sh__terms > summary::marker { content: none; }

.cdh-sh__terms > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

.cdh-sh__terms[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.cdh-sh__terms-in {
  padding: 4px 0 8px;
  color: var(--sh-mut);
  font-size: 12px;
  line-height: 1.6;
}

/**
 * Textul din T&C se dimensionează EXPLICIT, nu prin moștenire.
 *
 * Tema are `li, p { font-size: 16px }` — un selector de un singur tip, dar
 * moștenirea pierde în fața oricărei declarații directe, deci lista din T&C ieșea
 * la 16px/26px într-un container de 12px: paragrafe uriașe într-un acordeon care
 * trebuie să fie o notă de subsol. T&C-urile din Hub vin ca liste lungi, așa că
 * fiecare punct trebuie să fie compact.
 */
.cdh-sh .cdh-sh__terms-in :is(p, li, dt, dd, td, th) {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
}

.cdh-sh .cdh-sh__terms-in :is(ul, ol) {
  margin: 0 0 6px;
  padding-left: 18px;
}

.cdh-sh .cdh-sh__terms-in li { margin: 0 0 2px; padding: 0; }
.cdh-sh .cdh-sh__terms-in li::before { content: none; }
.cdh-sh .cdh-sh__terms-in p { margin: 0 0 6px; }
.cdh-sh__terms-in :is(p, ul, ol):first-child { margin-top: 0; }
.cdh-sh__terms-in :is(p, ul, ol):last-child { margin-bottom: 0; }

/* Load more */
.cdh-sh__more { display: flex; justify-content: center; margin-top: var(--sh-gap); }

.cdh-sh__more-btn {
  min-height: 44px;
  padding: 0 24px;
  border: 1.5px solid var(--sh-line-strong);
  border-radius: var(--sh-r-el);
  background: var(--sh-bg);
  color: var(--sh-ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}

.cdh-sh__more-btn:hover { border-color: var(--sh-orange); color: var(--sh-orange); }
.cdh-sh__more-btn span { color: var(--sh-mut); font-weight: 500; }

/**
 * Zona de acțiune, pe container îngust.
 *
 * Regula asta trebuie să fie o interogare de CONTAINER, nu de viewport: un bloc
 * pus în sidebar are 300px de lățime pe un ecran de 1440px, iar un `@media` nu
 * s-ar declanșa niciodată — scorul, CTA-ul și linkul de recenzie ar rămâne
 * înghesuite pe o linie. Așa, se stivuiesc oriunde nu e loc, indiferent de ecran.
 */
@container shrow (max-width: 460px) {
  .cdh-sh__z--act { flex-direction: column; align-items: stretch; }
  .cdh-sh__z--act .cdh-sh__score { align-self: flex-start; }
  .cdh-sh__z--act .cdh-sh__cta,
  .cdh-sh__z--act .cdh-sh__review { width: 100%; }
}

/* ============ layout: cards ============ */
/* Cardul mare, un rând per card. Zonele se așază pe două coloane când cardul
   are lățime — nu când ecranul are. */

@container shrow (min-width: 560px) {
  .cdh-sh--cards .cdh-sh__row,
  .cdh-sh--spotlight .cdh-sh__row {
    grid-template-columns: auto 1fr minmax(160px, 210px);
    grid-template-areas:
      "lead id   act"
      "lead main act"
      "data data data"
      "end  end  end";
    align-items: start;
  }

  /**
   * Poziția stă LÂNGĂ logo, nu deasupra lui.
   *
   * Pe coloană, insigna își lua un rând întreg și împingea logo-ul în jos: 30px de
   * card pentru o cifră. Alături citește la fel („① Swiper") și e aceeași ordine ca
   * în tabelul de toplist, unde poziția e prima coloană.
   */
  .cdh-sh--cards .cdh-sh__z--lead,
  .cdh-sh--spotlight .cdh-sh__z--lead { grid-area: lead; flex-direction: row; align-items: center; gap: 10px; }
  .cdh-sh--cards .cdh-sh__z--id,
  .cdh-sh--spotlight .cdh-sh__z--id { grid-area: id; }
  .cdh-sh--cards .cdh-sh__z--main,
  .cdh-sh--spotlight .cdh-sh__z--main { grid-area: main; }
  .cdh-sh--cards .cdh-sh__z--data,
  .cdh-sh--spotlight .cdh-sh__z--data { grid-area: data; }
  .cdh-sh--cards .cdh-sh__z--act,
  .cdh-sh--spotlight .cdh-sh__z--act { grid-area: act; flex-direction: column; align-items: stretch; }
  .cdh-sh--cards .cdh-sh__z--end,
  .cdh-sh--spotlight .cdh-sh__z--end { grid-area: end; }
  .cdh-sh--cards .cdh-sh__z--act .cdh-sh__score,
  .cdh-sh--spotlight .cdh-sh__z--act .cdh-sh__score { align-self: center; }
}

/* Spotlight: același schelet, totul mai mare. Un singur rând, tratat ca erou. */
.cdh-sh--spotlight .cdh-sh__row { --sh-pad: 20px; }
.cdh-sh--spotlight .cdh-sh__headline { font-size: 22px; }
.cdh-sh--spotlight .cdh-sh__offer b { font-size: 20px; }
.cdh-sh--spotlight .cdh-sh__logo { width: 110px; }
.cdh-sh--spotlight .cdh-sh__cta { min-height: 50px; font-size: 15px; }

/* ============ layout: list ============ */
/* Rând orizontal compact, pentru liste lungi. */

.cdh-sh--list { --sh-gap: 8px; }
.cdh-sh--list .cdh-sh__row { --sh-pad: 12px 14px; align-items: center; }

@container shrow (min-width: 520px) {
  /**
   * Datele stau pe ACEEAȘI linie, nu pe un rând propriu dedesubt: un rând de listă
   * cu o singură informație („Retragere: instant") nu merită două linii.
   *
   * Coloana de identitate e mărginită (150–220px), NU `1fr`. Cu `1fr` primea tot
   * spațiul rămas — 520px pentru 150px de conținut — și între numele operatorului
   * și ofertă se deschidea un gol de 350px, care rupea rândul în două bucăți fără
   * legătură. Spațiul liber merge acum la ofertă, care e și lucrul care variază cel
   * mai mult în lungime.
   */
  .cdh-sh--list .cdh-sh__row {
    grid-template-columns: auto minmax(150px, 220px) minmax(0, 1fr) auto auto;
    grid-template-areas: "lead id main data act";
    align-items: center;
    column-gap: 18px;
  }

  .cdh-sh--list .cdh-sh__z--lead { grid-area: lead; }
  .cdh-sh--list .cdh-sh__z--id { grid-area: id; gap: 2px; }
  .cdh-sh--list .cdh-sh__z--main { grid-area: main; }
  .cdh-sh--list .cdh-sh__z--act { grid-area: act; flex-direction: row; }

  /* Fișa operatorului: numele ancorează, restul rămâne notă. Trei linii de aceeași
     mărime ar face rândul de listă la fel de înalt ca un card. */
  .cdh-sh--list .cdh-sh__name { font-size: 15px; }
  .cdh-sh--list .cdh-sh__urate,
  .cdh-sh--list .cdh-sh__verif { font-size: 11px; }

  /**
   * Datele devin unități separate cu linie verticală.
   *
   * Înainte fiecare era „etichetă valoare" pe orizontală, cu 8px între ele:
   * „DEPUNERE MIN. 25 RON RETRAGERE 1-3 zile" se citea ca o singură propoziție și
   * nu se vedea unde se termină una și începe alta. Stivuit (etichetă mică deasupra
   * valorii) plus o linie de 1px între unități, fiecare informație se citește
   * separat, fără să crească rândul: două linii mici ocupă cât una mare.
   */
  .cdh-sh--list .cdh-sh__z--data {
    grid-area: data;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0;
  }

  .cdh-sh--list .cdh-sh__z--data > * { padding: 0 14px; }
  .cdh-sh--list .cdh-sh__z--data > *:last-child { padding-right: 0; }
  .cdh-sh--list .cdh-sh__z--data > * + * { border-left: 1px solid var(--sh-divider); }

  .cdh-sh--list .cdh-sh__z--data .cdh-sh__datum {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .cdh-sh--list .cdh-sh__z--data .cdh-sh__k { font-size: 10px; }
  .cdh-sh--list .cdh-sh__z--data .cdh-sh__v { font-size: 13.5px; font-weight: 700; }
  /* Cu acțiuni ca text, coloană: două etichete de lungimi diferite pe un rând
     rupeau altfel la fiecare operator. Specificitate 0,3,0 ca să bată regula de
     mai sus, care vine din același bloc. */
  .cdh-sh--cta-plain.cdh-sh--list .cdh-sh__z--act { flex-direction: column; align-items: flex-start; }
  .cdh-sh--list .cdh-sh__z--end { grid-column: 1 / -1; }
  .cdh-sh--list .cdh-sh__logo { width: 72px; }
  .cdh-sh--list .cdh-sh__offer b { font-size: 15px; }
  /* În listă grila de fapte ar rupe rândul — o punem pe o linie, ca pastile. */
  .cdh-sh--list .cdh-sh__facts { display: flex; flex-wrap: wrap; background: none; gap: 6px; }
  .cdh-sh--list .cdh-sh__fact { background: var(--sh-soft); border-radius: 999px; padding: 4px 11px; }
}

/* ============ layout: grid ============ */
/* Card vertical, 1–4 coloane. Coloanele vin din atribut, nu din breakpoint. */

.cdh-sh--grid .cdh-sh__rows { grid-template-columns: repeat(var(--sh-cols-m), minmax(0, 1fr)); }
.cdh-sh--grid .cdh-sh__row { align-content: start; text-align: center; height: 100%; }
.cdh-sh--grid .cdh-sh__z { justify-content: center; }
.cdh-sh--grid .cdh-sh__z--id,
.cdh-sh--grid .cdh-sh__z--main { align-items: center; }
.cdh-sh--grid .cdh-sh__z--act { flex-direction: column; align-items: stretch; }
/* Butoanele se întind, dar inelul de scor nu — `stretch` l-ar lipi de marginea
   din stânga într-un card centrat. */
.cdh-sh--grid .cdh-sh__z--act .cdh-sh__score { align-self: center; }
.cdh-sh--grid .cdh-sh__logo { margin: 0 auto; }
.cdh-sh--grid .cdh-sh__hl { text-align: left; }

/* Coloanele de desktop se aplică după lățimea BLOCULUI: o grilă de 3 coloane
   într-o coloană de 400px ar produce carduri de 130px. */
@container shblock (min-width: 720px) {
  .cdh-sh--grid .cdh-sh__rows { grid-template-columns: repeat(var(--sh-cols), minmax(0, 1fr)); }
}

/* ============ layout: compact ============ */
/* O linie per rând. Pentru sidebar sau inline în articol. */

.cdh-sh--compact.cdh-sh--compact .cdh-sh__rows { gap: 6px; }

.cdh-sh--compact .cdh-sh__row {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "lead id act";
  align-items: center;
  --sh-pad: 9px 11px;
  --sh-r: var(--sh-r-el);
}

.cdh-sh--compact .cdh-sh__z--lead { grid-area: lead; }
.cdh-sh--compact .cdh-sh__z--id { grid-area: id; flex-direction: row; align-items: center; }
.cdh-sh--compact .cdh-sh__z--act { grid-area: act; }
.cdh-sh--compact .cdh-sh__z--main,
.cdh-sh--compact .cdh-sh__z--data,
.cdh-sh--compact .cdh-sh__z--end { grid-column: 1 / -1; }
.cdh-sh--compact .cdh-sh__logo { width: 54px; }
.cdh-sh--compact .cdh-sh__name { font-size: 14px; }
.cdh-sh--compact .cdh-sh__score { width: 36px; height: 36px; }
.cdh-sh--compact .cdh-sh__score b { font-size: 12px; }
.cdh-sh--compact .cdh-sh__score span { display: none; }
.cdh-sh--compact .cdh-sh__cta { min-height: 36px; padding: 0 13px; font-size: 13px; }

/* ============ layout: table ============ */
/**
 * Tabel real pe desktop, carduri pe mobil — dar UN SINGUR DOM.
 *
 * `casino-table` randează tabelul ȘI o variantă separată de card mobil, ambele
 * în pagină: același conținut de două ori, pentru crawlere și pentru greutatea
 * paginii. Aici celulele devin rânduri de tip cheie-valoare prin CSS, cu
 * eticheta luată din `data-label`.
 */

.cdh-sh__scroll {
  overflow-x: auto;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  background: var(--sh-bg);
  box-shadow: var(--sh-shadow);
}

/**
 * De ce `!important` pe geometria tabelului.
 *
 * Tema are, în main.css, reguli pe `.entry-content table:not(.slots-data)` care
 * fixează cu `!important` padding, font-size, font-weight, text-align, culoarea
 * și fundalul capului de tabel — pentru tabelele scrise de mână în articol, unde
 * sunt exact ce trebuie. Blocul nostru stă tot în `.entry-content`, deci le
 * moștenea: capul de tabel se întorcea la 14px (nu 10px, cum e proiectat), iar pe
 * mobil cardurile primeau 8px 12px padding pe celule în loc de 7px 0.
 *
 * `!important` singur nu ajunge: între două declarații `!important` decide tot
 * specificitatea, iar selectorul temei are două clase și trei tipuri. De aceea
 * regulile de mai jos au trei clase (`.cdh-sh .cdh-sh__table .cdh-sh__th`) — trei
 * clase bat două, oricâte tipuri ar avea celălalt. Variantele de stil și
 * comportamentele de mobil folosesc patru, ca să bată baza asta.
 */
.cdh-sh .cdh-sh__table { width: 100%; border-collapse: collapse !important; font-size: 14px; }

.cdh-sh .cdh-sh__table .cdh-sh__th {
  padding: 12px 8px !important;
  border-bottom: 1px solid var(--sh-line) !important;
  background: #FCFDFE !important;
  color: var(--sh-mut) !important;
  /* 10px: majusculele cu letter-spacing citesc mai mare decât dimensiunea lor
     reală, iar capul de tabel nu trebuie să concureze cu datele din rânduri. */
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: left !important;
  text-transform: uppercase;
  /**
   * Capul de coloană se rupe doar la spații, niciodată în mijlocul unui cuvânt.
   *
   * Tema pune `word-break: break-word` pe un strămoș, iar de acolo „Depunere min."
   * devenea „Depune / re min." — o rupere care arată ca un defect de randare, nu
   * ca o alegere. Prima reparație a fost `nowrap`, dar aceea mută problema: capul
   * devine cel mai lat lucru din coloană, așa că „Depunere min." ținea 114px
   * pentru o celulă cu „25 RON", iar tabelul cerea 952px lățime minimă și
   * producea derulare orizontală pe desktop.
   *
   * Corect e mijlocul: se rupe între cuvinte, deci coloana coboară la lățimea
   * celui mai lung cuvânt, dar niciun cuvânt nu se taie. `overflow-wrap: normal`
   * e explicit fiindcă `break-word` moștenit ar face exact ce nu vrem.
   */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.cdh-sh.cdh-sh--dark .cdh-sh__table .cdh-sh__th { background: rgba(255, 255, 255, .04) !important; }

/**
 * Capul sortabil.
 *
 * Butonul e injectat de JS, deci fără JavaScript capul rămâne exact cum era —
 * de aceea stilurile de aici nu ating deloc `th`-ul gol. Butonul moștenește tot
 * de la cap (`font: inherit`), ca sortabilul și nesortabilul să arate la fel
 * până pui degetul pe el; singura diferență permanentă e săgeata, care apare la
 * hover și rămâne pe coloana activă.
 */
.cdh-sh .cdh-sh__table .cdh-sh__sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
  /* Fără `nowrap`: butonul e tot conținutul capului, deci un `nowrap` aici ține
     coloana la lățimea etichetei, exact ce am scos de pe `th`. Se rupe la spații
     ca orice text; săgeata rămâne lipită de ultimul cuvânt prin `gap`. */
}

.cdh-sh .cdh-sh__table .cdh-sh__sort:hover { color: var(--sh-ink); background: rgba(23, 46, 82, .05); }
.cdh-sh .cdh-sh__table .cdh-sh__sort:focus-visible { outline: 2px solid var(--sh-acc); outline-offset: 1px; }
.cdh-sh.cdh-sh--dark .cdh-sh__table .cdh-sh__sort:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* Săgeata: triunghi din borduri, ca să nu depindă de un font de iconițe. */
.cdh-sh__sort-i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0;
  transition: opacity .12s, transform .12s;
}

.cdh-sh__sort:hover .cdh-sh__sort-i { opacity: .45; }
.cdh-sh__th.is-sorted .cdh-sh__sort { color: var(--sh-ink); }
.cdh-sh__th.is-sorted .cdh-sh__sort-i { opacity: 1; }
.cdh-sh__th[aria-sort="ascending"] .cdh-sh__sort-i { transform: rotate(180deg); }
.cdh-sh.cdh-sh--dark .cdh-sh__th.is-sorted .cdh-sh__sort { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cdh-sh__sort-i { transition: none; }
}

.cdh-sh .cdh-sh__table .cdh-sh__td {
  /* 8px pe laterale, nu 10: pe un tabel cu opt coloane, cei 2px în plus de fiecare
     parte însemnau 32px din lățimea minimă a tabelului, adică exact diferența
     dintre „încape" și „apare derulare" pe o pagină cu sidebar. Vizual nu se
     simte; în pragul de derulare, da. */
  padding: 12px 8px !important;
  border-bottom: 1px solid var(--sh-divider) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  vertical-align: middle;
  color: var(--sh-ink);
  /* În celule textul curge la spații, ca oriunde. `overflow-wrap` rămâne supapa
     pentru un singur cuvânt mai lat decât coloana (un număr de licență, un email):
     acela se rupe, dar numai el, nu „Winboss". */
  word-break: normal !important;
  overflow-wrap: break-word;
}

/**
 * Într-un tabel textul e uniform.
 *
 * Un tabel se citește pe coloane: ochiul compară „35×" cu „35×", nu titluri cu
 * date. O ofertă la 17px lângă un rulaj la 14px transformă coloana ei în titlu și
 * pe celelalte în notă de subsol. `casino-table` pune deja bonusul la 14px/700 —
 * aliniem, ca două tabele de pe același site să se citească la fel.
 *
 * Cine vrea altfel o cere explicit, pe coloana anume, din `field_sizes`.
 */
.cdh-sh__td .cdh-sh__offer b,
.cdh-sh__td .cdh-sh__headline { font-size: 14px; font-weight: 700 !important; letter-spacing: 0; }
.cdh-sh__td .cdh-sh__offer span { font-size: 12px; }

/* Într-un tabel eticheta e deja în capul coloanei — cea din celulă ar fi a doua
   („RETRAGERE" în header și „RETRAGERE 1-5 zile" în celulă). O ascundem doar pe
   copilul direct: grila de fapte, dacă e pusă într-o celulă, își păstrează
   etichetele, fiindcă acolo ele sunt singura sursă. Învelișul de dimensiune are
   `display: contents`, deci nu se vede în layout — dar se vede în selector. */
.cdh-sh__td > .cdh-sh__datum > .cdh-sh__k,
.cdh-sh__td > .cdh-sh__sz > .cdh-sh__datum > .cdh-sh__k { display: none; }
.cdh-sh .cdh-sh__table .cdh-sh__tr:last-child .cdh-sh__td { border-bottom: 0 !important; }
.cdh-sh__tr--bl { box-shadow: inset 3px 0 0 var(--sh-red); }
/**
 * Celula de operator: logo în stânga, iar în dreapta o stivă cu marcajele
 * deasupra numelui și data verificării dedesubt.
 *
 * Aceeași structură ca `.cdh-tc__opmeta` / `.cdh-tc__opname` din tabelul
 * comparativ. Un marcaj „Recomandat" pe rând propriu e o coloană aproape goală;
 * informația aparține numelui, iar tabelul existent o pune deja acolo.
 */
.cdh-sh__op {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cdh-sh__op-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.cdh-sh__op .cdh-sh__logo { width: 60px; }
.cdh-sh__td--logo { width: 76px; }
.cdh-sh__td--logo .cdh-sh__logo { width: 66px; }
.cdh-sh__td--rank { width: 44px; }
.cdh-sh__td--name { min-width: 190px; }

/**
 * Cine primește spațiul liber din tabel.
 *
 * Fără o regulă, browserul împarte lățimea aproape egal, iar rezultatul e absurd:
 * „40× rotiri" primește cât „100 rotiri gratuite la verificare", deci una are aer
 * degeaba și cealaltă se rupe pe trei rânduri.
 *
 * `width: 1%` pe o coloană dintr-un tabel cu `table-layout: auto` nu înseamnă „1%"
 * — înseamnă „cât mai puțin posibil". Combinat cu `nowrap`, coloana se strânge
 * exact cât ține conținutul ei, iar tot restul se duce în coloanele de text.
 *
 * Lista de mai jos e a datelor SCURTE. Un câmp nou nu trebuie adăugat aici decât
 * dacă e scurt și de tip valoare; dacă e text, îl lași afară și primește spațiu,
 * ceea ce e greșeala mai blândă din cele două.
 *
 * Trei clase în față, nu una: `:is()` ia specificitatea celui mai greu argument,
 * deci prefixul scurt ar da (0,2,0) și ar pierde în fața regulii din temă,
 * `.entry-content table:not(.slots-data) td` = (0,2,2), tot cu `!important`.
 *
 * Doar celulele, nu și capetele. O lățime pusă pe orice celulă a coloanei se
 * aplică întregii coloane, deci `th`-ul n-are nevoie de ea — iar `nowrap`-ul de
 * aici, aplicat și capului, era exact ce ținea coloana la lățimea etichetei:
 * „Depunere min." bloca 114px pentru celule cu „25 RON".
 */
.cdh-sh .cdh-sh__table :is(
  .cdh-sh__td--rank,
  .cdh-sh__td--logo,
  .cdh-sh__td--score,
  .cdh-sh__td--user_rating,
  .cdh-sh__td--verified,
  .cdh-sh__td--amount,
  .cdh-sh__td--match_pct,
  .cdh-sh__td--spins,
  .cdh-sh__td--wager,
  .cdh-sh__td--wager_type,
  .cdh-sh__td--max_bet,
  .cdh-sh__td--min_deposit,
  .cdh-sh__td--min_withdrawal,
  .cdh-sh__td--max_win,
  .cdh-sh__td--validity,
  .cdh-sh__td--activation,
  .cdh-sh__td--kyc,
  .cdh-sh__td--kyc_time,
  .cdh-sh__td--cashback,
  .cdh-sh__td--games,
  .cdh-sh__td--bonus_count,
  .cdh-sh__td--founded,
  .cdh-sh__td--withdrawal,
  .cdh-sh__td--withdrawal_fastest,
  .cdh-sh__td--withdrawal_condition,
  .cdh-sh__td--withdrawal_deposit,
  .cdh-sh__td--app_rating,
  .cdh-sh__td--code,
  .cdh-sh__td--bonus_code,
  .cdh-sh__td--type_pill,
  .cdh-sh__td--cta,
  .cdh-sh__td--pay_name,
  .cdh-sh__td--pay_type,
  .cdh-sh__td--pay_flow,
  .cdh-sh__td--pay_deposit,
  .cdh-sh__td--pay_withdrawal,
  .cdh-sh__td--pay_min_deposit,
  .cdh-sh__td--pay_min_withdrawal,
  .cdh-sh__td--pay_time,
  .cdh-sh__td--pay_recommended
) {
  width: 1%;
  /* `!important` din același motiv ca la cap: tema impune `normal` pe orice celulă
     din `.entry-content`, iar fără nowrap coloana nu se mai strânge — „Portofel
     electronic" se rupe în două rânduri într-o coloană care avea loc destul. */
  white-space: nowrap !important;
}

/* Coloanele de text au nevoie de un minim, altfel presiunea celor strânse le
   comprimă până la două cuvinte pe rând. */
.cdh-sh__table :is(
  .cdh-sh__td--headline,
  .cdh-sh__td--offer,
  .cdh-sh__td--offer_line1,
  .cdh-sh__td--summary,
  .cdh-sh__td--description,
  .cdh-sh__td--spins_game,
  .cdh-sh__td--highlights,
  .cdh-sh__td--excluded_payments,
  .cdh-sh__td--max_win_note
) { min-width: 160px; }

/* În tabel numele e ancora rândului — merită mai multă greutate decât în card,
   unde are deja spațiu și context în jur. */
.cdh-sh__td--name .cdh-sh__name,
.cdh-sh__td--name .cdh-sh__name a { font-weight: 800 !important; }

/**
 * În tabel, datele de sub nume curg pe rând, nu în stivă.
 *
 * Pe card stiva e corectă: coloana e îngustă și fiecare informație are nevoie de
 * rândul ei. În tabel însă celula are 375px, iar „Verificat 5 august 2026" și
 * „Licență ONJN L1234101W001500" încap una lângă alta — stivuite forțat, urcau
 * rândul la 87px, deci un tabel de 20 de rânduri creștea cu peste 500px de
 * înălțime pentru zero informație în plus.
 *
 * `flex-wrap` face diferența dintre „pe un rând" și „pe un rând dacă încape": la
 * un cazinou cu marcaje multe, ce nu intră coboară singur.
 */
.cdh-sh__td--name .cdh-sh__op-meta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
}

/* Numele rămâne pe rândul lui: e ancora, nu o etichetă între altele. */
.cdh-sh__td--name .cdh-sh__op-meta > .cdh-sh__name { flex: 0 0 100%; }
/* 168px: „Revendică bonusul" încape pe un rând. Sub atât, eticheta se rupe în
   două și butonul devine mai înalt decât vecinii lui. */
.cdh-sh__td--cta { width: 168px; }
.cdh-sh__td--cta .cdh-sh__z--act,
.cdh-sh__td--cta > *,
.cdh-sh__td--cta > .cdh-sh__sz > * { width: 100%; }
.cdh-sh__td--cta .cdh-sh__cta,
.cdh-sh__td--cta .cdh-sh__review { width: 100%; min-height: 38px; padding: 0 10px; font-size: 13px; }
.cdh-sh__td--cta .cdh-sh__op-meta { gap: 6px; }

/* Tabel → carduri. Interogare de CONTAINER: altfel un tabel pus într-o coloană
   îngustă rămâne tabel și se comprimă până la o literă pe rând. */
@container shblock (max-width: 760px) {
  .cdh-sh--tmob-cards .cdh-sh__scroll { overflow: visible; border: 0; background: none; box-shadow: none; }
  .cdh-sh--tmob-cards :is(.cdh-sh__table, .cdh-sh__table tbody, .cdh-sh__tr, .cdh-sh__td) { display: block; width: auto; }
  .cdh-sh--tmob-cards .cdh-sh__table thead { display: none; }

  /**
   * Rândurile dezvăluite rămân carduri.
   *
   * Colapsarea e generică pentru tot blocul și readuce rândurile la
   * `display: table-row` — corect în tabel, dezastruos aici: rândul iese din
   * cardul lui, pierde chenarul și lățimea, exact ce se vedea după „mai multe"
   * pe telefon. Regula generică are patru clase și un tip, deci override-ul are
   * nevoie de cinci clase; interogarea de container nu adaugă specificitate.
   *
   * Se aplică și la căutare, care folosește același `is-open` ca să scoată
   * rândurile de sub pliu.
   */
  .cdh-sh.cdh-sh--tmob-cards.cdh-sh--folds.is-open tr.cdh-sh__row--fold { display: block; }

  /**
   * Rândul devine card.
   *
   * Umbra e mai fermă decât pe desktop, nu din exces: pe desktop tabelul are un
   * container cu contur care îl citește ca o unitate, iar rândurile se despart
   * prin linii. Aici fiecare rând e o insulă albă pe o pagină albă, iar conturul
   * de 1px nu o desparte de fundal — pare o singură zonă albă fără sens. Aceleași
   * valori ca la cardul mobil din `casino-table`.
   */
  .cdh-sh--tmob-cards .cdh-sh__tr {
    margin-bottom: var(--sh-gap);
    padding: var(--sh-pad);
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-r);
    background: var(--sh-bg);
    box-shadow: 0 6px 18px rgba(23, 46, 82, .14), 0 1px 2px rgba(23, 46, 82, .10);
  }

  .cdh-sh--tmob-cards.cdh-sh--dark .cdh-sh__tr { box-shadow: 0 6px 22px rgba(0, 0, 0, .32); }
  .cdh-sh--tmob-cards.cdh-sh--flat .cdh-sh__tr { box-shadow: none; }

  .cdh-sh.cdh-sh--tmob-cards .cdh-sh__table .cdh-sh__td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--sh-divider) !important;
  }

  .cdh-sh.cdh-sh--tmob-cards .cdh-sh__table .cdh-sh__td:last-child { border-bottom: 0 !important; }

  /**
   * Anulez aici regulile de coloană.
   *
   * În card celula nu mai e coloană: `nowrap` ar împinge valoarea în afara
   * cardului, iar `width: 1%` — care în tabel însemna „strânge-te" — pe un bloc
   * înseamnă chiar 1% din card, deci conținutul dă pe dinafară. Regula de sus e
   * pe trei clase, ca să bată tema, așa că resetul trebuie să fie pe patru.
   */
  .cdh-sh.cdh-sh--tmob-cards .cdh-sh__table .cdh-sh__td {
    width: auto !important;
    white-space: normal !important;
  }
  /* Rând fără valoare: în tabel golul e informație („coloana există, valoarea
     nu"), în card e doar o etichetă orfană. Marcajul vine din PHP. */
  .cdh-sh.cdh-sh--tmob-cards .cdh-sh__table .cdh-sh__td[data-empty] { display: none; }
  .cdh-sh--tmob-cards .cdh-sh__td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--sh-mut);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  /* Celulele fără etichetă (logo, CTA, marcaje) rămân pe toată lățimea. */
  .cdh-sh--tmob-cards .cdh-sh__td[data-label=""]::before { content: none; }
  /* Celula de operator devine capul cardului: logo + nume, fără etichetă. */
  .cdh-sh--tmob-cards .cdh-sh__td--name { justify-content: flex-start; }
  .cdh-sh--tmob-cards .cdh-sh__td--name::before { content: none; }
  .cdh-sh--tmob-cards .cdh-sh__td--name .cdh-sh__op { width: 100%; }
  .cdh-sh--tmob-cards .cdh-sh__td--cta { width: auto; }
  .cdh-sh--tmob-cards .cdh-sh__td--cta .cdh-sh__cta { min-height: 44px; font-size: 14px; }

  /**
   * Poziția devine insignă în colț, nu rând.
   *
   * Ca celulă-bloc ocupa o linie întreagă doar cu o cifră — o bandă goală în
   * capul fiecărui card. Scoasă din flux, citește ca ce este: un marcaj, nu o
   * dată. Cardul are nevoie de `position: relative` ca ancoră.
   */
  .cdh-sh--tmob-cards .cdh-sh__tr { position: relative; }

  .cdh-sh--tmob-cards .cdh-sh__td--rank {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  /* Logo-ul e deja lipit de numele operatorului (vezi TABLE_MERGE); dacă totuși
     apare pe cont propriu, nu merită un rând cu etichetă. */
  .cdh-sh--tmob-cards .cdh-sh__td--logo {
    display: inline-flex;
    width: auto;
    justify-content: flex-start;
    padding: 0 10px 0 0;
    border-bottom: 0;
    vertical-align: middle;
  }

  .cdh-sh--tmob-cards .cdh-sh__td--logo .cdh-sh__logo { width: 80px; }
  /* Loc pentru insignă, ca numele lung să nu treacă sub ea. */
  .cdh-sh--tmob-cards .cdh-sh__td--name { padding-right: 42px; }

  /**
   * Logoul din capul cardului, mai mare pe telefon.
   *
   * În tabel are 60px, potrivit pentru o coloană între altele. În card e prima
   * imagine a rândului și singurul lucru pe care ochiul îl recunoaște fără să
   * citească, iar 60px pe un ecran de 390px e mic degeaba — cardul are lățime,
   * doar coloana n-avea.
   *
   * 90px, nu mai mult: numele stă lângă el, iar insigna de poziție îi mai ia
   * 42px din dreapta. Măsurat la 390px: „Casa Pariurilor Casino", mai lung decât
   * orice operator din Hub, încape tot pe un rând.
   *
   * Doar în tabelul-devenit-card: layoutul de carduri mari are deja 80px (100 la
   * varianta ND), iar acolo dimensiunea e o decizie luată separat.
   */
  .cdh-sh--tmob-cards .cdh-sh__td--name .cdh-sh__op .cdh-sh__logo { width: 90px; }
}

/**
 * Tabel care RĂMÂNE tabel pe îngust (`table_mobile: scroll`).
 *
 * Pentru comparații, unde vrei rândurile aliniate și coloanele alături — un tabel
 * spart în carduri pierde exact ce face un tabel util.
 *
 * Coloana de nume se fixează la derulare: fără ea, după două coloane nu mai știi
 * al cui e rândul. Are nevoie de fundal propriu, altfel conținutul care trece pe
 * dedesubt se vede prin ea. Aceeași umbră de separare ca la coloana fixă din
 * tabelul comparativ.
 */
@container shblock (max-width: 760px) {
  .cdh-sh--tmob-scroll .cdh-sh__scroll {
    /* Indiciu de derulare: marginea din dreapta se estompează cât timp mai e
       conținut. Același truc ca la chips-urile din celelalte module. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

  .cdh-sh--tmob-scroll .cdh-sh__table { min-width: 620px; }

  .cdh-sh--tmob-scroll .cdh-sh__th,
  .cdh-sh--tmob-scroll .cdh-sh__td { white-space: nowrap; }

  /* Oferta e singura care are voie să curgă pe două rânduri — altfel coloana ei
     ar deveni foarte lată și ar împinge restul departe. */
  .cdh-sh--tmob-scroll .cdh-sh__td--offer,
  .cdh-sh--tmob-scroll .cdh-sh__td--headline,
  .cdh-sh--tmob-scroll [class*="cdh-sh__td--bonus_t_"] { white-space: normal; min-width: 160px; }

  /* Poziția se fixează împreună cu numele. Altfel coloana ei intră pe dedesubt și
     din ea rămâne o fâșie de cifră lipită de marginea din stânga. 36px = cerculețul
     de 26px plus 5px de aer de fiecare parte; sub atât celula oricum nu coboară,
     iar valoarea trebuie să fie exactă, fiindcă e și `left` pentru coloana de nume. */
  .cdh-sh.cdh-sh--tmob-scroll .cdh-sh__table .cdh-sh__td--rank,
  .cdh-sh.cdh-sh--tmob-scroll .cdh-sh__table .cdh-sh__th--rank {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 36px;
    min-width: 36px;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .cdh-sh--tmob-scroll .cdh-sh__td--rank,
  .cdh-sh--tmob-scroll .cdh-sh__td--name {
    background: var(--sh-bg);
  }

  .cdh-sh--tmob-scroll .cdh-sh__th--rank,
  .cdh-sh--tmob-scroll .cdh-sh__th--name { background: #FCFDFE !important; }

  .cdh-sh--dark.cdh-sh--tmob-scroll .cdh-sh__th--rank,
  .cdh-sh--dark.cdh-sh--tmob-scroll .cdh-sh__th--name { background: #2A4C4A !important; }

  /* 36px = lățimea coloanei de poziție de mai sus. Când rank nu e afișat, numele e
     prima celulă și se lipește direct la margine. */
  .cdh-sh--tmob-scroll .cdh-sh__td--name,
  .cdh-sh--tmob-scroll .cdh-sh__th--name {
    position: sticky;
    left: 36px;
    z-index: 1;
    min-width: 142px;
    box-shadow: 6px 0 6px -4px rgba(23, 46, 82, .10);
  }

  .cdh-sh--tmob-scroll .cdh-sh__td--name:first-child,
  .cdh-sh--tmob-scroll .cdh-sh__th--name:first-child { left: 0; }

  /* Logo-ul din celula fixată se strânge, ca ea să nu mănânce jumătate de ecran. */
  .cdh-sh--tmob-scroll .cdh-sh__op .cdh-sh__logo { width: 44px; }
  .cdh-sh--tmob-scroll .cdh-sh__td--cta { width: auto; }
  .cdh-sh--tmob-scroll .cdh-sh__td--cta .cdh-sh__cta { padding: 0 12px; }
}

/* ============ mobil ============ */

@container shblock (max-width: 719px) {
  .cdh-sh__rows { --sh-gap: 10px; }
  .cdh-sh__title { font-size: 19px; }
  .cdh-sh__headline { font-size: 16px; }
  .cdh-sh__row { --sh-pad: 13px; }
  .cdh-sh__offer b { font-size: 16px; }
  .cdh-sh__logo { width: 76px; }
  .cdh-sh--spotlight .cdh-sh__headline { font-size: 19px; }
}

/* ============ controalele din editor ============ */
/**
 * Stiluri pentru panoul din bara laterală a editorului.
 *
 * Stau în același fișier fiindcă e înregistrat și ca `editor_style`, deci se
 * încarcă exact acolo unde e nevoie. Prefixul `cdhc-sh-` (cu o cratimă, nu `__`)
 * le separă de clasele blocului randat: nu ajung niciodată pe frontend, fiindcă
 * niciun element randat nu le poartă.
 */

.cdhc-sh-hint {
  margin: 0 0 8px;
  color: #59737F;
  font-size: 12px;
  line-height: 1.5;
}

.cdhc-sh-lbl {
  margin: 14px 0 6px;
  color: #26404C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/**
 * Un câmp în panoul de denumiri: numele câmpului sus, iar dedesubt denumirea
 * rescrisă și dimensiunea, una lângă alta.
 *
 * Pe două coloane fiindcă sunt aceeași decizie luată în același moment — dacă ar
 * fi fost două panouri separate, ar fi trebuit derulat de la unul la altul pentru
 * fiecare coloană.
 */
.cdhc-sh-fld {
  padding: 8px 0;
  border-bottom: 1px solid #EDF2F5;
}

.cdhc-sh-fld:last-of-type { border-bottom: 0; }

.cdhc-sh-fld__n {
  display: block;
  margin-bottom: 4px;
  color: #26404C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cdhc-sh-fld__r {
  display: grid;
  /* 92px: „Normal" încape fără să taie, iar restul lățimii rămâne denumirii. */
  grid-template-columns: 1fr 92px;
  gap: 6px;
  align-items: start;
}

.cdhc-sh-fld__r .components-base-control { margin-bottom: 0; }

.cdhc-sh-fld__na {
  align-self: center;
  color: #8CA3AD;
  font-size: 11.5px;
  font-style: italic;
}

.cdhc-sh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.cdhc-sh-chips .components-button.is-small { height: 26px; font-size: 11.5px; }

/* Bazinul de opțiuni nebifate, la listele lungi: înălțime limitată cu derulare,
   ca 178 de furnizori să nu împingă restul panoului în jos. */
.cdhc-sh-chips--pool {
  max-height: 168px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #DDE6EB;
  border-radius: 6px;
  background: #FCFDFE;
}

/* Lista reordonabilă */
.cdhc-sh-ord {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #DDE6EB;
  border-radius: 6px;
  overflow: hidden;
}

.cdhc-sh-ord__i {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-bottom: 1px solid #F0F3F5;
  background: #fff;
  font-size: 12px;
  cursor: grab;
}

.cdhc-sh-ord__i:last-child { border-bottom: 0; }
.cdhc-sh-ord__i.is-drag { background: #EAF2FD; }
.cdhc-sh-ord__h { color: #A8B8BF; font-size: 11px; line-height: 1; letter-spacing: -2px; }
.cdhc-sh-ord__n { min-width: 16px; color: #8A97A3; font-variant-numeric: tabular-nums; }
.cdhc-sh-ord__l { flex: 1 1 auto; min-width: 0; color: #203540; }
.cdhc-sh-ord__b { display: flex; gap: 0; flex: 0 0 auto; }
.cdhc-sh-ord__b .components-button { min-width: 22px; height: 22px; padding: 0; }

/* Lista de bifat, cu înălțime limitată: 47 de operatori nu încap în panou. */
.cdhc-sh-list {
  max-height: 240px;
  overflow-y: auto;
  margin: 6px 0 4px;
  padding: 6px 8px;
  border: 1px solid #DDE6EB;
  border-radius: 6px;
  background: #FCFDFE;
}

.cdhc-sh-list .components-base-control { margin-bottom: 2px; }
.cdhc-sh-list .components-checkbox-control__label { font-size: 12px; }

.cdhc-sh-preset {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid #F0F3F5;
}

.cdhc-sh-preset:last-child { border-bottom: 0; }
.cdhc-sh-preset .components-button { align-self: flex-start; }
.cdhc-sh-preset .cdhc-sh-hint { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cdh-sh *,
  .cdh-sh *::before,
  .cdh-sh *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .cdh-sh__cta:hover { transform: none; }
}

@media print {
  .cdh-sh__more,
  .cdh-sh__bar { display: none; }
  .cdh-sh--folds .cdh-sh__row--fold { display: block !important; }
  .cdh-sh__row { break-inside: avoid; box-shadow: none; }
}