/* ================================================================
   Cards Casino — Varianta A (Deep Forest)

   Self-contained: tokenii pe .cz-cards-casino.
   Layout: 1 card/rând, flex column sections. Prefix: cz-ccard
   ================================================================ */

/* ── Scoped tokens (light) ── */
.cz-cards-casino {
  --_accent: #F06800;
  --_accent-hover: #D85E00;
  --_cta: #00B34A;
  --_bg-raised: #FFFFFF;
  --_tx: #111827;
  --_tx-2: #374151;
  --_tx-3: #6B7280;
  --_tx-4: #9CA3AF;
  --_bd: #E5E7EB;
  --_bd-strong: #D1D5DB;
  --_green-100: #E1F4E9;
  --_shadow: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --_shadow-md: 0 6px 20px rgba(0,0,0,.1);
  --_r: 8px;
  --_r-lg: 12px;
  --_font: 'Poppins', system-ui, -apple-system, sans-serif;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--_font);
  max-width: 860px;
  padding-bottom: 2rem;
}

/* 2 carduri pe rând */
.cz-cards-casino--cols-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex-direction: unset !important;
  gap: 1.25rem;
}

.cz-cards-casino:has(.cz-cards-casino--cols-2) {
  max-width: 100%;
}

@media (max-width: 767px) {
  .cz-cards-casino--cols-2 {
    grid-template-columns: 1fr !important;
  }
}

.cz-cards-casino--cols-2 + .cz-ccard-loadmore {
  grid-column: 1 / -1;
}

.cz-cards-casino--cols-2 + noscript {
  grid-column: 1 / -1;
}

/* ── Scoped tokens (dark) ── */
[data-theme="dark"] .cz-cards-casino,
.cz-dark .cz-cards-casino {
  --_bg-raised: #161920;
  --_tx: #F3F4F6;
  --_tx-2: #D1D5DB;
  --_tx-3: #9CA3AF;
  --_tx-4: #6B7280;
  --_bd: #1F2937;
  --_bd-strong: #374151;
  --_green-100: #0A2618;
  --_shadow: 0 2px 6px rgba(0,0,0,.3);
  --_shadow-md: 0 6px 20px rgba(0,0,0,.4);
}

/* ── Card ── */
.cz-ccard {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--_bg-raised) 0%, var(--_bg-raised) 70%, rgba(0,179,74,.025) 100%);
  border: 1px solid var(--_bd);
  border-radius: var(--_r-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--_shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.cz-ccard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--_accent) 0%, var(--_cta) 100%);
  border-radius: var(--_r-lg) var(--_r-lg) 0 0;
  z-index: 1;
}

