/* Reset minimo e base tipografica */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-primary);
	background: var(--color-bg-page);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--color-link); }

/* Link nel corpo del testo: sempre sottolineati (accessibilità, WCAG 1.4.1) */
.btc-content a,
.btc-link {
	color: var(--color-link);
	text-decoration: underline;
}
.btc-content a:hover,
.btc-link:hover {
	color: var(--color-link-hover);
}

/* Header */
.btc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-6);
	border-bottom: 0.5px solid var(--color-border);
	background: var(--color-bg-surface);
	position: relative;
}
.btc-logo {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
}
.btc-logo-mark {
	width: 26px;
	height: 26px;
	background: var(--color-action-primary);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
}
.btc-logo-word {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
}
.btc-logo-word .bet { color: var(--color-text-primary); }
.btc-logo-word .chiaro { color: var(--color-action-primary); }

/* Logo personalizzato nativo (Personalizza → Identità del sito): stessa
   altezza indicativa del logo di riserva, per non alterare le proporzioni
   dell'header qualunque immagine venga caricata. */
.btc-logo-custom .custom-logo-link { display: flex; align-items: center; }
.btc-logo-custom img { max-height: 32px; width: auto; }

.btc-nav { display: flex; align-items: center; gap: var(--space-4); }
.btc-nav a { font-size: 13px; color: var(--ink-700); text-decoration: none; }
.btc-nav a:hover { color: var(--color-link); }
.btc-nav-fallback { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.btc-nav-fallback a { font-size: 13px; color: var(--ink-700); text-decoration: none; white-space: nowrap; }
.btc-nav-fallback a:hover { color: var(--color-link); }

/* Sottomenu desktop (Aspetto → Menu → trascina una voce sotto un'altra):
   stesso trattamento a comparsa già usato per i risultati di ricerca
   istantanea (.btc-search-results), per restare coerenti con un pattern
   già approvato invece di introdurne uno nuovo. */
.btc-nav-fallback > li { position: relative; }
.btc-nav-fallback .sub-menu {
	display: none;
	position: absolute; top: 100%; left: 0; margin-top: 6px;
	background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: var(--space-2) 0; z-index: 40; list-style: none; min-width: 180px;
}
.btc-nav-fallback > li:hover > .sub-menu,
.btc-nav-fallback > li:focus-within > .sub-menu {
	display: block;
}
.btc-nav-fallback .sub-menu a { display: block; padding: 8px 16px; }
.btc-nav-fallback .menu-item-has-children > a::after {
	content: "\25BE"; margin-left: 4px; font-size: 9px; opacity: 0.6;
}

/* Pulsante hamburger: nascosto su desktop, mostrato solo sotto il breakpoint
   mobile (vedi media query più sotto). Le due icone (apri/chiudi) sono
   entrambe nel markup, l'una o l'altra visibile a seconda di
   .btc-nav-panel.is-open sull'header — nessun JS necessario per l'icona. */
.btc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: none;
	background: none;
	color: var(--color-text-primary);
	cursor: pointer;
	flex-shrink: 0;
}
.btc-nav-toggle-icon-close { display: none; }
.btc-nav-toggle[aria-expanded="true"] .btc-nav-toggle-icon-open { display: none; }
.btc-nav-toggle[aria-expanded="true"] .btc-nav-toggle-icon-close { display: block; }

/* Pannello di navigazione: su desktop è semplicemente il contenitore in linea
   del menu; sotto il breakpoint mobile diventa un pannello a comparsa da
   destra (stesso linguaggio visivo delle altre superfici a comparsa del
   tema: sfondo superficie, ombra). */
.btc-nav-panel-header { display: none; }
.btc-nav-backdrop { display: none; }

