/*
 * custom.css — foglio NOSTRO, caricato DOPO il tema originale (style.css).
 * Qui vivono le modifiche esplicitamente richieste dal cliente sopra al
 * porting 1:1 del tema. NON tocca i file vendor (style.css, bootstrap.min.css,
 * ecc.), che restano verbatim per poterli risincronizzare in futuro.
 * Usa SOLO selettori/classi già presenti nel markup originale (.feature-section,
 * .widget-category, .row-cols-lg-2, .col, .feature-item, ...): nessuna classe
 * nuova inventata nell'HTML.
 */

/* ---------------------------------------------------------------------
 * Fix 1 — Home "Siti Scommesse / Nuovi Bookmakers" (.feature-section):
 * elimina lo spazio morto sotto ai box bonus.
 *
 * Causa: .feature-item/.feature-inner si restringono già al contenuto
 * (vedi fix preesistente più sopra in style.css: height:auto!important),
 * ma la .col di Bootstrap che li contiene resta alta quanto la vicina
 * nella stessa riga (align-items:stretch è il default flex), lasciando
 * "aria" sotto al box più corto quando le due descrizioni hanno lunghezza
 * diversa. Basta non allungare più le .col della riga: ognuna prende
 * l'altezza del proprio contenuto — la griglia resta 2x2 (row-cols-lg-2
 * non viene toccato), il contenuto resta già centrato dal fix esistente.
 * --------------------------------------------------------------------- */
.feature-section .row.row-cols-lg-2 {
  align-items: flex-start;
}

/* ---------------------------------------------------------------------
 * Fix 1b — box bonus tutti uguali e allineati fra loro.
 *
 * Causa misurata: i loghi dei concessionari hanno proporzioni diverse
 * (vincitu/sportbet/stanleybet 100x100, betwin360 100x80). Il contenitore
 * del logo non ha un'altezza propria, quindi si adatta all'immagine: il box
 * col logo più basso risultava 214px contro 234px degli altri, e nella
 * stessa riga i titoli finivano a quote diverse (611 vs 621) insieme ai
 * pulsanti. Fissando l'altezza del contenitore, i box tornano naturalmente
 * della stessa altezza e titoli/pulsanti si allineano da soli: si toglie la
 * causa invece di compensare l'effetto forzando le altezze dall'esterno.
 * --------------------------------------------------------------------- */
/* La regola sta sul COMPONENTE (`.feature-thumb`), riusato in più posti: sezione
 * "Nuovi Bookmakers" in home, sidebar della pagina articolo, banner intercalati
 * nella griglia news. Limitandola ai soli primi due, i banner in griglia
 * restavano fuori e si disallineavano lo stesso.
 *
 * ⚠️ ECCEZIONE `.comparatore-page`: lì le card sono a piena larghezza e a UNA per
 * riga, e ricalcano la geometria dell'originale (logo 100x80 a x=59). Applicando
 * anche lì l'altezza fissa, il logo diventava 125x100 e slittava a x=130.
 * Le card affiancate hanno bisogno di loghi normalizzati per allinearsi tra loro;
 * una card sola per riga non ha vicini con cui allinearsi — quindi non serve. */
