/* ──────────────────────────────────────────────────────────────
   OléBall Light UI — keeps your current structure/logic
   Palette from logo: royal blue + warm gold on clean whites
   ────────────────────────────────────────────────────────────── */

:root {
    --ole-blue: #0a4ea3; /* royal blue */
    --ole-blue-600: #114484;
    --ole-gold: #f2b705; /* warm gold */
    --ink: #0f172a; /* title text */
    --muted: #475569; /* body text */
    --bg: #f7fafc; /* page background */
    --card: #ffffff; /* surfaces/cards */
    --soft-blue: #e8f1ff; /* subtle blue bg */
    --soft-gold: #fff6db; /* subtle gold bg */
    --border: #e2e8f0; /* borders */
    --border-strong: #d6dee9;
    --hover: #fef7e6; /* row hover */
    --success: #23a26d;
    --danger: #c62828;
    --shadow: 0 10px 24px rgba(16, 24, 40, .06);
    --radius: 12px;
    --sticky-top: 66px;
    --affix-top: 0px; /* try 0 first; if it overlaps, try 8px or 12px */
    --thead-h: 44px;
    --odds-col-w: 210px; /* overall column width (was ~260). Try 200–220 */
    --odds-top-fs: 13px; /* main numbers size */
    --odds-bot-fs: 11px; /* secondary numbers size */
    --odds-gap: 4px; /* space between the 3 blocks */
    --odds-pad-x: 4px;
    --odds-popup-w: 720px; /* overall width (try 640–760) */
    --odds-popup-maxh: 68vh; /* max height before it scrolls */
    --odds-th-fs: 13px; /* table header font size */
    --odds-td-fs: 13px; /* table cell font size */
    --odds-pad: 8px; /* table cell padding */
    --odds-head-fs: 14px; /* header title size */
    --odds-head-pad-y: 8px; /* header paddings */
    --odds-head-pad-x: 10px;
    --ob-deep: #0b1f3a; /* deep blue */
    --ob-gold: #f1a226; /* warm gold */
    --ob-ring: rgba(11,31,58,.10);
    --ob-border: #cfd8ea; /* soft blue-gray outline */
    --ole-blue-700: #0b1e3a; /* page bg */
    --ole-blue-650: #11325d; /* deep components */
    --ole-blue-600: #154079; /* primary */
    --ole-blue-500: #1d58a6;
    --ole-gold-500: #f1a226; /* FT */
    --ole-gold-650: #c98519;
}

/* Page */
body{
  font-family: ui-sans-serif, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  margin:0; padding:0;
  color: var(--muted);
  background: var(--bg);
}

/* Header */
header {
  background:#fff;
  color:var(--ink);
  padding:10px 22px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  position:sticky; 
  top:0; 
  z-index:100;
}

.logo{ display:flex; align-items:center; gap:0px; }
.logo-img{ height:66px; width:auto; display:block; }
.logo-text{ font-weight:800; font-size:28px; color:var(--ole-blue); letter-spacing:.2px; }
.logo-text b{ color:var(--ole-gold); font-weight:800; }

/* Nav */
nav{
  display:flex; align-items:center; gap:18px;
  padding:6px 10px;
  margin-left:-202px;
}
nav a{
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  position:relative;
  padding:8px 10px;
  border-radius:8px;
  transition:.2s ease;
}
nav a:hover{ background:var(--soft-blue); }
nav a.active{ color:var(--ole-blue); }
nav a.active::after,
nav a:hover::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--ole-blue),var(--ole-gold));
  border-radius:2px;
}
/* =====================================================
   Home header — mobile nav like detail page
   ===================================================== */

/* base layout already exists:
   header, .logo, nav, .auth-buttons
*/

/* hamburger button base (hidden on desktop) */
.nav-toggle {
    display: none;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
}

    .nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: var(--ole-blue-600);
        margin: 3px 0;
    }

/* dropdown panel with all nav items */
.mobile-nav-panel {
    display: none;
    position: absolute;
    right: 10px;
    top: 100%;
    margin-top: 6px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(15,23,42,.18);
    padding: 6px 0;
    min-width: 210px;
    z-index: 1000;
}

    .mobile-nav-panel a {
        display: block;
        padding: 8px 14px;
        font-size: 14px;
        color: var(--ink);
        text-decoration: none;
    }

        .mobile-nav-panel a:hover {
            background: #f7fbff;
            color: var(--ole-blue-600);
        }

    .mobile-nav-panel.open {
        display: block;
    }

/* show dropdown only on mobile, hide on desktop */
@media (min-width: 769px) {
    .mobile-nav-panel {
        display: none !important;
    }
}

/* Auth buttons (kept) */
.auth-buttons{ display:flex; gap:12px; }
.auth-buttons a{ color:var(--ink); font-weight:700; }
.auth-buttons a:last-child{
  background:var(--ole-blue);
  color:#fff; padding:8px 14px; border-radius:999px;
  box-shadow: 0 4px 10px rgba(10,78,163,.15);
}
.auth-buttons a:last-child:hover{ filter:brightness(.95); }

/* Layout columns */
.container {
    display: flex;
    gap: 16px;
    align-items: stretch; /* was flex-start */
    padding: 18px 12px 28px;
    max-width: 1280px;
    margin: 0 auto;
}


.left-sidebar{ flex:0 0 220px !important; }
.right-sidebar{ flex:0 0 340px !important; }
.main-content{ flex:1 1 auto; min-width:0; }

