:root {
    /* =========================================================
       THEME CONTRACT (GLOBAL)
       Change values in /assets/css/themes/<domain>.css
       ========================================================= */

    /* Logo */
    --header-footer-logo: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/Gadgkadkgakdjgjhqe/statics/UsGjr0fz5om57zWXPuCzbBzPnM34xcc6gtSA8CvM.png");
    --header-footer-logo-dark: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/Gadgkadkgakdjgjhqe/statics/UsGjr0fz5om57zWXPuCzbBzPnM34xcc6gtSA8CvM.png");
    --homepage-entrance-bg-image: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/Gadgkadkgakdjgjhqe/statics/ZxW0Iil5RyVkRnZf59k2OUC7rm2EFp9HVJC1NNAt.jpg");

    /* Brand */
    --brand-primary: #f97316;
    --brand-primary-rgb: 249, 115, 22;
    --brand-primary-contrast: #ffffff;
    --brand-secondary: #fdba74;
    --brand-secondary-rgb: 253, 186, 116;

    --accent: var(--brand-primary);
    --accent-rgb: var(--brand-primary-rgb);
    --active: var(--accent);

    --accent-soft: rgba(var(--accent-rgb), 0.14);
    --accent-soft-2: rgba(var(--accent-rgb), 0.08);
    --accent-soft-3: rgba(var(--accent-rgb), 0.2);
    --accent-soft2: var(--accent-soft-2);
    --accent-soft3: var(--accent-soft-3);
    --accent-border: rgba(var(--accent-rgb), 0.34);
    --accent-border-strong: rgba(var(--accent-rgb), 0.56);
    --accent-glow: rgba(var(--accent-rgb), 0.38);

    /* Surfaces */
    --surface-bg: #000000;
    --surface-bg-rgb: 0, 0, 0;
    --surface-1: #0a0a0a;
    --surface-2: #111111;
    --surface-3: #161616;
    --surface-4: #1c1c1c;

    --surface-card: var(--surface-2);
    --surface-modal: #0d0d0d;
    --surface-elevated: #141414;

    --surface-border: rgba(255, 255, 255, 0.12);
    --surface-border-soft: rgba(255, 255, 255, 0.08);
    --surface-border-strong: rgba(255, 255, 255, 0.18);

    /* Legacy dark palette aliases */
    --legacy-bg-1: #0a0a0a;
    --legacy-bg-2: #111111;
    --legacy-bg-3: #1a1a1a;
    --legacy-text-muted: #a3a3a3;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.88);
    --text-muted: rgba(255, 255, 255, 0.72);
    --text-soft: rgba(255, 255, 255, 0.56);
    --text-disabled: rgba(255, 255, 255, 0.38);
    --text-on-accent: var(--brand-primary-contrast);

    /* States */
    --success: #13e398;
    --success-rgb: 19, 227, 152;
    --warning: #ea580c;
    --warning-rgb: 234, 88, 12;
    --danger: #ff5365;
    --danger-rgb: 255, 83, 101;
    --info: #44a7ff;
    --info-rgb: 68, 167, 255;

    --state-success-soft: rgba(var(--success-rgb), 0.16);
    --state-warning-soft: rgba(var(--warning-rgb), 0.18);
    --state-danger-soft: rgba(var(--danger-rgb), 0.15);
    --state-info-soft: rgba(var(--info-rgb), 0.16);

    /* Radius scale */
    --radius-2xs: 4px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-pill: 999px;

    /* Border scale */
    --border-thin: 1px;
    --border-medium: 2px;

    /* Shadow scale */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.34);
    --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.42);
    --shadow-accent-sm: 0 8px 18px rgba(var(--accent-rgb), 0.24);
    --shadow-accent-md: 0 12px 28px rgba(var(--accent-rgb), 0.36);
    --shadow-accent-lg: 0 16px 36px rgba(var(--accent-rgb), 0.42);

    /* Gradients */
    --gradient-primary: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.72));
    --gradient-primary-horizontal: linear-gradient(90deg, rgba(var(--accent-rgb), 0.96), rgba(var(--accent-rgb), 0.74));
    --gradient-overlay: none;
    --gradient-surface: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    --gradient-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    --gradient-withdraw: linear-gradient(to right, #a070ff, #d951d9, #fa2ea9, #ff1a76, #ff3344);

    /* Legacy variables currently consumed by existing CSS */
    --panel-top: #111111;
    --panel-bottom: #000000;

    --panel-bg: var(--surface-2);
    --panel-bg2: var(--surface-1);
    --modalbg: linear-gradient(180deg, var(--panel-bg), var(--panel-bg2));
    --linearbg: radial-gradient(900px 220px at 15% 0%, rgba(249, 115, 22, 0.08), transparent 55%),
        transparent;
    --linearbgreversed: radial-gradient(900px 220px at 85% 0%, rgba(249, 115, 22, 0.08), transparent 55%),
        transparent;

    /* Progress / indicators */
    --progressbg: linear-gradient(
        to right,
        rgba(var(--accent-rgb), 0.72) 0%,
        rgba(var(--accent-rgb), 0.82) 35%,
        rgba(var(--accent-rgb), 0.98) 70%,
        rgba(var(--accent-rgb), 1) 100%
    );

    /* Inputs */
    --input-bg: var(--linearbg);
    --input-bg-solid: var(--legacy-bg-3);
    --input-border: rgba(255, 255, 255, 0.14);
    --input-border-focus: rgba(var(--accent-rgb), 0.65);
    --input-placeholder: rgba(255, 255, 255, 0.45);

    /* Buttons */
    --btn-primary-bg: var(--accent);
    --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 84%, #ffffff 16%);
    --btn-primary-bg-active: color-mix(in srgb, var(--accent) 88%, #000000 12%);
    --btn-primary-color: var(--brand-primary-contrast);
    --btn-primary-radius: var(--radius-xs);
    --btn-primary-shadow: var(--shadow-accent-sm);
    --btn-primary-shadow-active: var(--shadow-accent-md);
    --btn-primary-disabled-opacity: 0.55;

    --btn-secondary-bg: var(--legacy-bg-3);
    --btn-secondary-bg-hover: color-mix(in srgb, var(--legacy-bg-3) 86%, #ffffff 14%);
    --btn-secondary-color: var(--text-primary);
    --btn-secondary-border: var(--surface-border-soft);

    --btn-ghost-bg: rgba(255, 255, 255, 0.06);
    --btn-ghost-bg-hover: rgba(255, 255, 255, 0.12);
    --btn-ghost-color: var(--text-primary);

    /* Header */
    --header-register-bg: var(--btn-primary-bg);
    --header-register-color: var(--btn-primary-color);
    --wallet-btn-bg-start: #1f1f1f;
    --wallet-btn-bg-end: var(--accent);
    --wallet-btn-gradient: linear-gradient(90deg, var(--wallet-btn-bg-start) 0%, var(--wallet-btn-bg-end) 100%);
    --wallet-btn-color: var(--brand-primary-contrast);

    /* Tabs / chips / pills */
    --tab-active-bg: var(--accent);
    --tab-active-color: var(--brand-primary-contrast);
    --tab-active-border: var(--accent);
    --tab-inactive-bg: transparent;
    --tab-inactive-color: var(--text-muted);
    --tab-inactive-border: var(--surface-border-soft);

    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-border: rgba(255, 255, 255, 0.12);
    --chip-color: var(--text-muted);
    --chip-active-bg: rgba(var(--accent-rgb), 0.14);
    --chip-active-border: rgba(var(--accent-rgb), 0.55);
    --chip-active-color: var(--text-primary);

    /* Cards / modals */
    --card-bg: var(--gradient-surface);
    --card-border: var(--surface-border-soft);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);

    --modal-bg: var(--modalbg);
    --lineartooltipbg: var(--modalbg);
    --modal-border: var(--surface-border-soft);
    --modal-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-xl);

    /* Wallet */
    --wallet-deposit-bg: var(--accent);
    --wallet-withdraw-gradient: var(--gradient-withdraw);
    --wallet-footer-btn-bg: var(--legacy-bg-3);
    --wallet-footer-btn-color: var(--text-primary);

    /* Game opener */
    --game-opener-border: var(--accent);
    --game-opener-overlay: linear-gradient(0deg, rgba(24, 24, 31, 0.84) 0%, rgba(24, 24, 31, 0.84) 100%);
    --game-play-btn-bg: var(--accent);
    --game-play-btn-color: var(--brand-primary-contrast);
    --game-demo-btn-bg: var(--legacy-text-muted);
    --game-demo-btn-color: #ffffff;

    /* Slider controls */
    --slider-nav-bg: rgba(22, 22, 22, 0.82);
    --slider-nav-bg-hover: rgba(var(--accent-rgb), 0.38);
    --slider-nav-border: rgba(var(--accent-rgb), 0.48);
    --slider-nav-color: #ffffff;
    --slider-pagination-dot: rgba(255, 255, 255, 0.35);
    --slider-pagination-dot-active: var(--accent);

    /* Typography tokens */
    --font-family-regular: "Rubik", sans-serif;
    --font-family-medium: "Rubik Medium", sans-serif;
    --font-family-semibold: "Rubik SemiBold", sans-serif;
    --font-family-bold: "Rubik Bold", sans-serif;

    /* Top search (global) */
    --top-search-form-border: 1px solid rgba(249, 115, 22, 0.45);
    --top-search-form-radius: 4px;
    --top-search-form-margin-top: 24px;
    --top-search-form-margin-bottom: 24px;
    --top-search-form-padding-x: 12px;
    --top-search-form-height: 48px;
    --top-search-form-line-height: 62px;
    --top-search-form-font-size: 0px;
    --top-search-form-bg: var(--linearbg);
    --top-search-form-font-family: var(--font-family-medium);

    --top-search-icon-color: #fdba74;
    --top-search-input-color: var(--text-primary);
    --top-search-input-placeholder: rgba(255, 255, 255, 0.55);
    --top-search-focus-radius: 16px;
    --top-search-focus-shadow: 0 22px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(var(--accent-rgb), 0.22),
        0 0 30px rgba(var(--accent-rgb), 0.1);

    --top-search-layer-radius: 18px;
    --top-search-layer-border: 1px solid rgba(255, 255, 255, 0.1);
    --top-search-layer-border-bottom: 10px solid rgba(255, 255, 255, 0.1);
    --top-search-layer-bg: rgba(10, 10, 10, 0.72);
    --top-search-layer-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
    --top-search-layer-blur: 14px;
    --top-search-recent-wrap-radius: 10px;
    --top-search-recent-wrap-border: 1px solid rgba(var(--brand-secondary-rgb), 0.26);
    --top-search-recent-wrap-bg: linear-gradient(180deg, rgba(18, 18, 18, 0.82), rgba(8, 8, 8, 0.84));
    --top-search-recent-wrap-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
    --top-search-recent-chip-radius: 999px;
    --top-search-recent-chip-border: 1px solid rgba(var(--brand-secondary-rgb), 0.5);
    --top-search-recent-chip-bg: linear-gradient(
        135deg,
        rgba(var(--brand-secondary-rgb), 0.26),
        rgba(var(--brand-secondary-rgb), 0.14)
    );
    --top-search-recent-chip-color: #edfffa;
    --top-search-recent-chip-font-family: var(--font-family-semibold);
    --top-search-recent-chip-shadow: 0 6px 14px rgba(var(--brand-secondary-rgb), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    /* Lowbar (mobile dock) */
    --lb-bg: rgba(18, 18, 18, 0.72);
    --lb-stroke: rgba(255, 255, 255, 0.1);
    --lb-stroke-2: rgba(255, 255, 255, 0.06);
    --lb-text: rgba(255, 255, 255, 0.86);
    --lb-muted: rgba(255, 255, 255, 0.65);
    --lb-active: var(--accent);
    --lb-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --lb-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.35);
    --lb-search-bg: #18181f;
    --lb-radius: 22px;
    --lb-radius-sm: 20px;
    --lb-surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    --lb-wallet-ring-color: rgba(var(--accent-rgb), 0.6);
    --lb-wallet-ring-size: 0.2rem;
    --lb-wallet-glow: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0) 65%);
    --lb-wallet-glow-radius: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0) 62%);
    --lb-chat-bg: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.65));
    --lb-chat-border: rgba(var(--accent-rgb), 0.5);
    --lb-chat-color: #ffffff;
    --lb-chat-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.26), 0 8px 20px rgba(0, 0, 0, 0.28);
    --lb-chat-shadow-hover: 0 14px 28px rgba(var(--accent-rgb), 0.34), 0 10px 24px rgba(0, 0, 0, 0.32);

    /* Sidebar top tabs (casino/sportsbook) */
    /* Set CDN SVG URL here per-domain:
       --sidebar-tab-casino-bg-image: url("https://cdn.example.com/sidebar-casino-bg.svg");
       --sidebar-tab-sportsbook-bg-image: url("https://cdn.example.com/sidebar-sportsbook-bg.svg");
    */
    --sidebar-tab-casino-bg-image: linear-gradient(180deg, rgba(249, 115, 22, 0.28), rgba(154, 52, 18, 0.18));
    --sidebar-tab-sportsbook-bg-image: linear-gradient(180deg, rgba(249, 115, 22, 0.26), rgba(124, 45, 18, 0.16));

    /* Bonus request modal */
    --bonus-request-tab-bg: var(--tab-inactive-bg);
    --bonus-request-tab-border: var(--tab-inactive-border);
    --bonus-request-tab-text: var(--tab-inactive-color);
    --bonus-request-tab-active-bg: var(--tab-active-bg);
    --bonus-request-tab-active-border: var(--tab-active-border);
    --bonus-request-tab-active-text: var(--tab-active-color);
    --bonus-request-card-bg: var(--card-bg);
    --bonus-request-card-border: var(--card-border);
    --bonus-request-card-shadow: var(--card-shadow);
    --bonus-request-info-bg: rgba(var(--accent-rgb), 0.16);
    --bonus-request-info-border: rgba(var(--accent-rgb), 0.45);
    --bonus-request-info-color: var(--text-primary);
    --bonus-request-button-bg: var(--btn-primary-bg);
    --bonus-request-button-text: var(--btn-primary-color);
    --bonus-request-empty-bg: rgba(255, 255, 255, 0.02);
    --bonus-request-empty-border: var(--surface-border-soft);
    --bonus-request-empty-text: var(--text-muted);

    /* VIP club page */
    --vip-accent: var(--accent);
    --vip-accent-rgb: var(--accent-rgb);
    --vip-bg0: var(--surface-bg);
    --vip-bg1: var(--surface-2);
    --vip-card-bg: rgba(255, 255, 255, 0.05);
    --vip-card-border: rgba(255, 255, 255, 0.10);
    --vip-card-border-soft: rgba(255, 255, 255, 0.06);
    --vip-card-hover-bg: rgba(255, 255, 255, 0.06);
    --vip-text: var(--text-secondary);
    --vip-muted: var(--text-soft);
    --vip-chip-bg: rgba(255, 255, 255, 0.06);
    --vip-chip-border: rgba(255, 255, 255, 0.10);
    --vip-chip-active-bg: rgba(var(--vip-accent-rgb), 0.16);
    --vip-chip-active-border: rgba(var(--vip-accent-rgb), 0.30);
    --vip-tag-bg: rgba(0, 0, 0, 0.18);
    --vip-gift-tag-bg: rgba(var(--vip-accent-rgb), 0.10);
    --vip-gift-tag-border: rgba(var(--vip-accent-rgb), 0.18);
    --vip-button-border: rgba(var(--vip-accent-rgb), 0.28);
    --vip-button-bg: linear-gradient(180deg, rgba(var(--vip-accent-rgb), 0.22), rgba(var(--vip-accent-rgb), 0.10));
    --vip-button-border-hover: rgba(var(--vip-accent-rgb), 0.42);
    --vip-link: rgba(var(--vip-accent-rgb), 0.95);
    --vip-link-border: rgba(var(--vip-accent-rgb), 0.35);
    --vip-link-border-hover: rgba(var(--vip-accent-rgb), 0.65);

    /* Misc */
    --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
    --divider: var(--surface-border-soft);

    /* Notification dropdown */
    --notif-badge-bg: var(--accent);
    --notif-badge-border: rgba(255, 255, 255, 0.55);
    --notif-panel-bg: var(--lineartooltipbg);
    --notif-panel-border: rgba(255, 255, 255, 0.08);
    --notif-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --notif-empty-bg: rgba(100, 116, 139, 0.16);
    --notif-empty-border: rgba(255, 255, 255, 0.08);
    --notif-item-bg: rgba(100, 116, 139, 0.14);
    --notif-item-bg-hover: rgba(100, 116, 139, 0.18);
    --notif-item-border: rgba(255, 255, 255, 0.08);
    --notif-item-border-hover: rgba(255, 255, 255, 0.14);
    --notif-track-thumb: rgba(255, 255, 255, 0.1);

    /* Wallet settings modal */
    --wgs-text: rgba(255, 255, 255, 0.92);
    --wgs-muted: rgba(255, 255, 255, 0.55);
    --wgs-panel-bg: rgba(24, 24, 24, 0.75);
    --wgs-panel-border: rgba(255, 255, 255, 0.05);
    --wgs-block-bg: rgba(255, 255, 255, 0.03);
    --wgs-block-bg-hover: rgba(255, 255, 255, 0.04);
    --wgs-block-border: rgba(255, 255, 255, 0.06);
    --wgs-switch-on-bg: rgba(var(--accent-rgb), 0.14);
    --wgs-switch-on-border: rgba(var(--accent-rgb), 0.28);
    --wgs-switch-knob: rgba(255, 255, 255, 0.35);
    --wgs-switch-knob-on: rgba(var(--accent-rgb), 0.9);
    --wgs-dot-bg: rgba(var(--accent-rgb), 0.1);
    --wgs-dot-border: rgba(var(--accent-rgb), 0.15);
    --wgs-dot-ring: rgba(var(--accent-rgb), 0.25);
    --wgs-save-border: rgba(var(--success-rgb), 0.22);
    --wgs-save-bg: linear-gradient(90deg, rgba(14, 58, 45, 0.92), rgba(var(--success-rgb), 0.45));

    /* Game page + empty states */
    --game-theater-overlay: rgba(0, 0, 0, 0.65);
    --game-overlay-soft: rgba(0, 0, 0, 0.55);
    --game-fs-close-bg: var(--legacy-bg-3);
    --game-switch-bg: var(--legacy-bg-3);
    --game-switch-knob: var(--legacy-bg-2);
    --game-switch-active-gradient: linear-gradient(to right, #00de99, #17de87, #2edd73, #41dc5d, #54db43);
    --game-bets-empty-bg: linear-gradient(145deg, rgba(22, 22, 22, 0.92), rgba(10, 10, 10, 0.86));
    --game-bets-empty-border: rgba(90, 131, 210, 0.34);
    --game-bets-empty-icon-bg: rgba(46, 94, 184, 0.24);
    --game-bets-empty-icon-border: rgba(93, 147, 245, 0.34);
    --game-bets-empty-icon-shadow: 0 8px 24px rgba(6, 20, 47, 0.45);
    --game-bets-empty-title: #f1f6ff;
    --game-bets-empty-text: rgba(199, 215, 242, 0.9);
    --game-bets-empty-button-bg: rgba(28, 73, 155, 0.45);
    --game-bets-empty-button-border: rgba(84, 132, 219, 0.5);
    --game-bets-empty-button-hover-bg: rgba(48, 99, 192, 0.58);
    --game-bets-empty-button-hover-border: rgba(104, 156, 247, 0.72);

    /* Favorites empty card */
    --favorites-empty-bg: linear-gradient(140deg, rgba(15, 33, 66, 0.94), rgba(7, 20, 44, 0.96));
    --favorites-empty-border: rgba(124, 174, 255, 0.3);
    --favorites-empty-shadow: inset 0 1px 0 rgba(189, 218, 255, 0.14), 0 18px 42px rgba(5, 14, 31, 0.42);
    --favorites-empty-icon-bg: rgba(40, 100, 205, 0.28);
    --favorites-empty-icon-border: rgba(126, 178, 255, 0.42);
    --favorites-empty-icon-shadow: 0 8px 26px rgba(19, 79, 184, 0.45);
    --favorites-empty-title: #f2f7ff;
    --favorites-empty-text: rgba(199, 217, 245, 0.9);
    --favorites-empty-btn-bg: linear-gradient(180deg, #2b7fff 0%, #1f63d2 100%);
    --favorites-empty-btn-border: rgba(116, 173, 255, 0.58);
    --favorites-empty-btn-shadow: 0 8px 20px rgba(20, 85, 193, 0.36);

    /* Race / raffle info blocks */
    --event-trophy-bg: rgba(0, 0, 0, 0.18);
    --event-trophy-border: rgba(249, 115, 22, 0.3);
    --event-card-border: rgba(255, 255, 255, 0.08);
    --event-divider: rgba(255, 255, 255, 0.12);
    --event-title: #ffffff;
    --event-label: rgba(225, 236, 247, 0.95);
    --event-muted: rgba(185, 214, 232, 0.95);
    --event-stat-label: rgba(180, 209, 228, 0.92);
    --event-cta-bg: var(--gradient-primary);
    --event-cta-color: var(--brand-primary-contrast);
    --event-progress-track: rgba(11, 28, 43, 0.75);

    /* Withdraw progress */
    --withdraw-progress-bg: rgba(18, 32, 58, 0.72);
    --withdraw-progress-border: rgba(105, 133, 178, 0.3);
    --withdraw-progress-track: rgba(33, 52, 85, 0.85);
    --withdraw-progress-fill: linear-gradient(90deg, #24c8ff 0%, #39de8e 100%);
    --withdraw-progress-stat-bg: rgba(255, 255, 255, 0.04);
    --withdraw-progress-label: #99abca;
    --withdraw-progress-value: #f4f8ff;
    --withdraw-progress-note: #adc1df;

    /* Challenges page */
    --challenge-filter-bg: rgba(35, 46, 71, 0.55);
    --challenge-filter-border: rgba(124, 152, 197, 0.24);
    --challenge-filter-text: #9eb0cf;
    --challenge-filter-text-hover: #dce8ff;
    --challenge-filter-active-bg: var(--linearbg);
    --challenge-filter-active-text: var(--text-primary);
    --challenge-filter-active-ring: rgba(var(--accent-rgb), 0.36);

    --challenge-card-radius: var(--radius-sm);
    --challenge-card-bg: radial-gradient(120% 80% at 8% -10%, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0) 58%),
        radial-gradient(90% 70% at 100% 100%, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0) 64%),
        linear-gradient(160deg, color-mix(in srgb, var(--surface-3) 88%, #1f1f1f 12%) 0%, var(--surface-3) 42%, var(--surface-2) 100%);
    --challenge-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    --challenge-card-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%),
        repeating-linear-gradient(-35deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(255, 255, 255, 0) 2px 14px);
    --challenge-card-overlay-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -42px 60px rgba(3, 9, 18, 0.32);
    --challenge-image-fallback: color-mix(in srgb, var(--surface-3) 82%, #1a1a1a 18%);

    --challenge-title: #eaf4ff;
    --challenge-target: rgba(210, 228, 241, 0.86);
    --challenge-label: rgba(174, 203, 223, 0.84);
    --challenge-value: #f3f8ff;
    --challenge-author: #eaf4ff;
    --challenge-claimed-divider: rgba(167, 206, 233, 0.16);

    --challenge-completed-ring: rgba(var(--success-rgb), 0.24);
    --challenge-completed-bg: linear-gradient(180deg, rgba(var(--success-rgb), 0.16) 0%, rgba(var(--success-rgb), 0.1) 100%);
    --challenge-control-label: rgba(255, 255, 255, 0.75);
    --challenge-control-btn-bg: rgba(10, 14, 22, 0.9);
    --challenge-control-btn-border: rgba(255, 255, 255, 0.1);
    --challenge-control-btn-text: #ffffff;
    --challenge-control-btn-icon: rgba(255, 255, 255, 0.85);
    --challenge-control-badge-bg: rgba(var(--accent-rgb), 0.18);
    --challenge-control-badge-border: rgba(var(--accent-rgb), 0.35);
    --challenge-control-badge-text: color-mix(in srgb, var(--accent) 70%, #ffe4d6 30%);
    --challenge-dropdown-bg: #ffffff;
    --challenge-dropdown-text: #111827;
    --challenge-dropdown-border: rgba(0, 0, 0, 0.1);
    --challenge-dropdown-divider: rgba(0, 0, 0, 0.08);
    --challenge-dropdown-item-hover: rgba(0, 0, 0, 0.06);
    --challenge-dropdown-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    --challenge-dropdown-active: var(--accent);
    --challenge-provider-pill-bg: linear-gradient(
        to right,
        color-mix(in srgb, var(--accent) 78%, #1a1a1a 22%) 0%,
        color-mix(in srgb, var(--accent) 88%, #262626 12%) 100%
    );
    --challenge-provider-pill-text: #ffffff;

    /* Tournament buttons */
    --tournament-button-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 86%, #ffffff 14%) 0%,
        color-mix(in srgb, var(--accent) 84%, #000000 16%) 100%
    );
    --tournament-button-border: rgba(var(--accent-rgb), 0.54);
    --tournament-button-color: var(--brand-primary-contrast);
    --tournament-button-radius: var(--radius-2xs);
    --tournament-button-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.34);
    --tournament-button-hover-filter: brightness(1.05);

    /* General header tabs */
    --general-tabs-text: #8c8da8;
    --general-tabs-active-text: var(--accent);
    --general-tabs-active-font: "Rubik Bold";

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-rail-width: 78px;
    --sidebar-z: 2000;
    --sidebar-ease: cubic-bezier(.2, .9, .2, 1);

    --sidebar-bg-open: linear-gradient(180deg, rgba(18, 18, 18, 0.96) 0%, rgba(6, 6, 6, 0.96) 100%);
    --sidebar-bg-open-accent: rgba(var(--accent-rgb), .18);
    --sidebar-bg-open-secondary: rgba(var(--warning-rgb), .10);

    --sidebar-bg-collapsed: linear-gradient(180deg, rgba(12, 12, 12, 0.98) 0%, rgba(5, 5, 5, 0.98) 100%);
    --sidebar-bg-collapsed-accent: rgba(var(--accent-rgb), 0.20);

    --sidebar-bg-active: linear-gradient(180deg, rgba(28, 28, 28, 0.97) 0%, rgba(10, 10, 10, 0.98) 100%);
    --sidebar-bg-active-accent: rgba(var(--accent-rgb), 0.22);
    --sidebar-bg-active-secondary: rgba(var(--success-rgb), 0.12);

    --sidebar-stroke: rgba(255, 255, 255, .06);
    --sidebar-stroke-strong: rgba(255, 255, 255, .10);
    --sidebar-stroke-accent: rgba(var(--accent-rgb), .24);
    --sidebar-text: rgba(255, 255, 255, 0.94);
    --sidebar-text-muted: rgba(180, 180, 180, 0.78);
    --sidebar-text-soft: #bdbdbd;

    --sidebar-chip: rgba(255, 255, 255, .05);
    --sidebar-chip-2: rgba(255, 255, 255, .03);
    --sidebar-chip-stroke: rgba(255, 255, 255, .08);

    --sidebar-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    --sidebar-shadow-soft: 0 14px 30px rgba(0, 0, 0, .28);
    --sidebar-active-glow: 0 0 0 1px rgba(var(--accent-rgb), .16);

    --sidebar-overlay: rgba(0, 0, 0, .60);

    --sidebar-search-bg: radial-gradient(420px 120px at 15% 0%, rgba(var(--accent-rgb), .10), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    --sidebar-search-text: var(--sidebar-text-muted);

    --sidebar-promo-bg: rgba(255, 255, 255, .03);
    --sidebar-promo-border: rgba(255, 255, 255, .07);
    --sidebar-promo-item-bg: rgba(0, 0, 0, .14);
    --sidebar-promo-item-bg-hover: rgba(0, 0, 0, .20);
    --sidebar-promo-dot: var(--accent);
    --sidebar-promo-dot-glow: rgba(var(--accent-rgb), .15);
    --sidebar-hero-glow: linear-gradient(90deg, #101010 0%, #f97316 100%);

    --sidebar-top-btn-border: rgba(249, 115, 22, 0.45);
    --sidebar-top-btn-bg: linear-gradient(95deg, rgba(26, 26, 26, 0.96) 0%, rgba(16, 16, 16, 0.98) 55%, rgba(10, 10, 10, 1) 100%);
    --sidebar-top-btn-shadow: 0 14px 26px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --sidebar-top-btn-title: #ffffff;
    --sidebar-top-btn-arrow: rgba(253, 186, 116, 0.95);

    --sidebar-top-btn-hover-border: rgba(249, 115, 22, 0.62);
    --sidebar-top-btn-hover-shadow: 0 18px 30px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(249, 115, 22, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --sidebar-top-btn-active-border: rgba(249, 115, 22, 0.78);
    --sidebar-top-btn-active-bg: linear-gradient(95deg, rgba(249, 115, 22, 0.3) 0%, rgba(249, 115, 22, 0.18) 100%);
    --sidebar-top-btn-active-shadow: 0 18px 34px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(249, 115, 22, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

/* Scoped variables for hero area slider */
.hero-area-slider {
    --hero-accent: var(--accent);
    --hero-accent-rgb: var(--accent-rgb);
    --hero-nav-bg: var(--slider-nav-bg);
    --hero-nav-bg-hover: var(--slider-nav-bg-hover);
    --hero-nav-border: var(--slider-nav-border);
    --hero-pagination-dot: var(--slider-pagination-dot);
    --hero-pagination-dot-active: var(--slider-pagination-dot-active);
}

/* =========================================================
   GLOBAL THEME OVERRIDES FOR LEGACY SELECTORS
   ========================================================= */

/* Header: templates that use var(--header-footer-logo) get the dark wordmark here */
header#header,
#header {
    --header-footer-logo: var(--header-footer-logo-dark);
}

/* Header buttons — login / register: flat “app” chrome (not pill) */
.login-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.login-buttons .button,
.login-buttons a.button,
.login-buttons button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    padding: 9px 16px;
    border-radius: var(--radius-lg) !important;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.2s ease,
        transform 0.14s ease;
}

.login-buttons a.button:focus-visible,
.login-buttons button.button:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.45);
    outline-offset: 2px;
}

.login-buttons a.button:not(.register),
.login-buttons a.button.login,
.login-buttons .button.login {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border-color: var(--surface-border-soft) !important;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-buttons a.button:not(.register):hover,
.login-buttons a.button.login:hover,
.login-buttons .button.login:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.login-buttons a.button:not(.register):active,
.login-buttons a.button.login:active {
    transform: scale(0.98);
}

header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register,
.login-buttons a.button.register {
    background: var(--header-register-bg) !important;
    color: var(--header-register-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px rgba(var(--accent-rgb), 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register:hover,
.login-buttons a.button.register:hover {
    background: var(--btn-primary-bg-hover) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 8px 22px rgba(var(--accent-rgb), 0.32);
    transform: translateY(-1px);
}

header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register:active,
.login-buttons a.button.register:active {
    background: var(--btn-primary-bg-active) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) inset, 0 4px 12px rgba(var(--accent-rgb), 0.2) !important;
    transform: translateY(0) scale(0.98);
}

header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button {
    color: var(--wallet-btn-color) !important;
    background: var(--wallet-btn-gradient) !important;
    border-radius: var(--radius-xs);
}

/* Primary action buttons */
.common-form-button .button,
form.general-form div.form-buttons button,
.auth div.auth-box form.auth-form div.form-buttons button,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
    border-radius: var(--btn-primary-radius) !important;
    box-shadow: var(--btn-primary-shadow);
}

.common-form-button .button:hover,
form.general-form div.form-buttons button:hover,
.auth div.auth-box form.auth-form div.form-buttons button:hover,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover {
    background-color: var(--btn-primary-bg-hover) !important;
}

.common-form-button .button:active,
form.general-form div.form-buttons button:active,
.auth div.auth-box form.auth-form div.form-buttons button:active,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:active {
    background-color: var(--btn-primary-bg-active) !important;
    box-shadow: var(--btn-primary-shadow-active) !important;
}

/* Inputs */
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input,
form.general-form div.form-group div.form-item.form-item-text input,
form.general-form div.form-group div.form-item.form-item-password input,
form.general-form div.form-group div.form-item.form-item-select select,
.phone-input,
.phone-input input {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--text-primary) !important;
}

.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input::placeholder,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input::placeholder,
form.general-form div.form-group div.form-item.form-item-text input::placeholder,
form.general-form div.form-group div.form-item.form-item-password input::placeholder {
    color: var(--input-placeholder) !important;
}

.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input:focus,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input:focus,
form.general-form div.form-group div.form-item.form-item-text input:focus,
form.general-form div.form-group div.form-item.form-item-password input:focus,
.phone-input input:focus {
    border-color: var(--input-border-focus) !important;
    box-shadow: var(--focus-ring) !important;
}

/* Native select in auth modal: avoid white-on-white in opened date lists */
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-select select {
    color: #e5e7eb !important;
}

.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-select select option {
    color: #111111 !important;
    background: #ffffff !important;
}

/* Mobile: make text black on white select/dropdown surfaces for readability */
@media (max-width: 991px) {
    .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-select select {
        color: #111111 !important;
        background: #ffffff !important;
        border-color: rgba(17, 17, 17, 0.2) !important;
    }

    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select > .dropdown-toggle,
    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option,
    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option-inner,
    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option-inner-inner {
        color: #111111 !important;
        background: #ffffff !important;
    }
}

/* Desktop: keep select surfaces dark */
@media (min-width: 992px) {
    .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-select select {
        color: #f3f4f6 !important;
        background: #111111 !important;
        border-color: rgba(249, 115, 22, 0.35) !important;
    }

    .auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-select select option {
        color: #f3f4f6 !important;
        background: #111111 !important;
    }

    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select > .dropdown-toggle,
    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option,
    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option-inner,
    .auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option-inner-inner {
        color: #f3f4f6 !important;
        background: #111111 !important;
    }
}

/* Bootstrap select buttons in auth form: keep dark on click/active */
.auth form .form-item.form-item-select.d-flex.align-items-center .btn,
.auth form .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle,
.auth form .form-item.form-item-select.d-flex.align-items-center .form-select,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .btn,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .form-select {
    background: var(--legacy-bg-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

.auth form .form-item.form-item-select.d-flex.align-items-center .btn:hover,
.auth form .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle:hover,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .btn:hover,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle:hover {
    background: color-mix(in srgb, var(--legacy-bg-3) 86%, #ffffff 14%) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border-focus) !important;
}

.auth form .form-item.form-item-select.d-flex.align-items-center .btn:focus,
.auth form .form-item.form-item-select.d-flex.align-items-center .btn:active,
.auth form .form-item.form-item-select.d-flex.align-items-center .btn.active,
.auth form .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle:focus,
.auth form .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle:active,
.auth form .form-item.form-item-select.d-flex.align-items-center .show > .dropdown-toggle,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .btn:focus,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .btn:active,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .btn.active,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle:focus,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle:active,
.auth-modal .form-item.form-item-select.d-flex.align-items-center .show > .dropdown-toggle {
    background: var(--legacy-bg-3) !important;
    color: var(--text-primary) !important;
    border-color: rgba(var(--accent-rgb), 0.65) !important;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18) !important;
}

/* Extra specificity for modal-content where Bootstrap btn-light overrides */
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .btn.btn-light,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle.btn-light,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select > .dropdown-toggle.btn-light,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select > .dropdown-toggle {
    background-color: var(--legacy-bg-3) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .btn.btn-light:hover,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle.btn-light:hover,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select > .dropdown-toggle:hover {
    background-color: color-mix(in srgb, var(--legacy-bg-3) 86%, #ffffff 14%) !important;
    color: var(--text-primary) !important;
    border-color: rgba(var(--accent-rgb), 0.48) !important;
}

.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .btn.btn-light:focus,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .btn.btn-light:active,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .btn.btn-light.active,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle.btn-light:focus,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle.btn-light:active,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .dropdown-toggle.btn-light.active,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select.show > .dropdown-toggle,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select > .dropdown-toggle[aria-expanded="true"] {
    background-color: var(--legacy-bg-3) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: rgba(var(--accent-rgb), 0.65) !important;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18) !important;
}

/* Date select dropdown list in auth modal: prevent white popup/items */
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu .inner,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu.show {
    background: #111111 !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42) !important;
}

.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu li a,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu li span,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-item {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu li a:hover,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu li.selected a,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-menu li.active a,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-item:hover,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .dropdown-item.active {
    background: rgba(var(--accent-rgb), 0.18) !important;
    color: #ffffff !important;
}

.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option-inner,
.auth-modal .modal-content .form-item.form-item-select.d-flex.align-items-center .bootstrap-select .filter-option-inner-inner {
    color: var(--text-primary) !important;
}

/* Modals and cards */
.modal .modal-dialog .modal-content,
#betModal .modal-dialog .modal-content .modal-body div.wallet-box,
#walletModal .modal-dialog .modal-content .modal-body div.wallet-box {
    background: var(--modal-bg) !important;
    border: var(--border-thin) solid var(--modal-border);
    border-radius: var(--modal-radius) !important;
    box-shadow: var(--modal-shadow);
}

/* Auth modal: remove second dark layer inside modal-content */
.auth-modal .modal-dialog .modal-content .modal-box,
.auth-modal .modal-dialog .modal-content .modal-body .modal-box {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.auth-modal .modal-dialog .modal-content .auth-box,
.auth-modal .modal-dialog .modal-content .modal-body > div {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Auth modal: keep only one visible panel (modal-content) */
.auth-modal .modal-dialog .modal-content .modal-body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.auth-modal .modal-dialog .modal-content::before,
.auth-modal .modal-dialog .modal-content::after,
.auth-modal .modal-dialog .modal-content .modal-body::before,
.auth-modal .modal-dialog .modal-content .modal-body::after,
.auth-modal .modal-dialog .modal-content .modal-box::before,
.auth-modal .modal-dialog .modal-content .modal-box::after {
    content: none !important;
    display: none !important;
}

/* Wallet buttons */
#walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit {
    background-color: var(--wallet-deposit-bg) !important;
    color: var(--brand-primary-contrast) !important;
}

#walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.withdraw {
    background-image: var(--wallet-withdraw-gradient) !important;
    color: var(--brand-primary-contrast) !important;
}

#walletModal .modal-dialog .modal-content .modal-body div.wallet-footer a.button {
    background-color: var(--wallet-footer-btn-bg) !important;
    color: var(--wallet-footer-btn-color) !important;
    border-radius: var(--radius-xs) !important;
}

/* Tabs and chips */
.simple-bets .nav.nav-pills .nav-link.active,
.simple-bets .nav.nav-pills .nav-link[aria-selected="true"],
.simple-bets ul li button.active,
.simple-bets ul li button[aria-selected="true"] {
    color: var(--tab-active-color) !important;
    background-color: var(--tab-active-bg) !important;
    border-color: var(--tab-active-border) !important;
}

.faq__chip,
.ato-btn {
    border-color: var(--chip-border);
    background: var(--chip-bg);
    color: var(--chip-color);
    border-radius: var(--radius-pill);
}

.faq__chip.is-active,
.ato-btn.is-active {
    border-color: var(--chip-active-border) !important;
    background: var(--chip-active-bg) !important;
    color: var(--chip-active-color) !important;
}

/* Animated tab indicator */
.ato-indicator {
    background: linear-gradient(
        to bottom,
        rgba(var(--accent-rgb), 0.72),
        rgba(var(--accent-rgb), 0.42)
    ) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.35) !important;
    border-radius: var(--radius-xs) !important;
    box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.22), inset 0 1px rgba(255, 255, 255, 0.18) !important;
}

/* Progress bars */
div.progress-bar span,
.progress-fill,
.race-progress .line,
.simple-progress .fill {
    background: var(--progressbg) !important;
}

.progress-circle .progress-svg circle.circle-bg {
    stroke: rgba(139, 140, 167, 0.2);
}

.progress-circle .progress-svg circle.circle {
    stroke: var(--accent);
}

/* Game opener buttons */
.game-item div.game-top div.game-opener {
    border-color: var(--game-opener-border) !important;
    background: var(--game-opener-overlay) !important;
    border-radius: var(--radius-md);
}

.game-item div.game-top div.game-opener div.play-buttons span.button,
.game-item div.game-top div.game-opener div.play-buttons a.button {
    background-color: var(--game-play-btn-bg) !important;
    color: var(--game-play-btn-color) !important;
    border-radius: var(--radius-sm) !important;
}

.game-item div.game-top div.game-opener div.play-buttons span.button.demo,
.game-item div.game-top div.game-opener div.play-buttons a.button.demo {
    background-color: var(--game-demo-btn-bg) !important;
    color: var(--game-demo-btn-color) !important;
}

/* Race carousel CTA */
div.race-carousels div.slider-item .race-item div.head div.details div.buttons a.button {
    background-color: var(--accent) !important;
    color: var(--brand-primary-contrast) !important;
    border-color: var(--accent) !important;
    border-radius: var(--radius-xs) !important;
}

/* Sidebar / menu active marker and active links */
.sidebar .menu a.active,
.sidebar .submenu a.active,
.sidebar-menu a.active,
.accordion-menu a.active,
.lowbar .item.active {
    color: var(--accent) !important;
}

.sidebar .menu .active-indicator,
.accordion-menu .active-indicator,
.lowbar .indicator {
    background: var(--gradient-primary-horizontal) !important;
    box-shadow: var(--shadow-accent-sm);
    border-radius: var(--radius-pill);
}

/* FAQ background glow */
.faq__bg {
    filter: none !important;
    pointer-events: none;
    background:
        radial-gradient(700px 320px at 10% 0, rgba(var(--accent-rgb), 0.16), transparent 60%),
        radial-gradient(520px 260px at 100% 30%, rgba(255, 255, 255, 0.08), transparent 62%),
        radial-gradient(560px 300px at 20% 120%, rgba(var(--accent-rgb), 0.1), transparent 55%) !important;
}

/* Notification surfaces */
.notifications .notification-item,
.notification-item {
    background: var(--gradient-surface) !important;
    border: var(--border-thin) solid var(--surface-border-soft);
    border-radius: var(--radius-sm) !important;
}

.notifications .notification-item.unread,
.notification-item.unread {
    border-color: var(--accent-border) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

/* Generic utility mappings for old hardcoded palette usage */
.theme-bg-primary,
.bg-primary,
[data-theme="primary"] {
    background-color: var(--accent) !important;
    color: var(--brand-primary-contrast) !important;
}

.theme-surface,
.bg-surface,
[data-theme="surface"] {
    background-color: var(--legacy-bg-3) !important;
    color: var(--text-primary) !important;
}

.theme-muted,
.text-muted,
[data-theme="muted"] {
    color: var(--legacy-text-muted) !important;
}

/* Settings page theme tokens */
:root {
    --settings-sidebar-bg: rgba(12, 12, 12, 0.92);
    --settings-sidebar-border: rgba(255, 255, 255, 0.1);
    --settings-sidebar-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
    --settings-sidebar-radius: 12px;
    --settings-sidebar-select-bg: rgba(255, 255, 255, 0.03);
    --settings-sidebar-item-radius: 8px;
    --settings-sidebar-item-color: rgba(235, 235, 235, 0.84);
    --settings-sidebar-item-active-bg: linear-gradient(120deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.08));
    --settings-sidebar-active-color: #ffffff;

    --settings-content-bg: rgba(10, 10, 10, 0.9);
    --settings-content-border: rgba(255, 255, 255, 0.08);
    --settings-content-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
    --settings-content-radius: 12px;

    --settings-block-bg: rgba(18, 18, 18, 0.88);
    --settings-block-border: rgba(255, 255, 255, 0.08);
    --settings-block-divider: rgba(255, 255, 255, 0.08);
    --settings-block-header-bg: transparent;
    --settings-block-radius: 10px;
    --settings-block-title-color: rgba(255, 255, 255, 0.96);
    --settings-block-desc-color: rgba(200, 200, 200, 0.78);

    --settings-field-title-color: rgba(240, 240, 240, 0.9);
    --settings-control-bg: rgba(14, 14, 14, 0.85);
    --settings-control-border: rgba(255, 255, 255, 0.1);
    --settings-control-color: rgba(255, 255, 255, 0.95);
    --settings-control-radius: 8px;

    --settings-check-title-color: rgba(248, 248, 248, 0.94);
    --settings-check-desc-color: rgba(180, 180, 180, 0.74);

    /* Common page header */
    --page-header-radius: 4px;
    --page-header-bg: var(--linearbg);
    --page-header-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --page-header-top-line: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0));
    --page-header-title-color: rgba(255, 255, 255, 0.96);
    --page-header-subtitle-color: rgba(255, 255, 255, 0.65);
    --page-header-icon-color: #141414;

    /* Blog detail */
    --blog-detail-shell-border: rgba(255, 255, 255, 0.08);
    --blog-detail-shell-radius: 12px;
    --blog-detail-shell-bg: linear-gradient(180deg, rgba(14, 14, 14, 0.94), rgba(10, 10, 10, 0.84));
    --blog-detail-shell-shadow: 0 24px 50px rgba(0, 0, 0, 0.36);
    --blog-detail-empty-border: rgba(255, 255, 255, 0.15);
    --blog-detail-empty-color: rgba(255, 255, 255, 0.8);
    --blog-detail-card-bg: rgba(255, 255, 255, 0.02);
    --blog-detail-close-border: rgba(255, 255, 255, 0.14);
    --blog-detail-close-bg: rgba(255, 255, 255, 0.04);
    --blog-detail-close-color: rgba(255, 255, 255, 0.9);
    --blog-detail-close-border-hover: rgba(255, 255, 255, 0.28);
    --blog-detail-close-bg-hover: rgba(255, 255, 255, 0.08);
    --blog-detail-image-border: rgba(255, 255, 255, 0.08);
    --blog-detail-title-color: #fff;
    --blog-detail-lead-color: rgba(255, 255, 255, 0.82);
    --blog-detail-time-color: rgba(255, 255, 255, 0.65);
    --blog-detail-content-color: rgba(255, 255, 255, 0.88);

    /* Policies page */
    --policies-content-bg: rgba(12, 12, 12, 0.9);
    --policies-content-color: var(--text-secondary);
    --policies-link-color: var(--accent);
    --policies-heading-color: #fff;

    /* Wheel page */
    --wheel-page-glow-a: rgba(var(--accent-rgb), 0.16);
    --wheel-page-glow-b: rgba(255, 255, 255, 0.07);
    --wheel-tabs-border: rgba(255, 255, 255, 0.08);
    --wheel-tabs-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    --wheel-tabs-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 24px rgba(0, 0, 0, 0.28);
    --wheel-tab-border: rgba(255, 255, 255, 0.16);
    --wheel-tab-bg: rgba(255, 255, 255, 0.03);
    --wheel-tab-color: rgba(255, 255, 255, 0.9);
    --wheel-tab-border-hover: rgba(255, 255, 255, 0.28);
    --wheel-tab-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --wheel-tab-shadow-hover: 0 10px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --wheel-chip-color: #fff;
    --wheel-chip-bg: rgba(var(--accent-rgb), 0.2);
    --wheel-chip-border: rgba(var(--accent-rgb), 0.36);
    --wheel-tab-active-border: rgba(var(--accent-rgb), 0.48);
    --wheel-tab-active-bg: linear-gradient(180deg, rgba(var(--accent-rgb), 0.86), rgba(var(--accent-rgb), 0.56));
    --wheel-tab-active-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.24);
    --wheel-card-border: rgba(255, 255, 255, 0.08);
    --wheel-card-bg: var(--modalbg);
    --wheel-card-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    --wheel-stage-ring: rgba(255, 255, 255, 0.1);
    --wheel-stage-ring-outer: rgba(255, 255, 255, 0.03);
    --wheel-stage-plate-border: rgba(255, 255, 255, 0.14);
    --wheel-stage-plate-bg: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    --wheel-stage-center-bg: radial-gradient(circle at 50% 35%, rgba(42, 42, 42, 0.92), rgba(12, 12, 12, 0.98));
    --wheel-stage-center-border: rgba(255, 255, 255, 0.26);
    --wheel-stage-center-ring: rgba(8, 8, 8, 0.62);
    --wheel-stage-center-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    --wheel-stage-center-highlight: rgba(255, 255, 255, 0.14);
    --wheel-halo-outer-border: rgba(var(--accent-rgb), 0.36);
    --wheel-halo-inner-border: rgba(var(--accent-rgb), 0.22);
    --wheel-halo-inner-shadow: inset 0 0 45px rgba(var(--accent-rgb), 0.16);
    --wheel-arrow-shadow: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    --wheel-spin-btn-border: rgba(255, 255, 255, 0.2);
    --wheel-spin-btn-bg: linear-gradient(180deg, rgba(36, 36, 36, 0.94), rgba(14, 14, 14, 0.97));
    --wheel-spin-btn-color: rgba(245, 245, 245, 0.96);
    --wheel-spin-btn-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --wheel-side-summary-border: rgba(255, 255, 255, 0.08);
    --wheel-side-summary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    --wheel-muted-text: rgba(255, 255, 255, 0.7);
    --wheel-strong-text: #fff;
    --wheel-status-border: rgba(255, 255, 255, 0.15);
    --wheel-status-bg: rgba(255, 255, 255, 0.04);
    --wheel-status-ready-color: #7dffb6;
    --wheel-status-ready-border: rgba(125, 255, 182, 0.35);
    --wheel-status-ready-bg: rgba(125, 255, 182, 0.12);
    --wheel-status-passive-color: rgba(255, 255, 255, 0.76);
    --wheel-article-border: rgba(255, 255, 255, 0.08);
    --wheel-article-bg: rgba(255, 255, 255, 0.01);
    --wheel-article-color: rgba(255, 255, 255, 0.88);
    --wheel-result-border: rgba(var(--accent-rgb), 0.22);
    --wheel-result-bg: rgba(var(--accent-rgb), 0.1);
    --wheel-register-btn-border: rgba(var(--accent-rgb), 0.5);
    --wheel-register-btn-bg: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.8));
    --wheel-register-btn-color: #fff;
    --wheel-register-btn-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.2);

    /* Promotions cards */
    --promotion-hover-panel-bg: linear-gradient(180deg, rgba(18, 18, 18, 0.94), rgba(12, 12, 12, 0.96));
    --promotion-hover-panel-pattern: radial-gradient(620px 240px at 80% 20%, rgba(255, 255, 255, 0.04), transparent 66%);
    --promotion-hover-title-color: rgba(255, 255, 255, 0.96);
    --promotion-hover-desc-color: rgba(190, 190, 190, 0.78);
    --promotion-bottom-icon-color: var(--text-primary);
    --promotion-bottom-info-color: var(--text-muted);
}