/* Su desktop .btc-nav-panel non riceve alcuna posizione speciale: resta un
   normale elemento di blocco dentro il flex dell'header (stesso risultato
   visivo di prima, il <nav> è l'unica cosa visibile al suo interno). Sotto
   il breakpoint diventa un pannello a comparsa.

   Soglia a 960px (più alta dell'unico altro breakpoint del tema, 767px,
   usato per componenti diversi da qui in poi): con 7 voci di menu di
   partenza — 5 Argomenti più Glossario A-Z e Classifiche — la riga
   orizzontale del menu richiede più spazio di quanto ne resti libero a
   768px (larghezza tablet verticale) una volta tolti logo e margini, e
   andrebbe in overflow orizzontale. Verificato: a 960px il menu orizzontale
   resta sempre comodamente entro l'header a qualunque larghezza da qui in
   su, incluso 1024px e 768px in giù passa al pannello mobile. */
@media (max-width: 960px) {
	.btc-nav-toggle { display: flex; }

	.btc-nav-panel {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: min(320px, 85vw);
		background: var(--color-bg-surface);
		box-shadow: -4px 0 24px rgba(0,0,0,0.12);
		z-index: 100;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		display: flex;
		flex-direction: column;
	}
	.btc-nav-panel.is-open { transform: translateX(0); }

	.btc-nav-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-4) var(--space-4);
		border-bottom: 0.5px solid var(--color-border);
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 14px;
	}
	.btc-nav-close {
		display: flex; align-items: center; justify-content: center;
		width: 32px; height: 32px;
		border: none; background: none; color: var(--color-text-primary); cursor: pointer;
	}

	.btc-nav-panel .btc-nav { padding: var(--space-3) var(--space-4); }
	.btc-nav-panel .btc-nav-fallback {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.btc-nav-panel .btc-nav-fallback > li { border-bottom: 0.5px solid var(--color-border); }
	.btc-nav-panel .btc-nav-fallback > li:last-child { border-bottom: none; }
	.btc-nav-panel .btc-nav-fallback a { display: block; padding: 12px 4px; font-size: 15px; }

	/* Sottomenu sempre visibili in linea nel pannello mobile (nessun
	   toccare-per-espandere): l'utente vede tutte le voci e gli eventuali
	   sottomenu non appena apre il pannello. */
	.btc-nav-panel .btc-nav-fallback .sub-menu {
		display: block;
		position: static;
		margin: 0 0 8px;
		padding: 0;
		border: none;
		box-shadow: none;
		background: none;
	}
	.btc-nav-panel .btc-nav-fallback .sub-menu a {
		padding: 8px 4px 8px var(--space-6);
		font-size: 14px;
		color: var(--color-text-secondary);
	}
	.btc-nav-panel .btc-nav-fallback .menu-item-has-children > a::after { content: none; }

	.btc-nav-backdrop {
		display: none;
		position: fixed; inset: 0;
		background: rgba(0,0,0,0.4);
		z-index: 90;
	}
	.btc-nav-backdrop.is-open { display: block; }

	body.btc-nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.btc-nav-panel { transition: none; }
}

/* Hero / ricerca protagonista */
.btc-hero { position: relative; overflow: hidden; text-align: center; padding: var(--space-16) var(--space-6) var(--space-8); }
.btc-hero-watermark { position: absolute; right: -30px; top: -50px; font-size: 260px; color: var(--color-action-primary); opacity: 0.05; }
.btc-hero h1 {
	font-size: 34px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: var(--green-700);
	margin-bottom: var(--space-4); padding-bottom: var(--space-4); position: relative;
}
.btc-hero h1::after {
	content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 36px; height: 2px; border-radius: var(--radius-pill); background: var(--color-action-primary); opacity: 0.7;
}

@media (max-width: 480px) {
	.btc-hero { padding: var(--space-8) var(--space-4) var(--space-6); }
	.btc-hero h1 { font-size: 24px; margin-bottom: var(--space-3); padding-bottom: var(--space-3); }
	.btc-header { padding: var(--space-3) var(--space-4); }
}
.btc-hero p.btc-subtitle { color: var(--color-text-muted); margin-bottom: var(--space-6); position: relative; }

