/**
 * ================================================================
 * SPORTSBOOK REFERENCE POLISH — Visual match to attached reference
 * ================================================================
 * Loaded LAST — overrides all previous CSS layers
 * Scope: .bc-sb-app (never touches global body/html except font smoothing)
 *
 * Color tokens:
 *   --rp-bg:        #080B0F   (page background)
 *   --rp-surface:   #10151B   (panel surface)
 *   --rp-elevated:  #151B22   (card / elevated surface)
 *   --rp-gold:      #FFD000   (primary accent — active / CTA / badge)
 *   --rp-text:      #F5F7FA   (primary text)
 *   --rp-secondary: #9AA3AE   (secondary / inactive text)
 *   --rp-border:    rgba(255,255,255,.06)
 *   --rp-live:      #FF3344
 * ================================================================
 */

/* ================================================================
   0. TOKEN LAYER — override existing variables
   ================================================================ */

.bc-sb-app {
    --rp-bg:        #080B0F;
    --rp-surface:   #10151B;
    --rp-elevated:  #151B22;
    --rp-gold:      #FFD000;
    --rp-gold-glow: rgba(255, 208, 0, 0.20);
    --rp-text:      #F5F7FA;
    --rp-secondary: #9AA3AE;
    --rp-border:    rgba(255, 255, 255, 0.06);
    --rp-border-strong: rgba(255, 255, 255, 0.12);
    --rp-live:      #FF3344;
    --rp-radius-card: 14px;
    --rp-radius-lg:   16px;
    --rp-radius-xl:   20px;
    --rp-gap-card:    8px;

    /* Sync onto enterprise tokens so downstream rules inherit */
    --sb-bg: var(--rp-bg);
    --sb-surface: var(--rp-surface);
    --sb-surface-2: var(--rp-elevated);
    --sb-primary: var(--rp-gold);
    --sb-text: var(--rp-text);
    --sb-text-2: var(--rp-secondary);
    --sb-border: var(--rp-border);
    --sb-live: var(--rp-live);
}

/* ================================================================
   1. GLOBAL APP SHELL
   ================================================================ */

html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #080B0F;
    overflow-x: hidden;
}

.bc-sb-app {
    background: var(--rp-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--rp-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex !important;
    flex-direction: column !important;
}

/* Skeletons must disappear as soon as real data is rendered */
.bc-sb-sport-skeleton {
    display: none !important;
}

/* ================================================================
   2. DESKTOP LAYOUT — 3-column grid (sidebar | main | betslip)
   ================================================================ */

/* Fix the display:block bug that breaks desktop layout */
body .bc-sb-app .bc-sb-layout {
    display: flex !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 1024px) {
    body .bc-sb-app .bc-sb-layout {
        display: grid !important;
        grid-template-columns: 260px minmax(0, 1fr) 340px !important;
        height: 0; /* let it grow via flex parent */
        flex: 1 1 auto !important;
    }

    body .bc-sb-app .bc-sb-sidebar {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--rp-surface) !important;
        border-right: 1px solid var(--rp-border) !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body .bc-sb-app .bc-sb-betslip {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--rp-surface) !important;
        border-left: 1px solid var(--rp-border) !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body .bc-sb-app .bc-sb-content {
        background: var(--rp-bg) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-width: 0 !important;
    }
}

/* ================================================================
   3. HEADER
   ================================================================ */

.bc-sb-app .bc-sb-header,
.bc-sb-app > header.bc-sb-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 0 20px !important;
    gap: 16px !important;
    background: var(--rp-bg) !important;
    border-bottom: 1px solid var(--rp-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
}

/* Logo */
.bc-sb-app .bc-sb-header__logo {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    color: var(--rp-gold) !important;
    flex-shrink: 0 !important;
}

/* Client name */
.bc-sb-app .bc-sb-header__name {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--rp-text) !important;
    white-space: nowrap !important;
    letter-spacing: -0.3px !important;
}

/* Brand group */
.bc-sb-app .bc-sb-header__brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.bc-sb-app .bc-sb-header__left {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Desktop: center search */
.bc-sb-app .bc-sb-header__center {
    flex: 1 !important;
    max-width: 420px !important;
    margin: 0 16px !important;
}

/* Favorites + Betslip buttons */
.bc-sb-app .bc-sb-header__right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-header-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--rp-border-strong) !important;
    border-radius: 10px !important;
    color: var(--rp-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 120ms ease !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
}

.bc-sb-app .bc-sb-header-btn:hover {
    background: var(--rp-gold-glow) !important;
    border-color: var(--rp-gold) !important;
    color: var(--rp-gold) !important;
}

.bc-sb-app .bc-sb-header-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-header-btn__badge,
.bc-sb-app #bcSbHeaderBetslipBadge {
    background: var(--rp-gold) !important;
    color: #000 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
}

/* Favorites icon-only button (no label on small screens) */
.bc-sb-app #bcSbFavoritesBtn {
    padding: 0 14px !important;
}

/* ================================================================
   4. SPORTS NAVIGATION — large premium icon cards
   ================================================================ */

/* Container */
.bc-sb-app .bc-sb-sports-nav,
.bc-sb-app > .bc-sb-sports-nav {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 16px 16px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: var(--rp-bg) !important;
    border-bottom: 1px solid var(--rp-border) !important;
    gap: 8px !important;
    position: static !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-sports-nav::-webkit-scrollbar,
.bc-sb-app .bc-sb-sports-wrapper::-webkit-scrollbar {
    display: none !important;
}

.bc-sb-app .bc-sb-sports-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

/* Individual sport card */
.bc-sb-app .bc-sb-sport {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 96px !important;
    width: 96px !important;
    height: 104px !important;
    display: flex !important;
    background: var(--rp-elevated) !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 120ms ease !important;
    flex-shrink: 0 !important;
    padding: 12px 8px !important;
    position: relative !important;
}

.bc-sb-app .bc-sb-sport:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: none !important;
}

/* Sport icon circle */
.bc-sb-app .bc-sb-sport__circle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bc-sb-app .bc-sb-sport__icon {
    font-size: 40px !important;
    line-height: 1 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--rp-text) !important;
}

.bc-sb-app .bc-sb-sport__name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--rp-secondary) !important;
    text-align: center !important;
    white-space: normal !important;
    max-width: 88px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}

/* Active sport */
.bc-sb-app .bc-sb-sport--active,
.bc-sb-app .bc-sb-sport.active {
    background: var(--rp-elevated) !important;
    border-color: var(--rp-gold) !important;
    box-shadow: 0 0 18px var(--rp-gold-glow) !important;
}

