/* ═══════════════════════════════════════════════════════════════
   Best Online Sportsbooks — Main Stylesheet
   
   Design Language:
   - Deep navy/blue primary (#1e40af, #1d4ed8) — trust, authority
   - Amber/gold accents (#f59e0b, #fbbf24) — energy, wins
   - Clean white body with light gray sections
   - Crisp typography: Plus Jakarta Sans
   - Modern card design with subtle depth

   HEADER NOTE (2026 redesign):
   The old single-row .header is hidden below.
   The new 2-row .site-header styles live in header.php <style>.
   --header-height updated to 92px (50px top + 42px bottom).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Syne:wght@700;800;900&display=swap');

/* ─── CSS VARIABLES ──────────────────────────────────────────── */
:root {
    /* Primary — Deep Blue */
    --blue-950:  #0c1445;
    --blue-900:  #1e3a8a;
    --blue-800:  #1e40af;
    --blue-700:  #1d4ed8;
    --blue-600:  #2563eb;
    --blue-500:  #3b82f6;
    --blue-100:  #dbeafe;
    --blue-50:   #eff6ff;

    /* Accent — Amber/Gold */
    --amber-600: #d97706;
    --amber-500: #f59e0b;
    --amber-400: #fbbf24;
    --amber-300: #fcd34d;
    --amber-200: #fde68a;
    --amber-100: #fef3c7;
    --amber-50:  #fffbeb;

    /* Neutrals */
    --white:     #ffffff;
    --gray-50:   #f8fafc;
    --gray-100:  #f1f5f9;
    --gray-200:  #e2e8f0;
    --gray-300:  #cbd5e1;
    --gray-400:  #94a3b8;
    --gray-500:  #64748b;
    --gray-600:  #475569;
    --gray-700:  #334155;
    --gray-800:  #1e293b;
    --gray-900:  #0f172a;

    /* Semantic */
    --success:   #059669;
    --success-bg:#ecfdf5;
    --danger:    #dc2626;
    --danger-bg: #fef2f2;
    --warning:   #d97706;
    --info:      #2563eb;

    /* Typography */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Syne', 'Plus Jakarta Sans', sans-serif;

    /* Layout */
    --container-max:  1200px;

    /* Header height — 2-row design: 50px top + 42px bottom = 92px.
       Used by scroll-padding-top and sticky offset calculations. */
    --header-height:  92px;
    --hdr-top-h:      50px;
    --hdr-bot-h:      42px;
    --hdr-total:      92px;

    /* Radius */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-2xl: 28px;

    /* Shadows */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:   0 2px 6px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.07);
    --shadow-lg:   0 10px 28px rgba(0,0,0,0.09);
    --shadow-xl:   0 20px 48px rgba(0,0,0,0.11);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-card-hover: 0 8px 24px rgba(30,64,175,0.12), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-blue: 0 4px 14px rgba(30,64,175,0.25);
    --shadow-blue-lg: 0 8px 28px rgba(30,64,175,0.35);

    /* Transitions */
    --ease:        cubic-bezier(0.4,0,0.2,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}


/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Extra padding so anchor targets aren't hidden under 2-row sticky header */
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-800);
    background: var(--white);
    overflow-x: hidden;
}

img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition:color 0.2s var(--ease); }

/* ─── CONTAINER ──────────────────────────────────────────────── */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER / NAV — LEGACY SUPPRESSION
   The new header (.site-header) is a 2-row design styled entirely
   inside header.php's <style> block. The old .header below is
   hidden so it doesn't conflict. All breadcrumb / nav styles that
   pages depend on are preserved further down.
   ═══════════════════════════════════════════════════════════════ */

/* Hide old single-row header — new .site-header replaces it */
.header {
    display: none !important;
}

/* Keep old nav-container, nav-link, dropdown-menu styles
   for any admin pages or legacy partials that may still use them */