.btc-search-box {
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 18px;
	border: 0.5px solid var(--color-action-primary);
	border-radius: var(--radius-md);
	background: var(--color-bg-surface);
	position: relative;
	box-sizing: border-box;
}
.btc-search-box input { min-width: 0; }
.btc-search-box input {
	border: none;
	outline: none;
	font-size: 14px;
	font-family: var(--font-body);
	flex: 1;
	background: transparent;
	color: var(--color-text-primary);
}
.btc-search-box input::placeholder { color: var(--color-text-muted); }
.btc-hero-counter { font-size: 11px; color: var(--color-text-muted); margin-top: var(--space-3); }

/* Dropdown risultati di ricerca istantanea */
.btc-search-results {
	position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px;
	background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: var(--space-2) 0; z-index: 40; text-align: left; max-height: 420px; overflow-y: auto;
}
.btc-search-group-label { font-size: 11px; font-weight: 500; color: var(--color-text-muted); margin: 8px 16px 4px; }
.btc-search-result-row { display: block; padding: 8px 16px; text-decoration: none; }
.btc-search-result-row:hover, .btc-search-result-row.is-active { background: var(--neutral-50); }
.btc-search-result-title { display: block; font-size: 14px; color: var(--color-text-primary); }
.btc-search-result-excerpt { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 1px; }
.btc-search-hint { font-size: 11px; color: var(--color-text-muted); margin: 8px 16px 0; padding-top: 8px; border-top: 0.5px solid var(--color-border); }
.btc-search-empty { font-size: 13px; color: var(--color-text-secondary); margin: 8px 16px; }

/* Sezioni homepage — respiro verticale leggermente maggiore tra una sezione
   e la successiva (solo l'asse verticale, l'ingombro orizzontale non cambia).
   Un separatore molto sottile tra una sezione e la successiva (non dopo la
   Hero, che ha già il proprio spazio) aiuta a leggere il ritmo verticale
   della pagina senza introdurre un nuovo colore o un bordo pesante. */
.btc-section { padding: var(--space-8) var(--space-6); max-width: var(--page-max-width); margin: 0 auto; }
.btc-section + .btc-section { border-top: 0.5px solid var(--color-border); }
.btc-section-label { font-size: 12px; font-weight: 500; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

/* Gerarchia visiva dei titoli — titolo principale (h1) di ogni pagina di
   contenuto (Hub Tematici, Termine, Guida, FAQ, Recensione, Classifica,
   pagine istituzionali): colore di brand, peso più marcato, respiro sotto
   il titolo e una piccola linea di accento — stesso trattamento ovunque,
   nessuna modifica ai font o ai token del Design System. */
.btc-section > h1,
.btc-main > h1 {
	color: var(--green-700);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-3);
	position: relative;
}
.btc-section > h1::after,
.btc-main > h1::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 36px; height: 2px;
	border-radius: var(--radius-pill);
	background: var(--color-action-primary);
	opacity: 0.7;
}
/* Intestazione della Recensione: h1 in riga con logo/rating, nessuna linea
   di accento (spazio troppo compatto per un elemento decorativo in più),
   solo colore e peso coerenti con le altre pagine. */
.btc-recensione-header-title h1 {
	color: var(--green-700);
	font-weight: 800;
	font-size: 23px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}
@media (max-width: 767px) {
	.btc-section > h1,
	.btc-main > h1 { font-size: 22px; margin-bottom: var(--space-3); padding-bottom: var(--space-2); }
	.btc-recensione-header-title h1 { font-size: 19px; }
}

/* Titoli di sezione (h2.btc-section-label): più contrasto e respiro rispetto
   all'uso "muto" della stessa classe sui paragrafi segnaposto (stato vuoto),
   che restano invariati — il selettore composto colpisce solo gli h2. */
h2.btc-section-label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 0.5px solid var(--color-border);
}

