/* ============================================================
   20WICKT / BETHUB — MAIN STYLESHEET
   Dark Navy Theme (20wickets.com inspired)
   ============================================================
   Color Palette:
     Header / Sidebar bg .... #1a2c38
     Nav bar bg ............. #2e7d32 (green)
     Nav active / hover ..... #1a5276
     Page background ........ #f5f5f5
     Content bg ............. #ffffff
     Back column header ..... #72EFDD (green-tinted)
     Lay column header ...... #faa9ba (pink)
     Back odds cells ........ #a8e6cf (light green)
     Lay odds cells ......... #f5c6d0 (light pink)
     Match Odds header ...... #2c3e50 (dark teal/navy)
     Sportsbook header ...... #2e7d32 (green)
     Fancy market headers ... #e65100 (orange-red)
     Fancy Bet tab .......... #2e7d32 (green)
     Sportsbook tab ......... #ff6600 (orange)
     Odds boxes (sportsbook)  #a8e6cf (light green)
     SUSPENDED text ......... #ffc107 (gold) + red dashed border
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
    /* Brand / Layout */
    --navy:              #1a2c38;
    --navy-dark:         #152232;
    --navy-light:        #2c3e50;
    --navy-hover:        #1a5276;
    --accent-gold:       #ffc107;
    --accent-green:      #4caf50;
    --accent-red:        #dc3545;

    /* Back / Lay — Blue/Pink Theme */
    --back-header:       #91c4e0;
    --lay-header:        #f0a8b3;
    --back-cell:         #b8e2f2;
    --back-cell-hover:   #9ed1e6;
    --lay-cell:          #f5b6c2;
    --lay-cell-hover:    #f2a2b1;

    /* 6-Column Match Odds Gradients (Desktop) */
    --back-col-1:        #d6f0fa;   /* lightest */
    --back-col-2:        #c4e8f7;
    --back-col-3:        #b8e2f2;   /* darkest / closest to center */
    --lay-col-1:         #fae3e8;   /* lightest */
    --lay-col-2:         #f7ccd5;
    --lay-col-3:         #f5b6c2;   /* darkest / closest to center */

    /* Market Headers */
    --market-header:       #203a58;  /* dark navy for all markets */
    --market-header-sb:    #203a58;  
    --fancy-header:        #203a58;  
    --fancy-tab:           #203a58;  
    --sportsbook-tab:      #203a58;  

    /* Odds Boxes */
    --odds-green:        #b8e2f2;
    --odds-green-hover:  #9ed1e6;

    /* Suspended */
    --suspended-border:  #dc3545;
    --suspended-text:    #dc3545;

    /* General */
    --bg-page:           #f5f5f5;
    --bg-content:        #ffffff;
    --text-dark:         #333333;
    --text-light:        #ffffff;
    --text-muted:        #888888;
    --border-color:      #e0e0e0;
    --border-light:      #f0f0f0;
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:         0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:         0 8px 24px rgba(0,0,0,0.12);
    --radius-sm:         4px;
    --radius-md:         8px;
    --radius-lg:         12px;
}

/* ── Reset & Base ── */
html {
    margin: 0;
    padding: 0;
    background: #1a2c38;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg-page);
    color: var(--text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ── Utility Classes ── */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

@media (max-width: 991px) {
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }
}

/* Hide mobile-only elements on desktop */
@media (min-width: 992px) {
    .mobile-bottom-nav,
    .account-drawer,
    .drawer-overlay,
    .fp-bottom-nav {
        display: none !important;
    }
}

/* ── Main Layout (3-column Desktop) ── */
.main-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px;
    gap: 15px;
    min-height: calc(100vh - 120px);
}

/* ── Page Layout (3-column Desktop) ── */
.page-layout {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px;
    gap: 15px;
    min-height: calc(100vh - 120px);
}

@media (max-width: 992px) {
    .page-layout {
        padding: 8px !important;
        padding-top: 0 !important;
    }
}

.sidebar-left {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    align-self: flex-start;
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: var(--bg-page);
}

.sidebar-right {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
    align-self: flex-start;
}

.content-area {
    flex: 1;
    min-width: 0;
}

/* ── Left Sidebar ── */
.left-sidebar {
    width: 240px;
    background: var(--navy);
    border-radius: var(--radius-md);
    overflow: hidden;
    align-self: flex-start;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.sport-list li a {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: var(--accent-green);
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    border-left: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}

.sport-list li a:hover {
    background: rgba(255,255,255,0.04);
    border-left-color: var(--accent-green);
}

.sport-list i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: #8899a6;
}

.sport-list li a:hover i {
    color: var(--accent-green);
}

