/*
 * Pluto Casino — Affiliate Table Overrides
 *
 * Loaded conditionally when "Style affiliate tables to match theme" is
 * enabled in Customizer → Theme Settings.
 *
 * Overrides the visual skin of the Table Management API plugin so cards
 * inherit the theme's font, colour tokens, and CTA style. The plugin's
 * layout, grid, responsive behaviour, and animations are untouched.
 */

:root {
  --aff-green:      #16a34a;
  --aff-green-h:    #15803d;
  --aff-green-glow: rgba(22, 163, 74, .28);
}

/* ── Font ───────────────────────────────────────────────────────────── */

.tmp-casino-list {
  font-family: var(--font-sans) !important;
}

/* ── Cards #2, #3 — strip gradient shell, clean white ───────────────── */

.tmp-casino-item:not(:nth-child(1)) {
  padding: 0 !important;
  background: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(14,17,22,.06), 0 1px 2px rgba(14,17,22,.04) !important;
  transition: box-shadow 160ms ease;
}
.tmp-casino-item:not(:nth-child(1)):hover {
  box-shadow: 0 4px 16px rgba(14,17,22,.08), 0 2px 4px rgba(14,17,22,.05) !important;
}

/* ── Card #1 — keep plugin gold shell, refine shadow ────────────────── */

.tmp-casino-item:nth-child(1) {
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(243,180,0,.2), 0 2px 8px rgba(0,0,0,.06) !important;
}
.tmp-casino-item:nth-child(1) .tmp-casino-item_inner {
  border-radius: 14px !important;
  /* outline: 2px solid #f3b400 and background: #fffdf6 stay from plugin */
}

/* ── Cancel plugin silver/bronze outlines on #2, #3 ─────────────────── */

.tmp-casino-item:nth-child(2) .tmp-casino-item_inner,
.tmp-casino-item:nth-child(3) .tmp-casino-item_inner {
  outline: none !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg) !important;
  border-radius: 14px !important;
}

/* ── Rank badges ─────────────────────────────────────────────────────── */

/* #1: keep plugin 🏆 #1 colours, update font only */
.tmp-casino-item:nth-child(1) .tmp-casino-item_inner::before {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 0 0 6px 0 !important;
  top: 0 !important;
  left: 0 !important;
  padding: 3px 9px !important;
  line-height: 1.6 !important;
}

/* #2, #3: clean neutral pills */
.tmp-casino-item:nth-child(2) .tmp-casino-item_inner::before {
  content: "#2" !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 0 0 6px 0 !important;
  top: 0 !important;
  left: 0 !important;
  padding: 3px 8px !important;
  line-height: 1.6 !important;
}
.tmp-casino-item:nth-child(3) .tmp-casino-item_inner::before {
  content: "#3" !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 0 0 6px 0 !important;
  top: 0 !important;
  left: 0 !important;
  padding: 3px 8px !important;
  line-height: 1.6 !important;
}

/* ── Casino name ─────────────────────────────────────────────────────── */

.tmp-casino-name {
  font-family: var(--font-sans) !important;
}
a.tmp-casino-name-link,
span.tmp-casino-name-link {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  font-size: 15px !important;
  letter-spacing: -.01em !important;
}
a.tmp-casino-name-link:hover {
  color: var(--color-accent) !important;
  text-decoration: none !important;
}

/* ── Rating pills ────────────────────────────────────────────────────── */

.tmp-casino-rating {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
}
.rating-excellent { background: var(--color-success-soft) !important; color: var(--color-success) !important; }
.rating-high      { background: #fef3c7 !important; color: #92400e !important; }
.rating-medium    { background: #fef3c7 !important; color: #92400e !important; }
.rating-low       { background: var(--color-danger-soft) !important; color: var(--color-danger) !important; }

/* ── Offer / bonus text ──────────────────────────────────────────────── */

.offer-label {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--color-text-subtle) !important;
}
.offer-value {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--color-text) !important;
  letter-spacing: -.015em !important;
  line-height: 1.2 !important;
}
.simple-view .sv-bonus-col {
  border-left-color: var(--color-border) !important;
}

/* ── ALL CTAs: CRO green ─────────────────────────────────────────────── */

.tmp-button {
  font-family: var(--font-sans) !important;
  background: var(--aff-green) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  padding: 12px 14px !important;
  text-transform: none !important;
  box-shadow: 0 2px 8px var(--aff-green-glow) !important;
  transition: background 140ms ease, box-shadow 140ms ease !important;
}
.tmp-button:hover {
  background: var(--aff-green-h) !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px var(--aff-green-glow) !important;
}

/* Prevent button overflowing the CTA column (width:100% + box-sizing fix) */
.simple-view .tmp-casino-btns .tmp-button {
  box-sizing: border-box !important;
}

/* ── Card #1 CTA: restore plugin shimmer + pulse animation ───────────── */

.highlight-first .tmp-casino-item:nth-child(1) .tmp-button {
  background: linear-gradient(90deg, #159b29 0%, #4cba5c 35%, #9ef0b0 50%, #4cba5c 65%, #159b29 100%) !important;
  background-size: 200% 100% !important;
  animation: tma-shimmer 2.2s linear infinite, tma-pulse 2s ease-in-out infinite !important;
}

/* ── "Read review" link ──────────────────────────────────────────────── */

.tmp-avis-text {
  font-family: var(--font-sans) !important;
}
.tmp-link-to-review {
  font-family: var(--font-sans) !important;
  color: var(--color-text-subtle) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.tmp-link-to-review:hover {
  color: var(--aff-green) !important;
  text-decoration: underline !important;
}

/* ── CTA column divider ──────────────────────────────────────────────── */

.simple-view .tmp-casino-btns {
  border-left-color: var(--color-border) !important;
}

/* ── "Show more casinos" button ──────────────────────────────────────── */

.tmp-button-load {
  font-family: var(--font-sans) !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 11px 24px !important;
}
.tmp-button-load:hover {
  background: var(--color-border) !important;
  color: var(--color-text) !important;
}