@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap");

/* ══════════════════════════════════════════
   BonusApuestas — Aurora Slate & Neon Emerald
   Palette: Slate 900 / Emerald 500 / Sky 500 / Amber 500
══════════════════════════════════════════ */
:root {
  --primary:            222 47% 9%;     /* Deeper Midnight Blue */
  --primary-foreground: 0 0% 100%;

  --background: 222 47% 6%;            /* Even deeper background */
  --foreground: 210 40% 98%;           /* Near-white text */

  --card: 222 47% 12%;                 /* Dark slate card bg */
  --card-foreground: 210 40% 98%;

  --muted: 215 28% 15%;                /* Muted slate */
  --muted-foreground: 215 20% 65%;

  --destructive: 199 89% 48% ;         /* Info Blue */
  --destructive-foreground: 0 0% 100%;

  --secondary: 161 94% 30%;            /* Richer Emerald Green */
  --secondary-foreground: 0 0% 100%;

  --warning: 42 100% 50%;              /* Vivid Amber Gold */
  --warning-foreground: 222 47% 11%;

  --accent: 190 90% 50%;               /* Electric Cyan Accent */

  --border: 215 28% 20%;
  --ring: 161 94% 30%;
  --radius: 0.75rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: hsl(222, 47%, 7%);
  color: hsl(210, 40%, 96%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

/* ══ GLOBAL TEXT READABILITY FIX (dark theme) ══
   Force all text to be light-colored by default.
   Tailwind's default palette uses dark grays which
   become invisible on our dark backgrounds.
═══════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  color: #f0f6ff;
}
p, li, span, div, td, th, label, blockquote, dt, dd {
  color: inherit;
}

/* Muted foreground — readable light gray, NOT dark gray */
.text-muted-foreground { color: #94a3b8 !important; }

/* Card foreground */
.text-card-foreground { color: #f0f6ff !important; }

/* Foreground (default text) */
.text-foreground { color: #f0f6ff !important; }

/* Primary text color in dark context */
.text-primary { color: #38bdf8 !important; }

/* Secondary (emerald) text */
.text-secondary { color: #059669 !important; }

/* Warning (amber) text */
.text-warning,
.text-warning-foreground { color: #f59e0b !important; }

/* Destructive (sky) text */
.text-destructive { color: #0ea5e9 !important; }

/* Accent (cyan) text */
.text-accent { color: #06b6d4 !important; }

/* White/near-white helpers */
.text-white { color: #ffffff !important; }
.text-white\/70 { color: rgba(255,255,255,0.70) !important; }
.text-white\/60 { color: rgba(255,255,255,0.60) !important; }
.text-white\/40 { color: rgba(255,255,255,0.40) !important; }
.text-primary-foreground { color: #ffffff !important; }
.text-primary-foreground\/80 { color: rgba(255,255,255,0.80) !important; }
.text-primary-foreground\/90 { color: rgba(255,255,255,0.90) !important; }

/* Comparison table & card rows — ensure text visible */
.grid > div,
.grid > div > div,
.grid > div > span { color: #e2e8f0; }

/* Table header text */
.bg-primary.text-primary-foreground > div,
.bg-primary.text-primary-foreground .font-bold { color: #ffffff !important; }

/* Sort bar pills (ranking page) — dark text on light bg when inactive */
.rp-pill { color: #10b981 !important; }
.rp-pill.active { color: #0f172a !important; }

/* Warning badge bg text — dark text on gold */
.bg-warning\/30 .text-warning-foreground,
.bg-warning\/20 .text-lg { color: #0d1a2d !important; }

/* Rank badge numbers */
.bg-warning { color: #0d1a2d !important; }

/* Links in dark context */
a { color: inherit; }
a:hover { opacity: 0.85; }

/* Nav links */
header nav a { color: rgba(255,255,255,0.90); }
header nav a:hover { color: #ffffff; }
header nav a.text-sm { color: rgba(255,255,255,0.90) !important; }

/* Mobile nav links */
#mobile-menu a { color: rgba(255,255,255,0.85) !important; }

/* Footer links */
footer a { color: rgba(255,255,255,0.70); }
footer a:hover { color: #ffffff; }

/* Disclaimer / Legal banners — override any dark text classes */
.text-blue-900 { color: #a0e9f0 !important; }
.text-amber-900 { color: #fde68a !important; }
.text-amber-800 { color: #fcd34d !important; }
.text-amber-700 { color: #f5b800 !important; }
.text-blue-600 { color: #08d9e8 !important; }

/* Payment section list items */
.space-y-2 li .text-muted-foreground,
ul li span.text-muted-foreground { color: #94a3b8 !important; }
ul li .font-medium { color: #e2e8f0; }

/* Stat boxes */
.rp-stat { color: #e2e8f0; }

/* Badge text on dark bg */
.rp-badge-top   { color: #f5b800 !important; }
.rp-badge-bonus { color: #ff5599 !important; }
.rp-badge-teal  { color: #08d9e8 !important; }

/* Cookie banner */
#cookie-banner h3 { color: #f0f6ff !important; }
#cookie-banner p  { color: #94a3b8 !important; }

/* Responsible gaming warning list */
.bg-warning\/30 li span,
.bg-destructive\/10 li span { color: #e2e8f0 !important; }

/* Contact section info box */
.bg-muted\/30 p { color: #94a3b8; }

/* Section headings on all bg variants */
.bg-background h2,
.bg-muted\/30 h2,
.py-16 h2,
.py-12 h2 { color: #f0f6ff; }

/* Small text helpers */
.text-xs { color: #94a3b8; }
.text-sm { color: #cbd5e1; }
.font-bold { color: inherit; }
.font-semibold { color: inherit; }

/* ── Animations ── */
@keyframes fade-in       { from { opacity: 0; }                           to { opacity: 1; } }
@keyframes fade-in-up    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-right   { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-glow    { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes bar-fill      { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
@keyframes slide-from-bottom { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer       { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes float         { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }

.animate-fade-in          { animation: fade-in .6s ease-out; }
.animate-fade-in-up       { animation: fade-in-up .6s ease-out; animation-fill-mode: both; }
.animate-slide-right      { animation: slide-right .6s ease-out; animation-fill-mode: both; }
.animate-slide-in-right   { animation: slide-right .6s ease-out; animation-fill-mode: both; }
.animate-slide-in-from-bottom { animation: slide-from-bottom .5s cubic-bezier(.16,1,.3,1); }
.animate-scale-in         { animation: fade-in-up .4s ease-out; }
.rp-pulse                 { animation: pulse-glow 2.5s ease-in-out infinite; }

/* ── Typography ── */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* ── Focus ── */
*:focus-visible { outline: 2px solid hsl(190, 90%, 50%); outline-offset: 2px; }

/* ── Transitions ── */
button, a { transition: all .2s ease-in-out; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: hsl(222, 47%, 10%); }
::-webkit-scrollbar-thumb { background: hsl(190, 90%, 30%); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(190, 90%, 45%); }

/* ════════════════════════════════════════════
   HEADER
════════════════════════════════════════════ */
header {
  background: linear-gradient(90deg, hsl(222, 47% 6%) 0%, hsl(222, 55%, 10%) 100%);
  border-bottom: 1px solid rgba(5, 150, 105, 0.2);
  box-shadow: 0 4px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════════ */
.rp-hero,
section.bg-primary {
  background: linear-gradient(135deg, #040a16 0%, #0d1a2d 40%, #0a1525 70%, #020814 100%);
  position: relative;
  overflow: hidden;
}
.rp-hero::before,
section.bg-primary::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(5, 150, 105, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(245, 158, 11, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(6, 182, 212, 0.10) 0%, transparent 50%);
  pointer-events: none;
}
.rp-hero::after,
section.bg-primary::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.5), transparent);
}
.logo-img {
  width: 200px;
}
/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.rp-card,
.bg-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rp-card:hover,
.bg-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.3);
  background: rgba(15, 23, 42, 0.8);
}

/* ════════════════════════════════════════════
   RANKING PAGE — Score Pulse Cards
════════════════════════════════════════════ */
:root {
  --emerald: #10b981;
  --emerald-dark: #059669;
  --amber: #f59e0b;
  --amber-light: #fbbf24;
  --sky: #0ea5e9;
  --slate-dark: #0f172a;
}

/* Sort bar */
.rp-sort-bar {
  position: sticky; top: 64px; z-index: 40;
  background: rgba(13, 26, 45, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(8, 217, 232, 0.15);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Filter pills */
.rp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(8, 217, 232, 0.08); color: #08d9e8; border: 1.5px solid rgba(8, 217, 232, 0.2);
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.rp-pill:hover { background: rgba(8, 217, 232, 0.15); border-color: #08d9e8; }
.rp-pill.active {
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4);
}

/* Casino Score Card */
.rp-card {
  background: hsl(222, 47%, 14%);
  border-radius: 16px;
  border: 1px solid hsl(215, 28%, 22%);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.rp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(8,217,232,.12); border-color: rgba(8,217,232,.25); }
.rp-card-rank1 { border-color: rgba(245,184,0,.4); border-width: 2px; box-shadow: 0 4px 28px rgba(245,184,0,.15); }

/* score pulse bars */
.pulse-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 28px;
}
.pulse-bars span {
  display: block; width: 5px; border-radius: 2px 2px 0 0;
  animation: bar-fill .6s ease-out both;
  background: linear-gradient(180deg, var(--emerald), var(--emerald-dark));
}
.pulse-bars span:nth-child(1) { height: 40%; animation-delay: .05s; }
.pulse-bars span:nth-child(2) { height: 65%; animation-delay: .10s; }
.pulse-bars span:nth-child(3) { height: 100%; animation-delay: .15s; }
.pulse-bars span:nth-child(4) { height: 85%; animation-delay: .20s; }
.pulse-bars span:nth-child(5) { height: 55%; animation-delay: .25s; }
.pulse-bars span:nth-child(6) { height: 75%; animation-delay: .30s; }
.pulse-bars span:nth-child(7) { height: 90%; animation-delay: .35s; }

/* rank badge */
.rp-rank-1 { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 0 18px rgba(245,158,11,.5); }
.rp-rank-2 { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 0 12px rgba(71,85,105,.35); }
.rp-rank-3 { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 12px rgba(16,185,129,.35); }

/* stat box */
.rp-stat {
  background: rgba(8, 217, 232, 0.07);
  border: 1px solid rgba(8, 217, 232, 0.15);
  border-radius: 10px;
  padding: 8px 10px; text-align: center;
}

/* badges */
.rp-badge-top   { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.rp-badge-bonus { background: rgba(14,165,233,.12); color: #0ea5e9; border: 1px solid rgba(14,165,233,.25); }
.rp-badge-teal  { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.25); }

/* CTA buttons — gold gradient */
.rp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a; font-weight: 800; border-radius: 12px;
  padding: 12px 20px; font-size: 14px; transition: all .2s;
  box-shadow: 0 4px 14px rgba(245,158,11,.35);
  letter-spacing: 0.02em;
}
.rp-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(245,158,11,.5); }

/* Visit buttons */
a.bg-destructive,
button.bg-destructive {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  box-shadow: 0 4px 14px rgba(14,165,233,.3);
  font-weight: 700;
  letter-spacing: 0.04em;
}
a.bg-destructive:hover,
button.bg-destructive:hover {
  box-shadow: 0 8px 24px rgba(14,165,233,.5) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* card-desktop / card-mobile toggle */
.card-desktop { display: flex; }
.card-mobile  { display: none; }
@media(max-width:1023px) { .card-desktop{display:none!important;} .card-mobile{display:block!important;} }
@media(min-width:1024px) { .card-desktop{display:flex!important;} .card-mobile{display:none!important;} }
.rp-card { width: 100%; }

/* ════════════════════════════════════════════
   COMPARISON TABLE
════════════════════════════════════════════ */
.min-w-\[640px\] {
  background: hsl(222, 47%, 14%);
  border: 1px solid hsl(215, 28%, 22%);
}

/* Age banner override */
section.bg-amber-50 {
  background: rgba(245, 184, 0, 0.08) !important;
  border-color: rgba(245, 184, 0, 0.4) !important;
}
section.bg-amber-50 .text-amber-900,
section.bg-amber-50 strong.text-amber-800 {
  color: #ffd23f !important;
}
section.bg-amber-50 i { color: #f5b800 !important; }

/* Disclaimer banner override */
section.bg-gradient-to-r {
  background: rgba(8, 217, 232, 0.06) !important;
  border-color: rgba(8, 217, 232, 0.2) !important;
}
section.bg-gradient-to-r .text-blue-900 { color: #a0e9f0 !important; }
section.bg-gradient-to-r i { color: #08d9e8 !important; }

/* Footer */
footer {
  background: linear-gradient(180deg, #050e1c 0%, #030b16 100%) !important;
  border-top: 1px solid rgba(8, 217, 232, 0.12);
}

/* Cookie banner */
#cookie-banner .bg-card {
  background: hsl(222, 47%, 16%) !important;
  border-top: 2px solid #08d9e8 !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}

/* Section alternating backgrounds */
.bg-background { background-color: hsl(222, 47% 5%) !important; }
.bg-muted\/30  { background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 28, 0.95) 100%) !important; }

/* ════════════════════════════════════════════
   MOBILE — Global
════════════════════════════════════════════ */
@media(max-width:640px) {
  .container { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.35rem !important; }
  article p, .prose p { font-size: .9rem; line-height: 1.7; }
  .rp-pill { padding: 8px 14px; font-size: 12px; }
}
@media(max-width:480px) {
  #affiliate-notice { font-size: 10px !important; line-height: 1.5; }
}
@media(max-width:1023px) {
  .hidden.lg\:block { display: none !important; }
  .lg\:hidden { display: block !important; }
}

/* ── Mobile nav ── */
#mobile-menu a { display: block; padding: 10px 0; border-bottom: 1px solid rgba(8,217,232,.08); color: rgba(255,255,255,0.85); }
#mobile-menu a:last-child { border-bottom: none; }

/* ── CTA touch target ── */
@media(max-width:640px) {
  .rp-cta, a.bg-destructive, button.bg-destructive { min-height: 44px; }
  footer .grid { gap: 24px !important; }
  footer .flex-wrap img { height: 40px !important; }
}

/* ── Selection Guide cards glow on hover ── */
.bg-primary\/10 { background-color: rgba(8,217,232,0.08) !important; }
.group:hover .bg-primary\/10,
.group:hover .group-hover\:bg-primary\/20 {
  background-color: rgba(8,217,232,0.15) !important;
}

/* ── Shimmer on winner badge ── */
.shimmer-gold {
  background: linear-gradient(90deg, #f5b800 0%, #ffd23f 40%, #f5b800 60%, #d97706 100%);
  background-size: 200% auto;
  animation: shimmer 2.5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Floating animation for icons ── */
.float-icon { animation: float 3s ease-in-out infinite; }