.bc-sb-app .bc-sb-sport--active .bc-sb-sport__icon,
.bc-sb-app .bc-sb-sport.active .bc-sb-sport__icon {
    color: var(--rp-gold) !important;
}

.bc-sb-app .bc-sb-sport--active .bc-sb-sport__name,
.bc-sb-app .bc-sb-sport.active .bc-sb-sport__name {
    color: var(--rp-gold) !important;
}

/* Active indicator: subtle bottom bar */
.bc-sb-app .bc-sb-sport--active::after,
.bc-sb-app .bc-sb-sport.active::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 16px !important;
    height: 2px !important;
    background: var(--rp-gold) !important;
    border-radius: 1px !important;
}

/* ================================================================
   5. MODE BAR — 3 equal columns
   ================================================================ */

.bc-sb-app .bc-sb-mode-bar,
.bc-sb-app > .bc-sb-mode-bar {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    align-items: stretch !important;
    background: var(--rp-bg) !important;
    border-bottom: 1px solid var(--rp-border) !important;
    padding: 0 !important;
    position: sticky !important;
    top: 76px !important;
    z-index: 98 !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-mode-bar__wrapper {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    height: 100% !important;
}

.bc-sb-app .bc-sb-mode {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--rp-secondary) !important;
    cursor: pointer !important;
    transition: all 100ms ease !important;
    height: 100% !important;
    padding: 0 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    position: relative !important;
}

.bc-sb-app .bc-sb-mode:hover {
    color: var(--rp-text) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.bc-sb-app .bc-sb-mode__label {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

.bc-sb-app .bc-sb-mode__count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    height: 22px !important;
    padding: 0 7px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

/* Active: PREMATCH */
.bc-sb-app .bc-sb-mode--active {
    color: var(--rp-gold) !important;
    border-bottom-color: var(--rp-gold) !important;
}

.bc-sb-app .bc-sb-mode--active .bc-sb-mode__count {
    background: var(--rp-gold) !important;
    color: #000 !important;
}

/* LIVE mode */
.bc-sb-app .bc-sb-live-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--rp-live) !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    animation: rp-live-pulse 1.4s ease-in-out infinite !important;
}

@keyframes rp-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

/* Hide the clock icon inside UPCOMING button */
.bc-sb-app .bc-sb-mode__icon {
    display: none !important;
}

/* ================================================================
   6. MOBILE SEARCH BAR
   ================================================================ */

.bc-sb-app .bc-sb-mobile-search,
.bc-sb-app #bcSbMobileSearch {
    display: block !important;
    padding: 12px 16px 16px 16px !important;
    background: var(--rp-bg) !important;
    flex-shrink: 0 !important;
    border-bottom: none !important;
    position: static !important;
    z-index: auto !important;
}

.bc-sb-app .bc-sb-mobile-search__wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.bc-sb-app .bc-sb-mobile-search__icon {
    position: absolute !important;
    left: 16px !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--rp-secondary) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.bc-sb-app #bcSbMobileSearchInput,
.bc-sb-app .bc-sb-search {
    width: 100% !important;
    height: 56px !important;
    padding: 0 50px 0 48px !important;
    background: var(--rp-elevated) !important;
    border: 1px solid var(--rp-border-strong) !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    color: var(--rp-text) !important;
    outline: none !important;
    transition: border-color 100ms ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.bc-sb-app #bcSbMobileSearchInput:focus,
.bc-sb-app .bc-sb-search:focus {
    border-color: rgba(255, 208, 0, 0.40) !important;
    background: var(--rp-elevated) !important;
}

.bc-sb-app #bcSbMobileSearchInput::placeholder,
.bc-sb-app .bc-sb-search::placeholder {
    color: var(--rp-secondary) !important;
}

/* Hide duplicate search bars */
.bc-sb-app .bc-sb-mobile-leagues__search {
    display: none !important;
}

/* ================================================================
   7. DESKTOP HEADER SEARCH (desktop only)
   ================================================================ */

.bc-sb-app .bc-sb-header__search {
    position: relative !important;
    width: 100% !important;
}

.bc-sb-app .bc-sb-header__search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--rp-secondary) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.bc-sb-app .bc-sb-header__search-input {
    width: 100% !important;
    height: 40px !important;
    padding: 0 16px 0 40px !important;
    background: var(--rp-elevated) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    color: var(--rp-text) !important;
    outline: none !important;
    transition: border-color 100ms ease !important;
}

.bc-sb-app .bc-sb-header__search-input:focus {
    border-color: rgba(255, 208, 0, 0.40) !important;
}

.bc-sb-app .bc-sb-header__search-input::placeholder {
    color: var(--rp-secondary) !important;
}

/* ================================================================
   8. MAIN CONTENT AREA
   ================================================================ */

.bc-sb-app .bc-sb-content {
    background: var(--rp-bg) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ================================================================
   9. TOP LEAGUES / TOP COUNTRIES — premium section headers
   ================================================================ */

/* Section wrapper */
.bc-sb-app .bc-sb-nav-section {
    background: var(--rp-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Section header row */
.bc-sb-app .bc-sb-nav-section__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 16px 10px 16px !important;
    background: var(--rp-bg) !important;
    border-bottom: none !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
}

.bc-sb-app .bc-sb-nav-section__icon {
    color: var(--rp-gold) !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-nav-section__title {
    flex: 1 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--rp-text) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* "See all" link */
.bc-sb-app .bc-sb-nav-section__action,
.bc-sb-app .bc-sb-nav-section__see-all {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--rp-gold) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Content area */
.bc-sb-app .bc-sb-nav-section__content {
    padding: 0 16px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--rp-gap-card) !important;
    background: var(--rp-bg) !important;
}

/* ================================================================
   10. LEAGUE CARDS & COUNTRY CARDS — premium rows
   ================================================================ */

/* Every nav item that should look like a premium card
   (excludes wrapper containers like .bc-sb-leagues-container, .bc-sb-league-search,
   .bc-sb-divider which must not be treated as individual grid cards) */
.bc-sb-app .bc-sb-nav-section__content > *:not(.bc-sb-leagues-container):not(.bc-sb-league-search):not(.bc-sb-divider),
.bc-sb-app .bc-sb-league-item,
.bc-sb-app .bc-sb-country-item,
.bc-sb-app .bc-sb-nav-item.bc-sb-league-item,
.bc-sb-app [class*="nav-item"],
.bc-sb-app [class*="league-row"] {
    display: grid !important;
    grid-template-columns: 28px 44px minmax(0, 1fr) auto 24px !important;
    align-items: center !important;
    gap: 12px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: var(--rp-elevated) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: var(--rp-radius-card) !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    text-decoration: none !important;
    color: var(--rp-text) !important;
}

.bc-sb-app .bc-sb-league-item:hover,
.bc-sb-app .bc-sb-country-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--rp-border-strong) !important;
}

