@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
/**
 * Casongo Dark Theme
 * Brand identity reference: Casongo brand sheet (FAST PLAY. YOUR FORTUNE.)
 * Mobile-first India market casino brand.
 *
 * Palette (extracted from brand sheet — exact values TBD against final guidelines):
 *   - Midnight Blue   #0B1232  base background (less heavy than black)
 *   - Electric Cyan   #00D9FF  primary actions (Play / Start)
 *   - Neon Lime       #BFE839  wins, success states, highlights
 *   - Hot Magenta     #FF1F8E  alerts, urgency, bonus triggers
 *
 * Role mappings (decided 2026-05-01):
 *   - Magenta replaces emerald-derived error tokens AND drives bonus accent
 *   - Lime replaces emerald success AND cash balance accent
 *   - Cyan stays as the universal primary brand
 *   - Warning kept as amber (brand sheet does not specify a warning hue)
 *   - Info kept as soft lavender (keeps separation from brand cyan)
 *
 * Version: 1.1 (2026-05-11)
 *   1.1 — final brand name confirmed: Casongo. The Casongo discrepancy
 *         in earlier docs is now closed in favor of Casongo. Rename applied
 *         to comments only — structure (selectors, variable names) is
 *         intentionally unchanged so the frontend contract is preserved.
 *         Added forward-compatible token sections: Live & Momentum,
 *         Animation/Pulse, Telegram Surface, Game Category Accents.
 *         These tokens are NOT yet consumed by components — wire-up plan
 *         owned by the frontend team.
 *   1.0 — initial Casongo tokens. Component overrides intentionally omitted;
 *         add only when concrete issues surface on staging.
 *
 * Selector note: scoped to html[data-theme^="custom-"] to match the Spinozo
 * sibling pattern. If the Casongo brand ever ships a *second* custom theme
 * alongside this one, tighten the selector to html[data-theme="custom-<id>"].
 */

