/* Betman360 public site — additions for livescore / odds / subscriptions /
   match-detail pages. Same tokens as site.css (imported first in every page
   that loads this file), just new component shapes site.css didn't need yet. */

/* ---------- Livescore layout (sidebar + main) ---------- */
.ls-layout { display: flex; align-items: flex-start; gap: 18px; }
.ls-main { flex: 1; min-width: 0; }

.ls-filter-toggle { display: none; margin-bottom: 12px; }

.ls-sidebar {
  flex-shrink: 0;
  width: 260px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg-paper);
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow-y: auto;
  position: sticky;
  top: calc(var(--header-height) + 12px);
}
.ls-sidebar-head { display: none; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--color-divider); }
.ls-sidebar-head h3 { margin: 0; font-size: 0.85rem; text-transform: uppercase; }
.ls-sidebar-close { background: none; border: none; color: var(--color-text-secondary); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 6px; }
.ls-sidebar-body { padding: 8px; }
.ls-sidebar-section-title { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); padding: 12px 8px 6px; }

.ls-filter-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
}
.ls-filter-item:hover { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.ls-filter-item.active { background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700; }
.ls-filter-item.active .ls-count { color: inherit; opacity: 0.75; }
.ls-filter-item img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.ls-filter-item span:not(.ls-count):not(.ls-caret) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-filter-item--sub { padding-left: 26px; font-size: 0.78rem; }
.ls-count { margin-left: auto; font-size: 0.7rem; color: var(--color-text-tertiary); font-family: var(--font-mono); flex-shrink: 0; }
.ls-caret { display: inline-block; font-size: 0.6rem; color: var(--color-text-tertiary); transition: transform 0.1s ease; flex-shrink: 0; width: 10px; }
.ls-caret.open { transform: rotate(90deg); }

.ls-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .ls-filter-toggle { display: inline-flex; }
  .ls-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 320px;
    max-height: none;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .ls-sidebar.open { transform: translateX(0); }
  .ls-sidebar-head { display: flex; }
  .ls-sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 99;
  }
}

/* ---------- Date strip ---------- */
.date-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; }
.date-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--color-divider);
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  min-width: 56px;
  text-align: center;
}
.date-chip .dow { text-transform: uppercase; font-size: 0.66rem; color: var(--color-text-tertiary); }
.date-chip.active { border-color: var(--color-primary); color: var(--color-primary); background: rgba(255,238,88,0.06); }
.date-chip:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }

/* ---------- Status tabs / search ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.status-tabs { display: flex; border: 1px solid var(--color-divider); }
.status-tabs a {
  padding: 7px 14px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  border-right: 1px solid var(--color-divider);
}
.status-tabs a:last-child { border-right: none; }
.status-tabs a.active { background: var(--color-primary); color: var(--color-primary-contrast); }
.status-tabs a:hover:not(.active) { color: var(--color-text-primary); }
.search-box input { min-width: 200px; }

/* ---------- League group ---------- */
.league-group { margin-bottom: 18px; }
.league-group-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-bg-paper); border: 1px solid var(--color-divider); border-bottom: none; font-size: 0.78rem; font-weight: 700; }
.league-group-head img { width: 18px; height: 18px; object-fit: contain; }
.league-group-head .country { color: var(--color-text-tertiary); font-weight: 500; }
.league-group-head .count { margin-left: auto; color: var(--color-text-secondary); font-weight: 500; font-size: 0.72rem; }
.league-group-body { border: 1px solid var(--color-divider); }

/* ---------- Match row (livescore list) ---------- */
.match-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--color-divider);
  font-size: 0.85rem;
}
.match-row:first-child { border-top: none; }
.match-row:hover { background: var(--color-bg-elevated); }
.match-row .mr-status { width: 52px; flex-shrink: 0; text-align: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-secondary); }
.match-row .mr-status .mins { color: var(--color-error); font-weight: 800; }
.match-row .mr-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.match-row .mr-team { display: flex; align-items: center; gap: 6px; }
.match-row .mr-team img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.match-row .mr-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row .mr-team.winner span { font-weight: 800; color: var(--color-text-primary); }
.match-row .mr-score { width: 34px; flex-shrink: 0; text-align: center; font-family: var(--font-mono); font-weight: 800; display: flex; flex-direction: column; gap: 4px; }
.match-row .mr-odds { flex-shrink: 0; display: none; }
@media (min-width: 640px) { .match-row .mr-odds { display: flex; gap: 4px; } }
.match-row .mr-odds .o { width: 40px; text-align: center; padding: 4px 0; border: 1px solid var(--color-divider); font-family: var(--font-mono); font-size: 0.74rem; }