/* Star / favorite icon (column 1) */
.bc-sb-app .bc-sb-league-item__star,
.bc-sb-app .bc-sb-league-item > svg:first-child,
.bc-sb-app [class*="favorite-icon"],
.bc-sb-app [class*="star"] {
    width: 20px !important;
    height: 20px !important;
    color: var(--rp-gold) !important;
    flex-shrink: 0 !important;
}

/* League/country icon (column 2) */
.bc-sb-app .bc-sb-league-item__icon,
.bc-sb-app .bc-sb-country-item__flag,
.bc-sb-app [class*="flag"],
.bc-sb-app [class*="league-icon"] {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

/* League/country name (column 3) */
.bc-sb-app .bc-sb-league-item__name,
.bc-sb-app .bc-sb-country-item__name,
.bc-sb-app [class*="league-name"],
.bc-sb-app [class*="country-name"] {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--rp-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

/* Count badge (column 4) */
.bc-sb-app .bc-sb-league-item__count,
.bc-sb-app .bc-sb-country-item__count,
.bc-sb-app [class*="league-count"],
.bc-sb-app [class*="event-count"] {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--rp-secondary) !important;
    flex-shrink: 0 !important;
    min-width: 24px !important;
    text-align: right !important;
}

/* Chevron (column 5) */
.bc-sb-app .bc-sb-league-item__chevron,
.bc-sb-app .bc-sb-country-item__chevron,
.bc-sb-app [class*="chevron"] {
    width: 20px !important;
    height: 20px !important;
    color: var(--rp-secondary) !important;
    flex-shrink: 0 !important;
}

/* ================================================================
   11. SIDEBAR LEAGUE BROWSER (desktop sidebar specific)
   ================================================================ */

/* Make the leagues panel and container fill full sidebar width */
.bc-sb-app .bc-sb-leagues-panel {
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

.bc-sb-app .bc-sb-leagues-container {
    width: 100% !important;
    min-width: 0 !important;
}

.bc-sb-app .bc-sb-league-search {
    padding: 8px 12px !important;
    width: 100% !important;
}

/* Country accordion header — premium card matching reference */
.bc-sb-app .bc-sb-sidebar .bc-sb-country__header,
.bc-sb-app .bc-sb-country__header {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto auto 24px !important;
    align-items: center !important;
    gap: 12px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 16px !important;
    background: var(--rp-elevated) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 12px !important;
    margin: 0 16px 8px 16px !important;
    cursor: pointer !important;
    transition: background 100ms ease, border-color 100ms ease !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--rp-text) !important;
    box-shadow: none !important;
}

.bc-sb-app .bc-sb-country__header:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--rp-border-strong) !important;
}

.bc-sb-app .bc-sb-country__icon {
    font-size: 32px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.bc-sb-app .bc-sb-country__name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--rp-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

.bc-sb-app .bc-sb-country__count {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--rp-secondary) !important;
    min-width: 28px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-country__favorite {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    opacity: 0.5 !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-country__chevron {
    width: 18px !important;
    height: 18px !important;
    color: var(--rp-secondary) !important;
    flex-shrink: 0 !important;
    transition: transform 120ms ease !important;
}

.bc-sb-app .bc-sb-country--expanded .bc-sb-country__chevron {
    transform: rotate(90deg) !important;
}

/* League rows in sidebar */
.bc-sb-app .bc-sb-league {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 20px !important;
    align-items: center !important;
    gap: 8px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px 0 24px !important;
    cursor: pointer !important;
    color: var(--rp-secondary) !important;
    transition: all 100ms ease !important;
    border-left: 3px solid transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.bc-sb-app .bc-sb-league:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--rp-text) !important;
    border-left-color: var(--rp-gold) !important;
}

.bc-sb-app .bc-sb-league--active,
.bc-sb-app .bc-sb-league--selected {
    color: var(--rp-gold) !important;
    border-left-color: var(--rp-gold) !important;
    background: rgba(255, 208, 0, 0.06) !important;
}

.bc-sb-app .bc-sb-league__content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.bc-sb-app .bc-sb-league__icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    color: var(--rp-gold) !important;
    width: 20px !important;
    text-align: center !important;
}

.bc-sb-app .bc-sb-league__name {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--rp-text) !important;
    min-width: 0 !important;
}

.bc-sb-app .bc-sb-league__count {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--rp-secondary) !important;
    flex-shrink: 0 !important;
    min-width: 28px !important;
    text-align: right !important;
}

/* Section heading (TOP LEAGUES / TOP COUNTRIES) */
.bc-sb-app .bc-sb-leagues-panel .bc-sb-divider,
.bc-sb-app [class*="league-group"] > .bc-sb-divider,
.bc-sb-app .bc-sb-sidebar .bc-sb-divider,
.bc-sb-app .bc-sb-divider {
    padding: 20px 16px 10px 16px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--rp-text) !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Inject virtual "See all" via ::after */
.bc-sb-app .bc-sb-leagues-panel .bc-sb-divider::after,
.bc-sb-app .bc-sb-divider::after {
    content: 'See all' !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--rp-gold) !important;
    cursor: pointer !important;
}

/* bc-sb-league--top (flat top-league cards, reference: 72px) */
.bc-sb-app .bc-sb-league--top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 20px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border-left: none !important;
    height: 72px !important;
    min-height: 72px !important;
    background: var(--rp-elevated) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 12px !important;
    margin: 0 16px 8px 16px !important;
    cursor: pointer !important;
    transition: background 100ms ease, border-color 100ms ease !important;
}

.bc-sb-app .bc-sb-league--top:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--rp-border-strong) !important;
}

/* ================================================================
   12. MATCH / FIXTURE CARDS
   ================================================================ */

/* Date header */
.bc-sb-app .bc-sb-date-header {
    background: var(--rp-bg) !important;
    padding: 16px 16px 8px 16px !important;
    border-bottom: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: var(--rp-secondary) !important;
}

