/* ══════════════════════════════════════════════════════════════════════
 * VAKYR — RE-SKIN v2 (2026-07-03)  ·  ONDATA 1 del restyling Snai/Sisal
 * ----------------------------------------------------------------------
 * ADDITIVO e REVERSIBILE: caricato PER ULTIMO, agisce SOLO sull'aspetto
 * (colori, bordi, densità, forma) di selettori GIÀ ESISTENTI. NON rinomina
 * nulla, NON tocca markup/JS/ID/data-*. Rollback = rimuovere il <link>.
 * Direzione: navigazione/pulizia SNAI + anima Sisal, pelle dark VAKYR.
 *
 * RUOLI COLORE (§4 del piano):
 *   • CIANO  = interazione (hover / selezione / attivo / nav)  → NUOVO
 *   • VERDE  = semantica "consigliato / EV+ / pick"            → INVARIATO
 *   • ORO    = SOLO "Vinci con il 13" e premi                  → riservato
 *   • ROSSO  = live / negativo                                 → semantico
 * Regola SNAI: max 1 elemento saturo per vista · % non quote.
 * ════════════════════════════════════════════════════════════════════════ */

:root{
  /* restyle 2026-07-13: i --rk-* diventano alias dei token "carbone raffinato" */
  --rk-cyan:#22d3ee;
  --rk-blue:#22d3ee;
  --rk-gold:#f0c000;
  --rk-live:#3ddc85;
  --rk-line:#2b3547;
  --rk-line-soft:rgba(148,163,184,.10);
  --rk-panel:#161e2c;
  --rk-panel-2:#1d2636;
  --rk-cyan-dim:rgba(34,211,238,.10);
}

/* ── HEADER: bordo inferiore ciano pulito (meno "gradient viola") ── */
.header::after{
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.55) 35%,rgba(34,211,238,.45) 65%,transparent) !important;
}

/* (MOCKUP-1 header compatto spostato in vakyr-header.css → globale su tutte le pagine) */

/* ═══════════════════════════════════════════════════════════════════
 * CARD PARTITA — bordi netti, hover ciano, radius coerente.
 * Copre SIA il markup JS (.match-card-compact) SIA quello SSR.
 * ═══════════════════════════════════════════════════════════════════ */
.match-card-compact,
.match-card,
.compact-card{
  border-color:var(--rk-line) !important;
  border-radius:12px !important;
}
.match-card:hover,
.match-card-compact:hover,
.compact-card:hover,
.card-hot:hover,
.hero-pick-card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 0 1px rgba(34,211,238,.28) !important;
  border-color:rgba(34,211,238,.42) !important;
}
/* aurora dei top-pick: da viola → ciano/blu pulito */
.card-hot::before{
  background:linear-gradient(135deg,rgba(34,211,238,.55) 0%,rgba(34,211,238,.40) 55%,rgba(34,211,238,.30) 100%) !important;
  opacity:.8 !important;
}

/* ── PILL MERCATO sulle card (.cc-mkt): look "bottone-quota" pulito ──
 *    bordo netto + hover ciano. Il best-pick resta VERDE (semantica).   */
.cc-mkt{
  border:1px solid var(--rk-line) !important;
  border-radius:6px !important;
  padding:3px 7px !important;
  position:relative;
  overflow:hidden;
}
/* micro-barra probabilità riempita al valore (identità §4.4 del piano) */
.cc-mkt .vk-pbar{
  position:absolute; left:0; bottom:0; height:2px;
  background:rgba(34,211,238,.5);
  pointer-events:none;
}
.cc-mkt.mkt-best .vk-pbar{ background:rgba(61,220,133,.8); height:3px; }
/* stato "in schedina" (slip-widget aggiunge .in-slip alla pill selezionata) */
.cc-mkt.in-slip{
  border-color:rgba(34,211,238,.7) !important;
  background:rgba(34,211,238,.12) !important;
}
.cc-mkt:not(.mkt-best):hover{
  border-color:rgba(34,211,238,.5) !important;
  color:#e8edf5 !important;
}
.cc-mkt.mkt-best{ /* resta VERDE (semantica pick): bordo + dimensione preservati */
  border:1.5px solid rgba(61,220,133,.55) !important;
  border-radius:6px !important;
  padding:5px 10px !important;
}
.cc-odds-book{ border-radius:7px !important; }
.cc-edge-badge{ border-radius:6px !important; }