/* Desktop menu body compact spacing */
@media (min-width: 992px) {
    .menu-body,
    .menu-body.open,
    .menu-body.is-open,
    .menu-body.active {
        margin-top: -4px !important;
        margin-bottom: 7px !important;
        padding-top: 4px !important;
        padding-bottom: 0 !important;
        row-gap: 4px !important;
        gap: 4px !important;
    }

    .menu-body > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}

/* Black + accent (orange) palette additions */
:root {
    /* Background */
    --black-main: #0a0a0a;
    --black-soft: #121212;
    --panel-bg: #1a1a1a;

    /* Accent orange tones (legacy --gold-* names kept for compatibility) */
    --gold-main: #ea580c;
    --gold-light: #fb923c;
    --gold-dark: #9a3412;
    --gold-metal: #f97316;

    /* Effects */
    --gold-glow: #ff8c42;
    --gold-spark: #fed7aa;

    /* Text */
    --text-white: #ffffff;
    --text-soft: #eaeaea;
    --text-passive: #9a9a9a;

    /* Reusable gradient */
    --gradient-gold: linear-gradient(135deg, #9a3412, #ea580c, #fb923c);
}

.button-gold {
    background: var(--gradient-gold);
    color: var(--black-main);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.3s;
}

.button-gold:hover {
    background: linear-gradient(135deg, #fb923c, #ff8c42);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.55);
}

.card {
    background: var(--panel-bg);
    border: 1px solid var(--gold-main);
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
}

/* Menu head gold styling */
.menu-head,
.menu-head a,
.menu-head button {
    color: #ffedd5 !important;
}

.menu-head {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.22), rgba(154, 52, 18, 0.16)) !important;
    border: 1px solid rgba(249, 115, 22, 0.42) !important;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.16) !important;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.menu-head i,
