/* RANKVAULT — Premium Casino Rankings · Dark Navy + Amber Gold */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  /* Dark navy — header, hero, table headers */
  --primary: 215 35% 15%;
  --primary-foreground: 0 0% 100%;

  /* Light background */
  --background: 220 20% 97%;
  --foreground: 215 30% 12%;

  /* White cards */
  --card: 0 0% 100%;
  --card-foreground: 215 30% 12%;

  /* Muted */
  --muted: 215 20% 94%;
  --muted-foreground: 215 16% 47%;

  /* Amber/Gold — CTA buttons */
  --destructive: 38 95% 48%;
  --destructive-foreground: 26 83% 14%;

  /* Green — checkmarks, licences */
  --secondary: 142 71% 42%;
  --secondary-foreground: 0 0% 100%;

  /* Amber — bonus boxes */
  --warning: 38 95% 48%;
  --warning-foreground: 26 83% 14%;

  /* Accent */
  --accent: 345 83% 47%;
  --accent-foreground: 0 0% 100%;

  /* Border */
  --border: 215 20% 88%;
  --input: 215 20% 88%;
  --ring: 38 95% 48%;

  --radius: 0.5rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Animations matching React version */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
  animation-fill-mode: both;
}

.animate-slide-in-right {
  animation: slide-in-right 0.6s ease-out;
  animation-fill-mode: both;
}

