/* =====================================================================
   55BET — Unified Redesign 2026  ("Midnight Luxe")
   Site-wide override stylesheet. Linked LAST in each page <head> so it
   wins the cascade over the per-page inline <style> blocks.
   Re-themes every page to one cohesive modern dark aesthetic by
   redefining the design tokens both page vocabularies consume and
   restyling the common structural components.
   ===================================================================== */

:root {
    /* --- New unified palette --- */
    --rd-bg:        #0c0e13;
    --rd-bg-alt:    #12151c;
    --rd-surface:   #181c25;
    --rd-surface-2: #20252f;
    --rd-border:    #2a303c;
    --rd-text:      #eef1f6;
    --rd-muted:     #a3adbd;
    --rd-brand:     #ff2d46;
    --rd-brand-dk:  #d61832;
    --rd-gold:      #f5c542;
    --rd-radius:    14px;
    --rd-shadow:    0 10px 30px rgba(0,0,0,0.45);
    --rd-shadow-sm: 0 4px 14px rgba(0,0,0,0.30);

    /* --- Remap the index.html (light) token vocabulary --- */
    --primary:      #ff2d46;
    --primary-dark: #d61832;
    --primary-hover:#d61832;
    --secondary:    #12151c;
    --bg:           #0c0e13;
    --bg-alt:       #12151c;
    --text:         #eef1f6;
    --text-light:   #a3adbd;
    --text-muted:   #a3adbd;
    --card-bg:      #181c25;
    --border:       #2a303c;
    --border-color: #2a303c;
    --accent:       #f5c542;
    --shadow:       0 10px 30px rgba(0,0,0,0.45);
    --radius:       14px;
}

/* --- Base --- */
html, body {
    background-color: var(--rd-bg) !important;
    color: var(--rd-text) !important;
}
body { line-height: 1.65; }

a { color: var(--rd-brand); }
a:hover { color: var(--rd-gold); }

h1, h2, h3, h4 { color: var(--rd-text) !important; }

/* Subtle ambient gradient on the page background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(255,45,70,0.12), transparent 60%),
        radial-gradient(900px 500px at 0% 0%, rgba(245,197,66,0.06), transparent 55%);
    pointer-events: none;
}

/* --- Header --- */
header {
    background: rgba(12,14,19,0.92) !important;
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--rd-border) !important;
    box-shadow: none !important;
}
.nav-links a,
.main-nav .nav-links a { color: var(--rd-text) !important; }
.nav-links a:hover { color: var(--rd-brand) !important; }