html[data-theme^="custom-"] {
    /* ========================================
     BRAND COLORS — Electric Cyan (Casongo primary)
     ======================================== */
    --theme-brand-primary: #067EFF;
    --theme-brand-primary-hover: #79B7FA;
    --theme-brand-text: #5BE9FF;
    --theme-brand-accent: #00ACCC;
    --theme-brand-primary-contrast: #0B1232;

    /* Game toolbar logo tint (used where the logo sits on a light surface) */
    --theme-game-toolbar-logo: #0B1232;

    /* ========================================
     BACKGROUNDS — Midnight Blue ramp
     ======================================== */
    --theme-bg-primary: #0A1118;
    --theme-bg-secondary: #0A1118;
    --theme-surface-base: #eef0f40a;
    --theme-surface-raised: #eef0f40f;
    --theme-surface-elevated: #eef0f40a;
    --theme-surface-solid: #eef0f40a;
    --theme-surface-icon: #eef0f43d;
    --dropdown-bg: #141F29;

    /* ========================================
     TEXT — Crisp near-white & cool grays
     ======================================== */
    --theme-text-primary: #F2F6FA;
    --theme-text-secondary: #B5C2CE;
    --theme-text-tertiary: #7A8896;
    --theme-text-muted: rgba(181, 194, 206, 0.5);

    /* RGB values for alpha compositing */
    --theme-text-primary-rgb: 242 246 250;

    /* ========================================
     BORDERS
     ======================================== */
    --theme-border-base: #2C2F3A;
    --theme-border-subtle: rgba(255, 255, 255, 0.05);
    --theme-border-accent: rgba(0, 217, 255, 0.3);

    /* ========================================
     SEMANTIC COLORS
     ======================================== */
    /* Success — Neon Lime (replaces emerald per brand sheet) */
    --theme-semantic-success: #067EFF;
    --theme-semantic-success-hover: #79B7FA;

    /* Warning — Amber (brand sheet does not specify; keep amber) */
    --theme-semantic-warning: #F5A524;
    --theme-semantic-warning-hover: #FFB84D;

    /* Error — Hot Magenta (replaces standard red per brand sheet) */
    --theme-semantic-error: #e5491a;
    --theme-semantic-error-hover: #e5491ac0;

    /* Info — Soft Lavender (kept distinct from brand cyan) */
    --theme-semantic-info: #8B9DDB;
    --theme-semantic-info-hover: #A8B8FF;

    /* ========================================
     CASINO SPECIAL COLORS
     ======================================== */
    /* Gold/Jackpot — keep platform gold */
    --theme-special-gold: var(--color-gold);
    --theme-special-gold-light: var(--color-gold-light);
    --theme-special-gold-dark: var(--color-gold-dark);

    /* VIP — Purple (keep platform default; brand sheet doesn't define VIP) */
    --theme-special-vip: #8B5CF6;
    --theme-special-vip-dark: #7C3AED;

    /* Cash Balance — Neon Lime (brand sheet: lime = wins / success) */
    --theme-special-cash: #BFE839;
    --theme-special-cash-dark: #99B92E;

    /* Bonus Balance — Hot Magenta (brand sheet: magenta = bonus triggers) */
    --theme-special-bonus: #FF1F8E;
    --theme-special-bonus-dark: #CC1873;

    /* ========================================
     INTERACTIVE STATES — cyan-tinted
     ======================================== */
    --theme-hover-overlay: rgba(0, 217, 255, 0.06);
    --theme-active-overlay: rgba(0, 217, 255, 0.12);
    --theme-focus-ring: rgba(0, 217, 255, 0.5);

    /* ========================================
     SHADOWS
     ======================================== */
    --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
    --theme-shadow-glow: 0 0 20px rgba(0, 217, 255, 0.35);

    /* ========================================
     CARD VARIANTS
     ======================================== */
    /* Success Card — Lime */
    --card-success-bg-from: rgba(191, 232, 57, 0.15);
    --card-success-bg-to: rgba(191, 232, 57, 0.08);
    --card-success-border: rgba(191, 232, 57, 0.3);
    --card-success-icon-bg: rgba(191, 232, 57, 0.2);
    --card-success-hover-glow: rgba(191, 232, 57, 0.25);

    /* Warning Card — Amber */
    --card-warning-bg-from: rgba(245, 165, 36, 0.15);
    --card-warning-bg-to: rgba(245, 165, 36, 0.08);
    --card-warning-border: rgba(245, 165, 36, 0.3);
    --card-warning-icon-bg: rgba(245, 165, 36, 0.2);
    --card-warning-hover-glow: rgba(245, 165, 36, 0.25);

    /* Info Card — Lavender */
    --card-info-bg-from: rgba(139, 157, 219, 0.15);
    --card-info-bg-to: rgba(139, 157, 219, 0.08);
    --card-info-border: rgba(139, 157, 219, 0.3);
    --card-info-icon-bg: rgba(139, 157, 219, 0.2);
    --card-info-hover-glow: rgba(139, 157, 219, 0.25);

    /* Primary Card — Electric Cyan */
    --card-primary-bg-from: rgba(0, 217, 255, 0.15);
    --card-primary-bg-to: rgba(0, 217, 255, 0.08);
    --card-primary-border: rgba(0, 217, 255, 0.3);
    --card-primary-icon-bg: rgba(0, 217, 255, 0.2);
    --card-primary-hover-glow: rgba(0, 217, 255, 0.25);

    /* ========================================
     BADGE VARIANTS
     ======================================== */
    --badge-orange-bg: var(--theme-brand-primary);
    --badge-orange-text: #0B1232;

    --badge-gold-bg: var(--theme-special-gold);
    --badge-gold-text: #0B1232;

    --badge-vip-bg: var(--theme-special-vip);
    --badge-vip-text: #FFFFFF;

    /* ========================================
     BUTTON SEMANTIC COLORS
     ======================================== */
    --button-primary-bg: var(--theme-brand-primary);
    --button-primary-hover: var(--theme-brand-primary-hover);
    --button-primary-text: #edeff2;

    /* Success buttons — Lime on dark text (lime is too light for white text) */
    --button-success-bg: var(--theme-semantic-success);
    --button-success-hover: var(--theme-semantic-success-hover);
    --button-success-text: #edeff2;

    --button-warning-bg: var(--theme-semantic-warning);
    --button-warning-hover: var(--theme-semantic-warning-hover);
    --button-warning-text: #0B1232;

    /* Error / destructive buttons — Magenta with white text */
    --button-error-bg: var(--theme-semantic-error);
    --button-error-hover: var(--theme-semantic-error-hover);
    --button-error-text: #FFFFFF;
    --button-error-pressed: #CC1873;

    --button-secondary-bg: var(--theme-surface-elevated);
    --button-secondary-hover: var(--theme-surface-raised);
    --button-secondary-text: var(--theme-text-primary);

    /* Pressed states */
    --button-primary-pressed: #449CF9;
    --button-secondary-pressed: rgba(26, 36, 81, 0.8);
    --button-success-pressed: #449CF9;
    --button-disabled-opacity: 0.5;
    --button-primary-disabled-bg: rgba(0, 217, 255, 0.3);

    --button-font-weight: 600;

    /* ========================================
     INPUT FIELDS
     ======================================== */
    --input-bg: var(--theme-surface-raised);
    --input-border: var(--theme-border-base);
    --input-border-focus: var(--theme-brand-primary);
    --input-text: var(--theme-text-primary);
    --input-placeholder: var(--theme-text-muted);

    /* ========================================
     MODAL & OVERLAY
     ======================================== */
    --modal-bg: var(--theme-surface-base);
    --modal-border: var(--theme-border-base);
    --modal-overlay: rgba(6, 10, 34, 0.9);
    --modal-header-bg: var(--theme-surface-elevated);
    --wallet-modal-bg: #0A1118;
    --wallet-iframe-bg: var(--theme-surface-solid);

    /* ========================================
     NAVIGATION
     ======================================== */
    --nav-bg: var(--theme-surface-base);
    --nav-border: var(--theme-border-base);
    --nav-item-hover: var(--theme-hover-overlay);
    --nav-item-active: var(--theme-brand-primary);
    --nav-item-text: var(--theme-text-secondary);
    --nav-item-text-active: var(--theme-brand-primary);

    /* ========================================
     PROGRESS & METERS
     ======================================== */
    --progress-bg: var(--theme-surface-raised);
    --progress-fill-success: var(--theme-semantic-success);
    --progress-fill-warning: var(--theme-semantic-warning);
    --progress-fill-primary: var(--theme-brand-primary);

    /* ========================================
     CASINO-SPECIFIC
     ======================================== */
    --balance-cash-color: var(--theme-special-cash);
    --balance-bonus-color: var(--theme-special-bonus);
    --balance-total-color: var(--theme-text-primary);

    --game-jackpot-color: var(--theme-special-gold);
    --game-hot-color: var(--theme-semantic-error);
    /* Magenta */
    --game-new-color: var(--theme-brand-primary);
    /* Cyan */
    --game-card-hover-overlay-bg: rgba(6, 10, 34, 0.8);
    --game-card-provider-text: rgba(255, 255, 255, 0.5);

    --game-card-play-bg: #05D35A;
    --game-card-play-hover-bg: #58e290;
    --game-card-play-pressed-bg: #049640;
    /* --game-card-play-text:  */

    /* ========================================
     SCROLLBAR
     ======================================== */
    --scrollbar-track-bg: var(--theme-bg-secondary);
    --scrollbar-thumb-bg: var(--theme-surface-elevated);
    --scrollbar-thumb-hover-bg: var(--theme-border-base);

    /* ========================================
     LUXURY METALLICS
     ======================================== */
    --theme-luxury-platinum: #E5E4E2;
    --theme-luxury-rose-gold: #FF6B8A;
    --theme-luxury-champagne: #D4D4D4;

    /* VIP Tier Colors — keep platform defaults */
    --theme-vip-bronze: #CD7F32;
    --theme-vip-silver: #C0C0C0;
    --theme-vip-gold: #FFD700;
    --theme-vip-platinum: #E5E4E2;
    --theme-vip-diamond: #B9F2FF;

    /* Premium Effects — cyan glow signature */
    --theme-card-premium-glow: 0 0 30px rgba(0, 217, 255, 0.35), 0 0 60px rgba(6, 10, 34, 0.4);

    /* Enhanced Gold */
    --theme-special-gold-rich: #D4AF37;
    --theme-special-gold-rich-light: #E5C158;

    /* Social Icons — bright icons for dark theme */
    --social-icon-filter: brightness(0) invert(1);
    --social-link-border: transparent;

    /* ========================================
     TOGGLE SWITCH
     ======================================== */
    --toggle-active-bg: #232E60;
    --toggle-active-border: #2B377A;
    --toggle-active-knob: var(--theme-brand-primary);
    --toggle-inactive-bg: #232E60;
    --toggle-inactive-border: #2B377A;
    --toggle-inactive-knob: #5A6878;

    /* ========================================
     SIDEBAR — Deep navy rail with cyan accent
     ======================================== */
    --sidebar-bg: #0A1118;
    --sidebar-header-bg: #0A1118;
    --sidebar-header-border: transparent;
    --sidebar-link-color: var(--theme-text-secondary);
    --sidebar-link-hover-color: var(--theme-brand-primary);
    --sidebar-link-active-color: #edeff2;
    --sidebar-link-active-bg: rgba(0, 217, 255, 0.14);
    --sidebar-link-active-bar: #00D9FF;
    --sidebar-menu-group-bg: #eef0f40a;
    --sidebar-menu-group-radius: 8px;
    --sidebar-link-gap: 8px;
    --sidebar-chevron-color: var(--theme-text-muted);
    --sidebar-chevron-active-color: #5BE9FF;
    --sidebar-divider-color: transparent;
    --sidebar-submenu-border: #2B377A;
    --sidebar-border-right: #2C2F3A;
    --sidebar-backdrop: none;
    --sidebar-switcher-bg: #eef0f40a;
    --sidebar-icon-color: #6B7B8B;
    --sidebar-menu-group-py: 10px;
    --sidebar-submenu-indent: 21px;
    --sidebar-submenu-nested-indent: 19px;
    --sidebar-loyalty-widget-bg: #eef0f40a;
    --sidebar-menu-group-py: 7px;


    /* ========================================
     NEW IN v1.1 — Brand-aligned extensions
     ----------------------------------------
     Tokens below are forward-compatible additions per Casongo brand spec
     (engagement-first feed: motion / glow / pulse / live indicators).
     NOT yet consumed by components — wire-up plan owned by frontend team.
     Safe to keep declared: unused custom properties do not affect render.
     ======================================== */

    /* ---- Live & Momentum Signals ----
     Mandatory per brand: "Trending now", "Most played tonight",
     "Fastest growing", "Live tournaments", "Top streaks". */
    --theme-live-indicator-bg: #FF1F8E;
    --theme-live-indicator-text: #FFFFFF;
    --theme-live-indicator-pulse: rgba(255, 31, 142, 0.45);
    --theme-trending-accent: #BFE839;
    --theme-hot-streak-bg: rgba(255, 31, 142, 0.15);
    --theme-hot-streak-text: #FF1F8E;
    --theme-fastest-growing-color: #BFE839;
    --theme-most-played-color: #00D9FF;
    --theme-momentum-glow: 0 0 12px rgba(0, 217, 255, 0.5);

    /* ---- Animation / Pulse ----
     Animation primitives for live/engagement states.
     Components should consume `var(--theme-pulse-duration)` etc.
     instead of hardcoded values. */
    --theme-pulse-duration: 1.5s;
    --theme-pulse-easing: cubic-bezier(0.4, 0, 0.6, 1);
    --theme-pulse-ring-color: var(--theme-brand-primary);
    --theme-pulse-ring-shadow: 0 0 0 0 rgba(0, 217, 255, 0.7);
    --theme-glow-strong: 0 0 30px rgba(0, 217, 255, 0.55);
    --theme-glow-magenta: 0 0 20px rgba(255, 31, 142, 0.45);
    --theme-glow-lime: 0 0 20px rgba(191, 232, 57, 0.4);

    /* ---- Telegram Brand Surface ----
     Per brand spec: Telegram is a PRODUCT EXTENSION, not a marketing channel.
     These tokens style in-app touchpoints: referral chips, channel banners,
     CRM push creatives previews, tournament join cards. */
    --telegram-chip-bg: rgba(0, 217, 255, 0.15);
    --telegram-chip-text: #5BE9FF;
    --telegram-chip-border: rgba(0, 217, 255, 0.3);
    --telegram-banner-from: rgba(0, 217, 255, 0.18);
    --telegram-banner-to: rgba(255, 31, 142, 0.10);
    --telegram-icon-color: #5BE9FF;

    /* ---- Game Category Accents ----
     Per navigation priority: Crash → Instant → Trending → Tournaments →
     Live → Community → Casino. Each category needs a distinct accent so it
     does not collapse into a single visual surface. */
    --game-category-crash: #FF1F8E;
    /* adrenaline / magenta */
    --game-category-instant: #00D9FF;
    /* fast / cyan */
    --game-category-trending: #BFE839;
    /* wins / lime */
    --game-category-tournaments: var(--theme-special-gold);
    --game-category-live: #FF1F8E;
    /* magenta + pulse */
    --game-category-community: #8B9DDB;
    /* lavender */
    --game-category-casino: var(--theme-text-secondary);
    /* supporting / neutral */


    --font-family-base: "Manrope", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
}

.sidebar-link {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600;
}

.sidebar-submenu-link {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600;
}

.btn-register-header--welcome-pack {
    background: linear-gradient(135deg, #067EFF 0%, #6450E6 100%) !important;
}

.btn-register-header--welcome-pack:hover {
    background: linear-gradient(135deg, #067EFF 20%, #6450E6 80%) !important;
}

[data-testid="cookie-consent-banner"] div {
    background: var(--theme-bg-primary);
}

[data-testid="cookie-consent-banner"] div {
    background: var(--theme-bg-primary);
}