/* =============================================================
   LL PREDICTIONS — page-specific styles
   Only loaded on pages using the LL Predictions template.
   ============================================================= */

/* ── PAGE HEADER ── */
.page-header { margin-bottom:18px; }
.page-title { font-weight:900; font-size:26px; color:var(--text-main); line-height:1.2; margin-bottom:4px; }
.page-subtitle { font-size:14px; color:var(--text-muted); }

/* ── DATE NAV ── */
.date-nav { display:flex; align-items:center; gap:6px; margin-bottom:16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r); padding:5px; }
.date-btn { flex:1; text-align:center; padding:8px 10px; border-radius:6px; font-size:14px; font-weight:700; color:var(--text-sec); cursor:pointer; border:none; background:transparent; font-family:'DM Sans',sans-serif; transition:all 0.15s; }
.date-btn:hover { color:var(--text-main); background:var(--bg-card); }
.date-btn.active { background:var(--blue); color:#fff; }
.date-btn .date-label { display:block; font-size:10px; font-weight:600; opacity:0.75; margin-bottom:1px; letter-spacing:0.5px; }
.date-btn .date-val { display:block; font-size:15px; font-weight:800; }

/* ── LEAGUE FILTER ── */
.league-filter-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.league-filter-label { font-size:13px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.league-filter-select { font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; color:var(--text-main); background:var(--bg-surface); border:1px solid var(--border-mid); border-radius:var(--r); padding:8px 14px; cursor:pointer; flex:1; max-width:320px; }

/* ── LEAGUE GROUP ── */
.league-group { margin-bottom:14px; }
.league-group-head { display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); margin-bottom:6px; }
.league-group-flag { font-size:16px; }
.league-group-name { font-weight:800; font-size:14px; color:var(--text-main); flex:1; }
.league-group-count { font-size:12px; color:var(--text-muted); font-weight:600; }

/* ── PREDICTION CARDS ── */
.pred-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pred-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; text-decoration:none; transition:all 0.15s; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; }
.pred-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue); }
.pred-card:hover { background:var(--bg-card); border-color:var(--border-mid); text-decoration:none; }
.pred-teams { font-weight:800; font-size:15px; color:var(--text-main); line-height:1.3; }
.pred-vs { color:var(--text-muted); font-weight:600; font-size:13px; margin:0 3px; }
.pred-kickoff { font-size:13px; color:var(--text-muted); font-weight:600; }

/* ── SEO BLOCK ── */
.seo-block { border-top:1px solid var(--border); margin-top:28px; padding-top:24px; }
.seo-title { font-weight:900; font-size:20px; color:var(--text-main); margin-bottom:12px; line-height:1.3; }
.seo-h3 { font-weight:800; font-size:15px; color:var(--text-main); margin:20px 0 6px; }
.seo-p { font-size:15px; color:var(--text-main); line-height:1.8; margin-bottom:10px; }
.seo-p a { color:var(--blue); }
.seo-p a:hover { text-decoration:underline; }
.seo-p strong { font-weight:800; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .pred-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .page-title { font-size:22px; }
  .date-btn .date-label { display:none; }
}
@media (max-width:480px) {
  .pred-grid { grid-template-columns:1fr; }
  .filters-bar { gap:4px; }
}

/* -- DATE NAVIGATOR -- */
.date-nav-wrap { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.date-arrow { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r); width:36px; height:36px; font-size:22px; color:var(--text-main); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'DM Sans',sans-serif; }
.date-arrow:disabled { opacity:0.3; cursor:default; }
.date-arrow:hover:not(:disabled) { background:var(--bg-card); border-color:var(--blue); color:var(--blue); }
.date-current { font-size:16px; font-weight:700; color:var(--text-main); flex:1; text-align:center; }

/* -- LEAGUE TABS -- */
.league-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.league-tab { padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-sec); font-size:13px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.15s; }
.league-tab:hover { border-color:var(--blue); color:var(--blue); }
.league-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }