/* ============================================================
   SPINVELD skin — override layer on top of main.css/custom.css
   Theme: dark indigo casino, mint + gold accents, Cinzel display.
   Owned by FOUNDATION. Page-specific styles go in each blade via
   @push('style'). Do not put page-only rules here.
   ============================================================ */

:root {
    /* Fonts */
    --heading-font: "Cinzel", serif;
    --body-font: "Be Vietnam Pro", sans-serif;

    /* Primary = gold (CTA buttons) */
    --base-h: 53;
    --base-s: 100%;
    --base-l: 50%;
    --base: var(--base-h) var(--base-s) var(--base-l);

    /* Secondary = mint/teal accent */
    --base-two-h: 162;
    --base-two-s: 100%;
    --base-two-l: 50%;
    --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);

    /* Surfaces — exact Figma palette */
    --sv-bg: 0 0% 0%;           /* #000000 page background (Figma) */
    --sv-navy: 218 46% 8%;      /* #0B101C primary content surface (Figma dominant) */
    --sv-bg-navy: 218 46% 8%;   /* #0B101C */
    --sv-card: 202 37% 13%;     /* #15232E cards */
    --sv-card-alt: 225 37% 15%; /* #171F33 */
    --sv-muted: 224 11% 52%;    /* #757E92 */
    --sv-green: 153 100% 25%;   /* #007C41 casino green (Figma) */
    --sv-mint: 162 100% 50%;    /* #00FFB2 */
    --sv-teal: 178 58% 54%;     /* #44D0CC */
    --sv-gold: 53 100% 50%;     /* #FFE100 */

    --section-bg: var(--sv-bg);
    --heading-color: 0 0% 100%;
    --body-color: 0 0% 100% / 0.72;
    --border-color: 218 30% 18%;

    /* Kill the engine's purple --dark (was 276 100% 11%) → navy #0B101C.
       Recolors every hsl(var(--dark)) usage in main.css from purple to navy. */
    --dark-h: 218;
    --dark-s: 46%;
    --dark-l: 8%;

    /* gradients (Figma) */
    --sv-grad-gold: linear-gradient(180deg, #FFD24A 0%, #ECAA00 100%);
    --sv-grad-mint: linear-gradient(90deg, #FFE100 0%, #00FFB2 100%);
    --sv-grad-navy: linear-gradient(135deg, #0B101C 0%, #334A82 100%);
    --sv-grad-navy-r: linear-gradient(135deg, #334A82 0%, #0B101C 100%);
    --sv-grad-hero: linear-gradient(135deg, #007C41 0%, #011710 100%);
    --sv-grad-purple: linear-gradient(135deg, #0B101C 0%, #334A82 100%); /* legacy alias → navy */
}

/* ---------- Base ---------- */
html, body {
    background: #000000;
    color: rgba(255,255,255,.72);
    font-family: var(--body-font);
}
body { background: #000000; }

h1, h2, h3, h4, h5, h6,
.card-title, .section-title, .game-contet-title {
    font-family: var(--heading-font);
    color: #fff;
    letter-spacing: .3px;
}
h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 600; }

a { color: hsl(var(--sv-mint)); }
a:hover { color: #fff; }

::selection { background: #00FFB2; color: #06112a; }

/* slim mint scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0B101C; }
::-webkit-scrollbar-thumb { background: #24344a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--sv-mint)); }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--body-font);
    font-weight: 700;
    border-radius: 35px;
    white-space: nowrap;
}
.btn--base,
.btn--gradient,
.btn--gradient-primary {
    background: var(--sv-grad-gold) !important;
    border: 0 !important;
    color: #1a1205 !important;
    box-shadow: 0 8px 24px rgba(251,191,36,.28);
}
.btn--base:hover,
.btn--gradient:hover { filter: brightness(1.06); color:#1a1205 !important; }

.btn--secondary,
.btn--success,
.btn--gradient-success {
    background: linear-gradient(180deg, #24D39C 0%, #00B27a 100%) !important;
    border: 0 !important;
    color: #04130d !important;
}
.btn-outline--base {
    border: 1.5px solid hsl(var(--sv-mint)) !important;
    color: hsl(var(--sv-mint)) !important;
    background: transparent !important;
    border-radius: 35px;
}
/* navy "Log In" pill (Figma header) */
.sv-btn-login {
    background: #1B2438 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #FFFFFF !important;
    border-radius: 35px;
    font-weight: 700;
    padding: 10px 26px;
}
.sv-btn-login:hover { background: #243049 !important; color: #FFFFFF !important; }
.btn-outline--base:hover {
    background: hsl(var(--sv-mint)) !important;
    color: #06112a !important;
}

/* ---------- Cards / sections ---------- */
.card,
.card-item,
.game-item,
.game--card {
    background: #15232E;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    color: #fff;
}
.section-bg,
[class*="section"] { background-color: transparent; }

/* form controls */
.form--control,
.form-control,
input.form-control,
textarea.form-control,
.select2-container--default .select2-selection--single {
    background: #0B101C !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.form--control::placeholder { color: hsl(var(--sv-muted)); }
.form--control:focus { border-color: hsl(var(--sv-mint)) !important; box-shadow: 0 0 0 3px rgba(0,255,178,.15) !important; }

/* ---------- Header ---------- */
.header,
.header-area,
header.header {
    background: rgba(11,16,28,.72) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.header.active, .header-fixed { background: rgba(7,11,20,.95) !important; }
.menu li a, .nav-menu li a, .header .menu a {
    color: #cdd5e6 !important;
    font-weight: 500;
}
.menu li a:hover, .menu li.active a { color: #fff !important; }
/* header nav links: neutral gray w/ mint icon (Figma), white on hover/active */
.header .nav-menu .nav-item .nav-link { color: #c2c9d8 !important; font-weight: 500; }
.header .nav-menu .nav-item .nav-link:hover,
.header .nav-menu .nav-item.active .nav-link,
.header .nav-menu .nav-item .nav-link.active { color: #FFFFFF !important; }
.header .nav-menu .nav-item .nav-link .nav-item__icon { color: hsl(var(--sv-mint)) !important; }

/* ---------- Footer ---------- */
.footer,
.footer-area,
footer {
    background: #0B101C !important;
    border-top: 1px solid rgba(255,255,255,.06);
    color: hsl(var(--sv-muted));
}
.footer a { color: hsl(var(--sv-muted)); }
.footer a:hover { color: hsl(var(--sv-mint)); }

/* ---------- Hero / banner ---------- */
.banner,
.banner-section,
.hero,
.hero-section { background: transparent; }
.banner .banner-content-inner,
.hero-inner {
    background: var(--sv-grad-hero);
    border-radius: 24px;
}

/* game thumbnails: opaque frame so transparent PNGs don't float on the page */
.game-item__image,
.game--card .game-thumb,
.game-item .game-thumb,
.featured-game-card__thumb,
.card-box-image {
    background: #0d1830;
}

/* brand wordmark */
.sv-logo {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF !important;
}
.sv-logo:hover { color: hsl(var(--sv-gold)) !important; }

/* ---------- Landing section backgrounds (exact Figma) ---------- */
.banner-section--spinveld { background: #000000; }
.games-section { background: #0B101C; }                 /* TOP GAMES — navy */
.latest-games-section { background: var(--sv-grad-navy-r); } /* MORE GAMES — blue→navy */
.faq-section, section.faq, .sv-faq { background: #0B101C; }   /* FAQ — navy */
.sv-cta { background: #000000; }

/* gold accent text helper */
.text--base, .text-base { color: hsl(var(--sv-gold)) !important; }
.text--success { color: hsl(var(--sv-mint)) !important; }

/* ============================================================
   KILL PURPLE — override every leftover #20112f / #2c1156 purple
   surface from main.css so the page is pure black + navy (Figma).
   ============================================================ */
html, body { background: #000000 !important; }
main, .py-100, .page-content { background: transparent !important; }

.secured-card,
.latest-transection,
.call-section-content,
.blog-item,
.blog-item:hover,
.dashboard-card,
.account-card,
.transaction-item,
.cmn-list,
.referral-card,
.user-card {
    background: #15232E !important;
    background-image: none !important;
}

.footer-area, .footer, footer {
    background: #0B101C !important;
    background-image: none !important;
}

/* ---------- Preloader (was purple --dark bg + gold rings) ---------- */
.preloader { background-color: #000000 !important; }
.loader-p:before { border-color: hsl(var(--sv-gold)) !important; }
.loader-p:after  { border-color: hsl(var(--sv-mint)) !important; }

/* header language dropdown (was lavender hsl(--secondary)/.2) */
.language,
.language .dropdown-menu {
    background: rgba(21,35,46,.92) !important;
    border: 1px solid rgba(0,255,178,.18) !important;
}
.language__icon { border-color: hsl(var(--sv-mint)) !important; }

/* neutralize main.css purple blur glows behind banner + faq */
.banner-section::before,
.banner-section--spinveld::before {
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
    display: none !important;
}
.faq-section-content::after,
.faq-section-content::before {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
}

/* ---------- Cookie banner (was purple gradient) ---------- */
.cookies-card {
    background: #0B101C !important;
    background-image: none !important;
    border: 1px solid rgba(0,255,178,.20) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
    color: rgba(255,255,255,.82) !important;
}
.cookies-card h5,
.cookies-card .text--white {
    font-family: var(--heading-font) !important;
    color: #FFFFFF !important;
}
.cookies-card p,
.cookies-card .cookies-card__content p { color: rgba(255,255,255,.78) !important; }
.cookies-card .cookies-card_link {
    color: hsl(var(--sv-mint)) !important;
    text-decoration: underline !important;
}
.cookies-card .btn--gradient-success {
    background: linear-gradient(180deg, #24D39C 0%, #00B27a 100%) !important;
    color: #04130d !important; border: 0 !important;
}
.cookies-card .btn--danger {
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,.30) !important;
    color: #fff !important;
}
.cookies-card .btn--danger:hover {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.5) !important;
}