.nav-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo-link { display:block; text-decoration:none; flex-shrink:0; }
.logo-wrapper { height: var(--header-height); display:flex; align-items:center; }
.logo-svg {
    height: 44px;
    width: auto;
    transition: transform 0.3s var(--ease-spring);
}
.logo-link:hover .logo-svg { transform: scale(1.03); }

.nav-menu { display:flex; align-items:center; gap:2px; }
.nav-item { position:relative; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    border-radius: var(--radius-md);
    transition: all 0.2s var(--ease);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.12); }
.nav-link-hot { color: var(--amber-300) !important; font-weight:700 !important; }
.nav-link-hot:hover { background:rgba(251,191,36,0.12) !important; }

.dd-icon { font-size:8px; opacity:0.55; transition:transform 0.2s; margin-top:1px; }
.nav-item:hover .dd-icon { transform:rotate(180deg); }

.promo-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--amber-400);
    color: #78350f;
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: 10px;
    margin-left: 5px;
    animation: badgePulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse {
    0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(251,191,36,0.4); }
    50%      { transform:scale(1.08); box-shadow:0 0 0 4px rgba(251,191,36,0); }
}

/* Dropdowns (legacy — still used by admin nav) */
.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: -10px;
    min-width: 260px;
    max-width: 360px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 8px;
    list-style: none;
    z-index: 200;
    animation: ddFadeIn 0.18s var(--ease);
}
@keyframes ddFadeIn {
    from { opacity:0; transform:translateY(-6px) scale(0.98); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.nav-item:hover > .dropdown-menu,
.nav-item.dropdown-active > .dropdown-menu { display:block; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
    transition: background 0.15s;
}
.dropdown-item:hover { background:var(--gray-50); color:var(--gray-900); }
.dropdown-item-logo {
    width: 30px; height: 30px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--gray-100);
    padding: 2px;
}
.dropdown-item-logo-placeholder {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
}
.dropdown-view-all {
    display: block;
    padding: 9px 12px;
    margin-top: 4px;
    border-top: 1px solid var(--gray-100);
    color: var(--blue-700);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    text-decoration: none;
}
.dropdown-view-all:hover { color:var(--blue-800); background:var(--blue-50); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Mobile toggle (legacy) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
}
.mobile-menu-toggle span { width:24px; height:2px; background:#fff; border-radius:2px; transition:0.3s; display:block; }

/* Breadcrumb */
.breadcrumb-nav {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: 10px 0;
}
.breadcrumb-list { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:2px; font-size:0.8rem; }
.breadcrumb-item { display:flex; align-items:center; gap:4px; color:var(--gray-500); }
.breadcrumb-item--current { color:var(--gray-700); font-weight:600; }
.breadcrumb-link { color:var(--blue-700); font-weight:500; transition:color 0.15s; }
.breadcrumb-link:hover { color:var(--blue-900); text-decoration:underline; }
.breadcrumb-sep { color:var(--gray-300); margin:0 2px; }

/* Mobile nav legacy breakpoint — kept for any pages using old nav markup */
@media (max-width: 1024px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        box-shadow: var(--shadow-xl);
        gap: 2px;
    }
    .nav-menu.active { display:flex; }
    .nav-link { color:var(--gray-700); padding:13px 16px; justify-content:space-between; }
    .nav-link:hover { background:var(--gray-50); color:var(--gray-900); }
    .dropdown-menu { position:static; box-shadow:none; border:none; animation:none; background:var(--gray-50); margin-top:4px; min-width:0; max-width:none; }
    .nav-item.dropdown-active .dropdown-menu { display:block; }
    .mobile-menu-toggle { display:flex; }
}

/* Mobile: reduce header-height var so scroll-padding shrinks too */
@media (max-width: 768px) {
    :root {
        --header-height: 50px;
        --hdr-total: 50px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   HERO (Homepage)
   ═══════════════════════════════════════════════════════════════ */
.hero {
    background: var(--white);
    padding: 64px 24px 56px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(30,64,175,0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(245,158,11,0.04) 0%, transparent 50%);
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    color: var(--blue-700);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 20px;
}
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--gray-900);
    margin-bottom: 20px;
}
.hero h1 .highlight { color: var(--blue-700); }
.hero h1 .highlight-gold { color: var(--amber-500); }
.hero p {
    font-size: 1.1rem;
    color: var(--gray-500);
    max-width: 620px;
    margin-bottom: 36px;
    line-height: 1.7;
}
.hero-cta-group { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* Trust ticker */
.hero-ticker {
    display: flex;
    gap: 32px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}
.hero-ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-500);
}
.hero-ticker-item .ticker-value {
    font-weight: 800;
    color: var(--blue-700);
    font-size: 1.15rem;
}
.ticker-dot { width:8px; height:8px; border-radius:50%; background:var(--amber-400); }

