/* ============================================================
   styles-additions.css
   Purely additive — loaded AFTER styles.css, never edits it.
   Covers: Bet of the Day, Live Predictions, Correct Score,
   Codes Only, reveal/copy code rows, accumulator modal, search
   result list, and mobile-safety rules (no overflow, sane
   grids) at 320/360/375/390/412/430px.
   ============================================================ */

/* ---- generic helpers ---- */
.mf-empty { text-align: center; color: #8a94a6; padding: 20px 10px; font-size: 13px; }
.mf-sub { font-size: 11px; color: #8a94a6; margin-top: 2px; }
.mf-rating { font-size: 11px; color: #2ecc58; font-weight: 700; margin-top: 2px; }
.mf-highlight { animation: mfPulse 2.2s ease; outline: 3px solid #2ecc58; outline-offset: 3px; border-radius: 8px; }
@keyframes mfPulse { 0% { background: #fff6cc; } 70% { background: #fff6cc; } 100% { background: transparent; } }

/* ---- bookmaker badges ---- */
.bm-badge { display:inline-block; font-size:10px; font-weight:700; padding:3px 7px; border-radius:5px; margin:0 4px 4px 0; background:#eef1f6; color:#465066; }
.bm-badge--bet9ja{background:#0a5c36;color:#fff;} .bm-badge--sportybet{background:#e2001a;color:#fff;}
.bm-badge--betpawa{background:#f5a623;color:#1a1a1a;} .bm-badge--betway{background:#0b0b0b;color:#fff;}
.bm-badge--onexbet{background:#1c1c50;color:#fff;}

/* ---- reveal / copy code row (aligned box, not scattered) ---- */
.reveal-toggle { display:inline-flex; align-items:center; gap:6px; border:none; background:#171f31; color:#fff; font-weight:700; font-size:12px; padding:8px 14px; border-radius:8px; cursor:pointer; }
.reveal-toggle:disabled { opacity:0.85; cursor:default; }
.code-reveal { display:flex; flex-direction:column; gap:0; margin-top:8px; border:1px solid #e4e8ee; border-radius:8px; overflow:hidden; }
.code-row {
  display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:8px;
  font-size:11px; padding:7px 10px; border-bottom:1px solid #eef1f6; background:#fbfdff;
}
.code-reveal .code-row:last-child { border-bottom:none; }
.code-row__bm { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.code-row__code { font-family:monospace; background:#171f31; color:#8ff0b0; padding:4px 8px; border-radius:5px; text-align:center; justify-self:stretch; }
.code-row__btn { border:none; background:#2ecc58; color:#04371a; font-weight:700; font-size:10px; padding:5px 9px; border-radius:5px; cursor:pointer; white-space:nowrap; }
.code-row__btn--copy { background:#171f31; color:#fff; }

/* ---- Featured Bookmakers row ---- */
.bookmaker-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #eef1f6; }
.bookmaker-item__badge { flex-shrink:0; }
.bookmaker-item__cta { font-size:12px; font-weight:700; color:#171f31; border:1px solid #e4e8ee; padding:6px 10px; border-radius:8px; text-decoration:none; white-space:nowrap; }
.bookmaker-item__cta:active { background:#f4f6f9; }

/* ---- News row with icon + chevron ---- */
.news-item__link { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eef1f6; text-decoration:none; color:inherit; }
.news-item__icon { flex-shrink:0; width:28px; height:28px; border-radius:7px; background:#eef1f6; display:flex; align-items:center; justify-content:center; font-size:14px; }
.news-item__text { flex:1; display:flex; flex-direction:column; }
.news-item__title { font-size:13px; font-weight:600; color:#182233; }
.news-item__date { font-size:11px; color:#8a94a6; }
.news-item__chevron { color:#c3c9d4; font-size:18px; }

/* ---- Bet of the Day ---- */
.panel--bod .bod-card {
  border:1px solid rgba(255,177,0,0.5); border-radius:12px; padding:16px; margin-bottom:14px;
  background:linear-gradient(160deg, #1a1f2e, #0d0f1a);
  background-size:cover; background-position:center;
  box-shadow:0 0 14px rgba(255,177,0,0.25), inset 0 0 30px rgba(0,0,0,0.4);
  position:relative; overflow:hidden;
}
.panel--bod .bod-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(10,12,20,0.55), rgba(10,12,20,0.85));
  pointer-events:none;
}
.panel--bod .bod-card > * { position:relative; z-index:1; }
.bod-card__match { font-weight:700; font-size:15px; margin-bottom:10px; }
.bod-card__match .matchup__name { color:#fff; }
.bod-card__match .matchup__vs { color:#ffb100; font-weight:700; }
.bod-card__pick-row { background:rgba(255,177,0,0.12); border:1px solid rgba(255,177,0,0.4); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.bod-card__pick { color:#ffcc4d; font-weight:800; font-size:16px; }
.bod-card__odds { color:#fff; font-weight:800; float:right; }
.bod-card__desc { font-size:12px; color:#c7cbd6; margin:8px 0; }
.bod-card__meta { font-size:11px; color:#ffb100; font-weight:700; }

/* ---- Live Predictions ---- */
.live-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.live-card { border:1px solid #e4e8ee; border-radius:10px; padding:12px; background:#fff; }
.live-card--upcoming .live-dot { background:#8a94a6; animation:none; }
.live-card--upcoming .live-card__top { color:#6b7688; }
.live-card--ended { opacity:0.6; }
.live-card--ended .live-dot { background:#8a94a6; animation:none; }
.live-card__top { font-size:11px; color:#e34848; font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#e34848; display:inline-block; animation: mfBlink 1.2s infinite; }
@keyframes mfBlink { 50% { opacity: 0.3; } }
.live-card__match { font-weight:700; font-size:13px; }
.live-card__pick { font-size:12px; color:#2ecc58; margin-top:4px; }

/* ---- Correct Score ---- */
.panel--cs { background:#fdf3f5; }
.cs-pill { display:inline-block; background:#e9fbf0; color:#0a5c36; font-weight:800; font-size:13px; padding:6px 12px; border-radius:8px; }
.cs-card { background:#fff; border:1px solid #f3d9dd; border-radius:12px; padding:14px; margin-bottom:10px; }
.cs-card__top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cs-card__num { background:#e34848; color:#fff; font-weight:800; font-size:11px; padding:3px 8px; border-radius:6px; flex-shrink:0; }
.cs-card__match { flex:1; min-width:0; }
.cs-card__pills { display:flex; gap:8px; margin:10px 0; }
.cs-card__body { display:flex; gap:10px; align-items:flex-start; }
.cs-card__bm { flex:1; min-width:0; }
.cs-card__reveal-btn { width:112px; flex-shrink:0; }
.cs-card__reveal-btn .reveal-toggle { width:100%; white-space:nowrap; padding:10px 6px; font-size:11px; text-align:center; justify-content:center; }
.cs-card .code-reveal { margin-top:10px; }

/* ---- predictions table: aligned columns, not scattered ---- */
.col-num { width:28px; color:#8a94a6; font-size:12px; vertical-align:top; }
.col-match { min-width:150px; vertical-align:top; }
.col-pick { min-width:110px; vertical-align:top; }
.col-odds { width:60px; font-weight:700; vertical-align:top; }
.col-books { min-width:140px; vertical-align:top; }
.col-code { width:150px; vertical-align:top; }
#picksTableBody td, #correctScoreBody td { padding:12px 8px; border-bottom:1px solid #eef1f6; }
.reveal-row td { padding:0; border-bottom:none; }
.reveal-row .code-reveal { margin:0 8px 12px; }

/* ---- team initials badges ---- */
.matchup { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; font-weight:600; font-size:13px; overflow-x:auto; }
.matchup__side { display:flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap; }
.team-badge { width:22px; height:22px; border-radius:50%; color:#fff; font-size:9px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.team-badge--logo { object-fit:cover; background:#fff; border:1px solid #e4e8ee; }
.matchup__vs { font-size:11px; color:#8a94a6; font-weight:400; }
.matchup__name { white-space:nowrap; }

/* ---- general breathing room (less compact overall) ---- */
.panel, .card, .item-card, .bod-card, .live-card { padding:16px; margin-bottom:14px; }
.pick-card { padding:14px; margin-bottom:10px; }
.pick-card__top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pick-card__num { background:#2ecc58; color:#04371a; font-weight:800; font-size:11px; padding:3px 8px; border-radius:6px; flex-shrink:0; }
.pick-card__match { flex:1; min-width:0; }
.pick-card__odds-pill { background:#e9fbf0; color:#0a5c36; font-weight:800; font-size:14px; padding:6px 12px; border-radius:8px; flex-shrink:0; }
.pick-card__selection { font-weight:700; font-size:14px; color:#182233; margin-bottom:10px; }
.pick-card__body { display:flex; gap:10px; align-items:stretch; }
.pick-card__books { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; align-content:start; }
.pick-card__books .bm-badge { text-align:center; margin:0; }
.pick-card__reveal-btn { width:112px; flex-shrink:0; }
.pick-card__reveal-btn .reveal-toggle { width:100%; white-space:nowrap; padding:10px 6px; font-size:11px; text-align:center; justify-content:center; }
.pick-card .code-reveal { margin-top:10px; }

.result-card { padding:14px; margin-bottom:10px; position:relative; background:#fbfdff; }
.result-card--won { background:#f3fcf6; }
.result-card--lost { background:#fdf4f4; }
#resultsGrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.result-card__ft { position:absolute; top:10px; right:10px; background:#e9fbf0; color:#0a5c36; font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; }
.result-card__scoreline { display:flex; align-items:center; gap:6px; margin-bottom:8px; padding-right:36px; }
.result-card__status { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; color:#fff; }
.result-card--won .result-card__status { background:#2ecc58; }
.result-card--lost .result-card__status { background:#e34848; }
.result-card--void .result-card__status { background:#c3c9d4; }
.result-card__team-name { font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-card__score { font-weight:800; font-size:14px; color:#182233; flex:1; text-align:center; }
.result-card__meta { font-size:11px; color:#6b7688; }

@media (max-width: 420px) {
  .pick-card__reveal-btn { width:92px; }
  .pick-card__books .bm-badge { font-size:9px; padding:3px 4px; }
  #resultsGrid { grid-template-columns:1fr; }
}
.cs-card { padding:12px; }
.news-item__link, .bookmaker-item { padding:12px 0; }

/* ---- Codes Only (sidebar) ---- */
.panel--codes .codes-item { border:1px solid #e4e8ee; border-radius:10px; padding:14px; margin-bottom:12px; }
.codes-item__top { display:flex; justify-content:space-between; font-size:13px; margin-bottom:10px; }
.codes-item__top b { font-size:14px; }

/* ---- accumulator tier cards (exact reference match) ---- */
.acc-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
  .acc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.acc-card { border-radius:12px; padding:14px; color:#fff; display:flex; flex-direction:column; gap:8px; }
.acc-card__head { font-size:12px; font-weight:800; letter-spacing:0.3px; }
.acc-card__meta { font-size:10px; opacity:0.9; margin-top:-4px; }
.acc-card__sels { display:flex; flex-direction:column; gap:4px; max-height:150px; overflow-y:auto; }
.acc-sel { background:rgba(255,255,255,0.18); border-radius:6px; padding:5px 7px; display:flex; flex-direction:column; font-size:10px; line-height:1.35; }
.acc-sel b { font-size:10.5px; }
.acc-sel span { opacity:0.92; }
.acc-card__btn { margin-top:auto; border:none; background:rgba(255,255,255,0.22); color:#fff; font-weight:700; font-size:11px; padding:8px; border-radius:8px; cursor:pointer; }
.acc-card__btn:active { background:rgba(255,255,255,0.32); }

/* Force the accumulator grid to breathe a bit more at very small widths
   while keeping the exact 4-column layout requested. */
@media (max-width: 380px) {
  .acc-card { padding:10px; gap:6px; }
  .acc-card__head { font-size:10px; }
  .acc-sel { font-size:9px; padding:4px 5px; }
  .matchup { font-size:12px; }
  .team-badge { width:19px; height:19px; font-size:8px; }
}
.mf-modal { position:fixed; inset:0; background:rgba(10,14,24,0.55); display:none; align-items:flex-end; justify-content:center; z-index:100; }
.mf-modal--open { display:flex; }
.mf-modal__box { background:#fff; width:100%; max-width:480px; max-height:80vh; overflow-y:auto; border-radius:16px 16px 0 0; padding:18px; position:relative; }
.mf-modal__close { position:absolute; top:10px; right:14px; border:none; background:none; font-size:18px; cursor:pointer; }
.mf-modal__row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eef1f6; font-size:13px; }

/* ---- search results dropdown ---- */
#searchResults.search-results, .search-results {
  list-style:none; margin:4px 0 0; padding:0; max-height:300px; overflow-y:auto;
  background:#fff; border:1px solid #e4e8ee; border-radius:10px;
  box-shadow:0 8px 24px rgba(10,14,24,0.18);
}
.search-result { padding:10px 12px; font-size:13px; border-bottom:1px solid #eef1f6; cursor:pointer; }
.search-result:active { background:#f4f6f9; }
.search-result__type { font-size:10px; font-weight:700; color:#2ecc58; text-transform:uppercase; margin-right:6px; }
.search-result--empty { color:#8a94a6; cursor:default; }
.search-result mark { background:#d9fbe5; color:#0a5c36; font-weight:700; padding:0 1px; border-radius:2px; }

/* ============================================================
   MOBILE SAFETY — 320 / 360 / 375 / 390 / 412 / 430px
   ============================================================ */
@media (max-width: 480px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .panel, .card, .acc-card, .bod-card, .live-card, .codes-item, .item-card { max-width:100%; box-sizing:border-box; }
  .live-grid { grid-template-columns: 1fr 1fr; gap:8px; }
  .acc-card { padding:12px !important; }
  .code-row { font-size:10px; }
  .code-row__bm { width:56px; }
  img, svg, table { max-width:100%; }
  .mf-modal__box { max-height:85vh; }
}

@media (max-width: 360px) {
  .live-grid { grid-template-columns: 1fr; }
  .bod-card__odds { float:none; display:block; margin-top:4px; }
}