/* ── Right Sidebar ── */
.right-sidebar {
    width: 200px;
    background: var(--navy);
    border-radius: var(--radius-md);
    overflow: hidden;
    align-self: flex-start;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.right-sidebar .sidebar-section {
    padding: 0;
}

.right-sidebar .sidebar-section-title {
    background: var(--navy-dark);
    color: var(--text-light);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.right-sidebar .sidebar-section-body {
    padding: 16px;
    color: #8899a6;
    font-size: 12px;
    text-align: center;
    min-height: 60px;
}

.right-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: #b0bec5;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.right-sidebar .sidebar-link:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-light);
}

.right-sidebar .sidebar-link i {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

/* ── Banners / Hero ── */
.banners-wrapper {
    background: #111;
    border-radius: var(--radius-md);
    height: 280px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.hero-banner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-content h2 {
    color: var(--accent-gold);
    font-size: 4rem;
    font-weight: 900;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    text-align: center;
    line-height: 1;
    transform: skew(-8deg);
}

/* ── News Bar ── */
.news-bar {
    background: var(--navy);
    color: var(--text-light);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
}

.news-label {
    background: var(--accent-gold);
    color: var(--navy);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.news-text {
    flex: 1;
}

.support-link {
    color: var(--accent-gold);
    font-weight: 600;
    cursor: pointer;
}

/* ── Promotional Banner ── */
.promo-banner {
    background: linear-gradient(135deg, #1a0533 0%, #2d1b69 50%, #0d0d2b 100%);
    border-radius: var(--radius-md);
    height: 220px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-banner-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.promo-banner-content .promo-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.1;
}

.promo-banner-content .promo-subtitle {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 4px;
}

.promo-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(120, 80, 255, 0.3), transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(255, 100, 200, 0.2), transparent 50%);
}

.promo-banner::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%);
    animation: banner-shimmer 4s infinite;
}

@keyframes banner-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Highlight Tabs (Pill Style) ── */
.highlights-section {
    margin-bottom: 15px;
}

.highlights-header {
    background: var(--accent-green);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.highlight-tab {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-content);
    color: var(--text-muted);
    transition: all 0.2s;
    white-space: nowrap;
}

.highlight-tab:hover {
    color: var(--text-dark);
    border-color: var(--accent-green);
}

.highlight-tab.active {
    background: var(--accent-green);
    color: var(--text-light);
    border-color: var(--accent-green);
}

/* ── Right Sidebar Section ── */
.right-sidebar-section {
    background: #fff;
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.right-sidebar-section h3 {
    background: var(--navy-dark);
    color: var(--text-light);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.right-sidebar-section p,
.right-sidebar-section .sidebar-empty {
    padding: 16px;
    color: #8899a6;
    font-size: 12px;
    text-align: center;
}

/* ── Market Section (Homepage) ── */
.market-section {
    background: var(--bg-content);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.section-header {
    background: linear-gradient(135deg, var(--market-header), #34495e);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    position: relative;
}

.section-header h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header .section-icon {
    font-size: 18px;
    color: var(--accent-gold);
}

.section-header .header-info-icon {
    margin-left: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-style: italic;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    flex-shrink: 0;
}

.sport-header {
    padding: 10px 18px;
    background: var(--bg-content);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sport-header h4 {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filters .badge {
    cursor: pointer;
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
    background: var(--bg-content);
    color: var(--text-muted);
}

.filters .badge.active {
    background: var(--accent-green);
    color: var(--text-light);
    border-color: var(--accent-green);
}

/* ── Highlights Tabs ── */
.highlights-tabs {
    display: flex;
    gap: 0;
    background: var(--market-header-sb);
    padding: 0;
    border-bottom: 2px solid var(--border-light);
}

.highlights-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    background: transparent;
    border: none;
    text-transform: capitalize;
}

.highlights-tab.active {
    color: var(--text-light);
    background: var(--accent-green);
    border-bottom-color: var(--accent-green);
    font-weight: 700;
}

.highlights-tab:hover:not(.active) {
    color: var(--text-light);
    background: rgba(255,255,255,0.1);
}

/* ── Odds Table (Homepage Match Listing) ── */
.odds-table-container {
    overflow-x: auto;
}

.odds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Table Header with 1 / X / 2 columns */
.odds-table thead th {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.odds-table thead th:first-child {
    text-align: left;
    background: #f5f5f5;
    color: var(--text-muted);
}

/* Alternating Back/Lay column headers */
.odds-table thead th.back-col {
    background: var(--back-header);
    color: var(--text-dark);
}

.odds-table thead th.lay-col {
    background: var(--lay-header);
    color: var(--text-dark);
}

/* Match rows */
.odds-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.odds-table tbody tr:hover {
    background: #fafafa;
}

.odds-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.odds-table tbody td:first-child {
    text-align: left;
}

/* Odds cells - clickable */
.odds-table .odds-cell {
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    padding: 8px 6px;
    transition: all 0.15s ease;
    min-width: 60px;
}

.odds-table .odds-cell.back-cell {
    background: var(--back-cell);
    color: var(--text-dark);
}

.odds-table .odds-cell.back-cell:hover {
    background: var(--back-cell-hover);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);
}

.odds-table .odds-cell.lay-cell {
    background: var(--lay-cell);
    color: var(--text-dark);
}

.odds-table .odds-cell.lay-cell:hover {
    background: var(--lay-cell-hover);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);
}

.odds-table .odds-cell .price {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.odds-table .odds-cell .volume {
    font-size: 9px;
    opacity: 0.65;
    display: block;
    margin-top: 1px;
}

/* ── Match Table (Homepage / Sports Pages) ── */
.match-table-container {
    overflow-x: auto;
}

.match-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.match-table thead th {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.match-table thead th:first-child {
    text-align: left;
    background: #f5f5f5;
    color: var(--text-muted);
}

.match-table thead th.back-col {
    background: var(--back-header);
    color: var(--text-dark);
}

.match-table thead th.lay-col {
    background: var(--lay-header);
    color: var(--text-dark);
}

.match-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.match-table tbody tr:hover {
    background: #fafafa;
}

.match-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.match-table tbody td:first-child {
    text-align: left;
}

.match-table .odds-cell {
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    padding: 8px 6px;
    transition: all 0.15s ease;
    min-width: 60px;
}

.match-table .odds-cell.back {
    background: var(--back-cell);
    color: var(--text-dark);
}

.match-table .odds-cell.back:hover {
    background: var(--back-cell-hover);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);
}

.match-table .odds-cell.lay {
    background: var(--lay-cell);
    color: var(--text-dark);
}

.match-table .odds-cell.lay:hover {
    background: var(--lay-cell-hover);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);
}

.match-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.match-info a {
    font-size: 14px;
    font-weight: 700;
    color: #0d7377;
    transition: color 0.2s;
}

.match-info a:hover {
    color: #095456;
    text-decoration: underline;
}

.match-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.match-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.match-row {
    cursor: pointer;
    transition: background 0.15s;
}

.match-row:nth-child(even) {
    background: #f8fffe;
}

.match-row:nth-child(odd) {
    background: var(--bg-content);
}

.match-row:hover {
    background: #e8f5e9 !important;
}

.match-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.match-status.in-play {
    background: #e8f5e9;
    color: #2e7d32;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.match-status.in-play::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #2e7d32;
    border-radius: 50%;
    animation: pulse-green 1.5s infinite;
}

.match-badges {
    display: flex;
    gap: 4px;
    align-items: center;
}

.badge-bm, .badge-f, .badge-s {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.badge-bm { background: #1565c0; }
.badge-f  { background: #e65100; }
.badge-s  { background: #2e7d32; }

.match-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.pin-cell {
    text-align: center;
    color: #bbb;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}

.pin-cell:hover {
    color: var(--accent-gold);
}

/* Status badges in table */
.odds-table .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.status-badge.in-play {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.in-play::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #2e7d32;
    border-radius: 50%;
    animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Bet type icons (BM, F, S) */
.bet-type-icons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.bet-type-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.bet-type-icon.bm { background: #1565c0; }
.bet-type-icon.f  { background: #e65100; }
.bet-type-icon.s  { background: #2e7d32; }

/* Pin icon */
.pin-icon {
    color: #bbb;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}

.pin-icon:hover {
    color: var(--accent-gold);
}

/* ── Match Page Layout ── */
.match-layout {
    display: flex;
    gap: 15px;
    width: 100%;
}

.center-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-content);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Match Title Bar */
.match-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--bg-content);
    border-bottom: 1px solid var(--border-light);
}

.match-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

.match-title-left i { cursor: pointer; color: #888; }
.match-title-left .fa-play-circle { color: var(--accent-red); }

.match-title-right {
    font-size: 12px;
    font-weight: 700;
    color: #d35400;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Scorecard / Live Bar */
.scorecard-bar {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%);
    color: var(--text-light);
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.scorecard-bar::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: shimmer-bar 3s infinite;
}

@keyframes shimmer-bar {
    0% { left: -100%; }
    100% { left: 200%; }
}

.scorecard-bar i { font-size: 14px; }
.scorecard-bar .live-label { color: #fdd835; }

/* ── Market Section Headers (Match Odds, Tied Match) ── */
.market-header-dark {
    background: var(--market-header);
    color: var(--text-light);
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.market-header-dark .market-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-header-dark .market-title i {
    font-size: 14px;
    opacity: 0.7;
    cursor: pointer;
}

.market-header-dark .header-info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-style: italic;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 6px;
}

.market-header-dark .cash-out-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-gold);
    display: inline-block;
    margin-left: 6px;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.market-header-dark .market-meta {
    font-size: 11px;
    color: #b0bec5;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-header-dark .market-meta .matched-amount {
    color: var(--accent-gold);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* ── Match Odds Table ── */
.odds-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid var(--border-light);
}

.odds-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.match-odds-title {
    background: var(--market-header);
    color: var(--text-light);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.odds-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.odds-header-right .min-max {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── 6-Column Match Odds Layout (Desktop) ── */
.match-odds-six-col {
    width: 100%;
    border-collapse: collapse;
}

.match-odds-six-col thead th {
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
}

.match-odds-six-col thead th.team-name-header {
    text-align: left;
    padding-left: 12px;
    background: #f9f9f9;
    color: var(--text-muted);
    min-width: 120px;
}

/* Back column headers (green gradient) */
.match-odds-six-col thead th.back-col-1 { background: var(--back-col-1); color: var(--text-dark); }
.match-odds-six-col thead th.back-col-2 { background: var(--back-col-2); color: var(--text-dark); }
.match-odds-six-col thead th.back-col-3 { background: var(--back-col-3); color: var(--text-dark); }

/* Lay column headers (pink gradient) */
.match-odds-six-col thead th.lay-col-1 { background: var(--lay-col-1); color: var(--text-dark); }
.match-odds-six-col thead th.lay-col-2 { background: var(--lay-col-2); color: var(--text-dark); }
.match-odds-six-col thead th.lay-col-3 { background: var(--lay-col-3); color: var(--text-dark); }

/* "Back" and "Lay" span labels */
.match-odds-six-col thead th.back-label {
    background: var(--back-header);
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: 1px;
}

.match-odds-six-col thead th.lay-label {
    background: var(--lay-header);
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: 1px;
}

.match-odds-six-col thead th.min-max-header {
    background: #f0f0f0;
    color: var(--text-muted);
    font-size: 9px;
}

/* 6-col body rows */
.match-odds-six-col tbody td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.match-odds-six-col tbody td.team-name-cell {
    text-align: left;
    padding-left: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

/* 6-col odds cells with gradient backgrounds */
.match-odds-six-col tbody td.back-cell-1 { background: var(--back-col-1); cursor: pointer; }
.match-odds-six-col tbody td.back-cell-2 { background: var(--back-col-2); cursor: pointer; }
.match-odds-six-col tbody td.back-cell-3 { background: var(--back-col-3); cursor: pointer; }
.match-odds-six-col tbody td.lay-cell-1  { background: var(--lay-col-1); cursor: pointer; }
.match-odds-six-col tbody td.lay-cell-2  { background: var(--lay-col-2); cursor: pointer; }
.match-odds-six-col tbody td.lay-cell-3  { background: var(--lay-col-3); cursor: pointer; }

.match-odds-six-col tbody td .six-col-price {
    font-size: 13px;
    font-weight: 800;
    display: block;
    line-height: 1.2;
}

.match-odds-six-col tbody td .six-col-vol {
    font-size: 9px;
    opacity: 0.6;
    display: block;
}

.match-odds-six-col tbody td:hover {
    filter: brightness(0.95);
}

.match-odds-six-col tbody td.min-max-cell {
    background: #f9f9f9;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Match Odds Rows */
.match-odds-table {
    width: 100%;
    border-collapse: collapse;
}

.match-odds-table tr {
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid var(--border-light);
}

.match-odds-table td {
    padding: 0;
    border: none;
    vertical-align: middle;
}

.team-name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Odds Boxes (Back/Lay cells in match odds) */
.odds-boxes {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.odds-box-lg {
    width: 62px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 700;
}

.odds-box-lg .val {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.odds-box-lg .size {
    font-size: 9px;
    opacity: 0.6;
}

.odds-box-lg.back {
    background: var(--back-cell);
    color: var(--text-dark);
}

.odds-box-lg.back:hover {
    background: var(--back-cell-hover);
}

.odds-box-lg.lay {
    background: var(--lay-cell);
    color: var(--text-dark);
}

.odds-box-lg.lay:hover {
    background: var(--lay-cell-hover);
}

/* ── SUSPENDED Overlay ── */
.suspended-overlay {
    position: relative;
}

.suspended-overlay .suspended-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 900;
    color: var(--suspended-text);
    text-transform: uppercase;
    letter-spacing: 4px;
    z-index: 10;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    white-space: nowrap;
    pointer-events: none;
}

.suspended-overlay .odds-boxes {
    opacity: 0.3;
    pointer-events: none;
}

.suspended-overlay .team-name {
    opacity: 0.4;
}

/* Market section suspended state */
.market-suspended {
    position: relative;
    overflow: hidden;
    border: 2px dashed var(--suspended-border);
    border-radius: var(--radius-sm);
}

.market-suspended::after {
    content: 'SUSPENDED';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-size: 32px;
    font-weight: 900;
    color: var(--suspended-text);
    text-transform: uppercase;
    letter-spacing: 6px;
    z-index: 10;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    white-space: nowrap;
    pointer-events: none;
    background: rgba(220,53,69,0.12);
    padding: 6px 20px;
    border-radius: var(--radius-sm);
}

.market-suspended .match-odds-table,
.market-suspended .match-odds-six-col {
    opacity: 0.25;
    pointer-events: none;
}

/* ── Fancy Market Section ── */
.fancy-section {
    background: var(--bg-content);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

/* Fancy Main Tabs (Fancy Bet / Sportsbook) */
.fancy-tabs-container {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-light);
}

.fancy-tab-main {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    outline: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fancy-tab-main.active {
    color: var(--text-light);
}

.fancy-tab-main.fancy-bet-tab {
    background: var(--fancy-tab);
    color: var(--text-light);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.fancy-tab-main.fancy-bet-tab.inactive {
    background: #e0e0e0;
    color: #666;
}

.fancy-tab-main.sportsbook-tab {
    background: var(--sportsbook-tab);
    color: var(--text-light);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.fancy-tab-main.sportsbook-tab.inactive {
    background: #e0e0e0;
    color: #666;
}

.fancy-tab-main .tab-info-icon {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
    cursor: pointer;
}

/* Info icon circle inside tab */
.fancy-tab-main .tab-info-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-style: italic;
    color: rgba(255,255,255,0.9);
    flex-shrink: 0;
}

/* Fancy Category Sub-tabs (All, Match, Odds/Evens, Batsman, etc.) */
.fancy-category-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-content);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
}

.fancy-category-tabs::-webkit-scrollbar { display: none; }

.fancy-cat-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background: var(--bg-content);
}

.fancy-cat-tab.active {
    background: var(--accent-green);
    color: var(--text-light);
    border-color: var(--accent-green);
    box-shadow: var(--shadow-sm);
}

.fancy-cat-tab:hover:not(.active) {
    background: #f5f5f5;
    color: var(--text-dark);
    border-color: #ccc;
}

/* Fancy Sub-nav */
.fancy-subnav {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    background: #fafafa;
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
}

.fancy-subnav::-webkit-scrollbar { display: none; }

.fancy-subnav-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-content);
    white-space: nowrap;
    transition: all 0.2s;
}

.fancy-subnav-btn.active,
.fancy-subnav-btn:hover {
    background: var(--accent-green);
    color: var(--text-light);
    border-color: var(--accent-green);
}

/* Fancy Market Header (Orange bars) */
.fancy-market-header {
    background: var(--fancy-header);
    color: var(--text-light);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.fancy-market-header .fancy-title-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fancy-market-header .fancy-title-text i {
    font-size: 12px;
    opacity: 0.8;
}

.fancy-market-header .header-info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-style: italic;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 6px;
}

.fancy-market-header .fancy-header-right {
    font-size: 11px;
    opacity: 0.8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fancy-market-header .fancy-header-right .matched-amount {
    color: var(--accent-gold);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    opacity: 1;
}

/* Fancy Odds Rows */
.fancy-row {
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-content);
    transition: background 0.15s;
}

.fancy-row:hover {
    background: #fafafa;
}

.fancy-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fancy-odds-group {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.fancy-box {
    width: 90px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.fancy-box .fancy-val {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.fancy-box .fancy-vol {
    font-size: 9px;
    opacity: 0.6;
}

/* Single wide green odds box (20wickets-style runner row) */
.fancy-box.fancy-single {
    width: 100px;
    min-height: 42px;
    padding: 4px 8px;
}

.fancy-box.fancy-yes {
    background: var(--odds-green);
    color: var(--text-dark);
}

.fancy-box.fancy-yes:hover {
    background: var(--odds-green-hover);
}

.fancy-box.fancy-no {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
}

.fancy-box.fancy-no:hover {
    background: #d0d0d0;
}

.fancy-box.fancy-suspended {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
}

.fancy-box.fancy-suspended .fancy-val {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Fancy Limits */
.fancy-limits {
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Sportsbook Markets (To Win The Match, Toss, etc.) ── */
.sportsbook-market {
    margin-bottom: 12px;
    background: var(--bg-content);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.sportsbook-market-header {
    background: var(--market-header-sb);
    color: var(--text-light);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sportsbook-market-header .sb-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sportsbook-market-header .sb-title i {
    font-size: 12px;
    opacity: 0.7;
    cursor: pointer;
}

/* Info icon circle inside sportsbook header */
.sportsbook-market-header .sb-title .header-info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-style: italic;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 6px;
}

.sportsbook-market-header .sb-meta {
    font-size: 11px;
    color: #b0bec5;
    font-weight: 500;
}

.sportsbook-market-header .sb-meta .matched-amount {
    color: var(--accent-gold);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* Sportsbook odds layout - two-column team boxes */
.sportsbook-odds-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
}

.sportsbook-odds-box {
    background: var(--odds-green);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 60px;
}

.sportsbook-odds-box:hover {
    background: var(--odds-green-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.sportsbook-odds-box .sb-team {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 4px;
}

.sportsbook-odds-box .sb-odds {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
}

.sportsbook-odds-box .sb-volume {
    font-size: 10px;
    color: #555;
    opacity: 0.7;
}

/* Sportsbook 3-column (team1 / tie / team2) */
.sportsbook-odds-grid.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ── Bookmaker Section ── */
.bookmaker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-content);
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

.bookmaker-team-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bookmaker-team-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-dark);
}

.projected-pl, .locked-pl {
    font-size: 11px;
    font-weight: 700;
}

.pl-positive { color: var(--accent-green) !important; }
.pl-negative { color: var(--accent-red) !important; }

.bookmaker-subheader-right {
    display: flex;
    gap: 40px;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    width: 200px;
    justify-content: center;
}

.bookmaker-odds-area {
    display: flex;
    gap: 3px;
    width: 200px;
    justify-content: center;
}

.bm-box {
    width: 62px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 700;
}

.bm-box.back { background: var(--back-cell); color: var(--text-dark); }
.bm-box.back:hover { background: var(--back-cell-hover); }
.bm-box.lay { background: var(--lay-cell); color: var(--text-dark); }
.bm-box.lay:hover { background: var(--lay-cell-hover); }

.bm-box .bm-val { font-size: 13px; font-weight: 800; }
.bm-box .bm-size { font-size: 9px; opacity: 0.6; }

/* ── Inline Betslip ── */
.inline-betslip-container {
    background: #f5f5f5;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    margin: 8px 0;
}

.bs-layout-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.bs-stake-section {
    flex: 1;
}

.bs-quick-stakes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.bs-quick-stakes button {
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-content);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.bs-quick-stakes button:hover {
    background: var(--back-cell);
    border-color: var(--back-header);
}

.bs-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.bs-numpad-btn {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    background: var(--bg-content);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.bs-numpad-btn:hover {
    background: #f0f0f0;
}

/* ── Modals ── */
.modal {
    display: none;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
}

.modal-content {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    margin: 8% auto;
    padding: 30px;
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius-lg);
    color: var(--text-light);
    position: relative;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.08);
}

.close {
    position: absolute;
    right: 16px;
    top: 12px;
    color: #8899a6;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover { color: var(--text-light); }

/* Login Modal */
#loginModal .modal-content {
    background: linear-gradient(145deg, rgba(26,44,56,0.98), rgba(44,62,80,0.98));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 36px 40px;
    animation: modalSlideIn 0.35s ease-out;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#loginModal .modal-header-logo {
    text-align: center;
    margin-bottom: 24px;
}

#loginModal .modal-header-logo h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-light);
}

#loginModal .modal-header-logo h2 span {
    color: var(--accent-gold);
}

#loginModal .form-group {
    margin-bottom: 16px;
    position: relative;
}

#loginModal .form-group input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#loginModal .form-group input::placeholder {
    color: rgba(255,255,255,0.35);
}

#loginModal .form-group input:focus {
    outline: none;
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(255,193,7,0.15);
}

#loginModal .form-group::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.35);
    font-size: 14px;
}

#loginModal .form-group:nth-child(1)::before { content: '\f007'; }
#loginModal .form-group:nth-child(2)::before { content: '\f023'; }

#loginModal .form-group:focus-within::before {
    color: var(--accent-gold);
}

#loginModal .forgot-link {
    text-align: right;
    margin-bottom: 16px;
}

#loginModal .forgot-link a {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

#loginModal .forgot-link a:hover { color: var(--accent-gold); }

#loginModal .btn-block {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent-gold), #ff9800);
    border: none;
    border-radius: var(--radius-md);
    color: var(--navy);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255,193,7,0.3);
    transition: all 0.2s ease;
}

#loginModal .btn-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,193,7,0.4);
}

#loginModal .btn-block:active { transform: translateY(0); }

#loginModal .close {
    right: 16px;
    top: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    font-size: 18px;
    transition: all 0.2s;
}

#loginModal .close:hover {
    background: rgba(255,255,255,0.15);
    transform: rotate(90deg);
}

/* ── User Info / Balance (Legacy Classes) ── */
.user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    color: var(--text-light);
    font-size: 11px;
    white-space: nowrap;
}

.balance-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 11px;
}

.action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

/* ── Buttons (Legacy) ── */
.btn {
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-login {
    background: var(--accent-red);
    color: var(--text-light);
}

.btn-signup {
    background: transparent;
    border: 1.5px solid var(--text-light) !important;
    color: var(--text-light);
}

.btn-deposit {
    background: var(--accent-green);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-light);
}

.btn-deposit:hover { background: #43a047; }

.btn-withdraw {
    background: var(--accent-red);
    color: var(--text-light);
}

.btn-withdraw:hover { background: #c82333; }

.btn-account {
    background: rgba(255,255,255,0.1);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-account:hover { background: rgba(255,255,255,0.2); color: var(--text-light); }

.btn-logout {
    background: rgba(255,255,255,0.1);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-logout:hover { background: rgba(255,255,255,0.2); color: var(--text-light); }

/* ── Odds Buttons (Legacy) ── */
.odds-btn {
    width: 64px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none;
}

.odds-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.odds-btn .price { font-size: 15px; font-weight: 800; }
.odds-btn .volume { font-size: 9px; opacity: 0.6; }

.odds-btn.back { background: var(--back-cell); color: var(--text-dark); }
.odds-btn.lay { background: var(--lay-cell); color: var(--text-dark); }
.odds-btn.back:hover { background: var(--back-cell-hover); }
.odds-btn.lay:hover { background: var(--lay-cell-hover); }

/* ── In-Play Pulse ── */
.pulse-live {
    color: var(--accent-red);
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}

.pulse-live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-red);
    border-radius: 50%;
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220,53,69,0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220,53,69,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

.match-time-val { font-size: 13px; font-weight: 800; color: var(--text-dark); display: block; }
.match-date-val { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

.m-card-time { font-weight: 800; font-size: 12px; }
.m-card-date { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-left: 5px; }

.match-info-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.status-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    padding-right: 20px;
    border-right: 1px solid var(--border-light);
}

.teams-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-row {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

/* ── Credit / Balance Panel (Right Sidebar) ── */
.credit-info {
    background: var(--bg-content);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.credit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.credit-box {
    padding: 8px;
    background: #f9f9f9;
    border-radius: var(--radius-sm);
}

.credit-box .label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.credit-box .value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
}

.balance-box {
    grid-column: 1 / 3;
    background: #e8f5e9;
    text-align: center;
    padding: 12px;
}

.balance-box .value { color: #2e7d32; font-size: 18px; }

/* One-Click Bet Toggle */
.one-click-bet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f5f5f5;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    gap: 8px;
}

/* Betslip Tabs */
.betslip-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-light);
}

.betslip-tab {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    transition: all 0.2s;
    white-space: nowrap;
}

.betslip-tab.active,
.betslip-tab:hover {
    color: var(--text-dark);
    border-bottom-color: var(--accent-green);
}

/* Betslip Content */
.betslip-content {
    padding: 12px;
}

.betslip-content .my-bets-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.betslip-content .my-bets-container th,
.betslip-content .my-bets-container td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}

.betslip-content .my-bets-container th {
    background: #f5f5f5;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
}

/* ── Number Game Grid ── */
.ng-number-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    padding: 8px;
}

.ng-num-btn {
    height: 50px;
    font-size: 20px;
    font-weight: 800;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-content);
    color: var(--text-dark);
}

.ng-num-btn:hover {
    background: var(--back-cell);
    border-color: var(--back-header);
}

/* ── Live Over History Balls ── */
.ball {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.over-label { font-size: 11px; }

/* ── Odds Flash Animations ── */
.flash-up {
    animation: flashUp 0.8s ease-out;
}

@keyframes flashUp {
    0% { background-color: #81c784; }
    100% { background-color: inherit; }
}

.flash-down {
    animation: flashDown 0.8s ease-out;
}

@keyframes flashDown {
    0% { background-color: #e57373; }
    100% { background-color: inherit; }
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ── Page-Level Fixes ── */
#last-sync-time {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
}

.time-display {
    font-size: 11px;
    font-weight: 600;
    color: #b0bec5;
    white-space: nowrap;
}

/* ── Transactions / Generic Page Container ── */
.container {
    max-width: 900px;
    margin: 30px auto;
    background: var(--bg-content);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.container h2 {
    margin-top: 0;
    color: var(--text-dark);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 10px;
}

.table-responsive { overflow-x: auto; }

/* Generic Badge */
.badge {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 11px;
}

.badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-danger  { background: #fde8e8; color: #c62828; }
.badge-info    { background: #e3f2fd; color: #1565c0; }
.badge-warning { background: #fff8e1; color: #f57f17; }

.text-green { color: #2e7d32; font-weight: 700; }
.text-red   { color: #c62828; font-weight: 700; }

/* ============================================================
   20WICKETS-STYLE ADDITIONS
   Market Header Variants, Matched Display, Fancy Single Box,
   Sportsbook Yes/No Layout, Desktop 6-Col Responsive
   ============================================================ */

/* ── Market Header Variants ── */

/* Match Odds header: Dark teal/navy */
.market-header-match-odds {
    background: var(--market-header) !important;
    color: var(--text-light) !important;
}

/* Sportsbook market header: Green */
.market-header-sportsbook {
    background: var(--market-header-sb) !important;
    color: var(--text-light) !important;
}

/* Fancy market header: Orange-red */
.market-header-fancy {
    background: var(--fancy-header) !important;
    color: var(--text-light) !important;
}

/* ── Matched Amount Display ── */
.matched-amount-display {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-gold);
    text-align: right;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.matched-amount-display .matched-currency {
    opacity: 0.7;
    font-weight: 500;
}

/* ── Cash Out Indicator ── */
.cash-out-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-gold);
    background: rgba(255,193,7,0.15);
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cash-out-label .cash-out-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-gold);
}

/* ── Fancy Single Odds Box (Runner + green box) ── */
.fancy-single-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-content);
    transition: background 0.15s;
}

.fancy-single-row:hover {
    background: #fafafa;
}

.fancy-single-row .fancy-runner-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fancy-single-row .fancy-single-odds {
    width: 90px;
    min-height: 38px;
    background: var(--odds-green);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 4px 8px;
}

.fancy-single-row .fancy-single-odds:hover {
    background: var(--odds-green-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.fancy-single-row .fancy-single-odds .fancy-rate {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.2;
}

.fancy-single-row .fancy-single-odds .fancy-vol {
    font-size: 9px;
    opacity: 0.6;
    color: var(--text-dark);
}

.fancy-single-row .fancy-single-odds.fancy-odds-suspended {
    background: #e0e0e0;
    cursor: not-allowed;
    pointer-events: none;
}

.fancy-single-row .fancy-single-odds.fancy-odds-suspended .fancy-rate {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
}

/* ── Sportsbook Yes/No Market Layout ── */
.sportsbook-yesno-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
}

.sportsbook-yesno-box {
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 55px;
}

.sportsbook-yesno-box.sb-yes {
    background: var(--odds-green);
}

.sportsbook-yesno-box.sb-yes:hover {
    background: var(--odds-green-hover);
}

.sportsbook-yesno-box.sb-no {
    background: #e0e0e0;
    cursor: not-allowed;
}

.sportsbook-yesno-box.sb-no-suspended {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
}

.sportsbook-yesno-box .sb-yn-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.sportsbook-yesno-box .sb-yn-odds {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
}

.sportsbook-yesno-box .sb-yn-vol {
    font-size: 10px;
    color: #555;
    opacity: 0.7;
}

/* ── Desktop 6-Column Responsive ── */
@media (min-width: 992px) {
    .match-odds-six-col {
        table-layout: fixed;
    }

    .match-odds-six-col thead th,
    .match-odds-six-col tbody td {
        min-width: 55px;
    }

    /* Hide 2-col layout on desktop when 6-col is present */
    .has-six-col .odds-boxes {
        display: none;
    }
}

/* On mobile, fall back to simple layout */
@media (max-width: 991px) {
    .match-odds-six-col {
        display: none;
    }

    .has-six-col .odds-boxes {
        display: flex;
    }
}

/* ── Fancy Market Info Tooltip ── */
.fancy-market-header .header-info-icon:hover::after,
.market-header-dark .header-info-icon:hover::after,
.sportsbook-market-header .sb-title .header-info-icon:hover::after,
.section-header .header-info-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

.fancy-market-header .header-info-icon,
.market-header-dark .header-info-icon,
.sportsbook-market-header .sb-title .header-info-icon,
.section-header .header-info-icon {
    position: relative;
}