.btc-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.btc-topic-card {
	display: flex; align-items: center; gap: var(--space-3);
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: 18px var(--space-4); text-decoration: none; color: var(--color-text-primary); font-size: 13px; font-weight: 500;
	box-shadow: 0 1px 3px rgba(27,39,51,0.05);
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
/* Icona in una piccola "chip" colorata (sfondo verde tenuissimo, angoli
   coerenti col Design System): stesso linguaggio visivo per le card
   "Esplora per argomento", i blocchi "Perché fidarsi" e le intestazioni
   degli Hub Tematici — solo la dimensione cambia per contesto. */
.btc-icon-chip {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	background: var(--color-badge-bg);
	border-radius: var(--radius-sm);
}
.btc-icon-chip svg { color: var(--color-action-primary); }
.btc-topic-card-icon { width: 36px; height: 36px; }
.btc-trust-icon { width: 32px; height: 32px; margin-top: 1px; }
@media (hover: hover) and (pointer: fine) {
	.btc-topic-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(27,39,51,0.09);
		border-color: var(--color-border-strong);
	}
}
@media (max-width: 480px) {
	.btc-topic-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.btc-topic-card { transition: none; }
	.btc-topic-card:hover { transform: none; }
}

/* Card riutilizzabile: termine / guida / faq / recensione — respiro verticale
   leggermente maggiore tra una riga e l'altra, per non farle sembrare
   attaccate una all'altra. */
.btc-row-link {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 0; border-bottom: 0.5px solid var(--color-border);
	text-decoration: none; color: var(--color-link); font-size: 13px;
}
.btc-row-link:last-child { border-bottom: none; }
.btc-row-link i.trailing { color: var(--color-text-muted); text-decoration: none; }

/* Hub Tematico — ogni tipo di contenuto (Classifiche, Termini, Recensioni,
   Guide, FAQ, sempre in quest'ordine) è un contenitore visivo separato
   invece di una semplice colonna di testo: bordo leggero, sfondo leggermente
   staccato dalla pagina, angoli coerenti col Design System. L'ordine dei
   gruppi e la logica di aggregazione restano quelli di taxonomy-argomento.php
   — qui cambia solo la presentazione. */
.btc-hub-groups-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-6);
	margin-top: var(--space-6);
}
.btc-hub-group {
	background: var(--color-bg-page);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6) 20px;
	box-shadow: 0 1px 3px rgba(27,39,51,0.04);
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.btc-hub-group-header {
	display: flex; align-items: center; gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 0.5px solid var(--color-border);
}
.btc-hub-group-icon { width: 32px; height: 32px; }
.btc-hub-group-title { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; color: var(--color-text-primary); margin: 0; }
.btc-hub-group-list .btc-row-link { padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); }
.btc-hub-group-list .btc-row-link:hover { background: var(--color-bg-surface); }
@media (hover: hover) and (pointer: fine) {
	.btc-hub-group:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27,39,51,0.08); }
}
@media (max-width: 767px) {
	.btc-hub-groups-grid { grid-template-columns: 1fr; gap: var(--space-4); }
	.btc-hub-group { padding: var(--space-4) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
	.btc-hub-group { transition: none; }
	.btc-hub-group:hover { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.btc-hub-group-list .btc-row-link { transition: background-color 120ms ease; }
}

/* Callout "In breve" — motivo del checkmark del logo */
.btc-callout {
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
}
.btc-callout-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--color-text-muted); margin-bottom: 6px; }
.btc-callout-label svg { color: var(--color-action-primary); }

/* Badge, chip */
.btc-badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 10px; background: var(--color-badge-bg); color: var(--color-badge-text);
	border-radius: var(--radius-pill); font-size: 12px; font-weight: 500;
}
.btc-chip {
	display: inline-block; padding: 5px 12px;
	border: 0.5px solid var(--color-badge-border);
	border-radius: var(--radius-pill);
	font-size: 12px; color: var(--color-badge-text);
	text-decoration: none;
}