.cz-ccard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--_r-lg);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(0,179,74,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 100%, rgba(240,104,0,.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.cz-ccard > * {
  position: relative;
  z-index: 1;
}

.cz-ccard:hover {
  box-shadow: var(--_shadow-md);
  transform: translateY(-3px);
  border-color: var(--_bd-strong);
}

/* ── Badges container (rank + label) dreapta-sus ── */
.cz-ccard__badges {
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.cz-ccard__label {
  background: #FACC15;
  color: #78350F;
  font-size: .8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .6rem .25rem;
  border-radius: 0 0 6px 6px;
  line-height: 1.3;
}

.cz-ccard__rank {
  background: linear-gradient(135deg, #F06800, #FF8C00);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  padding: .2rem .6rem .25rem;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 8px rgba(240,104,0,.3);
  line-height: 1.3;
}

/* ── Top section: logo + identity (grid cu 2 rânduri) ── */
.cz-ccard__top {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 12px;
  row-gap: 0;
  align-items: center;
  padding: 14px 80px 5px 16px;
  border-bottom: 1px solid rgba(0,179,74,.15);
}

.cz-ccard__logo-link {
  grid-row: 1;
  grid-column: 1;
  display: block;
  line-height: 0;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  align-self: start;
}

.cz-ccard__logo {
  width: 100px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.cz-ccard__identity {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cz-ccard__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--_tx);
  line-height: 1.2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}

.cz-ccard__name a {
  color: var(--_tx);
  text-decoration: none;
}

.cz-ccard__name a:hover {
  color: var(--_tx);
}

.cz-ccard__license {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--_tx-3);
  margin-top: 2px;
}

.cz-ccard__onjn {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
    background: url("data:image/png;base64,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") no-repeat center / contain;
  }

.cz-ccard__review {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--_accent);
  text-decoration: none;
  margin-top: 3px;
}

.cz-ccard__review:hover {
  color: var(--_accent-hover);
}

.cz-ccard__review-icon {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
  flex-shrink: 0;
}

.cz-ccard__review:hover .cz-ccard__review-icon {
  transform: translateX(2px);
}

/* ── Score row — sub logo (grid-row 2, grid-column 1) ── */
.cz-ccard__score-row {
  display: none;
}

.cz-ccard__score-val {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--_tx-3);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: auto;
  line-height: 1.4;
  flex-shrink: 0;
}

.cz-ccard__score-val::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239CA3AF' d='m22.305 2.87-2.281 4.622c-1.639-1.751-3.84-2.96-6.319-3.347l.945-1.915c.679-1.376 2.053-2.23 3.587-2.23h2.283c.692 0 1.324.351 1.689.939.366.588.401 1.31.095 1.931Zm-12.01 1.275-.945-1.915c-.679-1.376-2.053-2.23-3.587-2.23h-2.26c-.692 0-1.324.351-1.689.938-.366.589-.401 1.311-.095 1.932l2.272 4.607c1.637-1.743 3.833-2.945 6.304-3.331Zm10.706 10.855c0 4.963-4.038 9-9 9S3 19.963 3 15 7.038 6 12 6s9 4.037 9 9Zm-4.843-.59c0-.306-.266-.644-.696-.644h-2.14l-.567-2.175c-.09-.345-.399-.585-.755-.591-.355.007-.665.246-.755.591l-.567 2.175h-2.14c-.43 0-.696.337-.696.644 0 .361.251.665.539.825l1.49.828-.661 1.803c-.128.349-.012.741.285.965h0c.304.229.723.226 1.023-.007l1.482-1.146 1.482 1.146c.301.232.72.235 1.023.007h0c.297-.224.413-.615.285-.965l-.661-1.803 1.49-.828c.288-.16.539-.464.539-.825Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cz-ccard__score-meta {
  display: none;
}

.cz-ccard__score-label {
  display: none;
}

.cz-ccard__score-text {
  display: none;
}

/* ── Bonuses ── */
.cz-ccard__bonuses {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px 0;
}

.bonus-pill {
  font-size: .88rem;
  font-weight: 700;
  padding: 6px 12px 6px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  background: #FFF8F4;
  color: var(--_tx);
  border: 1px solid var(--_bd);
  border-left: 2px solid var(--_accent);
}

.bonus-pill__val {
  color: #D55515;
  font-weight: 800;
}

[data-theme="dark"] .cz-ccard .bonus-pill,
.cz-dark .cz-ccard .bonus-pill {
  background: rgba(240,104,0,.08);
  border-color: var(--_bd-strong);
  border-left-color: #FF8C00;
  color: var(--_tx);
}

[data-theme="dark"] .cz-ccard .bonus-pill__val,
.cz-dark .cz-ccard .bonus-pill__val {
  color: #FF8C00;
}

[data-theme="dark"] .cz-ccard-loadmore__btn,
.cz-dark .cz-ccard-loadmore__btn {
  background: var(--_bg-raised);
  border-color: var(--_bd);
  color: var(--_accent);
}

[data-theme="dark"] .cz-ccard-loadmore__btn:hover,
.cz-dark .cz-ccard-loadmore__btn:hover {
  background: rgba(240,104,0,.1);
  border-color: var(--_accent);
}

/* ── Verified ── */
.cz-ccard__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--_tx-2);
  padding: 8px 16px 0;
}

.cz-ccard__verified svg {
  flex-shrink: 0;
}

/* ── Highlights ── */
.cz-ccard__highlights {
  display: flex;
  gap: 6px 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--_green-100);
  margin-top: 10px;
}

.highlight {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--_tx-2);
}

.highlight__icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  line-height: 1;
}

.highlight__icon--green {
  background: var(--_green-100);
  color: #067434;
}

.highlight__icon--red {
  background: #FEF2F2;
  color: #F16849;
}

.cz-ccard__bonuses:last-child,
.cz-ccard__verified:last-child,
.cz-ccard__highlights:last-child {
  padding-bottom: 14px;
}

/* ── Actions ── */
.cz-ccard__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--_green-100);
}

.cz-ccard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--_font);
  font-weight: 700;
  font-size: .82rem;
  border-radius: var(--_r);
  border: 2px solid transparent;
  padding: .55rem 2rem;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.cz-ccard__btn--cta {
  background: #008C3A;
  color: #fff;
  border-color: #008C3A;
}

.cz-ccard__btn--cta:hover {
  background: #007A32;
  border-color: #007A32;
  transform: translateY(-1px);
}

.cz-ccard__tc {
  font-size: .65rem;
  color: var(--_tx-3);
  margin-left: 0;
  text-align: center;
}

