:root {
            --bg-dark: #0b0d0e;
            --sidebar-bg: #121517;
            --card-bg: #1a1d21;
            --accent-green: #00ff88;
            --text-main: #ffffff;
            --text-dim: #94a3b8;
            --border: #2d323a;
            --odds-bg: #262a30;
            --footer-bg: #000000;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; overflow-x: hidden; }

        /* Header */
        header { background: #000; padding: 12px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1001; }
        .header-flex { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
        .logo { font-size: 22px; font-weight: 800; color: white; text-decoration: none; }
        .logo span { color: var(--accent-green); }
        .nav-links { display: flex; gap: 20px; }
        /*
        .nav-links a { color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 600; }
        */
        .nav-links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease; /* Smooth transition for everything */
    position: relative;
}

.nav-links a:hover {
    color: var(--accent-green);
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4); /* Subtle green glow */
}

/* Optional: Add a small sliding underline */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent-green);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

        .banner-top { background: #1a1a1a; width: 468px; height: 60px; border: 1px solid #333; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #555; border-radius: 4px; }

        /* Mobile Sidebar Toggles */
        .mobile-drawer-toggles { display: none; background: var(--sidebar-bg); padding: 10px; border-bottom: 1px solid var(--border); justify-content: space-between; position: sticky; top: 58px; z-index: 999; }
        .drawer-btn { background: var(--odds-bg); border: 1px solid var(--border); color: white; padding: 8px 15px; border-radius: 4px; font-size: 12px; cursor: pointer; }

        /* Layout */
        .container { max-width: 1440px; margin: 0 auto; padding: 0 15px; }
        .main-layout { display: grid; grid-template-columns: 200px 1fr 200px; gap: 20px; margin-top: 20px; }

        /* Sidebars */
        .sidebar { background: var(--sidebar-bg); border-radius: 8px; padding: 15px; border: 1px solid var(--border); align-self: start; overflow-y: auto;}
        .sidebar h3 { font-size: 11px; text-transform: uppercase; color: var(--accent-green); margin-bottom: 12px; border-bottom: 1px solid #222; padding-bottom: 5px; }
        /*
        .sidebar a { color: #cbd5e1; text-decoration: none; display: block; padding: 5px 0; font-size: 13px; }
        */
        .sidebar a {
    color: #cbd5e1;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    font-size: 13px;
    transition: all 0.2s ease-in-out;
}

.sidebar a:hover {
    color: var(--accent-green);
    padding-left: 8px; /* Slides the text to the right */
    background: rgba(0, 255, 136, 0.05); /* Very faint background highlight */
}
        .sidebar-banner { background: #111; border: 1px dashed #333; height: 250px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #444; margin: 15px 0; border-radius: 4px; }

        /* Match Content */
        .filter-bar { background: var(--sidebar-bg); padding: 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
        .market-select { background: var(--odds-bg); color: white; border: 1px solid var(--border); padding: 6px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; }

        /*
        .match-row { background: var(--card-bg); border: 1px solid var(--border); margin-bottom: 4px; display: flex; align-items: center; padding: 10px 15px; border-radius: 6px; }
        */
.match-row {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    position: relative;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none; /* In case you wrap it in an <a> */
}

/* Hover effect for the whole row */
.match-row:hover {
    background: #1e2227; /* Slightly lighter */
    border-color: #4a515a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Highlight the team names when the row is hovered */
.match-row:hover .team-name {
    color: var(--accent-green);
}
        .time-info { width: 250px; font-size: 11px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
        .date-tag { color: var(--text-main); font-weight: 800; }
        
        .teams-area { flex-grow: 1; display: flex; font-weight: 700; padding: 0 20px; font-size: 14px; }
        .team-home { text-align: right; flex: 1; }
        .team-away { text-align: left; flex: 1; }
        .vs { color: var(--accent-green); font-size: 10px; padding: 0 10px; opacity: 0.5; }

        /*.odds-area { display: flex; gap: 6px; }*/
        .odds-area { justify-content: space-between; flex-wrap: wrap; }
        /*
        .odd-box { background: var(--odds-bg); width: 60px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid transparent; }
        */
        /* Update your .odd-box CSS */
.odd-box {
    background: var(--odds-bg);
    width: 60px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
}

.odd-box:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
}

/* Change text color inside the box on hover */
.odd-box:hover .val {
    color: #000 !important; /* Make the numbers black when background is green */
}

.odd-box:hover .label {
    color: rgba(0, 0, 0, 0.6) !important;
}
        .odd-box .val { color: var(--accent-green); font-weight: 800; font-size: 13px; }
        .odd-box .label { font-size: 9px; color: var(--text-dim); }

        #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1500; }

        /* --- RESTORED PROFESSIONAL FOOTER --- */
        footer {
            background: var(--footer-bg);
            border-top: 1px solid var(--border);
            padding: 60px 0 30px;
            margin-top: 60px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
        }
        .footer-col h4 {
            color: white;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            border-left: 3px solid var(--accent-green);
            padding-left: 10px;
        }
        .footer-logo-area p {
            font-size: 13px;
            color: var(--text-dim);
            margin-top: 15px;
            line-height: 1.6;
            max-width: 320px;
        }
        .footer-col ul { list-style: none; }
        .footer-col ul li { margin-bottom: 12px; }
        .footer-col ul li a {
            color: var(--text-dim);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.2s;
        }
        .footer-col ul li a:hover { color: var(--accent-green); }

        .footer-bottom {
            margin-top: 50px;
            padding-top: 25px;
            border-top: 1px solid #1a1d21;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #444;
            font-size: 12px;
        }

        @media (max-width: 1024px) {
            .main-layout { grid-template-columns: 1fr; }
            .banner-top { display: none; }
            .mobile-drawer-toggles { display: flex; }
            .sidebar { position: fixed; top: 0; height: 100vh; width: 260px; z-index: 2000; transition: 0.3s; border-radius: 0; display: block; visibility: hidden; }
            .left-sidebar { left: -260px; }
            .right-sidebar { right: -260px; }
            .sidebar.active { visibility: visible; }
            .left-sidebar.active { left: 0; }
            .right-sidebar.active { right: 0; }
            #overlay.active { display: block; }
            .match-row { flex-direction: column; align-items: stretch; padding: 15px; }
            .time-info { width: 100%; justify-content: space-between; border-bottom: 1px solid #222; padding-bottom: 8px; margin-bottom: 8px; }
            .teams-area { padding: 10px 0 15px; }
            /*
            .odds-area { justify-content: space-between; flex-wrap: wrap; }
            */
            .odd-box { flex: 1; min-width: 30%; }

            /* Footer Mobile Fix */
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-logo-area { grid-column: span 2; margin-bottom: 20px; }
            .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
        }
/* Alert Ribbon Grid */
.alert-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

/* Individual Alert Box */
.alert-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 8px;
    border-top: 2px solid var(--accent-green);
    transition: transform 0.2s;
}

.alert-box:hover {
    transform: translateY(-2px);
    border-color: #444;
}

/* Data Lines */
.alert-opponents {
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.alert-meta {
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.alert-market {
    font-size: 10px;
    color: var(--accent-green);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-option {
    font-size: 11px;
    color: #fff;
    margin-bottom: 4px;
}

.alert-odds {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.old-odd {
    font-size: 11px;
    color: var(--text-dim);
    text-decoration: line-through;
}

.new-odd {
    font-size: 13px;
    font-weight: 800;
}

.odd-up { color: var(--accent-green); }
.odd-down { color: #ff4444; }

.alert-supplier {
    font-size: 9px;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .alert-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .alert-ribbon {
        grid-template-columns: 1fr;
    }
} 

/* Style for the Details container */
details {
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

/* Header style */
details summary {
    list-style: none;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    background: var(--card-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

details summary::-webkit-details-marker { display: none; }

/* Arrow rotation */
details summary::after {
    content: '▼';
    font-size: 8px;
    color: var(--text-dim);
    transition: transform 0.2s;
}

details[open] summary::after {
    transform: rotate(180deg);
    color: var(--accent-green);
}

/* Link List Container */
.details-links {
    display: flex;
    flex-direction: column;
    padding: 5px 0; /* Vertical space for the list */
}

/* Individual Links inside details */
.details-links a {
    display: block;
    padding: 8px 15px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}

/* Hover Effect for Links */
.details-links a:hover {
    background: rgba(0, 255, 136, 0.05);
    color: var(--accent-green);
    padding-left: 20px; /* Slight slide effect */
}

/* Remove border from the last link */
.details-links a:last-child {
    border-bottom: none;
}

.summary-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The Count Badge */
.count-badge {
    background: var(--odds-bg);
    color: var(--accent-green);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-weight: 800;
}

/* Hover effect for the badge when the row is hovered */
details summary:hover .count-badge {
    border-color: var(--accent-green);
    background: #000;
}

/* Update summary to handle the new layout */
details summary {
    list-style: none;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    background: var(--card-bg);
    display: flex;
    justify-content: space-between; /* Pushes meta to the right */
    align-items: center;
}

/* Make the whole box act like a link */
.alert-box-link {
    text-decoration: none; /* Removes underline from all child text */
    display: block; /* Ensures it fills the grid cell */
    color: inherit; /* Inherits main text color */
}

.alert-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 8px;
    border-top: 2px solid var(--accent-green);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    height: 100%; /* Ensures all boxes in a row are same height */
}

/* Hover State for the whole box */
.alert-box-link:hover .alert-box {
    background: #252a30; /* Slightly lighter background */
    border-color: var(--accent-green);
    transform: translateY(-3px); /* Lifts the card */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Adds depth */
}

/* Ensure text doesn't look like a link */
.alert-box-link:hover .alert-opponents {
    color: var(--accent-green); /* Highlights teams on hover */
}

/* Back to Top Button */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--accent-green);
    color: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none; /* Hidden by default */
    z-index: 2000;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
    transition: all 0.3s ease;
}

#backToTop:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    background: #fff; /* Flashes white on hover */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    #backToTop {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* Wrapper for the odd-box to make it clickable */
.odd-link {
    text-decoration: none;
    display: block; /* Ensures the link fills the same area as the box */
    outline: none;
}

/* Base odd-box style (Modified for links) */
.odd-box {
    background: var(--odds-bg);
    width: 60px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Hover effect: The box turns green, text turns black */
.odd-link:hover .odd-box {
    background: var(--accent-green);
    border-color: var(--accent-green);
    transform: scale(1.05); /* Slight pop-out effect */
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* Color changes inside the box on hover */
.odd-link:hover .val {
    color: #000 !important;
}

.odd-link:hover .label {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Active state (when clicked) */
.odd-link:active .odd-box {
    transform: scale(0.95); /* Squeeze effect on click */
}

.odds-area {
    display: flex;
    gap: 8px;
    margin-left: auto;
    z-index: 2; /* Keeps buttons above the row's click area */
}

/* Adjusting the odd-link to ensure it feels like a separate button */
.odd-link {
    position: relative;
    z-index: 3; /* Highest priority */
}

/* Game Header */
.game-header {
    background: linear-gradient(180deg, #1e2227 0%, var(--card-bg) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    margin-bottom: 20px;
}

.game-meta-top {
    font-size: 12px;
    color: var(--accent-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.game-main-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.game-team {
    font-size: 22px;
    font-weight: 800;
    color: white;
    flex: 1;
}

.game-vs {
    background: var(--border);
    color: var(--text-dim);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.game-description {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* Optional: Highlight specific words if needed */
.game-description strong {
    color: var(--accent-green);
    font-weight: 600;
}

/* Market Section */
.market-block {
    margin-bottom: 20px;
}

.market-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.market-title::after {
    content: "";
    height: 1px;
    background: var(--border);
    flex: 1;
}

/* Outcome Sub-blocks (Home / Draw / Away) */
.outcome-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1, X, 2 */
    gap: 15px;
}

.outcome-subblock {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

.outcome-label {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

/* Supplier Grid (Inside each Outcome) */
.supplier-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px; /* Limits height, scroll if 20+ */
    overflow-y: auto;
    padding-right: 5px;
}

/* Custom Scrollbar for Supplier List */
.supplier-grid::-webkit-scrollbar { width: 4px; }
.supplier-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.supplier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    text-decoration: none;
    transition: 0.2s;
}

.supplier-row:hover {
    background: var(--border);
}

.supplier-name {
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 600;
}

.supplier-time {
    font-size: 9px;
    color: #cbd5e1;
    font-weight: 600;
}


.supplier-odd {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-green);
}

/* Responsive */
@media (max-width: 900px) {
    .outcome-container { grid-template-columns: 1fr; }
    .game-team { font-size: 18px; }
}

/* 404 Container */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 50vh;
}

.error-code {
    font-size: 120px;
    font-weight: 900;
    color: var(--accent-green);
    line-height: 1;
    margin: 0;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    position: relative;
}

.error-message {
    font-size: 24px;
    color: white;
    margin: 20px 0 10px 0;
    font-weight: 700;
}

.error-description {
    color: var(--text-dim);
    font-size: 14px;
    max-width: 400px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Back to Home Button */
.btn-home {
    background: var(--accent-green);
    color: #000;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2);
}

.btn-home:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
    background: #fff;
}

/* Pulse animation for the 404 */
@keyframes pulse-glow {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.error-code {
    animation: pulse-glow 2s infinite ease-in-out;
}

.contact-info-footer {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.email-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--odds-bg);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: 50px; /* Pill shape */
    color: var(--text-dim);
    font-size: 13px;
    transition: all 0.3s ease;
}

.email-chip:hover {
    border-color: var(--accent-green);
    color: white;
}

.email-chip strong {
    color: var(--accent-green);
    font-family: monospace;
    font-size: 14px;
}

/* Hide from bots technique */
.rev-email {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/* Hide Top Banner on Mobile Devices */
@media (max-width: 768px) {
    .banner-top {
        display: none !important;
    }

    /* Adjust the spacing of the content below it */
    .central-content {
        margin-top: 10px; /* Optional: adds a little breathing room at the top */
    }
}

.jumbotron-row {
    position: relative;
    background: #0d1117; /* Deep card background */
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 50px 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

/* Digital Screen Effect (Scanlines) */
.jumbotron-row::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 4px;
    z-index: 1;
    pointer-events: none;
}

.jumbotron-content {
    position: relative;
    z-index: 2;
}

.status-badge {
    font-size: 38px;
    font-weight: 900;
    color: var(--accent-green);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.status-message {
    color: var(--text-dim);
    font-size: 15px;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Home Button Style */
.btn-return-home {
    background: var(--accent-green);
    color: #000;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.btn-return-home:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap; /* Allows items to drop to next line if needed */
    gap: 10px;
    align-items: center;
    padding: 10px;
}