/* Pulsanti */
.btc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 44px; padding: 0 20px;
	border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
	text-decoration: none; cursor: pointer; border: 0.5px solid var(--color-border-strong);
	background: none; color: var(--color-text-primary);
}
.btc-btn-primary {
	background: var(--color-action-primary); color: var(--color-on-action-primary); border: none;
}
.btc-btn-primary:hover { background: var(--color-action-primary-hover); }

/* Layout a due colonne (pagina Termine, Recensione): sidebar su desktop, impilato su mobile */
.btc-layout { display: flex; justify-content: center; gap: var(--space-6); align-items: flex-start; max-width: var(--page-max-width); margin: 0 auto; padding: var(--space-4) var(--space-6); flex-wrap: wrap; }
.btc-main { flex: 1 1 400px; min-width: 0; max-width: var(--content-max-width); }
.btc-sidebar { flex: 0 1 240px; min-width: 220px; }
.btc-infobox { border: 0.5px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-4); }
.btc-infobox-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 0.5px solid var(--color-border); font-size: 13px; }
.btc-infobox-row:last-child { border-bottom: none; }
.btc-infobox-row span:first-child { color: var(--color-text-secondary); }
.btc-title-synonym { font-size: 12px; color: var(--color-text-muted); margin: 3px 0 var(--space-4); }
.btc-section-heading { font-family: var(--font-heading); font-weight: 700; font-size: 15px; margin: 0 0 var(--space-2); }

/* Livello/Ambito/Argomento duplicati (sidebar desktop + subito sotto "In breve"
   su mobile): una sola copia visibile per volta, mai entrambe (vedi
   template-parts/quick-facts.php per il perché). */
.btc-quickfacts-mobile { display: none; }
@media (max-width: 767px) {
	.btc-quickfacts-mobile { display: block; margin-bottom: var(--space-4); }
	.btc-quickfacts-desktop { display: none; }
}

/* Recensione Casinò: intestazione con logo, box bonus in evidenza */
.btc-recensione-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.btc-recensione-header-title { flex: 1; min-width: 0; }
/* Logo di un operatore (Classifiche e pagina Recensione): dimensione base
   condivisa — object-fit:contain preserva sempre le proporzioni originali,
   sia per loghi quadrati sia per loghi orizzontali (che vengono "contenuti"
   nel riquadro con un margine bianco sopra/sotto, mai deformati o tagliati).
   La dimensione effettiva varia per contesto — vedi i due modificatori sotto
   — e si riduce ulteriormente sotto i 767px per non rubare spazio a voto,
   bonus e pulsante nella stessa riga. */
.btc-casino-logo {
	flex-shrink: 0;
	object-fit: contain; background: var(--color-bg-surface);
	border: 0.5px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-2);
}
.btc-casino-logo-classifica { width: 72px; height: 72px; }
.btc-casino-logo-recensione { width: 96px; height: 96px; }
@media (max-width: 767px) {
	.btc-casino-logo-classifica { width: 56px; height: 56px; padding: 6px; }
	.btc-casino-logo-recensione { width: 64px; height: 64px; padding: 6px; }
}
.btc-bonus-box {
	background: var(--color-badge-bg);
	border: 0.5px solid var(--color-badge-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
}
.btc-bonus-label { font-size: 11px; font-weight: 500; color: var(--color-badge-text); margin: 0 0 4px; }
.btc-bonus-titolo { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-text-primary); margin: 0 0 6px; }
.btc-bonus-descrizione { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.btc-bonus-conditions { border-top: 0.5px solid var(--green-100); padding-top: var(--space-2); }
.btc-bonus-conditions .btc-infobox-row { border-bottom-color: var(--green-100); }
.btc-bonus-conditions .btc-infobox-row:last-child { border-bottom: none; }

/* Sezione "Bonus disponibili" (Recensione): una card per ogni tipo di bonus
   realmente attivo e compilato — mai una griglia con posti vuoti, perché
   btc_get_bonus_prodotto_specifico() esclude a monte i tipi non compilati.
   Stesso linguaggio visivo del box bonus generico qui sopra (.btc-bonus-box),
   solo in forma di card multiple affiancate. */
.btc-bonus-prodotto-sezione { margin-bottom: var(--space-4); }
.btc-bonus-prodotto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-3);
}
.btc-bonus-prodotto-card {
	background: var(--color-badge-bg);
	border: 0.5px solid var(--color-badge-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
}
.btc-bonus-prodotto-tipo {
	font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--color-badge-text); margin: 0 0 4px;
}
.btc-bonus-prodotto-importo { font-size: 14px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 6px; }
.btc-bonus-prodotto-cta { width: 100%; margin-top: var(--space-3); }
.btc-bonus-prodotto-note { font-size: 12px; color: var(--color-text-secondary); margin: var(--space-2) 0 0; }
.btc-bonus-prodotto-legale { font-size: 10px; color: var(--color-text-muted); margin: var(--space-2) 0 0; line-height: 1.5; }
@media (max-width: 480px) {
	.btc-bonus-prodotto-grid { grid-template-columns: 1fr; }
}