/* ── Cards grid (inner flex container) ── */
.cz-cards-casino__grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Load more ── */
.cz-ccard-loadmore {
  text-align: center;
  margin: 1.5rem 0 2rem;
}

.cz-ccard-loadmore__btn {
  font-family: var(--_font);
  font-size: 14px;
  font-weight: 600;
  color: var(--_accent);
  background: var(--_bg-raised);
  border: 1.5px solid var(--_bd);
  border-radius: 10px;
  padding: 10px 28px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

.cz-ccard-loadmore__btn:hover {
  border-color: var(--_accent);
  background: #FFF8F4;
}

.cz-ccard-loadmore__count {
  font-weight: 700;
  opacity: .6;
}

.cz-ccard-loadmore__btn[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none;
}

/* ── Screen-reader only ── */
.cz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Noscript fallback ── */
.cz-ccard-noscript {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.15rem;
}

/* ── Entry animation for AJAX-loaded cards ── */
.cz-ccard[data-new] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease,
              box-shadow .2s ease, border-color .2s ease;
}

.cz-ccard[data-new].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Focus-visible ── */
.cz-ccard__btn:focus-visible,
.cz-ccard__review:focus-visible,
.cz-ccard__logo-link:focus-visible,
.cz-ccard__name a:focus-visible,
.bonus-pill:focus-visible,
.cz-ccard-loadmore__btn:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 2px;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .cz-cards-casino {
    gap: 1.25rem;
  }

  .cz-cards-casino__grid,
  .cz-ccard-noscript {
    gap: 1.5rem;
  }

  .cz-ccard {
    padding: 0;
  }

  .cz-ccard::after {
    display: none;
  }

  .cz-ccard__badges {
    right: .5rem;
    gap: 3px;
  }

  .cz-ccard__rank {
    font-size: .9rem;
    padding: .15rem .5rem .2rem;
  }

  .cz-ccard__label {
    font-size: .65em;
    padding: .15rem .45rem .2rem;
  }

  /* Top: grid layout cu placement explicit */
  .cz-ccard__top {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    gap: 4px 12px;
    padding: 12px;
    padding-bottom: 2px;
    padding-right: 54px;
    border-bottom: none;
  }

  .cz-ccard__logo-link {
    grid-row: 1;
    grid-column: 1;
  }

  .cz-ccard__identity {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
  }

  .cz-ccard__logo {
    width: 86px;
    height: auto;
    aspect-ratio: 100 / 60;
  }

  .cz-ccard__name {
    font-size: 15px;
    gap: 6px;
  }

  .cz-ccard__license {
    font-size: .65rem;
    margin-top: 1px;
  }

  .cz-ccard__review {
    font-size: .75rem;
    margin-top: 1px;
  }

  .cz-ccard__score-val {
    font-size: 10px;
  }

  .cz-ccard__score-val::before {
    width: 11px;
    height: 11px;
  }

  /* Bonusuri */
  .cz-ccard__bonuses {
    flex-direction: column;
    gap: 6px;
    padding: 6px 12px 0;
  }

  .bonus-pill {
    font-size: .8rem;
    padding: 5px 10px 5px 8px;
    align-self: flex-start;
  }

  /* Verified */
  .cz-ccard__verified {
    font-size: .7rem;
    padding: 6px 12px 0;
  }

  /* Highlights */
  .cz-ccard__highlights {
    padding: 8px 12px;
    gap: 4px 10px;
    margin-top: 4px;
    border-top-color: rgba(0,179,74,.1);
  }

  .highlight {
    font-size: .78rem;
    gap: 4px;
  }

  .highlight__icon {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

  /* Actions — butoane side-by-side */
  .cz-ccard__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px 12px 10px;
    gap: 6px;
    border-top-color: rgba(0,179,74,.1);
  }

  .cz-ccard__btn--cta {
    width: auto;
    flex: 0 0 auto;
  }

  .cz-ccard__tc {
    flex-basis: 100%;
    text-align: left;
    margin-top: 2px;
  }
}

/* ── Gutenberg preview ── */
.block-editor .cz-ccard {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cz-ccard,
  .cz-ccard::before,
  .cz-ccard__btn,
  .cz-ccard__review-icon,
  .cz-ccard[data-new],
  .cz-ccard.is-visible {
    transition: none !important;
    animation: none !important;
  }
}

[data-theme="dark"] .highlight__icon--red,
.cz-dark .highlight__icon--red {
  background: #2D1515;
  color: #F87171;
}

/* [data-theme="dark"] .cz-ccard__score-text — not needed */

[data-theme="dark"] .cz-ccard__score-row,
.cz-dark .cz-ccard__score-row {
  border-color: var(--_bd-strong);
}