.animate-slide-in-from-bottom {
  animation: slide-in-from-bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-scale-in {
  animation: scale-in 0.4s ease-out;
}

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

.text-pretty {
  text-wrap: pretty;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Smooth transitions */
button,
a {
  transition: all 0.2s ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* ── RANKVAULT PREMIUM DESIGN EXTENSIONS ── */

/* Header — dark navy gradient */
header.bg-primary {
  background: linear-gradient(180deg, hsl(215 40% 11%) 0%, hsl(215 35% 15%) 100%) !important;
  border-bottom: 1px solid rgba(245,158,11,0.18) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

/* Logo text style */
.rv-brand {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1;
  text-decoration: none;
}
.rv-brand .gold { color: #f59e0b; }

/* ── Hero dark gradient ── */
section.bg-primary {
  background: linear-gradient(135deg,
    hsl(215 40% 11%) 0%,
    hsl(215 35% 15%) 50%,
    hsl(215 30% 19%) 100%) !important;
  position: relative;
  overflow: hidden;
}
section.bg-primary::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(245,158,11,0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* hero stat accent */
.text-3xl.font-bold,
.text-4xl.font-bold {
  font-weight: 900;
}

/* ── Trust badge pills in hero ── */
.bg-primary-foreground\/10 {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.bg-primary-foreground\/10:hover {
  background: rgba(245,158,11,0.14) !important;
  border-color: rgba(245,158,11,0.35) !important;
}

/* ── CTA / Visit Buttons → Amber Gold ── */
.bg-destructive,
a.bg-destructive,
button.bg-destructive {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #1a1200 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.35) !important;
}
.bg-destructive:hover,
a.bg-destructive:hover,
button.bg-destructive:hover,
.hover\:bg-destructive\/90:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  box-shadow: 0 4px 14px rgba(245,158,11,0.55) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* ── Rank table header ── */
.bg-primary.text-primary-foreground {
  background: linear-gradient(180deg, hsl(215 40% 11%) 0%, hsl(215 35% 15%) 100%) !important;
}

/* ── Rank #1 row highlighting ── */
.grid:first-child .w-10.rounded-full {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #1a1200 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4) !important;
}

/* ── Warning/bonus boxes → amber ── */
.bg-warning\/30 {
  background: linear-gradient(135deg, #fff7ed, #fffbeb) !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
  border-radius: 8px !important;
}
.text-warning-foreground {
  color: #92400e !important;
}
.font-bold.text-lg.text-warning-foreground {
  font-weight: 800 !important;
  color: #78350f !important;
}

/* ── Feature/info cards ── */
.bg-card.border {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.bg-card.border:hover {
  border-color: rgba(245,158,11,0.35) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.1) !important;
}

/* ── Review cards top-pick accent ── */
.bg-card.border.rounded-xl:first-child {
  border-left: 4px solid #f59e0b;
}

/* ── Section dividers ── */
.border-y-2.border-amber-400 {
  border-color: #f59e0b !important;
}

/* ── Footer ── */
footer {
  background: linear-gradient(180deg, hsl(215 40% 9%) 0%, hsl(215 45% 6%) 100%) !important;
  border-top: 1px solid rgba(245,158,11,0.2) !important;
}

/* Footer heading accent */
footer .text-warning {
  color: #f59e0b !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ── Responsible gaming section ── */
.bg-secondary\/10 {
  background: rgba(16,185,129,0.08) !important;
  border-color: rgba(16,185,129,0.25) !important;
}
.text-secondary {
  color: #059669 !important;
}

/* ── Pay badge ── */
.bg-secondary\/20 {
  background: rgba(16,185,129,0.1) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16,185,129,0.2) !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}

/* ── Primary icon containers ── */
.bg-primary\/10 {
  background: rgba(245,158,11,0.1) !important;
}
.bg-primary\/10 .text-primary,
.text-primary {
  color: hsl(215 35% 30%) !important;
}

/* ── Comparison table ── */
.bg-card.rounded-xl.shadow-lg {
  box-shadow: 0 4px 20px rgba(15,23,42,0.09) !important;
}

/* ── Cookie banner ── */
#cookie-banner .bg-card {
  border-top: 3px solid #f59e0b !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12) !important;
}

/* ── Mobile nav ── */
#mobile-menu {
  background: hsl(215 40% 11%);
  padding: 1rem;
}

/* ── Age warning ── */
.bg-amber-50 {
  background: #fffbeb !important;
}

/* ── Score stars ── */
.fill-yellow-400,
.text-yellow-400 {
  fill: #f59e0b !important;
  color: #f59e0b !important;
}

/* ── Hover row highlight ── */
.hover\:bg-muted\/50:hover {
  background: hsl(215 20% 96%) !important;
  box-shadow: inset 4px 0 0 #f59e0b !important;
}

/* ── "Ver Análisis Completo" button ── */
.bg-primary.hover\:bg-primary\/90 {
  background: hsl(215 35% 15%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  transition: background 0.2s, transform 0.2s !important;
}
.bg-primary.hover\:bg-primary\/90:hover {
  background: hsl(215 35% 22%) !important;
  transform: translateY(-1px) !important;
}

/* ── Gradient sections ── */
.bg-gradient-to-br.from-primary {
  background: linear-gradient(135deg,
    hsl(215 40% 11%) 0%,
    hsl(215 35% 15%) 60%,
    hsl(215 28% 20%) 100%) !important;
}

/* ── Disclaimer & info banners ── */
.bg-gradient-to-r.from-blue-50 {
  background: linear-gradient(90deg, #eff6ff, #dbeafe) !important;
}

/* ── RANKVAULT logo SVG shield icon ── */
.rv-shield { filter: drop-shadow(0 2px 4px rgba(245,158,11,0.4)); }

/* ══════════════════════════════════════════════════════════
   RANKVAULT v2 — Premium Animation Utilities
   ══════════════════════════════════════════════════════════ */

/* ── Scroll-reveal (index.html, guia.html, casino pages) ── */
.rv-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.rv-delay-1 { transition-delay: 0.10s; }
.rv-delay-2 { transition-delay: 0.20s; }
.rv-delay-3 { transition-delay: 0.30s; }
.rv-delay-4 { transition-delay: 0.40s; }
.rv-delay-5 { transition-delay: 0.50s; }

/* ── Shimmer skeleton state ── */
@keyframes rv-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.rv-shimmer {
  background: linear-gradient(90deg, #1e2d45 25%, #243553 50%, #1e2d45 75%);
  background-size: 200% 100%;
  animation: rv-shimmer 1.6s linear infinite;
  border-radius: 4px;
}

/* ── Gold pulse on hero stat numbers ── */
@keyframes rv-gold-pulse {
  0%, 100% { text-shadow: 0 0 8px  rgba(245,158,11,0.30); }
  50%       { text-shadow: 0 0 24px rgba(245,158,11,0.70),
                           0 0 42px rgba(245,158,11,0.30); }
}
.rv-gold-pulse {
  animation: rv-gold-pulse 2.8s ease-in-out infinite;
}

/* ── Ambient ambient-glow on icon badges ── */
@keyframes rv-icon-glow {
  0%, 100% { box-shadow: 0 0 0   0   rgba(245,158,11,0.0); }
  50%       { box-shadow: 0 0 14px 4px rgba(245,158,11,0.3); }
}
.rv-icon-glow {
  animation: rv-icon-glow 3s ease-in-out infinite;
}

/* ── Casino table row — gold left-border reveal on hover ── */
.rv-table-row {
  position: relative;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.rv-table-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 0 2px 2px 0;
}
.rv-table-row:hover::before {
  transform: scaleY(1);
}
.rv-table-row:hover {
  background: rgba(245,158,11,0.04) !important;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.10);
}

/* ── Floating badge micro-bounce on load ── */
@keyframes rv-bounce-in {
  0%   { opacity: 0; transform: scale(0.6) translateY(-6px); }
  60%  { transform: scale(1.08) translateY(2px); }
  80%  { transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.rv-bounce-in {
  animation: rv-bounce-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Card entrance from left (casino detail pages) ── */
@keyframes rv-slide-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.rv-slide-left {
  animation: rv-slide-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Score ring fill animation (used on casino pages) ── */
@keyframes rv-ring-fill {
  from { stroke-dashoffset: 283; }
  to   { stroke-dashoffset: var(--rv-ring-offset, 57); }
}
.rv-ring-arc {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-ring-arc.in-view {
  stroke-dashoffset: var(--rv-ring-offset, 57);
}

/* ── Staggered list entrance (methodology, FAQ) ── */
.rv-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.rv-stagger.in-view > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.rv-stagger.in-view > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.15s; }
.rv-stagger.in-view > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.25s; }
.rv-stagger.in-view > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.35s; }
.rv-stagger.in-view > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.45s; }
.rv-stagger.in-view > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.55s; }

/* ── Page transition fade-in ── */
@keyframes rv-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rv-page-enter {
  animation: rv-page-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ════════════════════════════════════════════════════════════
   RANKVAULT — Mobile-first responsive fixes
   ════════════════════════════════════════════════════════════ */

/* ── Prevent horizontal overflow globally ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
* { box-sizing: border-box; }

/* ── Container safe padding on small screens ── */
@media (max-width: 640px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── Mobile navigation menu ── */
#mobile-menu a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  font-weight: 500;
  transition: color .2s, padding-left .2s;
}
#mobile-menu a:last-child { border-bottom: none; }
#mobile-menu a:hover,
#mobile-menu a[style*="f59e0b"] { color: #f59e0b !important; padding-left: 6px; }

/* ── +18 banner wrap on small phones ── */
@media (max-width: 500px) {
  .rv-age-banner { flex-direction: column; gap: 6px; text-align: center; }
}

/* ── Hero section: prevent text overflow on small phones ── */
@media (max-width: 480px) {
  .hero-ranking h1,
  section.bg-primary h1 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
  section.bg-primary .text-3xl,
  section.bg-primary .text-4xl {
    font-size: 2rem !important;
  }
}

/* ── Ranking page: mobile card improvements ── */
@media (max-width: 1023px) {
  /* Ensure mobile cards take full width and don't overflow */
  .casino-card { border-radius: 12px; }

  /* Mobile card's 2-col stat grid is readable at all sizes */
  .card-mobile .grid { gap: 8px; }
  .card-mobile .stat-box { padding: 8px 10px; }

  /* Badges wrap nicely */
  .card-mobile .flex.flex-wrap { gap: 6px; }

  /* CTA buttons: full tap area */
  .card-mobile .cta-glow,
  .card-mobile .cta-outline {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 0.875rem !important;
    border-radius: 10px !important;
  }
}

/* ── Sort bar: hide scrollbar on mobile for clean look ── */
.sort-sticky [style*="scrollbar-width:none"],
.sort-sticky div {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sort-sticky div::-webkit-scrollbar { display: none; }

/* ── Filter pills: min touch target ── */
@media (max-width: 640px) {
  .filter-pill { padding: 8px 14px; font-size: 12px; }
}

/* ── Footer: tighten spacing on mobile ── */
@media (max-width: 640px) {
  footer .grid { gap: 24px !important; }
  footer .col-span-2 { col-span: unset; }
  footer .flex-wrap img { height: 40px !important; }
  footer .py-10 { padding-top: 24px; padding-bottom: 24px; }
}

/* ── Legal/info pages: body text readable on mobile ── */
@media (max-width: 640px) {
  article p, .prose p { font-size: 0.9rem; line-height: 1.7; }
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.35rem !important; }
}

/* ── Index.html desktop table: only shows at lg, but guard overflow anyway ── */
@media (max-width: 1023px) {
  .hidden.lg\:block { display: none !important; }
  .lg\:hidden { display: block !important; }
}

/* ── Index mobile casino cards ── */
@media (max-width: 640px) {
  .bg-card.rounded-lg.shadow-sm.p-5 { padding: 16px !important; }
  .bg-card .text-lg.font-bold { font-size: 1rem !important; }
  .bg-card .font-bold.text-lg { font-size: 0.95rem !important; }
}

/* ── CTA buttons: better mobile touch targets ── */
@media (max-width: 640px) {
  a.bg-destructive, button.bg-destructive {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Affiliate notice bar: truncate gracefully ── */
@media (max-width: 480px) {
  #affiliate-notice { font-size: 10px !important; line-height: 1.5; }
  #affiliate-notice strong { font-size: 10px; }
}

/* ── Disclaimer banner: wrap on mobile ── */
@media (max-width: 640px) {
  section[style*="eff6ff"] .flex { flex-wrap: wrap; }
  section[style*="eff6ff"] .flex-shrink-0 { display: none; }
}