/* Sidebar cards */
.sidebar h4{
  margin:0;
  padding:10px 12px;
  background:#fff;
  color:var(--ole-blue);
  border-left:6px solid var(--ole-gold);
  border-radius:10px 10px 0 0;
  border:1px solid var(--border);
  border-bottom:0;
  font-weight:800;
}
.sidebar ul{ list-style:none; padding:0; margin:0; border:1px solid var(--border); border-top:0; border-radius:0 0 10px 10px; overflow:hidden; background:#fff; }
.sidebar li{
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.sidebar li:hover{ background:#f8fbff; }

/* Ads as soft cards */
.bottom-ad,.top-ad{
  background:#fff; border:1px dashed var(--border-strong);
  color:var(--muted);
  border-radius:var(--radius);
  min-height:110px; display:flex; align-items:center; justify-content:center;
}
/*.ad-banner {
    position: fixed;
    z-index: 1;
}
.ad-banner1 {
    position: fixed;
    z-index: 1;
    top:648px;

}
*/

/* the sidebar column */
.left-sidebar,
.right-sidebar {
    position: relative; /* keep normal layout */
}

/* the ad box */
.ad-banner {
    position: sticky; /* <-- key */
    top: 90px; /* distance from top (adjust to your header height) */
    z-index: 1; /* must be positive so it stays on top */
}
.ad-banner1 {
    position: sticky; /* <-- key */
    top: 90px; /* distance from top (adjust to your header height) */
    z-index: 2; /* must be positive so it stays on top */
}
    /* image */
    .ad-banner img {
        width: 100%;
        height: auto;
        display: block;
    }

/* the sidebar column */
/*.left-sidebar,
.right-sidebar {
    align-self: stretch;
}*/

/* the ad box */
/*.ad-banner {
    position: sticky;*/ /* <-- key */
    /*top: 90px;*/ /* distance from top (adjust to your header height) */
    /*z-index: 5;*/ /* must be positive so it stays on top */
/*}*/

    /* image */
    /*.ad-banner img {
        width: 100%;
        height: auto;
        display: block;
    }*/



/* Tabs above table */
.tabs{ display:flex; gap:12px; margin:6px 0 10px; }
.tabs a{
  font-weight:700; color:var(--ink); text-decoration:none;
  background:#fff; border:1px solid var(--border); padding:6px 12px; border-radius:999px;
}
.tabs a:hover{ border-color:var(--ole-blue); }
.tabs a.active{ color:#fff; background:linear-gradient(90deg,var(--ole-blue),var(--ole-gold)); border-color:transparent; }
.tabs a.active{ color:#fff; background:linear-gradient(90deg,var(--ole-blue),var(--ole-gold)); border-color:transparent; }
/* Match table wrapper (card) */
.match-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    font-size: 13px;
    box-shadow: var(--shadow);
    table-layout: fixed;
}



.match-table td{
  padding:3px 0px; border-bottom:1px solid #f1f5f9; line-height:1.4; color:var(--ink);
}

.match-table tr:nth-child(even){ background:#fcfdff; }
.match-table tbody tr.match-row:hover{
  background:var(--hover); transform:none; cursor:pointer; position:relative; z-index:1;
}

/* Columns alignment (kept) */
.match-table td:nth-child(2){ text-align:right; }   /* home */
.match-table td:nth-child(3){ text-align:center; } /* score */
.match-table td:nth-child(4){ text-align:left; }   /* away */


.league-header{
  background:#f0f4ff; 
  color:var(--ole-blue); 
  font-weight:900;
  padding:8px 10px; 
  text-align:left; 
  border-bottom:1px solid var(--border);
}
    .league-header .fav-toggle {
        border: none;
        background: transparent;
        padding: 0;
        margin-right: 6px;
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        vertical-align: middle;
    }

        .league-header .fav-toggle .star-icon {
            display: inline-block;
            font-size: 16px;
            color: #666;
            transition: transform .15s ease, filter .15s ease;
        }

        .league-header .fav-toggle.is-favorite .star-icon {
            color: #f1a226; /* OleBall gold */
            filter: drop-shadow(0 0 2px rgba(0,0,0,.4));
        }

        .league-header .fav-toggle:hover .star-icon {
            transform: scale(1.1);
        }

/* Score tag */
/*.ScoreBox{
  color:#fff !important; background:var(--ole-blue-600);
  border-radius:6px; padding:1px 1px; min-width:30px; display:inline-block;
  font-size:12px; font-weight:800; letter-spacing:-0.9px;
}*/
/* Base */
.ScoreBox {
    --sb-bg: var(--ole-blue-600);
    --sb-fg: #fff;
    --sb-border: #0a254a; /* dark blue rim */
    --sb-shadow: rgba(0,0,0,.32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    padding: 3px 5px;
    font: 800 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    font-variant-numeric: tabular-nums;
    color: var(--sb-fg) !important;
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: 5px;
    text-align: center;
    letter-spacing: -.2px;
    box-shadow: 0 1px 5px var(--sb-shadow), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.22);
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

    /* Subtle hover/focus without changing hue */
    .ScoreBox:hover,
    .ScoreBox:focus {
        box-shadow: 0 3px 10px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.24);
    }

    /* Variants that stay in dark-blue family */
    .ScoreBox.neutral {
        --sb-bg: var(--ole-blue-650);
        --sb-border: #0e2b52;
    }

    .ScoreBox.live {
        --sb-bg: var(--ole-blue-500);
        --sb-border: #12386b;
    }

    .ScoreBox.ht {
        --sb-bg: #1b3564;
        --sb-border: #10274a;
    }
    /* deeper blue */
    /* FT keeps your warm gold but still fits dark theme with darker border */
    .ScoreBox.ft {
        --sb-bg: var(--ole-gold-500);
        --sb-border: var(--ole-gold-650);
        --sb-fg: #1a1305;
        text-shadow: none;
    }

    /* Sizes */
    .ScoreBox.sm {
        min-width: 28px;
        padding: 1px 6px;
        font-size: 11px;
        border-radius: 8px;
    }

    .ScoreBox.lg {
        min-width: 42px;
        padding: 3px 10px;
        font-size: 14px;
        border-radius: 10px;
    }


/* Tips icon area */
.tips-cell{ padding:0; text-align:center; vertical-align:middle; }
.tips-wrapper{ display:flex; justify-content:center; align-items:center; height:100%; }
.tips-icon{ max-height:23px; display:block; }

/* Odds cells — tidy mono numbers */
.match-table td:nth-child(8),
td.col-odds, td.odds-cell {
    min-width: 80px;
    border-left: 1px dashed #f1d69b;
    background: #fff;
    border-left: 1px solid #e3ecff; /* subtle divider */
    text-align: center !important;
    transition: background-color .15s ease, box-shadow .15s ease;
    background: transparent;
    border-left: 1px solid #e3ecff;
    text-align: center !important;
    padding-left: var(--odds-pad-x);
    padding-right: var(--odds-pad-x);
}


.odds-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(20px,1fr));
    column-gap: 2px;
    align-items: center;
}
/*.odds-grid .pair{ display:grid; grid-template-rows:auto auto; justify-items:center; border-right:1px solid #ffe9b8; padding-right:2px; }
.odds-grid .pair:last-child{ border-right:0; padding-right:0; }
.odds-grid .top{ color:#b30000; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; font-weight:700; }
.odds-grid .bot{ color:var(--ole-blue-600); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; font-weight:700; font-size:12px; opacity:.9; }*/
    .odds-grid .pair:nth-child(1) .top,
    .odds-grid .pair:nth-child(3) .top {
        color: var(--ole-blue);
        /*        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
*/       font-weight: 700;
        font-variant-numeric: tabular-nums; /* fixed-width digits */
        font-size: 12px;
        letter-spacing: .15px;
    }

    /* Line / handicap (middle column) = gold highlight */
    .odds-grid .pair:nth-child(2) .top {
        color: var(--ole-gold);
        /*font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;*/
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: .15px;
    }

    /* Secondary (bottom row numbers / small text) */
    .odds-grid .bot {
        color: #3b5aa6; /* softer blue */
        /*font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;*/
        font-weight: 700;
        font-size: 12px;
        opacity: .9;
    }
    .odds-grid .pair {
        border-right: 1px solid #e8efff;
        padding-right: 6px;
    }

        .odds-grid .pair:last-child {
            border-right: 0;
            padding-right: 0;
        }
.match-table td:nth-child(8):hover,
td.col-odds:hover, td.odds-cell:hover {
    background: #f5f9ff; /* soft blue */
    box-shadow: inset 0 0 0 1px #ffe29b;
}

/* If you still want red/green for movement deltas, scope it narrowly: */
.odds-up {
    color: #15803d !important;
}
/* optional */
.odds-down {
    color: #b91c1c !important;
}

/* optional */
/* Odds popup/card (kept, polished) */
.odds-card-wrap {
    position: fixed;
    inset: auto;
    z-index: 99999;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(16,24,40,.18);
    border: 1px solid var(--border-strong);
    width: var(--odds-popup-w) !important;
    max-height: var(--odds-popup-maxh);
    overflow: hidden; /* header fixed, body scrolls */
    display: flex;
    flex-direction: column;
    right: 16px;
    left: auto;
    top: 90px; /* keep to the right; adjust top if needed */
    transform: none;
}
.odds-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fbff;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--ole-blue);
    padding: var(--odds-head-pad-y) var(--odds-head-pad-x);
    font-size: var(--odds-head-fs);
}
.odds-card__body {
    overflow: auto;
}
/* if you have this wrapper */

.odds-card__badge{ background:#ffd75a; border-radius:6px; padding:2px 8px; font-weight:800; }

/* Bookmaker tables inside popup */
.odds-card-wrap .odds-table{ font-size:13px; border-collapse:collapse; background:#fff; width:100%; }
.odds-card-wrap .odds-table th{ background:#f2f6ff; font-weight:800; }
.odds-card-wrap .odds-table th, .odds-card-wrap .odds-table td{ border:1px solid var(--border-strong); padding:1px; white-space:nowrap; text-align:center; }


/* About, book section */
/*.bookmaker-section, .about-us{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow: var(--shadow);
}
.bookmaker-section h4, .about-us h2{ color:var(--ole-blue); margin:0 0 10px 0; }*/

/*ads section*/
/*.bookmaker-section1 {
    position: fixed;
    z-index: 1;
}
.bookmaker-section {
    position: fixed;
    z-index: 1;
    top: 310px;
}
*/



/* the ad box */
.bookmaker-section {
    position: sticky; /* <-- key */
    top: 90px; /* distance from top (adjust to your header height) */
    z-index: 3; /* must be positive so it stays on top */
}

.bookmaker-section1 {
    position: sticky; /* <-- key */
    top: 90px; /* distance from top (adjust to your header height) */
    z-index: 2; /* must be positive so it stays on top */
}
/* image */
.bookmaker-section img {
    width: 100%;
    height: auto;
    display: block;
}




/* Badges & pills (optional helpers) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
}
.badge--live{ background:var(--soft-gold); color:#9a6b00; }
.badge--hot{ background:var(--soft-blue); color:var(--ole-blue); }

/* Links inside cells keep table color */
.match-table td a{ color:inherit; text-decoration:none; }
.match-table td a:hover{ text-decoration:none; }

/* Buttons (optional) */
.btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer; transition:.2s ease;
}
.btn:hover{ border-color:var(--ole-blue); background:#f5f9ff; }
.btn.primary{ background:linear-gradient(90deg,var(--ole-blue),var(--ole-gold)); border:0; color:#fff; }
.btn.primary:hover{ filter:brightness(.98); }

/* Responsive */
@media (max-width: 1200px){
  .right-sidebar{ flex:0 0 300px !important; }
}
@media (max-width: 1024px){
  .container{ flex-wrap:wrap; }
  .left-sidebar{ order:2; flex:1 1 100% !important; }
  .right-sidebar{ order:3; flex:1 1 100% !important; }
  .main-content{ order:1; }
  .match-table thead th{ top:64px; }
}
@media (max-width: 768px) {
    /* header reflow for mobile */
    .home-header {
        padding: 8px 10px;
        flex-wrap: nowrap;
        align-items: center;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: #fff; /* light OleBall blue */
        border-bottom: 1px solid #d5e2ff;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
        transition: transform 0.18s ease-out;
    }

    .home-header--hidden {
        transform: translateY(-100%);
    }

    .home-header .logo-img {
        height: 52px;
    }

    .home-header .nav-row {
        width: 100%;
        max-width: 420px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .home-header .main-nav {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 6px;
        margin-left: 0;
        justify-content: center;
    }

        /* “3 squeeze more” – only show first 3 on the bar */
        .home-header .main-nav a {
            font-size: 13px;
            padding: 6px 4px;
            white-space: nowrap;
        }

            .home-header .main-nav a:nth-child(n+4) {
                display: none; /* hide Predictions / Ads / Supporter on the bar */
            }

    .home-header .auth-buttons {
        display: none;
    }

    .home-header .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .home-header .mobile-nav-panel {
        right: 12px;
    }

    /* ===== Table: squeeze + hide ID column on mobile ===== */

    .match-table {
        font-size: 12px;
    }

        .match-table thead th,
        .match-table td {
            padding: 4px 2px;
        }

            /* hide 8th column (ID / Odds) */
            .match-table th:nth-child(8),
            .match-table td:nth-child(8) {
                display: none;
            }
    /* Fully use the width on mobile (no empty ID column space) */
    .match-table {
        font-size: 12px;
        table-layout: auto;
    }

        /* reset widths so we can re-distribute */
        .match-table thead th,
        .match-table tbody td {
            width: auto;
        }

            /* Time */
            .match-table thead th:nth-child(1),
            .match-table tbody td:nth-child(1) {
                width: 12%;
            }

            /* Home */
            .match-table thead th:nth-child(2),
            .match-table tbody td:nth-child(2) {
                width: 29%;
                white-space: normal;
                word-break: break-word; /* allow long team names to wrap */
            }

            /* Score */
            .match-table thead th:nth-child(3),
            .match-table tbody td:nth-child(3) {
                width: 10%;
                text-align: center;
            }

            /* Away */
            .match-table thead th:nth-child(4),
            .match-table tbody td:nth-child(4) {
                width: 29%;
                white-space: normal;
                word-break: break-word;
            }

            /* Tips, TC, HT – narrow */
            .match-table thead th:nth-child(5),
            .match-table tbody td:nth-child(5),
            .match-table thead th:nth-child(6),
            .match-table tbody td:nth-child(6),
            .match-table thead th:nth-child(7),
            .match-table tbody td:nth-child(7) {
                width: 10%;
                text-align: center;
            }

        /* extra safety: hide ID/odds by class too */
        .match-table th.col-id,
        .match-table td.col-odds {
            display: none;
        }
}


    /* keep your existing behaviour */
    .tabs {
        flex-wrap: wrap;
    }

    .odds-grid {
        grid-template-columns: repeat(3, minmax(44px,1fr));
        column-gap: 4px;
    }

    .ScoreBox {
        border-radius: 6px;
    }
}

.match-table thead th {
    background: #fff;
    color: var(--ink);
    padding: 6px 6px;
    text-align: center;
    font-weight: 800;
    border-bottom: 1px solid var(--border);
    position: static; /* <— important: no sticky */
    top: auto;
    z-index: 1;
}
/* League bar row stays UNDER the header */
.league-header {
    position: static; /* no sticky */
    top: auto;
    z-index: 1;
    background: linear-gradient(180deg,#f6f8ff, #eef3ff);
    box-shadow: inset 0 -1px 0 #e2e8f0;
}

.match-table td.col-home:hover,
.match-table td.col-score:hover,
.match-table td.col-away:hover,
.match-table td.col-tips:hover,
.match-table td.col-tc:hover,
.match-table td.col-ht:hover,
.match-table td.col-odds:hover,
.match-table td.odds-cell:hover {
    cursor: pointer;
    color: red;
    text-decoration: none;
}

/*hover zoom function*/
.match-table tbody tr.match-row {
    transition: background-color 0.1s ease, transform 0.1s ease;
}

.match-table tbody tr.match-row:hover {
    background-color: #fdf3d5;
    transform: scale(1.01);
    cursor: default;
    position: relative;
    z-index: 40;
}
.match-row {
    position: relative;
    z-index: 1;
}


.odds-cell {
    position: relative;
}

    .odds-cell .odds-hover {
        position: absolute;
        inset: 0;
        display: block;
        z-index: 2;
        background: transparent;
        text-decoration: none;
        color: inherit;
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/*a[data-tab="result"] {
    margin-left: 20px;
    position: relative;
}
    a[data-tab="result"]::before {
        content: "";
        position: absolute;
        left: -16px;*/ /* Position from the left */
        /*top: 3px;*/ /* Position from top */
        /*bottom: 3px;*/ /* Position from bottom */
        /*width:2px;*/ /* Line thickness */
        /*background:linear-gradient(360deg,var(--ole-blue),var(--ole-gold));
        border-color: transparent;
    }*/

.date-pick {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

    /* Base pill look (match tabs idle) */
    .date-pick .btn,
    .date-pick input[type="date"] {
        appearance: none;
        -webkit-appearance: none;
        background: #fff;
        color: var(--ob-deep);
        border: 1px solid var(--ob-border);
        border-radius: 999px;
        padding: .48rem .9rem;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
    }

        /* Hover focus */
        .date-pick .btn:hover,
        .date-pick input[type="date"]:hover {
            border-color: var(--ob-deep);
            box-shadow: 0 0 0 3px var(--ob-ring);
        }

        .date-pick input[type="date"]:focus {
            outline: none;
            border-color: var(--ob-deep);
            box-shadow: 0 0 0 4px var(--ob-ring);
        }

        /* Active pill — same as homepage tab “All” gradient */
        .date-pick .btn.is-active {
            color: #fff;
            background: linear-gradient(90deg,var(--ole-blue),var(--ole-gold));
            border-color: transparent;
        }

        /* Keep Today/Yesterday just using the same active style (no special color override) */
        .date-pick .btn.btn-today.is-active,
        .date-pick .btn.btn-yesterday.is-active { /* inherit gradient */
        }

    /* Make the Go button compact so it doesn’t dominate */
    .date-pick .btn-go {
        font-size: .78rem;
        padding: .42rem .7rem;
    }

/* Optional: shrink on small screens */
@media (max-width: 640px) {
    .date-pick .btn,
    .date-pick input[type="date"] {
        padding: .42rem .75rem;
    }
}
/* Goal popups container (top center) */
#goal-popups {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* lets clicks pass through except the popup itself */
}

/* Single popup */
.goal-popup {
    pointer-events: auto;
    min-width: 260px;
    max-width: 88vw;
    background: #0b1e3a; /* deep blue */
    color: #fff;
    border: 2px solid #f1a226; /* warm gold */
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    padding: 12px 16px 12px 14px;
    font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    column-gap: 10px;
    animation: pop-slide-in .25s ease-out both;
}

    .goal-popup .icon {
        font-size: 22px;
        line-height: 1;
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
    }

    .goal-popup .content .title {
        font-weight: 700;
        color: #ffd27a; /* lighter gold for emphasis */
        margin-bottom: 2px;
    }

    .goal-popup .content .meta {
        opacity: .9;
        font-weight: 500;
    }

    .goal-popup .close {
        background: transparent;
        border: 0;
        color: #fff;
        opacity: .8;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        padding: 4px 6px;
    }

        .goal-popup .close:hover {
            opacity: 1;
        }

    /* exit animation */
    .goal-popup.hide {
        animation: pop-fade-out .22s ease-in forwards;
    }

@keyframes pop-slide-in {
    from {
        opacity: 0;
        transform: translate(-2px, -8px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes pop-fade-out {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* Theme for goal popups */
#goal-popups .goal-toast {
    background: #0B1E3A; /* deep blue */
    color: #EAF2FF; /* soft white-blue text */
    border: 2px solid #F1A226; /* warm gold */
    box-shadow: 0 12px 28px rgba(11,30,58,.45);
    border-radius: 12px;
}

    #goal-popups .goal-toast .title {
        color: #FFD27A; /* soft gold for heading */
        font-weight: 700;
    }

    #goal-popups .goal-toast .icon {
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
    }

    #goal-popups .goal-toast button {
        color: #FFF;
        opacity: .85;
    }

        #goal-popups .goal-toast button:hover {
            opacity: 1;
        }

/* Optional: subtle entrance/exit feel (works with your inline transitions) */
#goal-popups .goal-toast {
    transform: translateY(0);
}
/* Light theme variant */
.goal-popup.light {
    background: #F9FBFF; /* very light blue-white */
    color: #0B1E3A; /* deep blue text */
    border: 2px solid #F1A226; /* warm gold */
    box-shadow: 0 10px 30px rgba(11,30,58,.12);
}

    .goal-popup.light .icon {
        /* keep the ball, but make it read on light cards */
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.4));
    }

    .goal-popup.light .content .title {
        color: #BD7B00; /* deeper warm gold for heading */
    }

    .goal-popup.light .content .meta {
        color: #1c2a45; /* slightly softer deep blue for body */
        opacity: .95;
    }

    .goal-popup.light .close {
        color: #0B1E3A;
        opacity: .65;
    }

        .goal-popup.light .close:hover {
            opacity: .9;
        }
/*
#goal-popups .goal-popup.light {
    background: #F9FBFF !important;
    color: #0B1E3A !important;
    border: 2px solid #F1A226 !important;
}

    #goal-popups .goal-popup.light .title {
        color: #BD7B00 !important;
    }

    #goal-popups .goal-popup.light .close {
        color: #0B1E3A !important;
    }*/

/* states */
.live-minute.ht {
    color: #007BFF;
    font-weight: 700;
}
/* HT = blue, bold */
.live-minute.ft {
    color: #f1a226;
    font-weight: 700;
}
/* FT = gold, bold */
.live-minute.min {
    color: #d00000;
    font-weight: 550;
    font-size:12px;
}
/* 50' = red, bold */

/* flashing apostrophe (inherits red from .min) */
.live-minute .tick {
    display: inline-block;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.card-badge {
    display: inline-block;
    min-width: 1px;
    padding: 1px 3px;
    margin: 0 5px 0 0;
    border-radius: 3px;
    font: 700 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    text-align: center;
    vertical-align: baseline;
    box-shadow: 0 1px 0 rgba(0,0,0,.15)
}

.team-group .card-badge {
    transform: translateY(-1px)
}

.card-badge.yc {
    background: #f7d774;
    color: #633;
    border: 1px solid #e1b84c
}

.card-badge.rc {
    background: #ff6b6b;
    color: #fff;
    border: 1px solid #e24c4c
}

.col-away.team-group .card-badge {
    margin-left: 1px;
    margin-right: 0
}
.col-home.team-group .card-badge {
    margin-left: 1px;
    margin-right: 0
}
.page.static-page {
    padding: 16px 0 40px;
}

.page-title {
    font-weight: 800;
    letter-spacing: -0.3px;
    border-bottom: 3px solid #f1a226;
    padding-bottom: 6px;
    margin-bottom: 18px;
    color: #0b1e3a;
}

.lead {
    color: #334;
    opacity: .9;
    margin-bottom: 18px;
}

.card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}

.card {
    background: #0b1e3a;
    color: #fff;
    border: 2px solid #f1a226;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

    .card h2 {
        margin: 0 0 10px;
        font-size: 18px;
        color: #f6d48a;
    }

    .card ul, .card ol {
        margin: 0;
        padding-left: 18px;
    }

    .card .sample .row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px dashed rgba(255,255,255,.15);
    }

    .card .note {
        margin-top: 10px;
        font-size: 12px;
        opacity: .75;
    }
.no-border-left {
    border-left: none !important;
    min-width: none !important;
    transition:none;
    background:none;
}
    .no-border-left:hover {
        background: #ffff !important; /* Keep same background on hover */
        box-shadow: inset 0 0 0 1px #ffff !important; /* Keep same shadow on hover */
        /* Add any other properties you want to disable on hover */
    }
/* page skeleton for sticky footer */
/* Page skeleton (sticky footer) */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

/* Footer background (light + subtle texture) */
.site-footer {
    background: var(--soft-blue); /* single light blue */
    border-top: 2px solid var(--ole-gold); /* keep brand accent */
    padding-top: 32px; /* <— top padding */
    padding-bottom: 2px;
    z-index:99;
    position:relative;
}

    /* Grid container (ONE definition) */

.site-footer .footer-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;                            /* <— left/right padding */
  display: grid;
  grid-template-columns: 1fr .8fr 1.4fr;
  gap: 50px;                                  /* <— column gap */
}
/* Brand */
.brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
}

.brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.brand-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--ole-blue-600);
}