/* Floating sport icons */
.hero-floating-icons { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.floating-icon { position:absolute; font-size:2rem; opacity:0.035; animation:floatDrift linear infinite; }
@keyframes floatDrift {
    0%   { transform:translateY(100vh) rotate(0deg); opacity:0; }
    8%   { opacity:0.035; }
    92%  { opacity:0.035; }
    100% { transform:translateY(-120px) rotate(180deg); opacity:0; }
}
.floating-icon:nth-child(1) { left:7%;  animation-duration:20s; animation-delay:0s; }
.floating-icon:nth-child(2) { left:19%; animation-duration:24s; animation-delay:4s; }
.floating-icon:nth-child(3) { left:34%; animation-duration:18s; animation-delay:7s; }
.floating-icon:nth-child(4) { left:52%; animation-duration:22s; animation-delay:2s; }
.floating-icon:nth-child(5) { left:68%; animation-duration:26s; animation-delay:5s; }
.floating-icon:nth-child(6) { left:83%; animation-duration:19s; animation-delay:9s; }
.floating-icon:nth-child(7) { left:92%; animation-duration:21s; animation-delay:1s; }


/* ═══════════════════════════════════════════════════════════════
   PAGE HEADERS (Interior pages)
   ═══════════════════════════════════════════════════════════════ */
.page-header {
    background: linear-gradient(135deg, var(--blue-950) 0%, var(--blue-900) 50%, var(--blue-800) 100%);
    padding: 56px 24px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(0,0,0,0.08) 0%, transparent 50%);
}
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 28px 28px;
}
.page-header-content { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.page-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.page-header p { font-size:1.05rem; opacity:0.85; line-height:1.65; }


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-play,
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-800));
    color: var(--white);
    padding: 13px 28px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.22s var(--ease);
    box-shadow: var(--shadow-blue);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.btn-primary:hover,
.btn-play:hover,
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-lg);
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
}
.btn-primary:active,
.btn-play:active { transform:translateY(0); }

.btn-amber {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    color: var(--white);
    box-shadow: 0 4px 14px rgba(245,158,11,0.3);
}
.btn-amber:hover {
    background: linear-gradient(135deg, var(--amber-400), var(--amber-500));
    box-shadow: 0 8px 24px rgba(245,158,11,0.4);
}

.btn-secondary,
.btn-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--white);
    color: var(--gray-700);
    padding: 13px 28px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.22s var(--ease);
    text-decoration: none;
    white-space: nowrap;
}
.btn-secondary:hover,
.btn-review:hover {
    border-color: var(--blue-400);
    color: var(--blue-700);
    background: var(--blue-50);
    transform: translateY(-1px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255,255,255,0.85);
    padding: 13px 28px;
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.22s var(--ease);
    text-decoration: none;
}
.btn-ghost:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.4); color:#fff; }

.btn-sm { padding:8px 16px; font-size:0.83rem; border-radius:var(--radius-sm); }
.btn-lg { padding:16px 36px; font-size:1.05rem; border-radius:var(--radius-lg); }


/* ═══════════════════════════════════════════════════════════════
   SPORTSBOOK CARDS
   ═══════════════════════════════════════════════════════════════ */
.site-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-100);
    transition: all 0.28s var(--ease);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.site-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-600), var(--amber-400));
    opacity: 0;
    transition: opacity 0.28s;
}
.site-card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-4px); }
.site-card:hover::before { opacity:1; }