/* ═══════════════════════════════════════════════════════════════════
 * MOCKUP-2 — CARD PARTITA più pulite (home, ≥1000px): pill-bottone
 * leggibili e uniformi + micro-barra su track + card più ariose.
 * CSS-only, home-only. Rispetta simple-mode (.cc-mkt resta display:none lì).
 * ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  .match-card-compact{ padding:11px 15px !important; }
  .cc-row3{ padding-top:8px !important; margin-top:2px !important; gap:10px !important; }
  .cc-markets{ gap:6px !important; }
  /* pill mercato: BOTTONE IMPILATO (label sopra, % grande sotto, barra in fondo) — mockup .pill 66x44 */
  .cc-mkt{ flex-direction:column !important; align-items:center !important; justify-content:center !important;
           gap:1px !important; min-width:60px !important; padding:5px 9px !important; font-size:.62rem !important;
           border-bottom-left-radius:7px !important; border-bottom-right-radius:7px !important;
           background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box, rgba(255,255,255,.03) !important; }
  .cc-mkt > span{ font-size:1.02rem !important; line-height:1.05 !important; }
  .cc-mkt .vk-pbar{ height:3px !important; border-radius:0 !important; }
  /* traccia sotto la barra (il "vuoto" della probabilità) */
  .cc-mkt::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
                  background:rgba(255,255,255,.06); pointer-events:none; z-index:0; }
  .cc-mkt .vk-pbar{ z-index:1; }
  .cc-mkt.mkt-best{ padding:6px 11px !important; min-width:64px !important; }
  .cc-mkt.mkt-best > span{ font-size:1.12rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
 * SIDEBAR LEGHE — densità SNAI + stato attivo con barra ciano a sx.
 * I conteggi #count-* restano quelli calcolati dal JS.
 * ═══════════════════════════════════════════════════════════════════ */
/* L1 — righe SLIM alla Snai: via le mattonelle (fondo/bordo), riga sottile,
   logo più piccolo. Attivo = barra ciano a sx (già sotto). */
.league-btn{
  border-radius:7px !important;
  padding:5px 10px !important;
  background:transparent !important;
  border:1px solid transparent !important;
  font-size:.8rem !important;
}
.league-btn .league-logo{
  width:19px !important; height:19px !important; margin-right:8px !important;
  box-shadow:none !important; padding:1px !important;
}
.league-btn:hover{
  background:rgba(255,255,255,.04) !important;
  border-color:transparent !important;
  color:#e8edf5 !important;
}
/* leghe lucchettate (anon): hover resta ORO, coerente col 🔒 (non ciano) */
.league-btn.vk-locked:hover{
  border-color:rgba(240,185,65,.5) !important;
}
.league-btn.active,
.league-btn[aria-pressed="true"]{
  background:var(--rk-cyan-dim) !important;
  box-shadow:inset 3px 0 0 var(--rk-cyan) !important;
  border-color:rgba(34,211,238,.30) !important;
  color:#e8edf5 !important;
}
.league-btn-nested{ padding:6px 10px !important; }
/* conteggio partite: neutro + tabellare (il verde resta alla semantica) */
.league-match-count{
  background:rgba(255,255,255,.07) !important;
  color:#c3cfe6 !important;
  font-variant-numeric:tabular-nums;
  border-radius:5px !important;
}
.league-btn.active .league-match-count{
  background:rgba(34,211,238,.16) !important;
  color:#bff5ff !important;
}
/* eccezione: il conteggio del Mondiale mantiene il tema ORO del trofeo */
.league-btn-event .league-match-count{
  background:rgba(240,185,65,.2) !important;
  color:#f5a623 !important;
}
/* header di PAESE (accordion): scanning veloce stile SNAI */
.country-header{
  border-radius:7px !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.74rem !important;
}
.country-header:hover{
  border-color:rgba(34,211,238,.35) !important;
  color:#e8edf5 !important;
  background:rgba(34,211,238,.05) !important;
}
.country-league-count,
.country-count{ font-variant-numeric:tabular-nums; }
/* prefisso ISO (span opzionale .vk-iso aggiunto in brick 2 — innocuo se assente) */
.vk-iso{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  color:#8fa6cf;
  letter-spacing:.02em;
  font-size:.66rem;
  flex-shrink:0;
}
.sidebar-title:hover{ color:#e8edf5; }

/* ═══════════════════════════════════════════════════════════════════
 * CHIPS — temporali (QUANDO) + filtri mercato + sort → forma pill pulita.
 * ═══════════════════════════════════════════════════════════════════ */
.date-filter-row .filter-btn,
#marketFilterRow .filter-btn,
#marketFilterRow [data-market],
#sortRow .filter-btn,
#sortRow [data-sort],
.date-pill{
  border-radius:999px !important;
  transition:background .15s,border-color .15s,color .15s !important;
}
.date-filter-row .filter-btn.active,
#marketFilterRow .filter-btn.active,
#marketFilterRow [data-market].active,
#marketFilterRow [data-market].has-active,
#sortRow .filter-btn.active,
#sortRow [data-sort].active,
.date-pill.active{
  background:var(--rk-panel-2) !important;
  border-color:var(--rk-blue) !important;
  color:#e8edf5 !important;
}

/* ── Chip "← Ieri" (ancora → /ieri): niente sottolineatura, look muto ── */
.date-ieri{ text-decoration:none !important; opacity:.82; }
.date-ieri:hover{ opacity:1; border-color:var(--rk-blue) !important; color:#e8edf5 !important; }

/* ── LINGUETTE MATCH (.tab-btn): active con underline ciano netto ── */
.tab-btn.active{
  border-bottom-color:var(--rk-cyan) !important;
}

/* ── ACCENTO GLOBALE: selection + scrollbar hover → ciano/blu (no viola) ── */
::selection{ background:rgba(34,211,238,.34); color:#fff; }
::-moz-selection{ background:rgba(34,211,238,.34); color:#fff; }
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--rk-cyan),var(--rk-blue)) !important;
  background-clip:padding-box !important;
  border:2px solid transparent !important;
}

/* (l'oro di "Vinci con il 13" è già gestito da vakyr-header.css con contrasto
 *  corretto — testo scuro su fondo oro; qui NON lo tocchiamo per non rischiare
 *  testo-oro-su-oro illeggibile.) */

/* ── Bottoni generici (.btn): micro-pulizia radius ── */
.btn{ border-radius:9px !important; }

/* ── Nota: NESSUNA modifica strutturale qui. Header 2 livelli, mercati a
 *    categorie, rail schedina desktop e bottom-nav mobile = ondate
 *    successive, isolate e testate (vedi docs/RESTYLING_SAFETY_CHECKLIST.md). */

/* ═══════════════════════════════════════════════════════════════════
 * MOCKUP-4 — RAIL "LA MIA SCHEDINA" (desktop ≥1000px, home)
 * Pannello sticky in cima alla colonna destra: selezioni → prob/quota combinata.
 * Iniettato da mobile-drawer.js (setupSlipRail). Nascosto su mobile (c'è la barra).
 * ═══════════════════════════════════════════════════════════════════ */
.vk-slip-rail{ display:none; }
@media (min-width:1000px){
  .vk-slip-rail{
    display:block; position:sticky; top:var(--vk-sticky-top,96px);
    background:linear-gradient(180deg,rgba(34,211,238,.05),rgba(20,27,46,.85));
    border:1px solid var(--rk-line,#2b3547); border-radius:14px;
    padding:13px 14px; margin-bottom:16px; z-index:5;
  }
  .vk-sr-head{ display:flex; align-items:center; justify-content:space-between;
    font-size:.9rem; font-weight:800; color:#e8edf5; margin-bottom:8px; }
  .vk-sr-head .vk-sr-n{ background:var(--rk-cyan,#22d3ee); color:#0d1420; border-radius:999px;
    min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center;
    justify-content:center; font-size:.75rem; font-weight:900; }
  .vk-sr-empty{ font-size:.76rem; color:#9aa5b8; line-height:1.5; }
  /* R2/R3 — "La nostra proposta" + footer identità onestà */
  .vk-sr-proposta{ display:block; margin-top:10px; padding:9px 11px; border-radius:9px;
    background:rgba(61,220,133,.06); border:1px solid rgba(61,220,133,.22); text-decoration:none; }
  .vk-sr-proposta:hover{ border-color:rgba(61,220,133,.4); }
  .vk-sr-prop-eyebrow{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.04em;
    color:#3ddc85; margin-bottom:3px; text-transform:uppercase; }
  .vk-sr-prop-pick{ font-size:.76rem; color:#e8edf5; line-height:1.4; }
  .vk-sr-prop-pick b{ color:#3ddc85; }
  .vk-sr-trust{ margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.06);
    font-size:.66rem; color:#9aa5b8; line-height:1.4; }
  .vk-sr-trust b{ color:#c8d3e8; }
  .vk-sr-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
  .vk-sr-leg{ display:flex; align-items:flex-start; gap:8px; padding:7px 0;
    border-bottom:1px dashed rgba(255,255,255,.08); }
  .vk-sr-x{ background:none; border:0; color:#9aa5b8; font-size:16px; line-height:1;
    cursor:pointer; padding:0 2px; flex:0 0 auto; font-family:inherit; }
  .vk-sr-x:hover{ color:#ff5c5c; }
  .vk-sr-leg-main{ display:flex; flex-direction:column; min-width:0; }
  .vk-sr-leg-main b{ font-size:.8rem; color:#e8edf5; font-weight:700; }
  .vk-sr-leg-main span{ font-size:.68rem; color:#9aa5b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vk-sr-sum{ background:rgba(255,255,255,.03); border-radius:9px; padding:9px 11px; margin-bottom:9px; }
  .vk-sr-row{ display:flex; justify-content:space-between; font-size:.76rem; color:#9aa5b8; margin-bottom:3px; }
  .vk-sr-row:last-child{ margin-bottom:0; }
  .vk-sr-row b{ color:#e8edf5; font-variant-numeric:tabular-nums; font-size:.9rem; }
  .vk-sr-row:first-child b{ color:var(--rk-cyan,#22d3ee); }
  .vk-sr-open{ width:100%; background:linear-gradient(135deg,#22d3ee,#22d3ee); color:#0d1420;
    border:0; border-radius:9px; padding:9px; font-weight:800; font-size:.82rem;
    font-family:inherit; cursor:pointer; margin-bottom:5px; }
  .vk-sr-clear{ width:100%; background:none; border:0; color:#9aa5b8; font-size:.72rem;
    font-family:inherit; cursor:pointer; text-decoration:underline; padding:3px; }
  .vk-sr-clear:hover{ color:#ff5c5c; }
}