/* ============================================================
   Shared sports chrome (navbar + login modal + theme tokens)
   Used by both the classic sportsbook and the modern games-v2
   pages. Each skin overrides the brand tokens via an inline
   :root{} block injected after this file (see *Page.blade.php).
   The deep-navy data palette is intentionally shared across all
   skins — only the brand/accent chrome is themed per casino.
   ============================================================ */
:root {
    --sbk-page-bg: #0a111c;
    --sbk-nav-bg: #0d0d0d;
    --sbk-menu-bg: #161616;
    --sbk-brand: #c0001e;
    --sbk-brand-hover: #e80024;
    --sbk-brand-tint: rgba(192, 0, 30, 0.12);
    --sbk-brand-tint-strong: rgba(192, 0, 30, 0.35);
    --sbk-brand-tint-soft: rgba(192, 0, 30, 0.08);
    --sbk-accent: #2e8bc9;
    --sbk-accent-bright: #3fa8e0;
    --sbk-accent-tint: rgba(46, 139, 201, 0.15);
    --sbk-accent-tint-2: rgba(46, 139, 201, 0.25);
    --sbk-accent-tint-3: rgba(46, 139, 201, 0.3);
    --sbk-text: #e5e7eb;
    --sbk-win: #1a7a3a;
    --sbk-win-hover: #22a04c;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--sbk-page-bg); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; color: var(--sbk-text); }
a { color: inherit; text-decoration: none; cursor: pointer; }
.modal { position: fixed; inset: 0; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.modal.active { opacity: 1; visibility: visible; }

/* ─── Navbar ─────────────────────────────────────────── */
.b32-navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 52px;
    background: var(--sbk-nav-bg); border-bottom: 2px solid var(--sbk-brand);
    display: flex; align-items: center; padding: 0 16px; gap: 12px;
}
.b32-logo img { height: 36px; max-width: 140px; object-fit: contain; display: block; }
.b32-desktop-nav { display: flex; align-items: stretch; height: 100%; flex: 1; justify-content: center; gap: 8px; }
@media (max-width: 767px) { .b32-desktop-nav { display: none; } }
.b32-nav-link {
    display: flex; align-items: center; padding: 0 10px; height: 100%;
    color: #d1d5db; font-size: 13px; font-weight: 700; letter-spacing: 0.07em;
    white-space: nowrap; border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s; text-decoration: none;
}
.b32-nav-link:hover { color: #fff; }
.b32-nav-link--active { color: #fff; border-bottom-color: var(--sbk-brand); }
.b32-nav-dropdown { position: relative; display: flex; align-items: stretch; }
.b32-nav-dropdown-trigger {
    display: flex; align-items: center; gap: 4px; padding: 0 10px; height: 100%;
    color: #d1d5db; font-size: 13px; font-weight: 700; letter-spacing: 0.07em;
    border-bottom: 3px solid transparent; cursor: pointer; user-select: none;
}
.b32-nav-dropdown-trigger:hover { color: #fff; }
.b32-nav-dropdown.open .b32-nav-dropdown-trigger { color: #fff; border-bottom-color: var(--sbk-brand); }
.b32-nav-dropdown-caret { font-size: 0.55rem; transition: transform 0.2s; }
.b32-nav-dropdown.open .b32-nav-dropdown-caret { transform: rotate(180deg); }
.b32-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 2px); left: 0;
    background: var(--sbk-menu-bg); border: 1px solid #2a2a2a; border-top: 2px solid var(--sbk-brand);
    min-width: 180px; z-index: 1100;
}
.b32-nav-dropdown.open .b32-dropdown-menu { display: block; }
.b32-dropdown-item { display: block; padding: 10px 16px; color: #d1d5db; font-size: 0.75rem; font-weight: 600; border-bottom: 1px solid #222; }
.b32-dropdown-item:hover { background: var(--sbk-brand-tint); color: #fff; }
.b32-navbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.b32-btn-login { background: var(--sbk-brand); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; padding: 7px 18px; border-radius: 4px; border: none; cursor: pointer; }
.b32-btn-login:hover { background: var(--sbk-brand-hover); }
.b32-balance { display: flex; align-items: center; gap: 6px; background: var(--sbk-brand-tint); border: 1px solid var(--sbk-brand-tint-strong); padding: 5px 12px; border-radius: 4px; font-size: 0.78rem; font-weight: 700; color: #fff; }
.b32-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px; }
.b32-hamburger span { display: block; height: 2px; background: #d1d5db; border-radius: 2px; }
@media (max-width: 767px) { .b32-hamburger { display: flex; } }
.b32-mobile-menu { display: none; position: fixed; top: 52px; left: 0; right: 0; background: var(--sbk-menu-bg); border-bottom: 2px solid var(--sbk-brand); z-index: 990; flex-direction: column; padding: 6px 0; }
.b32-mobile-menu.open { display: flex; }
.b32-mobile-link { padding: 11px 20px; color: #d1d5db; font-size: 0.78rem; font-weight: 700; display: block; }
.b32-mobile-link:hover, .b32-mobile-link--active { color: #fff; background: var(--sbk-brand-tint-soft); }

/* ─── Login modal ────────────────────────────────────── */
.sbk-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.sbk-modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--sbk-menu-bg); border: 1px solid #2a2a2a; border-top: 3px solid var(--sbk-brand); border-radius: 8px; padding: 28px 24px; width: 340px; max-width: 95vw; z-index: 1; }
.sbk-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sbk-modal-head h2 { margin: 0; color: #fff; font-size: 1rem; font-weight: 800; }
.sbk-modal-close { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 1.2rem; }
.sbk-modal-input { width: 100%; background: var(--sbk-nav-bg); border: 1px solid #2a2a2a; color: var(--sbk-text); padding: 10px 14px; border-radius: 4px; font-size: 0.85rem; outline: none; }
.sbk-modal-submit { width: 100%; background: var(--sbk-brand); color: #fff; border: none; padding: 11px; border-radius: 4px; font-size: 0.85rem; font-weight: 700; cursor: pointer; }