/* NOTE: .site-header class name conflicts with new header.
   These .site-card .site-header styles are scoped via child context.
   The new HTML uses .site-header as the outer <header> tag but
   these card-level styles only apply inside .site-card. */
.site-card .site-header,
.site-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.site-rank {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.featured-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--amber-600);
    background: var(--amber-50);
    border: 1px solid var(--amber-200);
    padding: 3px 10px;
    border-radius: 999px;
}

.site-logo-container {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.site-logo {
    width: 60px; height: 60px;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.site-logo img { width:100%; height:100%; object-fit:contain; padding:6px; }
.logo-placeholder { font-size:1.5rem; font-weight:900; color:var(--gray-300); }

.site-info h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.site-rating { display:flex; align-items:center; gap:6px; }
.stars { display:flex; gap:1px; }
.star { font-size:0.88rem; }
.star-full  { color:var(--amber-400); }
.star-half  { color:var(--amber-400); opacity:0.6; }
.star-empty { color:var(--gray-300); }
.rating-value { font-size:0.82rem; font-weight:700; color:var(--gray-500); }

.badge-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }

.us-flag-badge {
    position: absolute;
    bottom: -3px; right: -3px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
    border: 2px solid var(--white);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    z-index: 2;
}
.us-flag-text { font-size:0.6rem; font-weight:800; color:var(--white); letter-spacing:0.5px; }

.crypto-badge {
    display: inline-flex; align-items:center; gap:3px;
    font-size: 0.7rem; font-weight:700;
    color: var(--amber-600);
    background: var(--amber-50);
    border: 1px solid var(--amber-200);
    padding: 3px 8px; border-radius:6px;
}
.live-badge {
    display: inline-flex; align-items:center; gap:3px;
    font-size: 0.7rem; font-weight:700;
    color: var(--success);
    background: var(--success-bg);
    padding: 3px 8px; border-radius:6px;
}
.availability-badge {
    display: inline-flex; align-items:center; gap:4px;
    font-size: 0.75rem; font-weight:600;
    padding: 3px 9px; border-radius:6px;
}
.availability-badge.allowed { color:var(--success); background:var(--success-bg); }
.availability-badge.blocked { color:var(--danger); background:var(--danger-bg); }

.site-description {
    font-size: 0.88rem;
    color: var(--gray-500);
    line-height: 1.65;
    margin-bottom: 14px;
    flex-grow: 1;
}

.site-features { display:flex; flex-direction:column; gap:5px; margin-bottom:18px; }
.feature-item { display:flex; align-items:center; gap:8px; font-size:0.84rem; color:var(--gray-600); }
.feature-icon { color:var(--blue-600); font-weight:700; flex-shrink:0; }

.site-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}
.site-actions .btn-play,
.site-actions .btn-primary,
.site-actions .btn-review,
.site-actions .btn-secondary { flex:1; justify-content:center; padding:11px 14px; font-size:0.88rem; }


/* ═══════════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════════ */
.filters {
    background: var(--white);
    padding: 16px 22px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-100);
    margin: -28px auto 36px;
    max-width: var(--container-max);
    position: relative;
    z-index: 10;
}
.filter-compact { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-label-inline { font-size:0.88rem; font-weight:600; color:var(--gray-500); }

.filter-select-compact {
    padding: 9px 34px 9px 13px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 140px;
    font-family: var(--font-primary);
}
.filter-select-compact:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.filter-reset {
    padding: 9px 16px;
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-primary);
}
.filter-reset:hover { background:var(--gray-200); color:var(--gray-700); }


/* ═══════════════════════════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════════════════════════ */
.sites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
@media (max-width:1024px) { .sites-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px)  { .sites-grid { grid-template-columns:1fr; } .articles-grid { grid-template-columns:1fr; } }


/* ═══════════════════════════════════════════════════════════════
   ARTICLE CARDS
   ═══════════════════════════════════════════════════════════════ */