/* Classifica: elenco di posizione, dati sempre letti dal vivo dalla Recensione */
.btc-classifica-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; padding: 0; list-style: none; }
.btc-classifica-row {
	display: flex; align-items: center; gap: var(--space-3);
	border: 0.5px solid var(--color-border); border-radius: var(--radius-md);
	padding: var(--space-3); flex-wrap: wrap;
}
.btc-classifica-position {
	width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
	background: var(--color-badge-bg); color: var(--color-badge-text);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 500;
}
.btc-classifica-main { flex: 1; min-width: 160px; }
.btc-classifica-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.btc-classifica-actions .btc-btn { height: 36px; padding: 0 16px; font-size: 13px; white-space: nowrap; }
@media (max-width: 480px) {
	.btc-classifica-row { justify-content: space-between; }
	.btc-classifica-actions { align-items: stretch; width: 100%; }
	.btc-classifica-actions .btc-btn { width: 100%; }
}

/* Meta editoriale (prima pubblicazione / ultimo aggiornamento / revisore) */
.btc-meta-editoriale {
	display: flex; align-items: center; gap: var(--space-2);
	padding-top: var(--space-4); margin-top: var(--space-4);
	border-top: 0.5px solid var(--color-border);
	font-size: 11px; color: var(--color-text-muted);
}
.btc-avatar-initials {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--color-badge-bg); color: var(--color-badge-text);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 500; flex-shrink: 0;
}

/* Footer — l'unica fascia scura del sito (colore predefinito). Varianti
   "verde scuro" e "chiaro" selezionabili da Personalizza → BetChiaro — Footer,
   sempre a partire dai soli colori del Design System (mai un colore nuovo).
   Il contenuto è racchiuso alla stessa larghezza massima del resto del sito
   (--page-max-width, vedi .btc-section/.btc-layout) invece di stendersi a
   piena larghezza: su schermi molto ampi il testo del footer restava
   altrimenti l'unica cosa a estendersi da un bordo all'altro. */
.btc-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding: var(--space-8) var(--space-6) var(--space-6);
	font-size: 11px;
}
.btc-footer-inner { max-width: var(--page-max-width); margin: 0 auto; }
.btc-footer a { color: var(--color-footer-text); text-decoration: none; }
.btc-footer--verde-scuro { background: var(--green-900); }
.btc-footer--chiaro { background: var(--color-bg-page); color: var(--color-text-secondary); }
.btc-footer--chiaro a { color: var(--color-text-secondary); }
.btc-footer--chiaro .btc-footer-widget-title { color: var(--color-text-primary); }