.menu-head svg {
    color: #fed7aa !important;
    fill: currentColor !important;
}

.menu-head:hover,
.menu-head:focus-within {
    background: linear-gradient(135deg, rgba(253, 186, 116, 0.14), rgba(251, 146, 60, 0.08)) !important;
    border-color: rgba(253, 186, 116, 0.34) !important;
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.18) !important;
}

/*
 * Sidebar stack (ebetlab BEM): Casino/Spor (.sidebar__links) üstte, altında menü blokları (.sidebar__menu).
 * Rakip yapıyla uyum: #sidebar > .sidebar__content > .sidebar__big > ...
 */
.sidebar .sidebar__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0;
    flex: 1 1 auto;
}

.sidebar .sidebar__big {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0;
    flex: 1 1 auto;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar .sidebar__big > .sidebar__links {
    flex: 0 0 auto;
    width: 100%;
}

.sidebar .sidebar__big > #tf-sidebar-extra {
    flex: 0 0 auto;
    width: 100%;
}

.sidebar .sidebar__big > .sidebar__menu {
    flex: 0 0 auto;
    width: 100%;
}

/* Üst Casino / Spor kartları — gold çerçeve, mevcut görsel URL’leri korunur */
.sidebar .sidebar__link--casino,
.sidebar a.sidebar__link {
    border-radius: 10px !important;
    border: 1px solid rgba(249, 115, 22, 0.42) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sidebar .sidebar__link--casino:hover,
.sidebar a.sidebar__link:hover {
    border-color: rgba(253, 186, 116, 0.55) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(249, 115, 22, 0.2) !important;
}

.sidebar .sidebar__link span,
.sidebar .sidebar__link-small {
    color: inherit;
}

/* Bölüm başlıkları (Menü, Oyunlar, …) */
.sidebar .sidebar__title {
    color: #ffedd5 !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    opacity: 0.95;
    padding-top: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(249, 115, 22, 0.22);
    margin-bottom: 4px !important;
}

/* Nav satırları */
.sidebar .sidebar__nav li > a,
.sidebar .sidebar__nav li > button {
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar .sidebar__nav li > a:hover,
.sidebar .sidebar__nav li > button:hover {
    background: rgba(249, 115, 22, 0.08) !important;
    color: #ffedd5 !important;
}

.sidebar .sidebar__nav li.active > a,
.sidebar .sidebar__nav li.active > button,
.sidebar .sidebar__nav a.active {
    color: #fdba74 !important;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.18), rgba(249, 115, 22, 0.06)) !important;
    box-shadow: inset 3px 0 0 0 rgba(249, 115, 22, 0.85);
}

.sidebar .sidebar__nav--border {
    border-color: rgba(249, 115, 22, 0.14) !important;
}

.sidebar .sidebar__collapsed {
    color: rgba(253, 186, 116, 0.85) !important;
    opacity: 0.95;
}

.sidebar .sidebar__collapsed:hover {
    color: #ffedd5 !important;
}

/* Küçük (collapsed) rail — gold vurgu */
.sidebar .sidebar__nav-small li.active > a,
.sidebar .sidebar__nav-small li.active > button {
    color: rgba(253, 186, 116, 0.95) !important;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.35);
    border-radius: 8px;
}

/*
 * Sidebar shell + slide: profesyonel tipografi (kategori / menü ağacı).
 * .sidebar-wrapper, .sb-fade-slide ve içindeki kategori sınıfları.
 */
.sidebar-wrapper,
.sidebar-wrapper .sb-fade-slide,
.sb-fade-slide {
    font-family: var(--font-family-regular), "Inter", "Segoe UI", system-ui, sans-serif;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sidebar-wrapper [class*="category"],
.sb-fade-slide [class*="category"],
.sidebar-wrapper .category,
.sb-fade-slide .category {
    font-family: var(--font-family-medium), "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* Bölüm etiketleri (Menü, Oyunlar, Promosyonlar, …) */
.sidebar-wrapper .sidebar__title,
.sb-fade-slide .sidebar__title {
    font-family: var(--font-family-semibold), "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

/* Ana nav satırları */
.sidebar-wrapper .sidebar__nav > li > a,
.sidebar-wrapper .sidebar__nav > li > button,
.sb-fade-slide .sidebar__nav > li > a,
.sb-fade-slide .sidebar__nav > li > button {
    font-family: var(--font-family-medium), "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.015em !important;
}

/* Alt kategori / collapse içi (daha sakin gövde) */
.sidebar-wrapper .sidebar__nav--collapse li > a,
.sidebar-wrapper .sidebar__nav--collapse li > button,
.sb-fade-slide .sidebar__nav--collapse li > a,
.sb-fade-slide .sidebar__nav--collapse li > button {
    font-family: var(--font-family-regular), "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
}

.sidebar-wrapper .sidebar__nav--collapse .sidebar__nav--collapse li > a,
.sb-fade-slide .sidebar__nav--collapse .sidebar__nav--collapse li > a {
    font-size: 0.8125rem !important;
}

/* Casino / Spor üst kartları — kısa başlık */
.sidebar-wrapper .sidebar__link span,
.sb-fade-slide .sidebar__link span,
.sidebar-wrapper a.sidebar__link,
.sb-fade-slide a.sidebar__link {
    font-family: var(--font-family-semibold), "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.03em !important;
}

/* Etiket rozetleri (ör. "Yeni") — küçük caps */
.sidebar-wrapper .sidebar__nav a > span:not(.svg-icon),
.sb-fade-slide .sidebar__nav a > span:not(.svg-icon) {
    font-family: var(--font-family-semibold), "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    vertical-align: middle;
}

/* Dar ikon şeridi — kısa tooltip benzeri netlik */
.sidebar-wrapper .sidebar__nav-small a,
.sidebar-wrapper .sidebar__nav-small button,
.sb-fade-slide .sidebar__nav-small a,
.sb-fade-slide .sidebar__nav-small button {
    font-family: var(--font-family-medium), "Inter", "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

/* Menu body black styling (mobile only) */
@media (max-width: 991px) {
    .menu-body,
    .menu-body.open,
    .menu-body.is-open,
    .menu-body.active {
        background: linear-gradient(180deg, rgba(14, 14, 14, 0.96) 0%, rgb(7 7 7 / 0%) 100%) !important;
        border: 0 !important;
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32) !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .menu-body a,
    .menu-body button,
    .menu-body .item,
    .menu-body .menu-item {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .menu-body a:hover,
    .menu-body button:hover,
    .menu-body .item:hover,
    .menu-body .menu-item:hover {
        background: rgba(249, 115, 22, 0.08) !important;
        color: #ffedd5 !important;
    }
}

/* Keep desktop layout stable */
@media (min-width: 992px) {
    .menu-body,
    .menu-body.open,
    .menu-body.is-open,
    .menu-body.active {
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* Hero skin refinement (mobile + desktop) */
.hp-hero.hp-hero--mobile,
.hp-hero.hp-hero--desktop {
    background:
        radial-gradient(900px 300px at 12% 0, rgba(249, 115, 22, 0.12), transparent 62%),
        linear-gradient(180deg, rgba(20, 20, 20, 0.94) 0%, rgba(10, 10, 10, 0.96) 100%) !important;
    color: #ffedd5 !important;
    font-family: "Rubik SemiBold", "Rubik", "Inter", "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hp-hero.hp-hero--mobile h1,
.hp-hero.hp-hero--mobile h2,
.hp-hero.hp-hero--mobile h3,
.hp-hero.hp-hero--desktop h1,
.hp-hero.hp-hero--desktop h2,
.hp-hero.hp-hero--desktop h3 {
    color: #fdba74 !important;
    font-family: "Rubik Bold", "Rubik SemiBold", "Inter", "Segoe UI", Arial, sans-serif !important;
    text-shadow: 0 2px 12px rgba(249, 115, 22, 0.22);
}

.hp-hero.hp-hero--mobile p,
.hp-hero.hp-hero--mobile span,
.hp-hero.hp-hero--desktop p,
.hp-hero.hp-hero--desktop span {
    color: rgba(255, 237, 213, 0.9) !important;
}

/* Box register gold styling */
.box-register,
.box-register a,
.box-register button {
    color: #ffedd5 !important;
}

.box-register {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.box-register:hover,
.box-register:focus-within {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Game image gold frame effect */
.game-item .game-image,
.game-item .game-img,
.game-item [class*="game-image"],
.game-item [class*="game-img"] {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(249, 115, 22, 0.45) !important;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.2), 0 8px 20px rgba(0, 0, 0, 0.28) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.game-item .game-image::after,
.game-item .game-img::after,
.game-item [class*="game-image"]::after,
.game-item [class*="game-img"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(253, 186, 116, 0.35) !important;
}

.game-item .game-image img,
.game-item .game-img img,
.game-item [class*="game-image"] img,
.game-item [class*="game-img"] img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.game-item .game-image:hover,
.game-item .game-img:hover,
.game-item [class*="game-image"]:hover,
.game-item [class*="game-img"]:hover {
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.45), 0 0 18px rgba(249, 115, 22, 0.24), 0 10px 24px rgba(0, 0, 0, 0.34) !important;
}

.game-item .game-image:hover::after,
.game-item .game-img:hover::after,
.game-item [class*="game-image"]:hover::after,
.game-item [class*="game-img"]:hover::after {
    box-shadow: inset 0 0 0 1px rgba(253, 186, 116, 0.55) !important;
}

/* Keep "cevrim ici" line plain */
.game-item .game-bottom,
.game-item .game-bottom *,
.game-item .game-info,
.game-item .game-info * {
    text-shadow: none !important;
    filter: none !important;
}

/* Header owl nav gold styling */
.owl-nav.owl-nav--header button,
.owl-nav.owl-nav--header .owl-prev,
.owl-nav.owl-nav--header .owl-next {
    color: #fdba74 !important;
    border-color: rgba(249, 115, 22, 0.32) !important;
    background: linear-gradient(180deg, rgba(28, 28, 28, 0.84), rgba(12, 12, 12, 0.86)) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24) !important;
}

.owl-nav.owl-nav--header button:hover,
.owl-nav.owl-nav--header .owl-prev:hover,
.owl-nav.owl-nav--header .owl-next:hover {
    color: #ffedd5 !important;
    border-color: rgba(253, 186, 116, 0.48) !important;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.28) !important;
}

/* Box container background fix */
.box-container,
div.box-container,
[class*="box-container"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.box-container::before,
.box-container::after,
div.box-container::before,
div.box-container::after,
[class*="box-container"]::before,
[class*="box-container"]::after {
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Hero box background fix */
.hero-box,
div.hero-box,
[class*="hero-box"] {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   UKRA SLOT WRAPPER (CSS-only skin; requires HTML injection)
   ========================================================= */
#ukra-slot-wrapper {
    margin-top: 56px;
    padding: 14px 10px 6px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.92), rgba(10, 10, 10, 0.96));
    border: 1px solid rgba(249, 115, 22, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

#ukra-slot-wrapper h3 {
    margin: 0;
    color: #ffedd5;
    font-weight: 900;
    letter-spacing: 0.02em;
    font-family: "Rubik Bold", "Rubik", "Inter", sans-serif;
}

#ukra-slot-wrapper .slot-casin-section-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#ukra-slot-wrapper .slot-casino-section-banner img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(249, 115, 22, 0.24);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

#ukra-slot-wrapper .slot-casino-section {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

#ukra-slot-wrapper .slot-casino-section a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(249, 115, 22, 0.18);
    background: #111;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#ukra-slot-wrapper .slot-casino-section a:hover {
    transform: translateY(-2px);
    border-color: rgba(249, 115, 22, 0.46);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(249, 115, 22, 0.22);
}

#ukra-slot-wrapper .slot-casino-section img {
    width: 100%;
    height: auto;
    display: block;
}

#ukra-slot-wrapper .slot-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(249, 115, 22, 0.35);
    background: rgba(24, 24, 24, 0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1199px) {
    #ukra-slot-wrapper .slot-casino-section {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    #ukra-slot-wrapper {
        margin-top: 28px;
        padding: 10px 8px 4px;
    }

    #ukra-slot-wrapper .slot-casino-section {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}

@media (max-width: 640px) {
    #ukra-slot-wrapper .slot-casino-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Home page placement: render slot block under search form */
.home .search-form + #ukra-slot-wrapper,
.homepage .search-form + #ukra-slot-wrapper,
#homepage .search-form + #ukra-slot-wrapper,
.home .search-form ~ #ukra-slot-wrapper,
.homepage .search-form ~ #ukra-slot-wrapper,
#homepage .search-form ~ #ukra-slot-wrapper,
.home #search-form + #ukra-slot-wrapper,
.homepage #search-form + #ukra-slot-wrapper,
#homepage #search-form + #ukra-slot-wrapper,
.home #search-form ~ #ukra-slot-wrapper,
.homepage #search-form ~ #ukra-slot-wrapper,
#homepage #search-form ~ #ukra-slot-wrapper {
    margin-top: 14px !important;
    order: 99;
    width: 100%;
    clear: both;
}

/* Language picker / sidebar footer: solid panel (was too transparent when open) */
.languages-box,
.sidebar-lang-footer {
    background-color: #111111 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

.languages-box ul,
.languages-box ol,
.languages-box .list,
.languages-box [class*="list"],
.sidebar-lang-footer ul,
.sidebar-lang-footer ol {
    background-color: transparent !important;
}

.languages-box a,
.languages-box button,
.languages-box li,
.sidebar-lang-footer a,
.sidebar-lang-footer button,
.sidebar-lang-footer li {
    color: var(--text-primary, #ffffff) !important;
}

.languages-box a:hover,
.languages-box button:hover,
.sidebar-lang-footer a:hover,
.sidebar-lang-footer button:hover {
    background-color: rgba(var(--accent-rgb), 0.14) !important;
}

.languages-box.open,
.languages-box.is-open,
.languages-box.show,
.languages-box[aria-expanded="true"],
.sidebar-lang-footer.open,
.sidebar-lang-footer.is-open {
    background-color: #111111 !important;
}

.languages-box .dropdown-menu,
.languages-box [class*="dropdown"],
.languages-box [class*="panel"],
.languages-box [class*="content"],
.sidebar-lang-footer .dropdown-menu,
.sidebar-lang-footer [class*="dropdown"],
.sidebar-lang-footer [class*="panel"] {
    background-color: #111111 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* Sidebar "other languages" grid — solid backdrop when open (was see-through over menu) */
.other-langs {
    background-color: #0d0d0d !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.other-langs.isOpen,
.other-langs.is-open,
.other-langs.open,
.other-langs.show,
.other-langs[aria-expanded="true"] {
    background-color: #0d0d0d !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.other-langs.isOpen a,
.other-langs.isOpen button,
.other-langs.isOpen [role="button"],
.other-langs.isOpen li,
.other-langs.isOpen [class*="item"],
.other-langs.is-open a,
.other-langs.is-open button,
.other-langs.is-open [role="button"],
.other-langs.is-open li,
.other-langs.is-open [class*="item"] {
    background-color: #161616 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.other-langs.isOpen a:hover,
.other-langs.isOpen button:hover,
.other-langs.is-open a:hover,
.other-langs.is-open button:hover {
    background-color: #1f1f1f !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
}

/* isOpen on parent wrapper (some templates) */
.isOpen > .other-langs,
.is-open > .other-langs,
.open > .other-langs,
.sidebar-lang-footer.isOpen .other-langs,
.sidebar-lang-footer.is-open .other-langs,
.languages-box.isOpen .other-langs,
.languages-box.is-open .other-langs {
    background-color: #0d0d0d !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* sidebar-lang-options dropdown (same transparency fix as other-langs) */
.sidebar-lang-options {
    background-color: #0d0d0d !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sidebar-lang-options.is-open,
.sidebar-lang-options.isOpen,
.sidebar-lang-options.open,
.sidebar-lang-options.show,
.sidebar-lang-options[aria-expanded="true"] {
    background-color: #0d0d0d !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.sidebar-lang-options.is-open a,
.sidebar-lang-options.is-open button,
.sidebar-lang-options.is-open [role="button"],
.sidebar-lang-options.is-open li,
.sidebar-lang-options.is-open [class*="item"],
.sidebar-lang-options.isOpen a,
.sidebar-lang-options.isOpen button,
.sidebar-lang-options.isOpen [role="button"],
.sidebar-lang-options.isOpen li,
.sidebar-lang-options.isOpen [class*="item"] {
    background-color: #161616 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.sidebar-lang-options.is-open a:hover,
.sidebar-lang-options.is-open button:hover,
.sidebar-lang-options.isOpen a:hover,
.sidebar-lang-options.isOpen button:hover {
    background-color: #1f1f1f !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
}

.sidebar-lang-footer.is-open .sidebar-lang-options,
.sidebar-lang-footer.isOpen .sidebar-lang-options,
.languages-box.is-open .sidebar-lang-options,
.languages-box.isOpen .sidebar-lang-options,
.is-open > .sidebar-lang-options,
.isOpen > .sidebar-lang-options {
    background-color: #0d0d0d !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sidebar-lang-options .dropdown-menu,
.sidebar-lang-options [class*="dropdown"],
.sidebar-lang-options [class*="panel"],
.sidebar-lang-options [class*="list"] {
    background-color: #0d0d0d !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* #responsive-menu: beat core theme transparency on lang options */
#responsive-menu .menu-head .buttons .languages-box .other-langs {
    padding: 3px 3px;
}

#responsive-menu .sidebar-lang-options,
#responsive-menu .menu-head .buttons .languages-box .sidebar-lang-options {
    background: #080808 !important;
    background-color: #080808 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#responsive-menu .sidebar-lang-options.is-open,
#responsive-menu .sidebar-lang-options.isOpen,
#responsive-menu .languages-box.is-open .sidebar-lang-options,
#responsive-menu .languages-box.isOpen .sidebar-lang-options,
#responsive-menu .menu-head .buttons .languages-box .sidebar-lang-options.is-open,
#responsive-menu .menu-head .buttons .languages-box .sidebar-lang-options.isOpen,
#responsive-menu .menu-head .buttons .languages-box.is-open .sidebar-lang-options,
#responsive-menu .menu-head .buttons .languages-box.isOpen .sidebar-lang-options {
    background: #080808 !important;
    background-color: #080808 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

#responsive-menu .sidebar-lang-options.is-open a,
#responsive-menu .sidebar-lang-options.is-open button,
#responsive-menu .sidebar-lang-options.is-open [role="button"],
#responsive-menu .sidebar-lang-options.is-open li,
#responsive-menu .sidebar-lang-options.is-open [class*="item"],
#responsive-menu .menu-head .buttons .languages-box .sidebar-lang-options.is-open a,
#responsive-menu .menu-head .buttons .languages-box .sidebar-lang-options.is-open button,
#responsive-menu .menu-head .buttons .languages-box .sidebar-lang-options.is-open li {
    background: #141414 !important;
    background-color: #141414 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* box-listing, message-blocks, news-box, news-area & chat-area: opaque surfaces */
.box-listing,
div.box-listing,
[class*="box-listing"],
.message-blocks,
div.message-blocks,
[class*="message-blocks"],
.news-box,
div.news-box,
[class*="news-box"],
.news-area,
div.news-area,
[class*="news-area"],
.chat-area,
div.chat-area,
[class*="chat-area"],
.news-area.active,
div.news-area.active,
.chat-area.active,
div.chat-area.active {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.box-listing::before,
.box-listing::after,
div.box-listing::before,
div.box-listing::after,
[class*="box-listing"]::before,
[class*="box-listing"]::after,
.message-blocks::before,
.message-blocks::after,
div.message-blocks::before,
div.message-blocks::after,
[class*="message-blocks"]::before,
[class*="message-blocks"]::after,
.news-box::before,
.news-box::after,
div.news-box::before,
div.news-box::after,
[class*="news-box"]::before,
[class*="news-box"]::after,
.news-area::before,
.news-area::after,
div.news-area::before,
div.news-area::after,
[class*="news-area"]::before,
[class*="news-area"]::after,
.chat-area::before,
.chat-area::after,
div.chat-area::before,
div.chat-area::after,
[class*="chat-area"]::before,
[class*="chat-area"]::after {
    background: transparent !important;
    background-image: none !important;
}

@media (max-width: 991px) {
    .box-listing,
    div.box-listing,
    [class*="box-listing"],
    .message-blocks,
    div.message-blocks,
    [class*="message-blocks"],
    .news-box,
    div.news-box,
    [class*="news-box"],
    .news-area,
    div.news-area,
    [class*="news-area"],
    .chat-area,
    div.chat-area,
    [class*="chat-area"],
    .news-area.active,
    div.news-area.active,
    .chat-area.active,
    div.chat-area.active {
        background: var(--surface-1) !important;
        background-color: var(--surface-1) !important;
    }
}