.article-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-100);
    transition: all 0.28s var(--ease);
    display: block;
    color: inherit;
}
.article-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }

.article-image {
    width: 100%;
    height: 192px;
    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    position: relative;
    overflow: hidden;
}
.article-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 40%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 60%, rgba(0,0,0,0.1) 0%, transparent 50%);
}
.article-image img { width:100%; height:100%; object-fit:cover; }
.article-content { padding:22px; }
.article-category {
    display: inline-block;
    background: var(--blue-50);
    color: var(--blue-700);
    border: 1px solid var(--blue-100);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.article-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 8px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.article-excerpt { color:var(--gray-500); font-size:0.9rem; line-height:1.65; margin-bottom:14px; }
.article-meta {
    display: flex;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--gray-400);
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
}
.meta-item { display:flex; align-items:center; gap:4px; }


/* ═══════════════════════════════════════════════════════════════
   TRUST STATS BAR
   ═══════════════════════════════════════════════════════════════ */
.trust-bar {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: 28px 24px;
}
.trust-stats { display:flex; justify-content:center; gap:56px; flex-wrap:wrap; }
.trust-stat { text-align:center; }
.trust-stat-value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}
.trust-stat-value .accent { color:var(--blue-700); }
.trust-stat-label { font-size:0.82rem; color:var(--gray-400); font-weight:500; margin-top:2px; }


/* ═══════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════ */
.section { padding:80px 24px; }
.section-alt { background:var(--gray-50); }
.section-dark {
    background: linear-gradient(150deg, var(--blue-950) 0%, var(--blue-900) 100%);
    color: var(--white);
}
.section-header { text-align:center; margin-bottom:48px; }
.section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--blue-600);
    margin-bottom: 8px;
}
.section-dark .section-eyebrow { color:var(--amber-400); }
.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.section-dark .section-header h2 { color:var(--white); }
.section-header p { font-size:1rem; color:var(--gray-500); max-width:560px; margin:0 auto; }
.section-dark .section-header p { color:rgba(255,255,255,0.65); }


/* ═══════════════════════════════════════════════════════════════
   REVIEW PAGE
   ═══════════════════════════════════════════════════════════════ */
.review-container {
    max-width: 920px;
    margin: 0 auto 60px;
    background: var(--white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.review-hero {
    background: linear-gradient(135deg, var(--blue-950) 0%, var(--blue-900) 60%, var(--blue-800) 100%);
    padding: 40px;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.review-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 30%, rgba(255,255,255,0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 70%, rgba(0,0,0,0.1) 0%, transparent 50%);
}
.review-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 24px 24px;
}
.review-hero-content { position:relative; z-index:1; }

.rating-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(251,191,36,0.35);
    color: var(--amber-300);
    padding: 8px 18px;
    border-radius: var(--radius-lg);
    font-weight: 800;
    font-size: 1.1rem;
}

.review-quick-info {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.quick-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.quick-info-item {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    border-right: 1px solid var(--gray-200);
}
.quick-info-item:last-child { border-right:none; }
.quick-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-400);
    margin-bottom: 4px;
}
.quick-info-value { font-size:0.92rem; font-weight:700; color:var(--gray-800); }
.quick-info-value.gold { color:var(--amber-600); }
.quick-info-value.highlight { color:var(--success); }

.review-toc {
    border-bottom: 1px solid var(--gray-200);
    padding: 20px 32px;
    background: var(--white);
}
.review-toc-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-400);
    margin-bottom: 12px;
}
.review-toc-list { list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.review-toc-list li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.2s;
}
.review-toc-list li a:hover { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-700); }
.toc-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    background: var(--gray-200);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--gray-500);
    flex-shrink: 0;
}

