/* Selettore "Come scegliere la corda" - settembre 2026
   I colori sono quelli gia' usati sul sito: blu #0170B9 per link e pulsanti,
   #0B5AA6 per le barre, #015A94 per i valori, riquadri #F8F9F8 su bordo #E4E6E3. */

.sl-sel{
	background:#f8f9f8;
	border:1px solid #e4e6e3;
	border-radius:3px;
	overflow:hidden;
	margin:0 0 2em;
}

.sl-sel__testa{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
	padding:13px 20px;
	background:#fff;
	border-bottom:1px solid #e4e6e3;
}

.sl-sel__passi{display:flex;gap:4px;align-items:center}
.sl-sel__passo{width:24px;height:4px;border-radius:4px;background:#e7ebf0}
.sl-sel__passo.e-fatto{background:#0b5aa6}
.sl-sel__passo.e-ora{background:#ffd400}

.sl-sel__conta,
.sl-sel__et{
	font-size:10px;
	line-height:12px;
	letter-spacing:.9px;
	text-transform:uppercase;
	font-weight:600;
	color:#5b6672;
}

.sl-sel__indietro{
	margin-left:auto;
	background:none;
	border:0;
	padding:4px 2px;
	color:#0170b9;
	font-size:14px;
	cursor:pointer;
}
.sl-sel__indietro:hover{text-decoration:underline}
.sl-sel__indietro[hidden]{display:none !important}

.sl-sel__corpo{padding:28px 20px 32px}

.sl-sel__domanda{
	font-size:24px;
	line-height:1.3;
	font-weight:700;
	letter-spacing:-.4px;
	color:#272727;
	margin:0 0 20px;
}

.sl-sel__scelte{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:10px;
}

.sl-sel__scelta{
	display:flex;
	flex-direction:column;
	gap:3px;
	text-align:left;
	background:#fff;
	border:1px solid #e4e6e3;
	border-radius:3px;
	padding:14px 16px;
	cursor:pointer;
	color:#14181d;
	font-size:15px;
	font-weight:700;
	letter-spacing:-.15px;
	line-height:1.25;
	transition:border-color .15s,box-shadow .15s;
}
.sl-sel__scelta:hover{border-color:#0170b9;box-shadow:inset 0 0 0 1px #0170b9}
.sl-sel__scelta:focus-visible{outline:2px solid #0170b9;outline-offset:2px}
.sl-sel__scelta span{
	font-size:13.5px;
	font-weight:400;
	letter-spacing:normal;
	line-height:1.5;
	color:#5b6672;
}

/* --- risultato --- */
.sl-sel__esito{display:flex;flex-direction:column;gap:22px}
.sl-sel__titolo{
	font-size:24px;
	line-height:1.3;
	font-weight:700;
	letter-spacing:-.4px;
	color:#272727;
	margin:6px 0 0;
}
.sl-sel__occhiello{
	font-size:11px;
	letter-spacing:.9px;
	text-transform:uppercase;
	font-weight:600;
	color:#0b5aa6;
	margin:0;
}

.sl-sel__tensione{
	display:flex;
	flex-wrap:wrap;
	gap:16px 40px;
	align-items:flex-end;
	background:#fff;
	border:1px solid #e4e6e3;
	border-radius:3px;
	padding:16px 20px;
}
.sl-sel__voce{display:flex;flex-direction:column;gap:3px}
.sl-sel__val{
	font-size:30px;
	line-height:30px;
	font-weight:700;
	letter-spacing:-.6px;
	color:#015a94;
	font-variant-numeric:tabular-nums;
}
.sl-sel__val small{
	font-size:14px;
	font-weight:400;
	letter-spacing:normal;
	color:#5b6672;
	margin-left:3px;
}
.sl-sel__nota{
	flex:1 1 240px;
	font-size:13.5px;
	line-height:1.55;
	color:#5b6672;
	margin:0;
}

.sl-sel__corde{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:12px;
}
.sl-sel__corda{
	display:flex;
	flex-direction:column;
	gap:12px;
	background:#fff;
	border:1px solid #e4e6e3;
	border-radius:3px;
	padding:16px;
}
.sl-sel__corda.e-prima{border-color:#0170b9}
.sl-sel__nome{
	font-size:17px;
	line-height:1.25;
	font-weight:700;
	letter-spacing:-.34px;
	margin:0;
}
.sl-sel__nome a{color:#14181d;text-decoration:none}
.sl-sel__nome a:hover{color:#0170b9}
.sl-sel__fam{font-size:13px;line-height:1.5;color:#5b6672}
.sl-sel__perche{font-size:14px;line-height:1.55;color:#5b6672;margin:0}

.sl-sel__barre{
	display:flex;
	flex-direction:column;
	background:#f8f9f8;
	border:1px solid #e4e6e3;
	border-radius:3px;
}
.sl-sel__riga{display:flex;align-items:center;gap:10px;padding:10px 12px}
.sl-sel__riga + .sl-sel__riga{border-top:1px solid #e4e6e3}
.sl-sel__riga .sl-sel__et{flex:0 0 70px}
.sl-sel__pista{flex:1 1 auto;height:6px;background:#e7ebf0;border-radius:4px;overflow:hidden}
.sl-sel__pieno{display:block;height:100%;background:#0b5aa6;border-radius:4px}
.sl-sel__punteggio{
	flex:0 0 auto;
	font-size:15px;
	font-weight:700;
	letter-spacing:-.3px;
	color:#015a94;
	font-variant-numeric:tabular-nums;
}

.sl-sel__piede{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:auto;
}
.sl-sel__prezzo{font-size:15px;font-weight:700;color:#14181d}
.sl-sel__prezzo .woocommerce-Price-amount{font-weight:700;color:#14181d}

.sl-sel__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 20px;
	font-size:15px;
	font-weight:700;
	line-height:1;
	text-decoration:none;
	border:1px solid transparent;
	border-radius:2px;
	cursor:pointer;
	background:#0170b9;
	color:#fff;
}
.sl-sel__btn:hover,
.sl-sel__btn:focus{background:#015a94;color:#fff}
.sl-sel__btn.e-vuoto{background:transparent;color:#0170b9;border-color:#e4e6e3}
.sl-sel__btn.e-vuoto:hover{background:transparent;border-color:#0170b9;color:#0170b9}
.sl-sel__btn:focus-visible{outline:2px solid #0170b9;outline-offset:2px}

.sl-sel__azioni{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

@media (max-width:767px){
	.sl-sel__corpo{padding:22px 16px 26px}
	.sl-sel__testa{padding:12px 16px}
	.sl-sel__domanda,
	.sl-sel__titolo{font-size:20px}
	.sl-sel__val{font-size:26px;line-height:26px}
	.sl-sel__piede{flex-direction:column;align-items:stretch;gap:8px}
	.sl-sel__piede .sl-sel__btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
	.sl-sel__scelta{transition:none}
}

/* Il tema sottolinea tutti i link dentro .entry-content con una regola a
   specificita' (0,2,1): qui serve una specificita' piu' alta, non !important. */
.sl-sel .sl-sel__corda .sl-sel__nome a,
.sl-sel .sl-sel__corda .sl-sel__nome a:visited{
	color:#14181d;
	text-decoration:none;
	box-shadow:none;
}
.sl-sel .sl-sel__corda .sl-sel__nome a:hover,
.sl-sel .sl-sel__corda .sl-sel__nome a:focus{color:#0170b9;text-decoration:none}

.sl-sel .sl-sel__azioni a.sl-sel__btn,
.sl-sel .sl-sel__piede a.sl-sel__btn,
.sl-sel .sl-sel__azioni a.sl-sel__btn:visited,
.sl-sel .sl-sel__piede a.sl-sel__btn:visited,
.sl-sel .sl-sel__azioni a.sl-sel__btn:hover,
.sl-sel .sl-sel__piede a.sl-sel__btn:hover,
.sl-sel .sl-sel__azioni a.sl-sel__btn:focus,
.sl-sel .sl-sel__piede a.sl-sel__btn:focus{
	text-decoration:none;
	box-shadow:none;
	color:#fff;
}
.sl-sel .sl-sel__azioni a.sl-sel__btn.e-vuoto,
.sl-sel .sl-sel__azioni a.sl-sel__btn.e-vuoto:visited,
.sl-sel .sl-sel__azioni a.sl-sel__btn.e-vuoto:hover{color:#0170b9}

.sl-sel button.sl-sel__scelta,
.sl-sel button.sl-sel__btn{-webkit-appearance:none;appearance:none;margin:0}