/* ============================================================
   Modern games-v2 layout (reference: bet32.plus/product/games-v2)
   Loaded after common.css. Brand/accent colors come from CSS vars.
   ============================================================ */
html, body { overflow-x: hidden; }

/* ─── Page layout ────────────────────────────────────── */
.sn-page { padding-top: 52px; min-height: 100vh; }

/* ─── Sport icon bar ─────────────────────────────────── */
.sn-sport-bar {
    background: #0d1c2e; border-bottom: 1px solid #1e3a55;
    display: flex; overflow-x: auto; padding: 0 8px; gap: 0;
    position: sticky; top: 52px; z-index: 800;
}
.sn-sport-bar::-webkit-scrollbar { height: 0; }
.sn-sport-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 14px; cursor: pointer; flex-shrink: 0;
    color: #5a7a95; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.sn-sport-tab:hover { color: #a0bcd0; }
.sn-sport-tab.active { color: #fff; border-bottom-color: var(--sbk-accent); }
.sn-sport-icon { font-size: 18px; line-height: 1; }

/* ─── Content tabs ───────────────────────────────────── */
.sn-tabs { display: flex; background: #0a1628; border-bottom: 1px solid #1e3a55; overflow-x: auto; }
.sn-tabs::-webkit-scrollbar { height: 0; }
.sn-tab-btn {
    flex-shrink: 0; padding: 13px 18px; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase; color: #5a7a95;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.sn-tab-btn:hover { color: #a0bcd0; }
.sn-tab-btn.active { color: #fff; border-bottom-color: var(--sbk-accent); }

/* ─── Section titles ─────────────────────────────────── */
.sn-section { padding: 20px 16px 0; }
.sn-section-title {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--sbk-accent-bright); padding: 0 0 12px; display: flex; align-items: center; gap: 6px;
}
.sn-section-title-red { color: var(--sbk-brand); }

/* ─── Featured match cards (horizontal scroll) ────────── */
.sn-featured-scroll { overflow-x: auto; display: flex; gap: 14px; padding: 0 16px 16px; }
.sn-featured-scroll::-webkit-scrollbar { height: 4px; }
.sn-featured-scroll::-webkit-scrollbar-thumb { background: #1e3a55; border-radius: 2px; }
.sn-feat-card {
    flex-shrink: 0; width: 280px; background: linear-gradient(135deg, #0e2240 0%, #0a1830 100%);
    border: 1px solid #1e3a55; border-radius: 8px; overflow: hidden; cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}
.sn-feat-card:hover { border-color: var(--sbk-accent); transform: translateY(-2px); }
.sn-feat-card-header { position: relative; height: 90px; background: linear-gradient(135deg,#0a1f3a,#091525); display: flex; align-items: center; justify-content: center; font-size: 36px; overflow: hidden; }
.sn-feat-card-flag { position: absolute; top: 6px; left: 8px; background: rgba(0,0,0,0.6); border-radius: 3px; padding: 2px 6px; font-size: 0.6rem; font-weight: 700; color: #8faac0; text-transform: uppercase; }
.sn-feat-card-time-badge { position: absolute; top: 6px; right: 8px; background: #0a1628; border: 1px solid #1e3a55; border-radius: 3px; padding: 2px 6px; font-size: 0.6rem; color: #5a7a95; }
.sn-feat-teams { display: flex; align-items: center; gap: 0; padding: 10px 14px 6px; }
.sn-feat-team { flex: 1; text-align: center; }
.sn-feat-team-logo { width: 32px; height: 32px; border-radius: 50%; background: #1a2a3a; border: 1px solid #1e3a55; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #8faac0; }
.sn-feat-team-name { font-size: 0.65rem; font-weight: 700; color: #c9d6e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-feat-vs { font-size: 0.68rem; font-weight: 800; color: #3a5570; padding: 0 8px; flex-shrink: 0; margin-top: -6px; }
.sn-feat-odds { display: flex; gap: 0; border-top: 1px solid #1e3a55; }
.sn-feat-odd-btn {
    flex: 1; padding: 9px 4px; font-size: 0.72rem; font-weight: 700; text-align: center;
    background: none; border: none; border-right: 1px solid #1e3a55; cursor: pointer;
    color: #a0bcd0; transition: background 0.15s, color 0.15s;
}
.sn-feat-odd-btn:last-child { border-right: none; }
.sn-feat-odd-btn:hover { background: var(--sbk-accent-tint); color: #fff; }
.sn-feat-odd-btn.active { background: var(--sbk-accent-tint-2); color: var(--sbk-accent-bright); }
.sn-feat-odd-label { font-size: 0.55rem; color: #5a7a95; display: block; margin-bottom: 2px; }
.sn-feat-odd-val { font-size: 0.78rem; font-weight: 800; }

/* ─── Popular filter tabs ────────────────────────────── */
.sn-popular-tabs { display: flex; gap: 6px; padding: 0 16px; overflow-x: auto; }
.sn-popular-tabs::-webkit-scrollbar { height: 0; }
.sn-popular-tab {
    flex-shrink: 0; padding: 6px 14px; border-radius: 20px; font-size: 0.68rem; font-weight: 700;
    cursor: pointer; background: #0e1d2d; border: 1px solid #1e3a55; color: #5a7a95;
    transition: all 0.15s; white-space: nowrap;
}
.sn-popular-tab:hover { color: #a0bcd0; border-color: #2e5070; }
.sn-popular-tab.active { background: var(--sbk-accent); border-color: var(--sbk-accent); color: #fff; }

/* ─── Match cards grid ───────────────────────────────── */
.sn-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 12px 16px 120px; }
@media (max-width: 640px) { .sn-cards-grid { grid-template-columns: 1fr; } }
.sn-match-card {
    background: #0e1d2d; border: 1px solid #162840; border-radius: 6px;
    overflow: hidden; cursor: pointer; transition: border-color 0.15s;
}
.sn-match-card:hover { border-color: #2e5070; }
.sn-match-card-header { padding: 6px 10px; background: #0a1628; display: flex; align-items: center; gap: 6px; font-size: 0.6rem; color: #5a7a95; font-weight: 600; letter-spacing: 0.05em; }
.sn-match-card-league-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sbk-accent); flex-shrink: 0; }
.sn-match-card-time { margin-left: auto; white-space: nowrap; }
.sn-match-card-body { padding: 10px; }
.sn-match-team-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sn-match-team-icon { width: 20px; height: 20px; border-radius: 50%; background: #142030; border: 1px solid #1e3a55; display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; font-weight: 700; color: #8faac0; }
.sn-match-team-name { flex: 1; font-size: 0.72rem; color: #c9d6e3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-match-card-odds { display: flex; gap: 5px; margin-top: 10px; }
.sn-mc-odd {
    flex: 1; padding: 7px 4px; background: #142030; border: 1px solid #1e3a55;
    border-radius: 4px; text-align: center; font-size: 0.7rem; font-weight: 700;
    color: #a0bcd0; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sn-mc-odd:hover { background: var(--sbk-accent-tint); border-color: var(--sbk-accent); color: #fff; }
.sn-mc-odd.active { background: var(--sbk-accent-tint-3); border-color: var(--sbk-accent); color: var(--sbk-accent-bright); }
.sn-mc-odd-label { font-size: 0.55rem; color: #5a7a95; display: block; margin-bottom: 1px; font-weight: 600; }
.sn-mc-odd-val { font-size: 0.76rem; }

/* ─── Floating betslip ───────────────────────────────── */
.sn-betslip-toggle {
    position: fixed; bottom: 16px; right: 16px; z-index: 900;
    background: var(--sbk-brand); color: #fff; border: none; border-radius: 50px;
    padding: 10px 20px; font-size: 0.78rem; font-weight: 800;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 20px var(--sbk-brand-tint-strong);
}
.sn-betslip-count { background: #fff; color: var(--sbk-brand); width: 20px; height: 20px; border-radius: 50%; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.sn-betslip-drawer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 950;
    background: #0e1d2d; border-top: 2px solid #1e3a55;
    transform: translateY(100%); transition: transform 0.3s ease;
    max-height: 75vh; overflow-y: auto;
}
@media (min-width: 768px) {
    .sn-betslip-drawer { left: auto; width: 320px; max-height: 85vh; border-top: none; border-left: 2px solid #1e3a55; top: 52px; bottom: 0; max-height: none; transform: translateX(100%); }
    .sn-betslip-drawer.open { transform: translateX(0); }
}
.sn-betslip-drawer.open { transform: translateY(0); }
.sn-drawer-header { background: #0a1628; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1e3a55; position: sticky; top: 0; z-index: 1; }
.sn-drawer-title { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sbk-accent-bright); }
.sn-drawer-close { background: none; border: none; color: #5a7a95; font-size: 1.1rem; cursor: pointer; }
.sn-drawer-tabs { display: flex; border-bottom: 1px solid #1e3a55; }
.sn-drawer-tab { flex: 1; text-align: center; padding: 9px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #5a7a95; cursor: pointer; border-bottom: 2px solid transparent; background: #0a1628; transition: all 0.15s; }
.sn-drawer-tab + .sn-drawer-tab { border-left: 1px solid #1e3a55; }
.sn-drawer-tab.active { color: #fff; border-bottom-color: var(--sbk-accent); background: #0e1d2d; }
.sn-drawer-empty { padding: 20px; text-align: center; color: #3a5570; font-size: 0.72rem; }
.sn-bet-item { background: #091522; border: 1px solid #1e3a55; border-radius: 3px; padding: 10px; margin: 8px 10px; }
.sn-bet-odd-val { font-size: 0.9rem; font-weight: 800; color: var(--sbk-accent-bright); }
.sn-bet-type { font-size: 0.62rem; color: #5a7a95; }
.sn-bet-teams { font-size: 0.68rem; color: #a0bcd0; margin: 4px 0 2px; line-height: 1.4; }
.sn-bet-remove { float: right; background: none; border: none; color: #3a5570; cursor: pointer; font-size: 0.9rem; padding: 0; }
.sn-bet-remove:hover { color: var(--sbk-brand); }
.sn-stake-input { width: calc(100% - 20px); margin: 4px 10px; background: #091522; border: 1px solid #1e3a55; color: #c9d6e3; padding: 7px 10px; border-radius: 2px; font-size: 0.72rem; outline: none; }
.sn-stake-input::placeholder { color: #3a5570; }
.sn-profit-row { display: flex; justify-content: space-between; padding: 4px 10px; font-size: 0.68rem; color: #5a7a95; }
.sn-profit-val { color: var(--sbk-accent-bright); font-weight: 700; }
.sn-place-btn { width: calc(100% - 20px); margin: 10px 10px 6px; background: var(--sbk-win); color: #fff; border: none; padding: 11px; border-radius: 3px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.sn-place-btn:hover { background: var(--sbk-win-hover); }
.sn-clear-btn { width: calc(100% - 20px); margin: 0 10px 12px; background: transparent; border: 1px solid #1e3a55; color: #5a7a95; padding: 7px; border-radius: 2px; font-size: 0.7rem; cursor: pointer; }
.sn-clear-btn:hover { color: var(--sbk-brand); border-color: var(--sbk-brand-tint-strong); }
.sn-multi-total { margin: 6px 10px; background: #091522; border: 1px solid #1e3a55; border-radius: 3px; padding: 8px 10px; display: flex; justify-content: space-between; font-size: 0.72rem; }
.sn-multi-odd { font-size: 1rem; font-weight: 800; color: var(--sbk-accent-bright); }

/* ─── Predictions tab ────────────────────────────────── */
.sn-pred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 10px; padding: 12px 16px 40px; }
.sn-pred-card { background: #0e1d2d; border: 1px solid #162840; border-radius: 6px; padding: 12px; }
.sn-pred-card-title { font-size: 0.7rem; font-weight: 700; color: #c9d6e3; margin-bottom: 4px; }
.sn-pred-card-sub { font-size: 0.62rem; color: #5a7a95; margin-bottom: 8px; }
.sn-pred-bar { height: 4px; border-radius: 2px; background: #142030; overflow: hidden; margin-bottom: 3px; }
.sn-pred-fill { height: 100%; border-radius: 2px; background: var(--sbk-accent); }
.sn-pred-labels { display: flex; justify-content: space-between; font-size: 0.6rem; color: #5a7a95; }

/* ─── Event builder tab ──────────────────────────────── */
.sn-builder-wrap { padding: 16px 16px 40px; }
.sn-builder-desc { color: #5a7a95; font-size: 0.78rem; line-height: 1.6; max-width: 480px; margin-bottom: 16px; }
.sn-builder-step { background: #0a1628; border: 1px solid #1e3a55; border-radius: 6px; padding: 14px; margin-bottom: 10px; }
.sn-builder-step-num { font-size: 0.6rem; font-weight: 800; color: var(--sbk-accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.sn-builder-step-text { font-size: 0.75rem; color: #a0bcd0; }
.sn-builder-coming { font-size: 0.68rem; color: #3a5570; margin-top: 8px; text-align: center; }

/* ============================================================
   Left CATEGORIES sidebar + 2-column shell (shared look with the
   classic sportsbook's .mb-left). Added so the modern games-v2
   page also has the sports-aside-left categories navigation.
   ============================================================ */
html, body { overflow: hidden; }
.sn-page { padding-top: 0 !important; }
.mb-app { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; display: flex; background: #070f19; overflow: hidden; }
.mb-app *::-webkit-scrollbar { width: 6px; height: 6px; }
.mb-app *::-webkit-scrollbar-thumb { background: #1e3a55; border-radius: 3px; }
.mb-app *::-webkit-scrollbar-track { background: transparent; }
.sn-main { flex: 1; min-width: 0; overflow-y: auto; }
.sn-sport-bar { top: 0 !important; }

.mb-left { width: 300px; flex-shrink: 0; background: #0a1424; border-right: 1px solid #16263b; overflow-y: auto; display: flex; flex-direction: column; }
.mb-search { padding: 12px; position: relative; }
.mb-search input { width: 100%; background: #0f1d30; border: 1px solid #1e3a55; border-radius: 8px; color: #c9d6e3; font-size: 0.78rem; padding: 10px 36px 10px 12px; outline: none; }
.mb-search input::placeholder { color: #496685; }
.mb-search .mb-search-ic { position: absolute; right: 22px; top: 22px; color: #496685; pointer-events: none; }
.mb-left-heading { padding: 10px 14px 6px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #4a6685; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #0d1828; font-size: 0.78rem; color: #b4c6d8; transition: background .12s; }
.mb-row:hover { background: rgba(255,255,255,.03); color: #fff; }
.mb-row.active { background: var(--sbk-brand-tint); color: #fff; }
.mb-row .mb-row-ic { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.mb-row .mb-row-ic img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
.mb-row .mb-row-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row .mb-row-count { font-size: 0.66rem; color: #5a7a95; }
.mb-row .mb-row-caret { color: #4a6685; font-size: 0.6rem; transition: transform .2s; }
.mb-row.open .mb-row-caret { transform: rotate(180deg); }
.mb-sub-leagues { background: #08111e; }
.mb-sub-league { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 30px; font-size: 0.72rem; color: #7e98b2; cursor: pointer; border-bottom: 1px solid #0c1726; }
.mb-sub-league:hover { color: #fff; }
.mb-sub-league.active { color: var(--sbk-accent-bright); }
.mb-sub-league img { width: 16px; height: 11px; object-fit: cover; border-radius: 1px; }
.mb-search-results { position: absolute; left: 0; right: 0; top: 100%; max-height: 60vh; overflow-y: auto; background: #0a1626; border: 1px solid #1e3a55; border-radius: 0 0 10px 10px; z-index: 50; display: none; margin: 0 12px; }
.mb-search-results.open { display: block; }
.mb-sr-group { padding: 8px 12px; }
.mb-sr-league { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: #5a7a95; padding: 4px 0; }
.mb-sr-match { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid #0e1c2e; cursor: pointer; }
.mb-sr-match:hover { color: #fff; }
.mb-sr-teams { font-size: 0.74rem; color: #b4c6d8; }
.mb-sr-time { font-size: 0.6rem; color: #496685; }

@media (min-width: 900px) { .sn-sport-bar { display: none; } }
@media (max-width: 899px) { .mb-left { display: none; } }