.bonus-highlight {
    background: linear-gradient(135deg, var(--amber-50), var(--amber-100));
    border: 2px solid var(--amber-300);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    text-align: center;
    margin: 0 32px 0;
}
.bonus-highlight-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--amber-600);
    margin-bottom: 8px;
}
.bonus-highlight-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 4px;
}
.bonus-highlight-code {
    display: inline-block;
    background: var(--white);
    border: 1.5px dashed var(--amber-400);
    padding: 6px 16px;
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--amber-700);
    margin-bottom: 8px;
}
.bonus-highlight-terms { font-size:0.75rem; color:var(--gray-400); margin-top:8px; }

.review-ratings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--gray-100);
}
.rating-item { text-align:center; padding:20px 12px; border-right:1px solid var(--gray-100); }
.rating-item:last-child { border-right:none; }
.rating-item-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    margin-bottom: 6px;
}
.rating-item-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--blue-700);
    line-height: 1;
    margin-bottom: 6px;
}
.rating-item-bar { width:100%; height:3px; background:var(--gray-200); border-radius:2px; overflow:hidden; margin-top:6px; }
.rating-item-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue-600), var(--amber-400));
    border-radius: 2px;
    transition: width 0.6s var(--ease);
}

.review-section { padding:32px 40px; border-bottom:1px solid var(--gray-100); }
.review-section:last-child { border-bottom:none; }

.section-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: var(--blue-50);
    border-radius: var(--radius-md);
    font-size: 1rem;
    flex-shrink: 0;
}
.section-rating-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--amber-500);
    font-weight: 700;
    margin-left: auto;
    background: var(--amber-50);
    padding: 3px 10px;
    border-radius: 999px;
}

.section-content { font-size:1rem; line-height:1.8; color:var(--gray-600); }
.section-content p { margin-bottom:14px; }
.section-content h3 { font-size:1.05rem; font-weight:700; color:var(--gray-800); margin:20px 0 8px; }
.section-content ul { padding-left:20px; margin-bottom:14px; }
.section-content li { margin-bottom:6px; }
.section-content a { color:var(--blue-600); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.section-content a:hover { color:var(--blue-800); }
.section-content strong { color:var(--gray-800); }

.review-images { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.review-image-item {
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
}
.review-image-item:hover { transform:scale(1.02); box-shadow:var(--shadow-md); }
.review-image-item img { width:100%; height:180px; object-fit:cover; }
.review-image-caption { padding:8px 12px; font-size:0.78rem; color:var(--gray-500); background:var(--gray-50); }

.pros-cons-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.pros-box, .cons-box { padding:22px; border-radius:var(--radius-lg); }
.pros-box { background:var(--success-bg); border:1.5px solid #a7f3d0; }
.cons-box { background:var(--danger-bg); border:1.5px solid #fecaca; }
.pros-box h3 { color:var(--success); font-size:1rem; font-weight:800; margin-bottom:12px; }
.cons-box h3 { color:var(--danger); font-size:1rem; font-weight:800; margin-bottom:12px; }
.pros-list, .cons-list { list-style:none; padding:0; }
.pros-list li, .cons-list li {
    padding: 7px 0;
    padding-left: 22px;
    position: relative;
    font-size: 0.92rem;
    color: var(--gray-700);
    line-height: 1.5;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.pros-list li:last-child, .cons-list li:last-child { border-bottom:none; }
.pros-list li::before { content:'✓'; position:absolute; left:0; color:var(--success); font-weight:800; }
.cons-list li::before { content:'✗'; position:absolute; left:0; color:var(--danger); font-weight:800; }

.review-mid-cta { padding: 0 32px; }
.review-mid-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, var(--blue-50), var(--amber-50));
    border: 1.5px solid var(--blue-100);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
}
.review-mid-cta-label { display:block; font-size:0.78rem; color:var(--gray-400); font-weight:500; margin-bottom:2px; }
.review-mid-cta-bonus { font-size:1rem; font-weight:800; color:var(--gray-900); }
.review-mid-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 24px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-800));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-blue);
    transition: all 0.2s;
    flex-shrink: 0;
}
.review-mid-cta-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-blue-lg); background:linear-gradient(135deg, var(--blue-600), var(--blue-700)); }