.brand-tagline {
    color: var(--muted);
}

.follow {
    margin-top: 30px;
}

.follow-label {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: .3rem;
}

.follow-icons {
    display: flex;
    gap: .5rem;
}

/* Social icons */
.icon-btn {
    --s: 36px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    position: relative;
    display: inline-block;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .icon-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 18px;
        height: 18px;
        mask-size: contain;
        mask-repeat: no-repeat;
        background: var(--ole-blue-600);
    }

    .icon-btn.fb::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12.06C22 6.49 17.52 2 11.94 2 6.37 2 1.89 6.49 1.89 12.06c0 4.99 3.64 9.14 8.4 9.94v-7.03H7.9v-2.9h2.39V9.57c0-2.36 1.41-3.66 3.56-3.66 1.03 0 2.11.18 2.11.18v2.33h-1.19c-1.17 0-1.53.73-1.53 1.48v1.78h2.6l-.42 2.9h-2.18V22c4.76-.8 8.4-4.95 8.4-9.94Z'/%3E%3C/svg%3E");
    }

    .icon-btn.x::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h4.7l4.71 6.7L17.93 3H21l-7.62 9.06L21.5 21h-4.7l-5.04-7.17L7.07 21H3l8.03-9.52L3 3Z'/%3E%3C/svg%3E");
    }

    .icon-btn.ig::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E");
    }

    .icon-btn:hover {
        transform: translateY(-2px);
        border-color: var(--border-strong);
        box-shadow: 0 4px 14px rgba(16,24,40,.12);
    }

        .icon-btn:hover::before {
            background: var(--ole-gold-500);
        }