/* ================================================================
   COMPACT ALTENAR-STYLE MATCH CARDS
   ================================================================ */

/* Fixture card container — COMPACT card */
.bc-sb-app .bc-sb-event {
    background: linear-gradient(180deg, #10151B 0%, #080B0F 100%) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    transition: border-color 150ms ease, background 150ms ease !important;
}

.bc-sb-app .bc-sb-event:hover {
    border-color: rgba(255,208,0,0.30) !important;
    background: linear-gradient(180deg, #14191F 0%, #0C0F14 100%) !important;
}

/* Header strip (league + favorite) — COMPACT */
.bc-sb-app .bc-sb-event__strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    height: 24px !important;
}

.bc-sb-app .bc-sb-event__league {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #AEB4BE !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.bc-sb-app .bc-sb-event__favorite {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #8E949B !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: color 120ms ease !important;
}

.bc-sb-app .bc-sb-event__favorite:hover {
    color: #FFD000 !important;
}

.bc-sb-app .bc-sb-event__favorite--active {
    color: #FFD000 !important;
}

.bc-sb-app .bc-sb-event__favorite-icon {
    width: 100% !important;
    height: 100% !important;
    stroke-width: 2px !important;
}

/* Match body — THREE COLUMNS: TIME | TEAMS | ODDS — COMPACT */
.bc-sb-app .bc-sb-event__match {
    display: grid !important;
    grid-template-columns: 110px minmax(200px, 1fr) 380px !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 20px !important;
}

/* Time column — COMPACT */
.bc-sb-app .bc-sb-event__time-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 6px !important;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
    padding-right: 18px !important;
}

.bc-sb-app .bc-sb-event__time {
    font-size: 26px !important;
    font-weight: 500 !important;
    color: #F5F5F5 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

.bc-sb-app .bc-sb-event__live-badge {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #FF2438 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.bc-sb-app .bc-sb-event__live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
}

/* Team area — COMPACT */
.bc-sb-app .bc-sb-event__teams {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.bc-sb-app .bc-sb-event__team {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: auto !important;
}

.bc-sb-app .bc-sb-event__team-name {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #F5F5F5 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.55 !important;
}

.bc-sb-app .bc-sb-event__team-score {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #FFD000 !important;
    min-width: 32px !important;
    text-align: right !important;
    margin-left: 12px !important;
}

/* VS indicator between teams — COMPACT */
.bc-sb-app .bc-sb-event__teams::before {
    content: 'VS' !important;
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #7D838D !important;
    padding: 2px 0 !important;
    position: relative !important;
}

/* Odds area — THREE COMPACT BUTTONS */
.bc-sb-app .bc-sb-event__odds {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 0 !important;
}

.bc-sb-app .bc-sb-odd {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 56px !important;
    gap: 4px !important;
    background: #10161D !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    position: relative !important;
    padding: 8px 6px !important;
}

.bc-sb-app .bc-sb-odd:hover:not(.bc-sb-odd--suspended):not(.bc-sb-odd--selected) {
    background: #151B22 !important;
    border-color: rgba(255, 208, 0, 0.45) !important;
}

.bc-sb-app .bc-sb-odd--selected {
    background: rgba(255,208,0,0.08) !important;
    border-color: #FFD000 !important;
}

.bc-sb-app .bc-sb-odd--suspended {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.bc-sb-app .bc-sb-odd__label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #AEB4BE !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
}

.bc-sb-app .bc-sb-odd__value {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #FFD000 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

.bc-sb-app .bc-sb-odd--selected .bc-sb-odd__label {
    color: #AEB2B8 !important;
}

.bc-sb-app .bc-sb-odd--selected .bc-sb-odd__value {
    color: #FFD000 !important;
}

/* ================================================================
   13. BETSLIP SIDEBAR
   ================================================================ */

.bc-sb-app .bc-sb-betslip {
    background: var(--rp-surface) !important;
    border-left: 1px solid var(--rp-border) !important;
}

/* Betslip header */
.bc-sb-app .bc-sb-betslip-header,
.bc-sb-app .bc-sb-betslip__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 16px 12px 16px !important;
    border-bottom: 1px solid var(--rp-border) !important;
    background: var(--rp-surface) !important;
}

.bc-sb-app .bc-sb-betslip-header h2,
.bc-sb-app .bc-sb-betslip__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--rp-text) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Selection cards */
.bc-sb-app .bc-sb-selection {
    padding: 12px 14px !important;
    background: var(--rp-elevated) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: var(--rp-radius-card) !important;
    margin: 8px !important;
}

/* Place bet button */
.bc-sb-app [class*="place-bet"],
.bc-sb-app [id*="place-bet"],
.bc-sb-app [id*="placeBet"],
.bc-sb-app button[class*="place"] {
    background: var(--rp-gold) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    height: 52px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: opacity 100ms ease !important;
    width: calc(100% - 32px) !important;
    margin: 8px 16px !important;
    text-transform: uppercase !important;
}

.bc-sb-app [class*="place-bet"]:hover,
.bc-sb-app [id*="place-bet"]:hover {
    opacity: 0.9 !important;
}

/* ================================================================
   14. FLOATING BETSLIP BUTTON
   ================================================================ */

.bc-sb-app .bc-sb-floating-betslip,
.bc-sb-app #bcSbFloatingBetslip {
    position: fixed !important;
    bottom: calc(72px + 12px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 56px !important;
    padding: 0 20px !important;
    background: var(--rp-gold) !important;
    border-radius: 28px !important;
    box-shadow: 0 4px 20px rgba(255, 208, 0, 0.35) !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    border: none !important;
    transition: transform 120ms ease, box-shadow 120ms ease !important;
}

.bc-sb-app .bc-sb-floating-betslip:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(255, 208, 0, 0.45) !important;
}