/* --- Buttons (both .cta-btn and .btn vocabularies) --- */
.btn, .cta-btn, .btn-primary, .btn-signup {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.btn, .btn-primary, .btn-signup,
.cta-btn.btn-primary {
    background: linear-gradient(135deg, var(--rd-brand), var(--rd-brand-dk)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(255,45,70,0.30) !important;
    transform: none !important; /* neutralise the skew from casino template */
}
.btn span { transform: none !important; }
.btn:hover, .cta-btn.btn-primary:hover, .btn-primary:hover, .btn-signup:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(255,45,70,0.42) !important;
    color: #fff !important;
}
.btn-outline, .btn-login {
    background: transparent !important;
    border: 2px solid var(--rd-brand) !important;
    color: var(--rd-brand) !important;
    box-shadow: none !important;
}
.btn-outline:hover, .btn-login:hover {
    background: var(--rd-brand) !important;
    color: #fff !important;
}
.btn-signup { color: var(--rd-brand) !important; background:#fff !important; }
.btn-signup:hover { background: var(--rd-gold) !important; color:#12151c !important; }

/* --- Hero sections --- */
.hero-section, .games-hero {
    background:
        linear-gradient(rgba(10,12,17,0.82), rgba(10,12,17,0.94)),
        url('/assets/feature1x-e3036e0d.webp') center/cover !important;
    border-bottom: 1px solid var(--rd-border) !important;
    text-align: center;
}
.hero-section h1, .games-hero h1 {
    color: var(--rd-text) !important;
    background: linear-gradient(135deg, #fff 0%, var(--rd-gold) 120%);
    -webkit-background-clip: text;
    background-clip: text;
}
.hero-section p, .games-hero p { color: var(--rd-muted) !important; }

/* --- Section backgrounds --- */
.features-section {
    background:
        linear-gradient(rgba(12,14,19,0.90), rgba(12,14,19,0.95)),
        url('/assets/feature1x-e3036e0d.webp') center/cover !important;
}
.content-section.alt-bg, .bg-alt, .faq-section.alt-bg, .faq-section {
    background-color: var(--rd-bg-alt) !important;
}
.live-casino-section {
    background: linear-gradient(to bottom, var(--rd-bg-alt), var(--rd-bg)) !important;
}
.seo-nav-banner { background: var(--rd-surface) !important; }
.seo-nav-banner a { color: var(--rd-text) !important; }

/* --- Cards --- */
.feature-card, .card, .info-card, .faq-item {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: var(--rd-radius) !important;
    box-shadow: var(--rd-shadow-sm) !important;
    color: var(--rd-text);
}
.feature-card h3, .info-card h3 { color: var(--rd-text) !important; }
.feature-card p, .card p, .info-card p, .faq-item p { color: var(--rd-muted) !important; }
.feature-card:hover, .card:hover { transform: translateY(-4px); }
.faq-item h3 { color: var(--rd-gold) !important; }

/* --- Game tiles --- */
.game-card, .game-card-img-wrapper {
    border-radius: var(--rd-radius) !important;
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    box-shadow: var(--rd-shadow-sm) !important;
    overflow: hidden;
}
.game-card:hover, .game-card-link:hover .game-card-img-wrapper {
    border-color: var(--rd-brand) !important;
    box-shadow: 0 12px 26px rgba(255,45,70,0.25) !important;
}
.game-card-title { color: var(--rd-text) !important; }
.game-card-link:hover .game-card-title { color: var(--rd-brand) !important; }

/* --- Tables --- */
.info-table, table {
    background: var(--rd-surface) !important;
    border-radius: var(--rd-radius) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
}
.info-table th, table th {
    background: var(--rd-surface-2) !important;
    color: var(--rd-gold) !important;
    border-bottom: 1px solid var(--rd-border) !important;
}
.info-table td, table td {
    color: var(--rd-text) !important;
    border-bottom: 1px solid var(--rd-border) !important;
}

/* --- Pills / badges --- */
.provider-badge, .text-pill, .payment-pill {
    background: var(--rd-surface-2) !important;
    border: 1px solid var(--rd-border) !important;
    color: var(--rd-muted) !important;
    border-radius: 999px !important;
}
.text-pill:hover { border-color: var(--rd-brand) !important; color: var(--rd-brand) !important; }

/* --- Payment logos --- */
.payment-logo {
    background: #fff !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 10px !important;
}

/* --- CTA banner --- */
.cta-banner {
    background:
        linear-gradient(135deg, rgba(255,45,70,0.14), rgba(245,197,66,0.06)),
        var(--rd-surface) !important;
    border-top: 1px solid var(--rd-border) !important;
    border-bottom: 1px solid var(--rd-border) !important;
    color: var(--rd-text) !important;
}
.cta-banner h2 { color: var(--rd-text) !important; }

/* --- Trust banner --- */
.trust-banner {
    background: var(--rd-surface) !important;
    border-left: 4px solid var(--rd-brand) !important;
    border-radius: var(--rd-radius) !important;
}

/* --- Footer --- */
footer {
    background: var(--rd-bg-alt) !important;
    border-top: 3px solid var(--rd-brand) !important;
    color: var(--rd-muted) !important;
}
footer h4 { color: var(--rd-text) !important; }
.footer-links a, footer a { color: var(--rd-muted) !important; }
.footer-links a:hover, footer a:hover { color: var(--rd-brand) !important; }
.footer-bottom, .footer-legal { color: #6d7686 !important; }

/* --- Section headers --- */
.section-header, .content-block h2 {
    border-bottom: 2px solid var(--rd-brand) !important;
}

/* --- Language switcher --- */
.lang-switcher { background: var(--rd-surface-2) !important; }
.ls-item { color: var(--rd-muted) !important; }
.ls-item.ls-active { background: var(--rd-brand) !important; color: #fff !important; }

/* --- Mobile nav panel bg fix --- */
@media (max-width: 768px) {
    .main-nav, .nav-links {
        background: var(--rd-bg-alt) !important;
        border-bottom: 1px solid var(--rd-border) !important;
    }
}