/* Quick actions + contact */
.footer-quick {
    margin-top: 34px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    border: 1px solid var(--border);
}

.cta-primary {
    background: var(--ole-gold);
    color: #1a1a1a;
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(241,162,38,.18);
}

    .cta-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(241,162,38,.25);
    }

.cta-ghost {
    background: var(--ole-gold);
    color: #1a1a1a;
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(241,162,38,.18);
}

    .cta-ghost:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(241,162,38,.25);
    }
.cta-ghost1 {
    background: var(--card);
    color: var(--ole-blue-600);
}

    .cta-ghost1:hover {
        transform: translateY(-1px);
        color: var(--ole-blue-500);
    }

.footer-contact {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

    .footer-contact a {
        color: var(--ole-blue-600);
        text-decoration: none;
    }

        .footer-contact a:hover {
            text-decoration: underline;
        }

.mail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ole-gold-500);
    box-shadow: 0 0 0 3px rgba(241,162,38,.18);
}

/* Nav (use nav-grid ONLY) */
.nav-grid {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px,1fr));
    gap: 6px 18px;
}

.nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

    .nav a:hover {
        color: var(--ole-blue-500);
    }

/* About card */
/*.about-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: var(--shadow);
    position: relative;
}

    .about-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 5px;
        border-radius: 6px;
        background: linear-gradient(180deg, var(--ole-gold-500), var(--ole-gold));
    }*/

    .about-card h3 {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 .6rem;
        font-size: 1.1rem;
        color: var(--ole-blue-600);
    }