.bc-sb-app .bc-sb-floating-betslip__count,
.bc-sb-app .bc-sb-floating-betslip__badge {
    background: #000 !important;
    color: var(--rp-gold) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ================================================================
   15. BOTTOM NAVIGATION (mobile)
   ================================================================ */

.bc-sb-app .bc-sb-bottom-nav,
.bc-sb-app .bc-sb-mobile-nav,
.bc-sb-app #bcSbBottomNav,
.bc-sb-app [class*="bottom-nav"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 68px !important;
    min-height: 68px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: var(--rp-surface) !important;
    border-top: 1px solid var(--rp-border) !important;
    display: flex !important;
    align-items: stretch !important;
    z-index: 2000 !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-bottom-nav__item,
.bc-sb-app [class*="nav-btn"],
.bc-sb-app [class*="bottom-nav"] button {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: var(--rp-secondary) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: color 100ms ease !important;
}

.bc-sb-app .bc-sb-bottom-nav__item--active,
.bc-sb-app [class*="nav-btn--active"] {
    color: var(--rp-gold) !important;
}

.bc-sb-app .bc-sb-bottom-nav__item svg,
.bc-sb-app [class*="bottom-nav"] button svg {
    width: 22px !important;
    height: 22px !important;
}

/* Content padding to prevent bottom nav overlap */
.bc-sb-app .bc-sb-content {
    padding-bottom: 84px !important;
}

/* ================================================================
   16. EMPTY STATES
   ================================================================ */

.bc-sb-app .bc-sb-empty,
.bc-sb-app [class*="empty-state"] {
    display: flex; /* not !important — #bcSbEmptyState toggles this inline via JS when fixtures load */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 24px !important;
    text-align: center !important;
    gap: 12px !important;
    color: var(--rp-secondary) !important;
}

.bc-sb-app .bc-sb-empty svg,
.bc-sb-app .bc-sb-empty img {
    width: 48px !important;
    height: 48px !important;
    opacity: 0.4 !important;
}

.bc-sb-app .bc-sb-empty__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--rp-secondary) !important;
}

.bc-sb-app .bc-sb-empty__text {
    font-size: 13px !important;
    color: var(--rp-secondary) !important;
    opacity: 0.7 !important;
}

/* ================================================================
   17. DESKTOP RESPONSIVE (1024px+)
   ================================================================ */

@media (min-width: 1024px) {
    /* Adjust header for desktop */
    .bc-sb-app .bc-sb-header {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        padding: 0 24px !important;
    }

    /* Mode bar top offset (76px mobile header / 72px desktop) */
    .bc-sb-app .bc-sb-mode-bar {
        top: 72px !important;
    }

    /* Sports nav larger on desktop */
    .bc-sb-app .bc-sb-sport {
        min-width: 104px !important;
        width: 104px !important;
        height: 112px !important;
        border-radius: 14px !important;
    }

    /* Hide mobile-only search */
    .bc-sb-app .bc-sb-mobile-search,
    .bc-sb-app #bcSbMobileSearch {
        display: none !important;
    }

    /* Show desktop center search */
    .bc-sb-app .bc-sb-header__center {
        display: block !important;
    }

    /* No padding for bottom nav on desktop */
    .bc-sb-app .bc-sb-content {
        padding-bottom: 0 !important;
    }

    /* Hide floating betslip on desktop — match ID specificity from global rule */
    .bc-sb-app .bc-sb-floating-betslip,
    .bc-sb-app #bcSbFloatingBetslip {
        display: none !important;
    }

    /* Hide mobile betslip drawer on desktop */
    .bc-sb-app .bc-sb-mobile-betslip,
    .bc-sb-app #bcSbMobileBetslip {
        display: none !important;
    }

    /* Hide mobile bottom nav on desktop */
    .bc-sb-app .bc-sb-mobile-nav,
    .bc-sb-app #bcSbMobileNav {
        display: none !important;
    }

    /* Sidebar content area — no left padding needed (already in grid) */
    .bc-sb-app .bc-sb-nav-section__content {
        padding: 0 12px 12px 12px !important;
    }

    .bc-sb-app .bc-sb-nav-section__header {
        padding: 16px 12px 8px 12px !important;
    }

    /* League/country cards in desktop sidebar — more compact */
    .bc-sb-app .bc-sb-sidebar .bc-sb-nav-section__content > *:not(.bc-sb-leagues-container):not(.bc-sb-league-search):not(.bc-sb-divider),
    .bc-sb-app .bc-sb-sidebar .bc-sb-league-item,
    .bc-sb-app .bc-sb-sidebar .bc-sb-country-item {
        height: 52px !important;
        min-height: 52px !important;
        grid-template-columns: 24px 36px minmax(0, 1fr) auto 20px !important;
        gap: 8px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
    }
}

/* ================================================================
   18. TABLET / MID (768px – 1023px)
   ================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    body .bc-sb-app .bc-sb-layout {
        display: grid !important;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
    }

    body .bc-sb-app .bc-sb-betslip {
        display: none !important;
    }

    body .bc-sb-app .bc-sb-sidebar {
        display: flex !important;
    }

    /* Mobile drawer/bottom-nav must not leak into the tablet layout —
       previously these only got hidden at min-width:1024px, leaving them
       visible (and overlapping the sidebar+content) at 768-1023px */
    .bc-sb-app .bc-sb-mobile-betslip,
    .bc-sb-app #bcSbMobileBetslip {
        display: none !important;
    }

    .bc-sb-app .bc-sb-mobile-nav,
    .bc-sb-app #bcSbMobileNav {
        display: none !important;
    }

    .bc-sb-app .bc-sb-floating-betslip,
    .bc-sb-app #bcSbFloatingBetslip {
        display: none !important;
    }
}

/* ================================================================
   19. MOBILE (<= 767px) — ensure mobile overrides are clean
   ================================================================ */

@media (max-width: 767px) {
    body .bc-sb-app .bc-sb-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    body .bc-sb-app .bc-sb-sidebar {
        display: none !important;
    }

    body .bc-sb-app .bc-sb-betslip {
        display: none !important;
    }

    body .bc-sb-app .bc-sb-header__center {
        display: none !important;
    }

    .bc-sb-app .bc-sb-header {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        padding: 0 16px !important;
    }

    .bc-sb-app .bc-sb-mode-bar {
        top: 72px !important;
    }

    .bc-sb-app .bc-sb-sport {
        min-width: 90px !important;
        width: 90px !important;
        height: 108px !important;
    }

    /* Mobile: smaller header btn labels */
    .bc-sb-app .bc-sb-header-btn__label {
        font-size: 13px !important;
    }
}

/* ================================================================
   20. EVENTS PANEL
   ================================================================ */

/* Events header (league title + count) */
.bc-sb-app .bc-sb-events__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 16px 8px 16px !important;
    border-bottom: 1px solid var(--rp-border) !important;
    background: var(--rp-bg) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.bc-sb-app .bc-sb-events__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--rp-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.bc-sb-app .bc-sb-events__count {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--rp-secondary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 10px !important;
    border-radius: 10px !important;
}

/* Back button in events header */
.bc-sb-app [class*="back"] button,
.bc-sb-app .bc-sb-events__back {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--rp-secondary) !important;
    font-size: 13px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* ================================================================
   21. SCROLLBAR POLISH
   ================================================================ */