/* ---------- Match hero extras (livescore detail) ---------- */
.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--color-error); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; }
.detail-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--color-divider); margin: 18px 0 14px; overflow-x: auto; }
.detail-tabs button {
  flex-shrink: 0;
  padding: 9px 16px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.detail-tabs button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.detail-tabs button:hover:not(.active) { color: var(--color-text-primary); }

/* ---------- Events timeline ---------- */
.event-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-divider); font-size: 0.84rem; }
.event-item:first-child { border-top: none; }
.event-item .ev-min { width: 36px; flex-shrink: 0; font-family: var(--font-mono); font-weight: 800; color: var(--color-text-secondary); text-align: right; }
.event-item .ev-icon { width: 20px; flex-shrink: 0; text-align: center; }
.event-item .ev-body { flex: 1; }
.event-item .ev-body .player { font-weight: 700; }
.event-item .ev-body .detail { color: var(--color-text-secondary); font-size: 0.76rem; }
.event-item.away { flex-direction: row-reverse; text-align: right; }
.event-item.away .ev-min { text-align: left; }

/* ---------- Lineups ---------- */
.lineup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .lineup-grid { grid-template-columns: 1fr; } }
.lineup-col h4 { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lineup-col h4 img { width: 18px; height: 18px; object-fit: contain; }
.lineup-formation { color: var(--color-text-secondary); font-size: 0.76rem; margin-bottom: 8px; }
.player-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--color-divider); font-size: 0.82rem; }
.player-row:first-child { border-top: none; }
.player-row .num { width: 22px; flex-shrink: 0; font-family: var(--font-mono); color: var(--color-text-tertiary); text-align: center; }
.subs-list { margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--color-divider); }
.subs-list h5 { font-size: 0.7rem; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 6px; }

/* ---------- Split stat bar (match statistics) ---------- */
.split-stat { margin-bottom: 12px; }
.split-stat .labels { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.split-stat .track { display: flex; height: 6px; background: var(--color-bg-elevated); }
.split-stat .home-fill { background: var(--color-primary); }
.split-stat .away-fill { background: var(--color-text-tertiary); }
.split-stat .stat-name { text-align: center; font-size: 0.7rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin: 2px 0 4px; }

/* ---------- Odds comparison table ---------- */
.odds-compare-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.odds-compare-table th, .odds-compare-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-divider); text-align: center; }
.odds-compare-table th { color: var(--color-text-secondary); font-size: 0.68rem; text-transform: uppercase; }
.odds-compare-table td.bk-name { text-align: left; font-weight: 700; }
.odds-compare-table td.best { color: var(--color-primary); font-weight: 800; }
.odds-summary-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.odds-summary-row .best-price { text-align: center; padding: 6px 4px; border: 1px solid var(--color-divider); flex: 1; }
.odds-summary-row .best-price .v { font-family: var(--font-mono); font-weight: 800; color: var(--color-primary); font-size: 1rem; }
.odds-summary-row .best-price .l { font-size: 0.65rem; color: var(--color-text-tertiary); text-transform: uppercase; }

/* ---------- Subscription plan cards ---------- */
.plan-card { position: relative; text-align: center; padding: 22px 16px; }
.plan-card.featured { border-color: var(--color-primary); }
.plan-ribbon { position: absolute; top: -1px; right: -1px; background: var(--color-primary); color: var(--color-primary-contrast); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; letter-spacing: 0.03em; }
.plan-card h3 { font-size: 0.85rem; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 6px; }
.plan-price { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 800; color: var(--color-primary); margin-bottom: 2px; }
.plan-price .per { font-size: 0.7rem; color: var(--color-text-tertiary); font-weight: 500; }
.plan-desc { font-size: 0.78rem; color: var(--color-text-secondary); margin: 10px 0 16px; min-height: 40px; }

/* ---------- Payment tabs (mpesa / card) ---------- */
.pay-tabs { display: flex; gap: 0; margin-bottom: 14px; border: 1px solid var(--color-divider); }
.pay-tabs button { flex: 1; padding: 10px; background: var(--color-bg-elevated); border: none; color: var(--color-text-secondary); font-family: inherit; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; cursor: pointer; }
.pay-tabs button.active { background: var(--color-primary); color: var(--color-primary-contrast); }
.pay-tabs button:not(:last-child) { border-right: 1px solid var(--color-divider); }

/* ---------- Trust strip / testimonials ---------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-around; padding: 16px 0; }
.trust-item { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font-size: 0.8rem; }
.trust-item .ic { color: var(--color-primary); font-weight: 800; }

/* ---------- Share row ---------- */
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.share-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; color: var(--color-text-tertiary); }
.share-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-divider);
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: var(--radius);
}
.share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- Newsletter form ---------- */
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 180px; }