.about-icon {
    width: 18px;
    height: 18px;
    background: var(--ole-blue-600);
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a9 9 0 100 18 9 9 0 000-18Zm1 13h-2v-6h2v6Zm0-8h-2V6h2v2Z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.about-card p {
    margin: .25rem 0 .75rem;
    line-height: 1.6;
    color: var(--muted);
}

.about-list {
    margin: 0 0 .8rem 1.1rem;
}

    .about-list li {
        margin: .25rem 0;
        color: var(--ink);
    }

.about-signoff {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .about-signoff small {
        color: var(--ole-gold-500);
    }

/* Bottom bar */
.footer-bar {
    border-top: 1px solid var(--border);
    background: linear-gradient(0deg, var(--soft-gold), #fff);
}

    .footer-bar .bar-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: .92rem;
        color: var(--ink);
    }

    .footer-bar .bar-links a {
        color: var(--ole-blue-600);
    }

        .footer-bar .bar-links a:hover {
            color: var(--ole-gold-500);
            text-decoration: underline;
        }


/* Responsive */
@media (max-width:1040px) {
    .site-footer .footer-wrap {
        grid-template-columns: .9fr .9fr 1.2fr;
        gap: 24px;
    }
}

@media (max-width:760px) {
    .site-footer .footer-wrap {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .nav-grid {
        grid-template-columns: 1fr 1fr;
    }

    .brand-logo {
        width: 48px;
        height: 48px;
    }
}
.site-footer .footer-nav .footer-nav-grid {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-left: 280px;
    margin-top: -70px;
}

.site-footer .footer-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

    .site-footer .footer-nav a:hover {
        color: var(--ole-blue-500);
    }



/* ========= 4) Small phones (≤ 640px) ========= */
@media (max-width: 640px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 4px;
        gap: 8px;
        margin-left: 0;
    }

        nav a {
            padding: 6px 8px;
            font-weight: 700;
            font-size: 13px;
        }

    .tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    .logo-img {
        height: 52px;
    }
}


/* Mobile header + nav layout */
/* Force mobile-friendly header + nav */
@media (max-width: 900px) {
    header {
        padding: 8px 12px;
        flex-direction: column; /* logo on top, nav below */
        align-items: flex-start;
        row-gap: 6px;
    }

    nav {
        margin-left: 0 !important; /* override the -202px */
        width: 100%;
        padding: 4px 0 0;
        flex-wrap: wrap; /* allow 2 lines */
        justify-content: flex-start; /* or center if you prefer */
        gap: 8px;
    }

        nav a {
            padding: 6px 8px;
            font-size: 13px;
            font-weight: 700;
        }
}

/* Fix nav position on medium screens */
@media (max-width: 1200px) {
    nav {
        margin-left: 0 !important; /* cancel the -202px shift */
    }
}
/* Mobile header + nav layout */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* logo on top, nav below */
        align-items: flex-start;
        padding: 8px 12px;
        row-gap: 4px;
    }

    nav {
        width: 100%;
        margin-left: 0 !important;
        flex-wrap: wrap; /* allow 2 lines */
        justify-content: flex-start;
        gap: 8px;
        padding: 4px 0 0;
    }

        nav a {
            padding: 6px 8px;
            font-size: 13px;
            font-weight: 700;
        }
}
/* Footer mobile tidy-up */
@media (max-width: 760px) {

    /* make footer a simple stacked column */
    .site-footer .footer-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* put footer nav directly under the text, no weird offset */
    .site-footer .footer-nav .footer-nav-grid {
        margin-left: 0;
        margin-top: 0;
        justify-content: flex-start;
    }

    .site-footer .footer-nav {
        text-align: left;
    }

    /* optional: give footer some breathing room */
    .site-footer {
        padding-top: 24px;
        padding-bottom: 16px;
    }
}
/* Footer tablet layout: 761px – 1200px */
@media (min-width: 761px) and (max-width: 1000px) {

    /* 2 columns: left = logo/social, right = about text */
    .site-footer .footer-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* put the nav in its own row, full width under both columns */
    .site-footer .footer-nav {
        grid-column: 1 / -1; /* span across the grid */
        text-align: left;
        margin-top: 8px;
    }

        /* remove the big offset that breaks layout */
        .site-footer .footer-nav .footer-nav-grid {
            margin-left: 0;
            margin-top: 0;
            justify-content: flex-start;
            max-width: 260px; /* keeps links in a neat block */
        }
}
/* 0) Stop mobile browsers from auto-enlarging footer text */
@media (max-width: 720px) {
    .site-footer {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* 1) Set a smaller BASE size on the whole about block */
@media (max-width: 720px) {
    .site-footer .about-card {
        font-size: 13.5px !important; /* base for p, li, etc. */
        line-height: 1.5 !important;
        padding: 2px 0 0 12px !important; /* keep the gold rail space tidy */
    }
}

/* 2) Tweak specific elements inside */
@media (max-width: 720px) {
    .site-footer .about-card h3 {
        font-size: 15.5px !important;
        margin: 0 0 .4rem !important;
    }

    .site-footer .about-card p {
        margin: .35rem 0 !important;
    }

    .site-footer .about-card .about-list {
        margin: .2rem 0 .6rem 1rem !important;
    }

        .site-footer .about-card .about-list li {
            font-size: 13.5px !important;
            line-height: 1.45 !important;
            margin: .18rem 0 !important;
        }

    .site-footer .about-card strong {
        font-weight: 700 !important;
    }

    .site-footer .about-card em {
        font-style: italic !important;
    }
}
/* ≤480px: phones like XR/11/12/13 mini */
@media (max-width: 480px){
  /* set BASE size directly on the block so p/li inherit */
  .site-footer .about-card{
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 2px 0 0 10px !important;
  }
  .site-footer .about-card h3{
    font-size: 15px !important;
    margin: 0 0 .35rem !important;
  }
  .site-footer .about-card .about-list{ margin: .2rem 0 .5rem .9rem !important; }
  .site-footer .about-card li{ font-size: 13px !important; margin:.16rem 0 !important; }
}

/* ≤414px: iPhone XR/11/12/13/14 (non-Max) */
@media (max-width: 414px){
  .site-footer .about-card{ font-size: 12.5px !important; }
  .site-footer .about-card h3{ font-size: 14.5px !important; }
}

/* ≤390px: iPhone 12/13/14/15 */
@media (max-width: 390px){
  .site-footer .about-card{ font-size: 12px !important; }
  .site-footer .about-card h3{ font-size: 14px !important; }
}
html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ≤ 640px: phones & small tablets in portrait */
@media (max-width: 640px) {
    .site-footer {
        padding-top: 22px;
        padding-bottom: 18px;
    }

        .site-footer .footer-wrap {
            grid-template-columns: 1fr; /* stack columns */
            gap: 16px;
            padding: 0 16px; /* inner LR padding */
        }

    /* brand */
    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .footer-quick .cta {
        height: 32px;
        padding: 0 12px;
        font-size: .9rem;
    }

    .site-footer .footer-contact {
        margin-top: 16px;
    }

    /* nav → single column */
    .site-footer .footer-nav .footer-nav-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        max-width: 240px;
    }

    .site-footer .footer-nav a {
        font-size: 14px;
        padding: 4px 0;
    }

    /* About block (this is your “Trusted by 10M+ …”) */
    .site-footer .about-card {
        font-size: 14px !important; /* base for p/li */
        line-height: 1.5 !important;
        padding: 2px 0 0 12px !important; /* keep space for gold rail */
    }

        .site-footer .about-card h3 {
            font-size: 16px !important;
            margin-bottom: .4rem !important;
        }

        .site-footer .about-card .about-list {
            margin: .2rem 0 .6rem 1rem !important;
        }

        .site-footer .about-card li {
            margin: .18rem 0 !important;
        }
}