.bc-sb-app ::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}

.bc-sb-app ::-webkit-scrollbar-track {
    background: transparent !important;
}

.bc-sb-app ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10) !important;
    border-radius: 2px !important;
}

.bc-sb-app * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.10) transparent !important;
}

/* ================================================================
   22. MATCH CARDS RESPONSIVE — COMPACT ALTENAR-STYLE DESIGN
   ================================================================ */

/* TABLET: Compact cards (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .bc-sb-app .bc-sb-event {
        padding: 16px 18px !important;
        height: 140px !important;
        max-height: 140px !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .bc-sb-app .bc-sb-event__strip {
        margin-bottom: 0 !important;
        height: 22px !important;
    }

    .bc-sb-app .bc-sb-event__league {
        font-size: 11px !important;
    }

    .bc-sb-app .bc-sb-event__favorite {
        width: 22px !important;
        height: 22px !important;
    }

    .bc-sb-app .bc-sb-event__match {
        grid-template-columns: 95px minmax(180px, 1fr) 320px !important;
        gap: 16px !important;
    }

    .bc-sb-app .bc-sb-event__time-col {
        padding-right: 14px !important;
        gap: 5px !important;
    }

    .bc-sb-app .bc-sb-event__time {
        font-size: 22px !important;
    }

    .bc-sb-app .bc-sb-event__live-badge {
        font-size: 10px !important;
        gap: 3px !important;
    }

    .bc-sb-app .bc-sb-event__live-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .bc-sb-app .bc-sb-event__teams {
        gap: 6px !important;
    }

    .bc-sb-app .bc-sb-event__teams::before {
        font-size: 9px !important;
        padding: 1px 0 !important;
    }

    .bc-sb-app .bc-sb-event__team-name {
        font-size: 16px !important;
    }

    .bc-sb-app .bc-sb-event__team-score {
        font-size: 16px !important;
        min-width: 28px !important;
    }

    .bc-sb-app .bc-sb-event__odds {
        gap: 8px !important;
    }

    .bc-sb-app .bc-sb-odd {
        height: 50px !important;
        gap: 3px !important;
        padding: 6px 5px !important;
    }

    .bc-sb-app .bc-sb-odd__label {
        font-size: 9px !important;
    }

    .bc-sb-app .bc-sb-odd__value {
        font-size: 14px !important;
    }
}

/* MOBILE: Compact vertical layout (<768px) */
@media (max-width: 767px) {
    .bc-sb-app .bc-sb-event {
        padding: 16px 14px !important;
        height: auto !important;
        max-height: none !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }

    .bc-sb-app .bc-sb-event__strip {
        margin-bottom: 0 !important;
        height: 22px !important;
    }

    .bc-sb-app .bc-sb-event__league {
        font-size: 11px !important;
    }

    .bc-sb-app .bc-sb-event__favorite {
        width: 22px !important;
        height: 22px !important;
    }

    .bc-sb-app .bc-sb-event__match {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .bc-sb-app .bc-sb-event__time-col {
        border-right: none !important;
        padding-right: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .bc-sb-app .bc-sb-event__time {
        font-size: 20px !important;
    }

    .bc-sb-app .bc-sb-event__live-badge {
        font-size: 12px !important;
        gap: 4px !important;
    }

    .bc-sb-app .bc-sb-event__live-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .bc-sb-app .bc-sb-event__teams {
        gap: 8px !important;
    }

    /* Hide VS pseudo-element on mobile */
    .bc-sb-app .bc-sb-event__teams::before {
        display: none !important;
    }

    .bc-sb-app .bc-sb-event__team-name {
        font-size: 16px !important;
    }

    .bc-sb-app .bc-sb-event__team-score {
        font-size: 16px !important;
        min-width: 28px !important;
        margin-left: 12px !important;
    }

    .bc-sb-app .bc-sb-event__odds {
        gap: 8px !important;
    }

    .bc-sb-app .bc-sb-odd {
        height: 54px !important;
        gap: 3px !important;
        padding: 8px 6px !important;
        border-width: 1px !important;
        border-radius: 8px !important;
    }

    .bc-sb-app .bc-sb-odd__label {
        font-size: 10px !important;
    }

    .bc-sb-app .bc-sb-odd__value {
        font-size: 15px !important;
    }
}

/* ================================================================
   23. DATE HEADERS
   ================================================================ */

@media (min-width: 768px) {

    /* ---- Date group header — clean section label ---- */
    .bc-sb-app .bc-sb-date-header {
        height: 54px !important;
        min-height: 54px !important;
        padding: 18px 20px 12px 20px !important;
        display: flex !important;
        align-items: flex-end !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        color: var(--rp-secondary) !important;
        background: transparent !important;
    }

    /* ---- League/events header — larger premium title ---- */
    .bc-sb-app .bc-sb-events__title {
        font-size: 20px !important;
        font-weight: 600 !important;
    }

    /* ---- TOP COUNTRIES rows — compact professional row ----
       (selector matches the specificity of the existing 3-class
       .bc-sb-sidebar .bc-sb-country__header rule so this override wins) */
    .bc-sb-app .bc-sb-sidebar .bc-sb-country__header,
    .bc-sb-app .bc-sb-country__header {
        position: relative !important;
        grid-template-columns: 36px minmax(0, 1fr) 44px 20px !important;
        height: 52px !important;
        min-height: 52px !important;
        gap: 8px !important;
        padding: 0 12px !important;
        margin: 0 12px 2px 12px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .bc-sb-app .bc-sb-sidebar .bc-sb-country__header:hover,
    .bc-sb-app .bc-sb-country__header:hover {
        background: rgba(255, 255, 255, 0.035) !important;
        border-color: transparent !important;
    }

    .bc-sb-app .bc-sb-country__icon {
        width: 28px !important;
        height: 20px !important;
        font-size: 16px !important;
    }

    .bc-sb-app .bc-sb-country__name {
        font-size: 15px !important;
        color: #e8ebef !important;
    }

    .bc-sb-app .bc-sb-country__count {
        width: 36px !important;
        height: 28px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
        background: #1b222b !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        font-size: 13px !important;
        color: #dce1e7 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        justify-self: end !important;
    }

    /* Favorite star — kept functional, tucked out of the main row flow;
       revealed on hover (desktop only) so the clean 4-column reference
       layout is preserved without removing the existing click handler.
       Touch/tablet devices (no hover) keep it always visible. */
    .bc-sb-app .bc-sb-country__favorite {
        position: absolute !important;
        right: 56px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .bc-sb-app .bc-sb-country__favorite {
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .bc-sb-app .bc-sb-country__header:hover .bc-sb-country__favorite {
            opacity: 0.6 !important;
            pointer-events: auto !important;
        }
    }

    .bc-sb-app .bc-sb-country__chevron {
        width: 20px !important;
        height: 20px !important;
        color: #8f98a5 !important;
    }

    .bc-sb-app .bc-sb-country__header:hover .bc-sb-country__chevron {
        color: #ffd000 !important;
    }
}

/* Tablet (768–1023px): same card structure, proportionally reduced odds */
@media (min-width: 768px) and (max-width: 1023px) {
    .bc-sb-app .bc-sb-event__match {
        grid-template-columns: 56px minmax(160px, 1fr) auto !important;
    }

    .bc-sb-app .bc-sb-odd {
        width: 64px !important;
        height: 48px !important;
        min-height: 48px !important;
    }
}

/* ================================================================
   23. MATCH DETAILS PAGE — Premium Match Center
   All rules under .bc-sb-app scope; !important matches the file conv.
   ================================================================ */

/* --- Page container -------------------------------------------- */
.bc-sb-app #bcSbPrematchMatchPage {
    position: relative !important;
    width: 100% !important;
    background: var(--rp-bg) !important;
    color: var(--rp-text) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* --- Back / breadcrumb bar ------------------------------------- */
.bc-sb-app .bc-sb-mp-backbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    background: var(--rp-surface) !important;
    border-bottom: 1px solid var(--rp-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-mp-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 12px 0 8px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--rp-border-strong) !important;
    border-radius: 8px !important;
    color: var(--rp-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 120ms ease !important;
    white-space: nowrap !important;
}

.bc-sb-app .bc-sb-mp-back:hover {
    background: rgba(255,255,255,.09) !important;
    color: var(--rp-gold) !important;
    border-color: rgba(255,208,0,.35) !important;
}

.bc-sb-app .bc-sb-mp-breadleague {
    flex: 1 !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--rp-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* --- Match hero ------------------------------------------------- */
.bc-sb-app .bc-sb-mp-hero {
    background: 
        linear-gradient(rgba(5, 9, 13, 0.45), rgba(5, 9, 13, 0.70)),
        url(../cdn/matchbackground.png) center center / cover no-repeat !important;
    border: none !important;
    border-bottom: 1px solid var(--rp-border) !important;
    border-radius: 0 !important;
    padding: 28px 22px 24px !important;
    text-align: center !important;
    margin: 0 !important;
    max-width: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* stadium-atmosphere glow from below */
.bc-sb-app .bc-sb-mp-hero::before {
    content: '' !important;
    position: absolute !important;
    bottom: -20px !important;
    left: 10% !important;
    right: 10% !important;
    height: 120px !important;
    background: radial-gradient(ellipse at center, rgba(255,208,0,.07) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.bc-sb-app .bc-sb-mp-hero__league {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--rp-gold) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin-bottom: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}

.bc-sb-app .bc-sb-mp-hero__date {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--rp-secondary) !important;
    margin-bottom: 22px !important;
    position: relative !important;
    z-index: 1 !important;
}

.bc-sb-app .bc-sb-mp-hero__teams {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.bc-sb-app .bc-sb-mp-hero__team {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.bc-sb-app .bc-sb-mp-hero__badge {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #192032 0%, #101828 100%) !important;
    border: 2px solid rgba(255,208,0,.22) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: var(--rp-gold) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 24px rgba(255,208,0,.12), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.bc-sb-app .bc-sb-mp-hero__teamname {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--rp-text) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 160px !important;
}

.bc-sb-app .bc-sb-mp-hero__center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 8px !important;
    flex-shrink: 0 !important;
}

.bc-sb-app .bc-sb-mp-hero__time {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--rp-text) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
}

/* status badges */
.bc-sb-app .bc-sb-mp-status--prematch {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    background: rgba(255,208,0,.12) !important;
    border: 1px solid rgba(255,208,0,.32) !important;
    color: var(--rp-gold) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    gap: 0 !important;
}

.bc-sb-app .bc-sb-mp-status--live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    background: rgba(245,34,61,.14) !important;
    border: 1px solid rgba(245,34,61,.38) !important;
    color: #FF3344 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.bc-sb-app .bc-sb-mp-livedot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
}

/* --- Category tabs --------------------------------------------- */
.bc-sb-app .bc-sb-mp-tabs {
    display: flex !important;
    align-items: stretch !important;
    background: var(--rp-bg) !important;
    border-bottom: 1px solid var(--rp-border) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    position: sticky !important;
    top: 50px !important;
    z-index: 19 !important;
    flex-shrink: 0 !important;
    padding: 0 8px !important;
}

.bc-sb-app .bc-sb-mp-tabs::-webkit-scrollbar { display: none !important; }

.bc-sb-app .bc-sb-mp-tab {
    position: relative !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--rp-secondary) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    transition: color 120ms ease, border-color 120ms ease !important;
}

.bc-sb-app .bc-sb-mp-tab:hover { color: var(--rp-text) !important; }

.bc-sb-app .bc-sb-mp-tab--active {
    color: var(--rp-gold) !important;
    border-bottom-color: var(--rp-gold) !important;
}

/* --- Market list ----------------------------------------------- */
.bc-sb-app .bc-sb-match-markets {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 8px 0 48px !important;
    background: var(--rp-bg) !important;
}

/* --- Market card ----------------------------------------------- */
.bc-sb-app .bc-sb-mp-market {
    background: var(--rp-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--rp-border) !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.bc-sb-app .bc-sb-mp-market__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 46px !important;
    padding: 14px 16px 8px 16px !important;
    background: transparent !important;
    border-bottom: none !important;
    gap: 8px !important;
}

.bc-sb-app .bc-sb-mp-market__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--rp-text) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
}

.bc-sb-app .bc-sb-mp-market__fav {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,.25) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: color 120ms ease !important;
}

.bc-sb-app .bc-sb-mp-market__fav:hover { color: var(--rp-gold) !important; }

/* odds grid */
.bc-sb-app .bc-sb-mp-market__odds {
    display: grid !important;
    gap: 8px !important;
    padding: 0 16px 16px !important;
}

.bc-sb-app .bc-sb-mp-market__odds--cols1 { grid-template-columns: 1fr !important; }
.bc-sb-app .bc-sb-mp-market__odds--cols2 { grid-template-columns: repeat(2, 1fr) !important; }
.bc-sb-app .bc-sb-mp-market__odds--cols3 { grid-template-columns: repeat(3, 1fr) !important; }

/* --- Odds button (match center) --- */
.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 62px !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    padding: 10px 10px !important;
    background: linear-gradient(180deg, var(--rp-elevated) 0%, #0F1720 100%) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    flex: 1 !important;
}

/* horizontal layout for wide labels (Over 2.5, Under 2.5, Yes, No…) */
.bc-sb-app .bc-sb-mp-market__odds--row .bc-sb-mp-odd.bc-sb-odd {
    flex-direction: row !important;
    justify-content: space-between !important;
    min-height: 52px !important;
    gap: 8px !important;
    padding: 0 16px !important;
}

.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd:not(:disabled):hover {
    background: rgba(255,208,0,.08) !important;
    border-color: rgba(255,208,0,.35) !important;
}

.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd.bc-sb-odd--selected {
    background: rgba(255,208,0,.12) !important;
    border-color: var(--rp-gold) !important;
}

.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd:disabled,
.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd.bc-sb-odd--locked,
.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd.bc-sb-odd--suspended {
    opacity: 0.36 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.bc-sb-app .bc-sb-mp-odd__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--rp-secondary) !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* horizontal layout: label grows to fill left side */
.bc-sb-app .bc-sb-mp-market__odds--row .bc-sb-mp-odd__label {
    flex: 1 !important;
    text-align: left !important;
}

.bc-sb-app .bc-sb-mp-odd__value {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--rp-gold) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* selected: keep gold value */
.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd.bc-sb-odd--selected .bc-sb-mp-odd__label {
    color: rgba(255,208,0,.75) !important;
}

.bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd.bc-sb-odd--selected .bc-sb-mp-odd__value {
    color: var(--rp-gold) !important;
}

/* --- No-markets / error / skeleton ----------------------------- */
.bc-sb-app .bc-sb-no-markets {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 56px 24px !important;
    color: var(--rp-secondary) !important;
    text-align: center !important;
}

.bc-sb-app .bc-sb-no-markets__icon { font-size: 32px !important; opacity: .4 !important; }
.bc-sb-app .bc-sb-no-markets__text { font-size: 15px !important; font-weight: 600 !important; color: var(--rp-text) !important; }
.bc-sb-app .bc-sb-no-markets__subtext { font-size: 13px !important; }

.bc-sb-app .bc-sb-error {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 48px 24px !important;
    text-align: center !important;
    color: var(--rp-secondary) !important;
}

.bc-sb-app .bc-sb-error__retry {
    padding: 8px 20px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 8px !important;
    color: var(--rp-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

.bc-sb-app .bc-sb-market-skeleton {
    padding: 14px 16px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rp-border) !important;
    border-radius: 0 !important;
}

.bc-sb-app .bc-sb-skeleton__bar { background: rgba(255,255,255,.04) !important; }
.bc-sb-app .bc-sb-skeleton__odd { background: rgba(255,255,255,.04) !important; border-radius: 8px !important; }

/* --- Desktop (>= 1024px) --------------------------------------- */
@media (min-width: 1024px) {
    .bc-sb-app .bc-sb-mp-hero { padding: 32px 28px 28px !important; }
    .bc-sb-app .bc-sb-mp-hero__badge { width: 84px !important; height: 84px !important; min-width: 84px !important; font-size: 34px !important; }
    .bc-sb-app .bc-sb-mp-hero__teamname { font-size: 19px !important; max-width: 210px !important; }
    .bc-sb-app .bc-sb-mp-hero__time { font-size: 34px !important; }
    .bc-sb-app .bc-sb-mp-hero__teams { grid-template-columns: 1fr 110px 1fr !important; gap: 16px !important; }
    .bc-sb-app .bc-sb-mp-market__odds { padding: 0 20px 18px !important; gap: 10px !important; }
    .bc-sb-app .bc-sb-mp-market__head { padding: 16px 20px 8px 20px !important; }
    .bc-sb-app .bc-sb-mp-backbar { padding: 0 22px !important; }
    .bc-sb-app .bc-sb-mp-tabs { padding: 0 12px !important; }
}

/* --- Mobile (<= 767px) ----------------------------------------- */
@media (max-width: 767px) {
    .bc-sb-app .bc-sb-mp-hero { padding: 18px 14px 18px !important; }
    .bc-sb-app .bc-sb-mp-hero__badge { width: 54px !important; height: 54px !important; min-width: 54px !important; font-size: 22px !important; }
    .bc-sb-app .bc-sb-mp-hero__teamname { font-size: 13px !important; max-width: 110px !important; }
    .bc-sb-app .bc-sb-mp-hero__time { font-size: 22px !important; }
    .bc-sb-app .bc-sb-mp-hero__teams { gap: 6px !important; }
    .bc-sb-app .bc-sb-mp-tab { height: 42px !important; padding: 0 12px !important; font-size: 11px !important; }
    .bc-sb-app .bc-sb-match-markets { padding: 4px 0 80px !important; }
    .bc-sb-app .bc-sb-mp-market__odds { padding: 0 12px 12px !important; gap: 6px !important; }
    .bc-sb-app .bc-sb-mp-market__odds .bc-sb-mp-odd.bc-sb-odd { min-height: 52px !important; }
    .bc-sb-app .bc-sb-mp-market__odds--row .bc-sb-mp-odd.bc-sb-odd { min-height: 46px !important; }
}

/* ================================================================
   24. BET HUB TABS — override bet-hub.css colours to match rp-gold
   ================================================================ */

.bc-sb-app .bc-sb-hub-tabs {
    border-bottom-color: var(--rp-border) !important;
    margin-top: 0 !important;
}

.bc-sb-app .bc-sb-hub-tab {
    color: var(--rp-secondary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    min-height: 44px !important;
}

.bc-sb-app .bc-sb-hub-tab:hover { color: var(--rp-text) !important; }

.bc-sb-app .bc-sb-hub-tab--active {
    color: var(--rp-gold) !important;
}

.bc-sb-app .bc-sb-hub-tab--active::after {
    background: var(--rp-gold) !important;
    height: 2px !important;
    bottom: 0 !important;
}

.bc-sb-app .bc-sb-hub-tab__badge {
    background: var(--rp-gold) !important;
    color: #000 !important;
}