/* Colonne del footer — griglia SEMPRE a 4 ruoli fissi, nello stesso ordine:
   colonna d'identità (logo, descrizione, newsletter integrata, contatti,
   dati societari), poi 3 colonne di link (istituzionali, editoriali,
   contenuti aggiuntivi — da Aspetto → Widget, oppure dal pannello
   "Colonne del footer" del Personalizzatore se i Widget non sono
   popolati, vedi btc_get_footer_link_column()). A differenza di una
   griglia "auto-fit" (che cambia numero di colonne per riga a seconda di
   quante risultano popolate — un'organizzazione che cambiava aspetto da
   sito a sito), qui le 4 colonne occupano sempre lo stesso spazio
   ciascuna: una colonna senza contenuto resta semplicemente vuota nella
   propria cella, senza alterare la posizione delle altre né lasciare un
   grande vuoto asimmetrico. */
.btc-footer-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-8) var(--space-6);
	padding-bottom: var(--space-6);
}
.btc-footer-column { min-width: 0; }
.btc-footer-widget-title {
	font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--color-footer-text); opacity: 0.6; margin: 0 0 var(--space-3);
}
.btc-footer--chiaro .btc-footer-widget-title { opacity: 0.75; }

/* Elenco di link (usato quando una colonna non ha un'area Widget popolata:
   stesso aspetto testuale dei widget "Menu di navigazione", per restare
   visivamente indistinguibile da una colonna gestita via Widget). */
.btc-footer-link-list { list-style: none; margin: 0; padding: 0; }
.btc-footer-link-list li { margin: 0 0 10px; }
.btc-footer-link-list li:last-child { margin-bottom: 0; }
.btc-footer-link-list a { font-size: 13px; }
.btc-footer-link-list a:hover { text-decoration: underline; }

