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

/* ══════════════════════════════════════════
   Apuestas Prime — Forest Green Premium Design System
   Palette: Forest Green / Lime Green / Solar Gold
   Domain: apuestasprime.store
   Version: 1.0.0
══════════════════════════════════════════ */
:root {
  --primary:            90 100% 28%;    /* Forest Green #489100 */
  --primary-foreground: 0 0% 100%;

  --background: 220 33% 5%;            /* Deep slate background */
  --foreground: 210 40% 98%;           /* Pure white text */

  --card: 220 33% 9%;                  /* Darker card bg */
  --card-foreground: 210 40% 98%;

  --muted: 220 20% 12%;                /* Muted bg */
  --muted-foreground: 215 20% 65%;

  --destructive: 0 84% 60%;            /* Red for CTAs */
  --destructive-foreground: 0 0% 100%;

  --secondary: 84 100% 45%;            /* Lime Green #80e600 */
  --secondary-foreground: 90 100% 10%;

  --warning: 45 100% 50%;               /* Vibrant Gold */
  --warning-foreground: 90 100% 10%;

  --border: 220 20% 18%;
  --ring: 90 100% 28%;
  --radius: 0.75rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  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: hsl(var(--primary)) !important; }

/* Secondary (lime) text */
.text-secondary { color: hsl(var(--secondary)) !important; }

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

/* Destructive (Red) text */
.text-destructive { color: #ef4444 !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: hsl(var(--secondary)) !important; }
.rp-pill.active { color: #0d1a2d !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: #a0f0a0 !important; }
.text-amber-900 { color: #fde68a !important; }
.text-amber-800 { color: #fcd34d !important; }
.text-amber-700 { color: #f5b800 !important; }
.text-blue-600 { color: hsl(var(--secondary)) !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: hsl(var(--secondary)) !important; }
.rp-badge-teal  { color: hsl(var(--primary)) !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(var(--primary) / 0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); }

/* ════════════════════════════════════════════
   HEADER
════════════════════════════════════════════ */
header {
  background: linear-gradient(90deg, hsl(var(--background)) 0%, hsl(220 33% 12%) 100%);
  border-bottom: 1px solid hsla(var(--primary) / 0.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════════ */
.rp-hero,
section.bg-primary {
  background: linear-gradient(135deg, #050a02 0%, #152500 40%, #0d1505 70%, #040801 100%);
  position: relative;
  overflow: hidden;
}
.rp-hero::before,
section.bg-primary::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, hsla(var(--primary) / 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(245,184,0,.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, hsla(var(--secondary) / 0.08) 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, hsla(var(--primary) / 0.5), transparent);
}
.logo-img {
  width: 200px;
}
/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.rp-card,
.bg-card {
  background: hsl(222, 47%, 14%);
  border: 1px solid hsl(215, 28%, 22%);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rp-card:hover,
.bg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(72, 145, 0, 0.15);
  border-color: hsla(var(--primary) / 0.4);
}

/* ════════════════════════════════════════════
   RANKING PAGE — Score Pulse Cards
════════════════════════════════════════════ */
:root {
  --cyan: #80e600;
  --cyan-dark: #489100;
  --gold: #f5b800;
  --gold-light: #ffd23f;
  --pink: #ef4444;
  --navy: #050a02;
}

/* Sort bar */
.rp-sort-bar {
  position: sticky; top: 64px; z-index: 40;
  background: hsla(var(--background) / 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid hsla(var(--primary) / 0.2);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

/* 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: hsla(var(--primary) / 0.08); color: hsl(var(--primary)); border: 1.5px solid hsla(var(--primary) / 0.2);
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.rp-pill:hover { background: hsla(var(--primary) / 0.15); border-color: hsl(var(--primary)); }
.rp-pill.active {
  background: linear-gradient(135deg, #08d9e8, #06b6c4);
  color: #0d1a2d; border-color: transparent;
  box-shadow: 0 4px 14px rgba(8, 217, 232, 0.35);
}

/* 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(-5px); box-shadow: 0 20px 40px rgba(72,145,0,.15); border-color: hsla(var(--primary) / 0.4); }
.rp-card-rank1 { border-color: hsla(var(--primary) / 0.5); border-width: 2px; box-shadow: 0 8px 32px rgba(72,145,0,.2); }

/* 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(--cyan), var(--cyan-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, #f5b800, #d97706); box-shadow: 0 0 18px rgba(245,184,0,.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, #489100, #3a7500); box-shadow: 0 0 12px rgba(72,145,0,.35); }

/* stat box */
.rp-stat {
  background: hsla(var(--primary) / 0.07);
  border: 1px solid hsla(var(--primary) / 0.15);
  border-radius: 10px;
  padding: 8px 10px; text-align: center;
}

/* badges */
.rp-badge-top   { background: rgba(245,184,0,.12); color: #f5b800; border: 1px solid rgba(245,184,0,.25); }
.rp-badge-bonus { background: hsla(var(--secondary) / 0.12); color: hsl(var(--secondary)); border: 1px solid hsla(var(--secondary) / 0.25); }
.rp-badge-teal  { background: hsla(var(--primary) / 0.12); color: hsl(var(--primary)); border: 1px solid hsla(var(--primary) / 0.25); }

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

/* Visit buttons */
a.bg-destructive,
button.bg-destructive {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
  font-weight: 700;
  letter-spacing: 0.04em;
}
a.bg-destructive:hover,
button.bg-destructive:hover {
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-3px) 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: hsla(var(--primary) / 0.06) !important;
  border-color: hsla(var(--primary) / 0.2) !important;
}
section.bg-gradient-to-r .text-blue-900 { color: #f0f6ff !important; }
section.bg-gradient-to-r i { color: hsl(var(--primary)) !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(var(--card)) !important;
  border-top: 3px solid hsl(var(--primary)) !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
}

/* Section alternating backgrounds */
.bg-background { background-color: hsl(var(--background)) !important; }
.bg-muted\/30  { background-color: hsla(var(--muted) / 0.6) !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: hsla(var(--primary) / 0.08) !important; }
.group:hover .bg-primary\/10,
.group:hover .group-hover\:bg-primary\/20 {
  background-color: hsla(var(--primary) / 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; }