/* ≤ 480px: smaller phones */
@media (max-width: 480px) {
    .site-footer .about-card {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

        .site-footer .about-card h3 {
            font-size: 15px !important;
        }

    .footer-quick .cta {
        height: 30px;
        padding: 0 10px;
        font-size: .88rem;
    }

    .site-footer .footer-contact {
        margin-top: 14px;
    }
}

/* ≤ 380px: very small phones */
@media (max-width: 380px) {
    .site-footer .about-card {
        font-size: 12.5px !important;
    }

        .site-footer .about-card h3 {
            font-size: 14px !important;
        }

    .site-footer .footer-nav a {
        font-size: 13.5px;
    }
}
/* Hide the side-rail ads on phones */
@media (max-width: 768px) {
    .left-sidebar,
    .right-sidebar {
        display: none !important; 
    }

    .main-content {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    /* show mobile banner */
    .mobile-banner {
        display: block;
    }
}

/* Mobile banner base styles (hidden on desktop) */
.mobile-banner {
    display: none;
    text-align: center;
    margin: 12px 0; /* adjust spacing if needed */
}

    .mobile-banner img {
        display: inline-block;
        max-width: 100%;
        height: auto;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        background: var(--card);
        width: 320px; /* hint for layout */
        height: auto; /* keep aspect */
    }
/* Hide both side-rail ads on small screens (strongest override) */
/* Hide both side-rail ads on small screens (strongest override) */
@media (max-width: 600px) {

    /*  make the main container full-width, no spare space */
    body .container {
        display: block;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    body .left-sidebar,
    body .right-sidebar,
    body .left-sidebar .ad-banner,
    body .left-sidebar .ad-banner1,
    body .right-sidebar .bookmaker-section1,
    body .right-sidebar .bookmaker-section,
    body .left-sidebar *,
    body .right-sidebar * {
        display: none !important;
        visibility: hidden !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /*  main column fills full width */
    .main-content {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0;
    }

    /*  table stretches to the container edge */
    .tab-section,
    .match-table {
        width: 100% !important;
    }

    .mobile-banner {
        display: block !important;
    }
}
@media (max-width: 1025px) {

    /*  make the main container full-width, no spare space */
    body .container {
        display: block;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    body .left-sidebar,
    body .right-sidebar,
    body .left-sidebar .ad-banner,
    body .left-sidebar .ad-banner1,
    body .right-sidebar .bookmaker-section1,
    body .right-sidebar .bookmaker-section,
    body .left-sidebar *,
    body .right-sidebar * {
        display: none !important;
        visibility: hidden !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /*  main column fills full width */
    .main-content {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0;
    }

    /*  table stretches to the container edge */
    .tab-section,
    .match-table {
        width: 100% !important;
    }

    .mobile-banner {
        display: block !important;
    }
}


.mobile-nav-panel {
    display: none;
    position: absolute;
    right: 10px;
    top: 100%;
    margin-top: 8px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d5e2ff; /* match header border */
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    padding: 6px 0;
    min-width: 230px;
    z-index: 1000;
}

    .mobile-nav-panel a {
        display: block;
        padding: 10px 16px;
        font-size: 14px;
        color: #0f172a;
        text-decoration: none;
    }

        .mobile-nav-panel a + a {
            border-top: 1px solid #edf2ff;
        }

        .mobile-nav-panel a:hover {
            background: #eef3ff; /* soft hover */
            color: #0e3a8a; /* OleBall blue text on hover */
        }
        .mobile-nav-panel a:first-child { /* "Home" by default */
            font-weight: 600;
            color: #0e3a8a;
        }
@media (max-width: 768px) {
    .home-header {
        padding: 8px 10px;
        flex-wrap: nowrap;
        align-items: center;
        /* remove these if present */
        /* position: sticky;
           top: 0;
           left: 0;
           right: 0; */
        z-index: 100;
        background: #fff;
        border-bottom: 1px solid #d5e2ff;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    }
}
/* Make all ad banner images shrink on small screens */
.adsleft,
.adsright,
.adsrighttop,
.adstop {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* center them */
}
/* Mobile table: stop horizontal overflow & let team names wrap */
@media (max-width: 768px) {

    /* Make header widths flexible instead of fixed px values */
    .match-table thead th[width] {
        width: auto !important;
    }

    /* Give Home / Away most of the width & allow 2 lines */
    .match-table td.col-home,
    .match-table td.col-away {
        white-space: normal; /* allow wrapping */
        word-break: break-word; /* break very long names if needed */
        padding-top: 6px;
        padding-bottom: 6px; /* slightly taller rows */
    }

    /* Keep the small columns really small so they don't steal width */
    .match-table td.col-time,
    .match-table td.col-score,
    .match-table td.col-tips,
    .match-table td.col-tc,
    .match-table td.col-ht {
        white-space: nowrap;
    }
}
/* Results page – mobile layout only for .match-table.results */
@media (max-width: 768px) {

    .match-table.results {
        font-size: 12px;
        table-layout: fixed;
        width: 100%;
    }

        .match-table.results thead th,
        .match-table.results tbody td {
            padding: 4px 2px;
        }

            /* 1) Time */
            .match-table.results thead th:nth-child(1),
            .match-table.results tbody td:nth-child(1) {
                width: 12% !important;
                white-space: nowrap;
            }

            /* 2) Home – more space, allow wrap */
            .match-table.results thead th:nth-child(2),
            .match-table.results tbody td:nth-child(2) {
                width: 26% !important;
                white-space: normal;
                word-break: break-word;
            }

            /* 3) FT score */
            .match-table.results thead th:nth-child(3),
            .match-table.results tbody td:nth-child(3) {
                width: 10% !important;
                text-align: center;
                white-space: nowrap;
            }

            /* 4) Away – more space, allow wrap */
            .match-table.results thead th:nth-child(4),
            .match-table.results tbody td:nth-child(4) {
                width: 26% !important;
                white-space: normal;
                word-break: break-word;
            }

            /* 5) HT */
            .match-table.results thead th:nth-child(5),
            .match-table.results tbody td:nth-child(5) {
                width: 8% !important;
                text-align: center;
                white-space: nowrap;
            }

            /* 6) 🚩TC */
            .match-table.results thead th:nth-child(6),
            .match-table.results tbody td:nth-child(6) {
                width: 8% !important;
                text-align: center;
                white-space: nowrap;
            }

            /* 7) 🟥Cards + 8) 🟨Cards – narrow */
            .match-table.results thead th:nth-child(7),
            .match-table.results tbody td:nth-child(7),
            .match-table.results thead th:nth-child(8),
            .match-table.results tbody td:nth-child(8) {
                width: 5% !important;
                text-align: center;
                white-space: nowrap;
            }
}
/* Results page – use full width on desktop */
@media (min-width: 769px) {

    .match-table.results {
        width: 100%!important;
        table-layout: fixed;
    }

        .match-table.results thead th,
        .match-table.results tbody td {
            width: auto;
        }

            /* 1) Time */
            .match-table.results thead th:nth-child(1),
            .match-table.results tbody td:nth-child(1) {
                width: 10% !important;
                white-space: nowrap;
            }

            /* 2) Home */
            .match-table.results thead th:nth-child(2),
            .match-table.results tbody td:nth-child(2) {
                width: 30% !important;
                white-space: normal;
                word-break: break-word;
            }

            /* 3) FT */
            .match-table.results thead th:nth-child(3),
            .match-table.results tbody td:nth-child(3) {
                width: 10% !important;
                text-align: center;
                white-space: nowrap;
            }

            /* 4) Away */
            .match-table.results thead th:nth-child(4),
            .match-table.results tbody td:nth-child(4) {
                width: 30% !important;
                white-space: normal;
                word-break: break-word;
            }

            /* 5) HT */
            .match-table.results thead th:nth-child(5),
            .match-table.results tbody td:nth-child(5) {
                width: 10% !important;
                text-align: center;
                white-space: nowrap;
            }

            /* 6) 🚩TC */
            .match-table.results thead th:nth-child(6),
            .match-table.results tbody td:nth-child(6) {
                width: 10% !important;
                text-align: center;
                white-space: nowrap;
            }
}


/*testing*/
/* Results page – mobile layout, no empty space on right */
@media (max-width: 768px) {

    .match-table.results {
        width: 100%;
        table-layout: fixed;
        font-size: 12px;
    }

        /* IMPORTANT: turn off the old CSS grid layout */
        .match-table.results tbody tr {
            display: table-row; /* back to normal table row */
        }

        .match-table.results thead th,
        .match-table.results tbody td {
            padding: 4px 2px;
            width: auto;
        }

            /* 1) Time */
            .match-table.results thead th:nth-child(1),
            .match-table.results tbody td:nth-child(1) {
                width: 9% !important;
                white-space: nowrap;
            }

            /* 2) Home */
            .match-table.results thead th:nth-child(2),
            .match-table.results tbody td:nth-child(2) {
                width: 28% !important;
                white-space: normal;
                word-break: break-word; /* long team names wrap */
            }

            /* 3) FT */
            .match-table.results thead th:nth-child(3),
            .match-table.results tbody td:nth-child(3) {
                width: 8% !important;
                text-align: center;
                white-space: nowrap;
            }

            /* 4) Away */
            .match-table.results thead th:nth-child(4),
            .match-table.results tbody td:nth-child(4) {
                width: 28% !important;
                white-space: normal;
                word-break: break-word;
            }

            /* 5) HT */
            .match-table.results thead th:nth-child(5),
            .match-table.results tbody td:nth-child(5) {
                width: 8% !important;
                text-align: center;
                white-space: nowrap;
            }

            /* 6) TC */
            .match-table.results thead th:nth-child(6),
            .match-table.results tbody td:nth-child(6) {
                width: 9% !important;
                text-align: center;
                white-space: nowrap;
            }
}
/* ======================================
   Goal popup — make sure it shows on mobile
   ====================================== */

/* Base style (desktop) – keep as you like */
.goal-popups {
    /* keep your existing styles here, plus these if not already there */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
}

    /* Class used when popup is visible */
    .goal-popups.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

/* MOBILE: override anything that hides it */
@media (max-width: 768px) {

    /* In case some earlier CSS has display:none on mobile */
    .goal-popups {
        display: block !important;
        /* Put it fixed in the viewport so it won't be cut by table/overflow */
        position: fixed;
        left: 50%;
        bottom: 70px; /* above your bottom nav/footer */
        transform: translateX(-50%);
        max-width: 90vw; /* keep inside screen */
        z-index: 9999;
    }
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--ole-blue-600);
    margin: 3px 0;
    transition: transform 0.22s ease, opacity 0.18s ease;
}

/* open state – turn into X */
.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(10px) rotate(50deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-50deg);
}

/* ================================
   Search beside My favorite — Oleball theme
   ================================ */

.ob-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* container */
.ob-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(11, 30, 58, 0.09); /* deep blue glass */
    border: 1px solid rgba(241,162,38, 0.30); /* gold line */
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
    margin-left: 92px
}

    /* focus ring when input active */
    .ob-search:focus-within {
        border-color: rgba(241,162,38, 0.75);
        box-shadow: 0 0 0 3px rgba(241,162,38, 0.18), 0 12px 30px rgba(0,0,0,.22);
    }

    /* input */
    .ob-search input {
        width: 220px;
        max-width: 58vw;
        border: 0;
        outline: 0;
        background: transparent;
        color: #0A4EA3;
        font-size: 14px;
        line-height: 1.2;
    }

        .ob-search input::placeholder {
            color: #808080;
        }

    /* clear button */
    .ob-search button {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.85);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
    }

        .ob-search button:hover {
            transform: translateY(-1px);
            background: rgba(241,162,38,.16); /* gold hover */
            border-color: rgba(241,162,38,.35);
            filter: brightness(1.04);
        }

        .ob-search button:active {
            transform: translateY(0);
        }

/* mobile tighter */
@media (max-width: 600px) {
    .ob-search {
        padding: 6px 9px;
        gap: 6px;
    }

        .ob-search input {
            width: 160px;
            font-size: 13px;
        }

        .ob-search button {
            width: 26px;
            height: 26px;
        }
}

.ob-search__icon {
    opacity: .75;
    font-size: 14px;
    margin-left: 2px;
}
/* icon */
.ob-search__icon {
    opacity: .8;
    font-size: 14px;
    margin-left: 2px;
}

/* Mobile: icon + small pill only until opened */
@media (max-width: 600px) {

    /* default = collapsed */
    .ob-search {
        padding: 6px 10px;
        gap: 0;
        margin-left: 50px
    }

        .ob-search input,
        .ob-search #matchSearchClear {
            width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            opacity: 0;
            pointer-events: none;
        }

        /* opened */
        .ob-search.is-open {
            gap: 8px;
        }

            .ob-search.is-open input {
                width: 170px !important; /* expand width */
                opacity: 1;
                pointer-events: auto;
            }

            .ob-search.is-open #matchSearchClear {
                width: 26px !important;
                height: 26px !important;
                opacity: 1;
                pointer-events: auto;
            }
}
.ob-search-hidden {
    display: none !important;
}

@media (max-width: 450px) {
    .ob-search {
        margin-left: 98px;
    }


.ob-search.is-open {
    gap: 2px;
}

    .ob-search.is-open input {
        width: 480px !important;
        opacity: 1;
        pointer-events: auto;
    }

}
@media (max-width: 415px) {
    .ob-search {
        margin-left: 68px;
    }

        .ob-search.is-open {
            gap: 5px;
        }

            .ob-search.is-open input {
                width: 350px !important;
                opacity: 1;
                pointer-events: auto;
            }
}

@media (max-width: 400px) {
    .ob-search {
        margin-left: 68px;
    }
.ob-search.is-open {
    gap: 5px;
}

    .ob-search.is-open input {
        width: 350px !important;
        opacity: 1;
        pointer-events: auto;
    }

}

/* 375 and below */
@media (max-width: 385px) {
    .ob-search {
        margin-left: 40px;
    }
        .ob-search.is-open {
            gap: 8px;
        }

            .ob-search.is-open input {
                width: 280px !important; 
                opacity: 1;
                pointer-events: auto;
            }
}

/* 360 and below (SE 1st gen is 320, so it will hit this too) */
@media (max-width: 360px) {
    .ob-search {
        margin-left: 40px;
    }
    /* or smaller if you want */
}

/* =====================================================
   Dark mode (toggle via: <html data-theme="dark">)
   ===================================================== */

.theme-toggle {
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

    .theme-toggle:hover {
        border-color: var(--ole-blue);
        box-shadow: 0 0 0 3px rgba(10,78,163,.12);
        transform: translateY(-1px);
    }

    .theme-toggle:active {
        transform: translateY(0);
    }

.theme-toggle__icon {
    font-size: 16px;
    line-height: 1;
}
/* Theme button itself */
html[data-theme="dark"] .theme-toggle {
    background: rgba(255,255,255,.04);
    border-color: #e2e8f0;
    box-shadow: none;
}

html[data-theme="dark"] .theme-toggle:hover {
    border-color: rgba(242,183,5,.55);
    box-shadow: 0 0 0 3px rgba(241,162,38,.14);
}
.theme-toggle--mobile {
    width: calc(100% - 12px);
    height: 42px;
    margin: 6px 6px 8px;
    border-radius: 12px;
    justify-content: center;
}

/* Dark theme tokens */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #071326;
    --card: #0b1e3a;
    --ink: #eaf2ff;
    --muted: rgba(234,242,255,.78);
    --border: rgba(234,242,255,.12);
    --border-strong: rgba(234,242,255,.18);
    --soft-blue: rgba(29,88,166,.18);
    --soft-gold: rgba(242,183,5,.12);
    --hover: rgba(242,183,5,.10);
    --shadow: 0 16px 34px rgba(0,0,0,.45);
}

    /* Header + nav */
    html[data-theme="dark"] header,
    html[data-theme="dark"] .home-header {
        background: var(--card) !important;
        border-bottom: 1px solid var(--border) !important;
        color: var(--ink);
    }

    html[data-theme="dark"] nav a {
        color: var(--ink);
    }

        html[data-theme="dark"] nav a:hover {
            background: rgba(255,255,255,.06);
        }

    html[data-theme="dark"] .nav-toggle span {
        background: #154079;
    }



    /* Tabs */
    html[data-theme="dark"] .tabs a {
        background: rgba(255,255,255,.04);
        border-color: var(--border);
        color: var(--ink);
    }

    /* Tables */
    html[data-theme="dark"] .match-table {
        background: rgba(255,255,255,.03);
        border-color: var(--border);
    }

        html[data-theme="dark"] .match-table td {
            color: var(--ink);
            border-bottom-color: rgba(234,242,255,.08);
        }

        html[data-theme="dark"] .match-table tr:nth-child(even) {
            background: rgba(255,255,255,.02);
        }

        html[data-theme="dark"] .match-table thead th {
            background: rgba(255,255,255,.04);
            color: var(--ink);
            border-bottom-color: rgba(234,242,255,.10);
        }

    html[data-theme="dark"] .league-header {
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        color: #eaf2ff;
        border-bottom-color: rgba(234,242,255,.10);
    }

    /* Sidebars / cards */
    html[data-theme="dark"] .sidebar h4,
    html[data-theme="dark"] .sidebar ul,
    html[data-theme="dark"] .bottom-ad,
    html[data-theme="dark"] .top-ad {
        background: rgba(255,255,255,.03);
        border-color: var(--border);
        color: var(--ink);
    }

    html[data-theme="dark"] .sidebar li {
        border-bottom-color: rgba(234,242,255,.08);
    }

        html[data-theme="dark"] .sidebar li:hover {
            background: rgba(255,255,255,.05);
        }

    /* Odds popup */
    html[data-theme="dark"] .odds-card-wrap {
        background: var(--card);
        border-color: var(--border-strong);
    }

    html[data-theme="dark"] .odds-card__header {
        background: rgba(255,255,255,.04);
        color: #eaf2ff;
        border-bottom-color: rgba(234,242,255,.10);
    }

    html[data-theme="dark"] .odds-card-wrap .odds-table {
        background: rgba(255,255,255,.02);
    }

        html[data-theme="dark"] .odds-card-wrap .odds-table th {
            background: rgba(255,255,255,.04);
        }

        html[data-theme="dark"] .odds-card-wrap .odds-table th,
        html[data-theme="dark"] .odds-card-wrap .odds-table td {
            border-color: rgba(234,242,255,.10);
        }


    html[data-theme="dark"] header,
    html[data-theme="dark"] .home-header,
    html[data-theme="dark"] .site-footer {
        --ole-blue: #0a4ea3;
        --ole-blue-600: #114484;
        --ole-gold: #f2b705;
        --ink: #0f172a;
        --muted: #475569;
        --bg: #f7fafc;
        --card: #fff; /*mobile responsive change headercolor*/
        --soft-blue: #e8f1ff;
        --soft-gold: #fff6db;
        --border: #e2e8f0;
        --border-strong: #d6dee9;
        color-scheme: light;
    }

    html[data-theme="dark"] .match-table tbody tr.match-row:hover {
        background-color: rgba(255,255,255,.05); 
    }


    html[data-theme="dark"] .tabs a.active {
        color: #fff !important;
        background: linear-gradient(90deg, var(--ole-blue), var(--ole-gold)) !important;
        border-color: transparent !important;
    }

        html[data-theme="dark"] .tabs a.active:hover {
            filter: brightness(1.02);
        }

    html[data-theme="dark"] .ob-search input {
        color: var(--ole-gold) !important;
    }



/* Base pill look (match tabs idle) */
    html[data-theme="dark"] .date-pick .btn,
    html[data-theme="dark"] .date-pick input[type="date"] {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        color: #fff;
        border: 1px solid var(--ob-border);
        border-radius: 999px;
        padding: .48rem .9rem;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
    }

    /* Hover focus */
        html[data-theme="dark"] .date-pick .btn:hover,
        html[data-theme="dark"] .date-pick input[type="date"]:hover {
            border-color: var(--ole-gold);
            box-shadow: 0 0 0 3px var(--ob-ring);
        }

        html[data-theme="dark"] .date-pick input[type="date"]:focus {
            outline: none;
            border-color: var(--ob-deep);
            box-shadow: 0 0 0 4px var(--ob-ring);
        }

    /* Active pill — same as homepage tab “All” gradient */
        html[data-theme="dark"] .date-pick .btn.is-active {
            color: #fff;
            background: linear-gradient(90deg,var(--ole-blue),var(--ole-gold));
            border-color: transparent;
        }

    html[data-theme="dark"] .mobile-nav-panel {
        background: #0b1e3a;
        border-color: rgba(255,255,255,.10) !important;
        box-shadow: 0 18px 40px rgba(0,0,0,.60) !important;
    }

        html[data-theme="dark"] .mobile-nav-panel a {
            color: #E5E7EB !important;
        }

            html[data-theme="dark"] .mobile-nav-panel a + a {
                border-top-color: rgba(255,255,255,.06) !important;
            }

            html[data-theme="dark"] .mobile-nav-panel a:hover {
                background: rgba(242, 183, 5, .12) !important;
                color: #f2b705 !important;
            }