.final-verdict {
    background: linear-gradient(150deg, var(--blue-950) 0%, var(--blue-900) 60%, var(--blue-800) 100%);
    color: var(--white);
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.final-verdict::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 40%, rgba(59,130,246,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(245,158,11,0.08) 0%, transparent 50%);
}
.final-verdict > * { position:relative; z-index:1; }
.final-verdict h2 {
    font-family: var(--font-display);
    color: var(--amber-300);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 18px;
}
.final-verdict p, .final-verdict li { color:rgba(255,255,255,0.88); font-size:1.05rem; line-height:1.8; }
.final-verdict strong { color:var(--amber-300); }

.review-cta-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 12px 16px;
    z-index: 50;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.review-cta-bar .btn-primary { width:100%; justify-content:center; padding:14px; font-size:1rem; }

@media (max-width:768px) {
    .review-cta-bar { display:block; }
    body { padding-bottom: 72px; }
    .pros-cons-grid { grid-template-columns:1fr; }
    .review-section { padding:24px 20px; }
    .review-hero { padding:28px 20px; }
    .final-verdict { padding:28px 20px; }
    .review-mid-cta { padding:0 16px; }
    .review-mid-cta-inner { flex-direction:column; }
    .review-mid-cta-btn { width:100%; justify-content:center; }
    .quick-info-grid { grid-template-columns:repeat(2,1fr); }
    .quick-info-item { border-right:none; border-bottom:1px solid var(--gray-200); }
    .review-toc { padding:16px 20px; }
}

.review-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.review-lightbox.active { display:flex; }
.review-lightbox img { max-width:90vw; max-height:85vh; border-radius:var(--radius-lg); }
.review-lightbox-close {
    position: absolute;
    top: 20px; right: 24px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.review-lightbox-close:hover { opacity:1; }


/* ═══════════════════════════════════════════════════════════════
   SHORTCODE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
.sb-rank-row {
    display: grid;
    grid-template-columns: 40px 60px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
}
.sb-rank-row:hover {
    border-color: var(--blue-300);
    box-shadow: 0 4px 16px rgba(30,64,175,0.08);
}
@media (max-width:640px) {
    .sb-rank-row { grid-template-columns:36px 1fr !important; }
    .sb-rank-row > div:nth-child(2) { display:none; }
    .sb-rank-row > div:last-child { grid-column: 1 / -1; width:100%; }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
    background: var(--blue-950);
    color: rgba(255,255,255,0.65);
    padding: 60px 24px 30px;
}
.footer-content {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-section h4 { color:var(--white); font-size:0.95rem; font-weight:700; margin-bottom:14px; }
.footer-section p { font-size:0.88rem; line-height:1.65; color:rgba(255,255,255,0.45); }
.footer-section a { display:block; font-size:0.88rem; color:rgba(255,255,255,0.5); padding:3px 0; transition:color 0.2s; }
.footer-section a:hover { color:var(--amber-400); }
.footer-logo-tagline { font-size:0.85rem; color:rgba(255,255,255,0.4); margin-top:8px; }

.footer-bottom { text-align:center; padding-top:22px; max-width:var(--container-max); margin:0 auto; }
.footer-bottom p { font-size:0.82rem; color:rgba(255,255,255,0.3); }

.responsible-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    margin-top: 14px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
}

@media (max-width:968px) { .footer-content { grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:640px) { .footer-content { grid-template-columns:1fr; } .trust-stats { gap:24px; } }


/* ═══════════════════════════════════════════════════════════════
   UTILITY & ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.text-center  { text-align:center; }
.text-amber   { color:var(--amber-500); }
.text-blue    { color:var(--blue-700); }
.text-muted   { color:var(--gray-500); }
.icon-check   { color:var(--success); margin-right:4px; }
.icon-cross   { color:var(--danger);  margin-right:4px; }
.empty-state  { color:var(--gray-400); font-size:0.9rem; font-style:italic; }

.fade-in-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.fade-in-up.visible { opacity:1; transform:translateY(0); }

.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
    .floating-icon { display:none; }
}