.feature-thumb:not(.comparatore-page .feature-thumb) {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-thumb:not(.comparatore-page .feature-thumb) img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------
 * Fix 3 — Sidebar articolo (.widget.widget-category, 536px): i 4 box
 * bonus, oggi 2 per riga da 256px (stretti: il testo va a capo più volte
 * e i box diventano alti e sproporzionati), diventano 1 per riga a piena
 * larghezza. Stesso anti-stretch di Fix 1 (qui ininfluente visto che con
 * 1 box per riga non c'è più un "vicino" più alto, ma resta coerente).
 *
 * Nota: selezioniamo tramite la classe "row-cols-lg-2" (sempre presente
 * nel markup insieme a row-cols-sm-2/row-cols-1) e non tramite una nostra
 * media query: essendo una regola non condizionata, batte per specificità
 * le regole responsive di Bootstrap a QUALSIASI larghezza in cui il
 * markup porta quella classe, cioè da 576px in su. Sotto i 576px la
 * griglia è già 1 colonna di suo (row-cols-1), quindi resta invariata.
 * --------------------------------------------------------------------- */
.widget.widget-category .row.row-cols-lg-2 {
  align-items: flex-start;
}
.widget.widget-category .row.row-cols-lg-2 > .col {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ---------------------------------------------------------------------
 * Fix 5a — /comparatore, card grande "Nuovi Bookmakers" (comparatore_card.php):
 * centra il bottone VERIFICA rispetto all'INTERA card.
 *
 * Causa (vedi anche il commento in comparatore_card.php): il wrapper
 * `.col-lg-6` di VERIFICA è stato spostato fuori da `.feature-content`
 * (dove il suo `margin:0 auto` lo centrava solo nel 75% destro della card)
 * a fratello diretto dentro `.feature-inner` (flex, wrap). Qui forziamo
 * `flex-basis:100%` così VERIFICA occupa sempre una riga tutta sua nel
 * flex-wrap (indipendentemente da dove cade RECENSIONE) e il suo
 * `margin:0 auto` centra correttamente sull'intera larghezza della card.
 * --------------------------------------------------------------------- */
.feature-section .feature-item .feature-inner > .col-lg-6 {
  flex-basis: 100%;
}

/* ⚠️ La regola qui sopra vale SOLO per la home (.feature-section), dove il
 * wrapper di VERIFICA è davvero figlio diretto di .feature-inner.
 * Su /comparatore NON serve alcuna regola: lì il markup è tornato identico
 * all'originale (il `.col-lg-6` è dentro `.feature-content`, vedi il commento
 * in partials/comparatore_card.php) e il tema lo dimensiona da sé —
 * VERIFICA 456px centrata nei 912, RECENSIONE a destra. */

/* ---------------------------------------------------------------------
 * Fix 5b — schede pubblicitarie: quelle in fondo a /comparatore
 * (.binduz-er-sidebar-add-box.col-lg-4) E quelle intercalate nella griglia
 * news di home.php (stesso wrapper, ma .col-lg-3 — inizialmente escluso qui
 * apposta, poi richiesto anche lì dal cliente: «centra i box dei banner in
 * orizzontale e verticale», riferito a entrambi i punti in cui compaiono).
 *
 * Verticale (causa originaria): la riga le stira tutte alla stessa altezza
 * (flex di Bootstrap, default align-items:stretch — qui il vicino più alto
 * è spesso un widget di terze parti, es. iframe, la cui altezza non
 * controlliamo). La card bonus_card.php (contenuto compatto) restava
 * ancorata in alto, lasciando un vuoto sotto. Si centra verticalmente il
 * contenuto nello spazio già stirato, non un'altezza nuova inventata.
 *
 * Orizzontale (causa aggiunta qui): `.feature-item` è forzato a width:100%
 * (sotto), ma il `codehtml` grezzo di banner2.asp/banner3.asp (un blob
 * HTML/script di terzi, es. un widget pubblicitario a larghezza fissa) non
 * lo è — senza `justify-content:center` restava incollato al bordo
 * sinistro della colonna quando più stretto di questa.
 * --------------------------------------------------------------------- */
.binduz-er-sidebar-add-box.col-lg-4,
.binduz-er-sidebar-add-box.col-lg-3 {
  display: flex;
}
.binduz-er-sidebar-add-box.col-lg-4 > .col,
.binduz-er-sidebar-add-box.col-lg-3 > .col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.binduz-er-sidebar-add-box.col-lg-4 > .col > .feature-item,
.binduz-er-sidebar-add-box.col-lg-3 > .col > .feature-item {
  width: 100%;
}

/* ---------------------------------------------------------------------
 * Fix 3 — /recensione/{slug}: il box logo del bookmaker (.csd-title) è
 * verde (#39B54A, definito in style.css) — su un logo colorato di terzi
 * legge male. Richiesta cliente: sfondo bianco (il resto della sidebar,
 * .course-side-detail, è già bianco: background-color:#fff in style.css,
 * quindi il riquadro si fonde con il resto invece di spiccare in verde).
 * L'allineamento a sinistra è invece nel markup (recensione.php: niente
 * più text-align:center/margin:auto sul wrapper, e il logo non è più
 * width:100% quindi non riempie tutta la riga).
 * --------------------------------------------------------------------- */
.course-side-detail .csd-title {
  background: #fff;
}

/* ---------------------------------------------------------------------
 * Banner intercalati in /categoria e /cerca: contenuto centrato in
 * orizzontale e in verticale (richiesta cliente).
 *
 * Nell'originale queste celle sono `.col` identiche alle card news e
 * portano un `style="margin-top:8%"` inline che le spingeva giù, rendendo
 * la riga irregolare (rimosso). La riga le stira comunque tutte all'altezza
 * della più alta (flex di Bootstrap, align-items:stretch di default): senza
 * centratura il banner resta ancorato in alto, con un vuoto sotto.
 * Si centra il contenuto NELLO spazio già stirato — non si inventa
 * un'altezza nuova.
 *
 * `.ads-cell` è un marcatore aggiunto solo a queste celle (vedi
 * categoria.php / cerca.php): serve a non toccare le card news, che nel
 * markup originale hanno la stessa identica classe `.col`.
 * --------------------------------------------------------------------- */
.ads-cell {
  display: flex;
  align-items: center;      /* verticale */
  justify-content: center;  /* orizzontale */
}
.ads-cell > * {
  width: 100%;
}

/* ---------------------------------------------------------------------
 * Cookie consent (fase 3). Banner in basso + pannello preferenze.
 * Palette brand: verde #39b54a. Il gate su GA e' in partials/cookie_consent.php.
 * --------------------------------------------------------------------- */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#101115;color:#fff;box-shadow:0 -2px 16px rgba(0,0,0,.3)}
.cc-inner{max-width:1140px;margin:0 auto;padding:14px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cc-text{margin:0;flex:1 1 320px;font-size:.9rem;line-height:1.4}
.cc-text a{color:#39b54a;text-decoration:underline}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap}
.cc-btn{border:0;border-radius:6px;padding:.55rem 1rem;font-weight:700;cursor:pointer;font-size:.85rem}
/* verde piu' scuro del brand (#39b54a) per raggiungere il contrasto WCAG col testo bianco */
.cc-accept,.cc-save{background:#1e7a2e;color:#fff}
.cc-reject,.cc-prefs-open{background:#3a3f47;color:#fff}
.cc-prefs{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.cc-prefs-box{background:#fff;color:#101115;border-radius:12px;max-width:480px;width:100%;padding:22px}
.cc-prefs-box h3{margin:0 0 14px}
.cc-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0;border-top:1px solid #eee}
.cc-row small{color:#555}
.cc-prefs-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ---------------------------------------------------------------------
 * Accessibilita' (go-live): contrasto barra verde in alto + ordine heading.
 * --------------------------------------------------------------------- */
/* La barra .header-top era #39b54a: bianco su quel verde = ~2.6:1 (sotto WCAG).
 * Verde piu' scuro per il testo bianco (ULTIMO AGGIORNAMENTO, email). */
.header-section.style-3 .header-top{background:#167a2b}

/* Heading rinominati per non saltare i livelli (h2->h3->h4), ma resi visivamente
 * identici ai vecchi h4/h5 del tema Gymove. */
.event-content-info h3.pp-h{font-size:1.5rem}      /* era h4 (featured In Primo Piano) */
.event-content h4.ei-h{font-size:1rem}             /* era h5 (spalla + news piccole) */
.post-content h3.card-h{font-size:1.25rem}         /* era h4 (griglia blog) */

/* Voce di menu attiva (la sezione corrente) — verde brand. Il tema evidenzia
 * l'hover ma non marcava l'active lato server: ora header.php aggiunge .active. */
.header-section.style-3 .menu > ul > li.active > a{color:#39b54a}

/* ---------------------------------------------------------------------
 * Livescore e Classifica renderizzati da noi (dati Sofascore), in
 * sostituzione dei widget di terzi morti. Grafica del tema, niente
 * pubblicita', niente scroll interno. Gli stemmi hanno dimensioni fisse
 * (22x22) cosi' l'attesa del hotlink non provoca layout shift (CLS).
 * --------------------------------------------------------------------- */
.ls-wrap,.cls-wrap{max-width:820px;margin:0 auto}
.ls-group{background:#fff;border:1px solid #ececec;border-radius:10px;overflow:hidden;margin-bottom:20px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.ls-group-head{background:#167a2b;color:#fff;padding:10px 16px;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:8px}
.ls-lgbadge{width:20px;height:20px;object-fit:contain;flex:none;background:#fff;border-radius:3px;padding:1px}
.ls-match.ls-finished{opacity:.72}
.ls-match.ls-live{background:#fbfff9}
.ls-live .ls-status{color:#e23636}
.ls-finished .ls-status{color:#888}
.ls-scheduled .ls-status{color:#167a2b}
.ls-scheduled .ls-goals{color:#bbb;font-weight:600;font-size:.9rem}
.ls-match{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #f2f2f2}
.ls-match:first-of-type{border-top:0}
.ls-team{flex:1 1 0;display:flex;align-items:center;gap:8px;min-width:0;font-weight:500;color:#222}
.ls-team.home{justify-content:flex-end;text-align:right}
.ls-team.away{justify-content:flex-start;text-align:left}
.ls-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-crest,.cls-crest{width:22px;height:22px;object-fit:contain;flex:none}
.ls-score{flex:none;min-width:74px;text-align:center;line-height:1.2}
.ls-goals{display:block;font-weight:700;font-size:1.05rem;color:#111}
.ls-status{display:block;font-size:.66rem;font-weight:600;text-transform:uppercase;color:#e23636;letter-spacing:.3px;margin-top:2px}
.ls-empty{background:#fff;border:1px solid #ececec;border-radius:10px;text-align:center;padding:44px 20px;color:#666;line-height:1.6}
.ls-credit{text-align:center;color:#9a9a9a;font-size:.78rem;margin:18px 0 0}

.cls-wrap{background:#fff;border:1px solid #ececec;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.cls-subhead{background:#167a2b;color:#fff;padding:12px 16px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:.95rem}
.cls-scroll{overflow-x:auto}
.cls-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.cls-table thead th{background:#f6f7f8;color:#555;font-weight:600;font-size:.72rem;text-transform:uppercase;padding:10px 6px;text-align:center;border-bottom:1px solid #e6e6e6}
.cls-table th.team{text-align:left;padding-left:12px}
.cls-table td{padding:10px 6px;text-align:center;border-top:1px solid #f2f2f2;color:#333}
.cls-table td.team{text-align:left;padding-left:12px}
.cls-table td.pos{font-weight:600;width:34px}
.cls-table td.pts{font-weight:700;color:#111}
.cls-team-cell{display:flex;align-items:center;gap:9px;min-width:0}
.cls-team-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cls-zone-champions{box-shadow:inset 4px 0 0 #1e7a2e}
.cls-zone-europa{box-shadow:inset 4px 0 0 #f39c12}
.cls-zone-releg{box-shadow:inset 4px 0 0 #e74c3c}
.cls-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:14px 16px;font-size:.78rem;color:#666}
.cls-legend span{display:inline-flex;align-items:center;gap:6px}
.cls-dot{width:10px;height:10px;border-radius:2px;display:inline-block}
.cls-dot.champions{background:#1e7a2e}
.cls-dot.europa{background:#f39c12}
.cls-dot.releg{background:#e74c3c}
@media (max-width:575px){.cls-table .hide-sm{display:none}}