@media (max-width: 1023px) and (min-width: 768px) {
	.btc-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Colonna d'identità: logo, breve descrizione, newsletter, contatti, dati
   societari — un'unica colonna verticale compatta, non blocchi separati. */
.btc-footer-logo-wrap a { display: inline-block; }
.btc-footer-logo-wrap img { height: var(--btc-footer-logo-h, 40px); width: auto; max-height: none; }
.btc-footer-descrizione { font-size: 12px; line-height: 1.6; color: var(--color-footer-text); opacity: 0.85; margin: var(--space-3) 0 0; }
.btc-footer-contatti-col { font-size: 12px; line-height: 1.8; margin: var(--space-3) 0 0; }
.btc-footer-dati-aziendali { font-size: 11px; line-height: 1.7; color: var(--color-footer-text); opacity: 0.65; margin: var(--space-3) 0 0; }
.btc-footer--chiaro .btc-footer-descrizione,
.btc-footer--chiaro .btc-footer-dati-aziendali { color: var(--color-text-secondary); opacity: 1; }

/* Newsletter integrata nella colonna sinistra: nessun riquadro proprio, solo
   un separatore sottile sopra e sotto per restare leggibile come naturale
   prosecuzione della colonna (logo → descrizione → newsletter → contatti →
   dati societari) invece che come un blocco a parte. Più compatta della
   versione precedente: meno spaziatura interna, campi più contenuti. */
.btc-newsletter {
	margin: var(--space-4) 0; padding: var(--space-4) 0;
	border-top: 0.5px solid rgba(255,255,255,0.12);
	border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
.btc-footer--chiaro .btc-newsletter { border-color: var(--color-border); }
.btc-newsletter-titolo { margin-bottom: 6px; }
.btc-newsletter-testo { font-size: 12px; color: var(--color-footer-text); opacity: 0.85; margin: 0 0 var(--space-2); }
.btc-newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.btc-newsletter-email {
	width: 100%; box-sizing: border-box;
	height: 36px; padding: 0 var(--space-3);
	border: 0.5px solid rgba(255,255,255,0.24); border-radius: var(--radius-sm);
	background: rgba(255,255,255,0.08); color: var(--color-footer-text);
	font-size: 12px; font-family: var(--font-body);
}
.btc-footer--chiaro .btc-newsletter-email { background: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text-primary); }
.btc-newsletter-email::placeholder { color: var(--color-footer-text); opacity: 0.6; }
.btc-newsletter-privacy { display: flex; align-items: flex-start; gap: 6px; font-size: 10px; line-height: 1.5; cursor: pointer; opacity: 0.85; }
.btc-newsletter-privacy input { margin-top: 2px; flex-shrink: 0; }
.btc-newsletter-privacy a { text-decoration: underline; }
.btc-newsletter-submit { width: 100%; height: 36px; margin-top: 2px; font-size: 13px; }

/* Badge/loghi istituzionali (ADM, +18, Gioco Responsabile, eCOGRA, ecc.):
   fascia dedicata con un tono di sfondo appena percettibile, per staccarla
   dalla zona delle colonne senza introdurre un nuovo colore — dimensione
   regolabile da Personalizza → BetChiaro — Footer → "Loghi e badge"
   (desktop/tablet/mobile, più le distanze orizzontale/verticale), con
   fallback coerenti se non configurati. Il logo interno può essere
   orizzontale o quadrato senza deformarsi (object-fit: contain), sempre
   alla stessa altezza per restare perfettamente allineati tra loro. */
.btc-footer-badges {
	display: flex; flex-wrap: wrap; align-items: center;
	column-gap: var(--btc-footer-badge-gap-x, 20px);
	row-gap: var(--space-3);
	padding: var(--space-4) 0;
	background: rgba(255,255,255,0.025);
	border-top: 0.5px solid rgba(255,255,255,0.12);
	border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
.btc-footer--chiaro .btc-footer-badges { background: rgba(0,0,0,0.015); border-color: var(--color-border); }
.btc-footer-badge-link { display: inline-flex; }
.btc-footer-badge-img { height: var(--btc-footer-badge-h, 64px); width: auto; max-width: 260px; object-fit: contain; }

/* Riga finale: copyright + dati societari compatti a sinistra, link legali
   e social a destra — una sola riga sottile, niente più un paragrafo dati
   societari separato sotto. */
.btc-footer-bottom {
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: var(--space-3);
	padding-top: var(--space-4);
}
.btc-footer-bottom-left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; opacity: 0.8; }
.btc-footer-bottom-dati { opacity: 0.9; }
.btc-footer-bottom-right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.btc-footer-nav-fallback, .btc-footer-social-nav {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
	list-style: none; margin: 0; padding: 0;
}

@media (max-width: 1024px) {
	.btc-footer-badge-img { height: var(--btc-footer-badge-h-tablet, 56px); max-width: 220px; }
}

@media (max-width: 767px) {
	.btc-footer-columns { grid-template-columns: 1fr; gap: var(--space-6); }
	.btc-footer-badge-img { height: var(--btc-footer-badge-h-mobile, 44px); max-width: 180px; }
	.btc-footer-badges { row-gap: var(--btc-footer-badge-gap-y-mobile, 14px); }
	.btc-newsletter-email, .btc-newsletter-submit { height: 44px; font-size: 14px; }
	.btc-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* Icone SVG inline: ereditano il colore del testo circostante */
.btc-icon { color: inherit; vertical-align: middle; flex-shrink: 0; }

/* Focus visibile ovunque — accessibilità */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--color-action-primary);
	outline-offset: 2px;
}

/* Contenuto presente per i lettori di schermo ma invisibile a video: usato
   per gli annunci di stato della ricerca (aria-live). */
.btc-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Link "Vai al contenuto principale": invisibile finché non riceve il focus
   da tastiera, permette di superare header e menu senza dover tabulare
   attraverso ogni link (WCAG 2.4.1 Bypass Blocks). */
.btc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	z-index: 1000;
	background: var(--color-action-primary);
	color: var(--color-on-action-primary);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.btc-skip-link:focus-visible {
	top: var(--space-3);
}

/* Rispetto di prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}