/**
 * barra-vigorosa.css — la barra «Trova i ricambi» col vestito del negozio Shopify.
 *
 * ⭐ Quello che cambia: il blocco rosso diventa un parallelogramma tagliato in obliquo con le
 * quattro righe bianche davanti, il fondo scuro prende la trama diagonale, le tendine si
 * accendono con un parallelogramma al passaggio e il pulsante CERCA è tagliato obliquo.
 *
 * ⛔ Non tocca il plugin NTC Veicoli: sono solo regole in più, e si spengono dalla spunta in
 *    NTC → Aspetto. Il funzionamento della barra (tendine, ricerca) resta quello di sempre.
 * ⚠️ Le stesse misure del negozio: strisce a -62°, taglio a 22px, righe bianche inclinate a -20°.
 */

.ntc-barra-vigorosa .ntcv-barra-guscio {
	background:
		repeating-linear-gradient(-62deg, rgba(255, 255, 255, .06) 0 9px, rgba(255, 255, 255, 0) 9px 22px),
		linear-gradient(120deg, #12161c 0%, #2c333d 100%);
}

/* ── il blocco rosso: parallelogramma, righe bianche, testo inclinato ────────────────────── */
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-etichetta {
	position: relative;
	z-index: 1;
	gap: .7rem;
	padding-right: 42px;
	font-style: italic;
	letter-spacing: .1em;
	background:
		repeating-linear-gradient(-62deg, rgba(255, 255, 255, .09) 0 9px, rgba(255, 255, 255, 0) 9px 22px),
		linear-gradient(120deg, #d4474a 0%, var(--ntc-rosso, #b3373a) 48%, #7c2326 100%) !important;
	clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-etichetta::before {
	content: "";
	flex: none;
	width: 22px;
	height: 12px;
	background: repeating-linear-gradient(90deg, #fff 0 3px, rgba(255, 255, 255, 0) 3px 6px);
	transform: skewX(-20deg);
	opacity: .9;
}
.ntc-barra-vigorosa .ntcv-barra-frecce { animation: ntc-barra-frecce 1.6s ease-in-out infinite; }
@keyframes ntc-barra-frecce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ── le tendine: niente righe dritte, si accende un parallelogramma ──────────────────────── */
.ntc-barra-vigorosa .ntcv-barra-campo {
	position: relative;
	border-right: 0;
	isolation: isolate;
}
.ntc-barra-vigorosa .ntcv-barra-campo::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 7px;
	bottom: 7px;
	left: 6px;
	right: 8px;
	border-radius: 5px;
	pointer-events: none;
	transform: skewX(-14deg);
	background: rgba(255, 255, 255, 0);
	transition: background-color .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
	.ntc-barra-vigorosa .ntcv-barra-campo:hover::before { background: rgba(255, 255, 255, .08); }
	.ntc-barra-vigorosa .ntcv-barra-campo:has(select:disabled):hover::before { background: rgba(255, 255, 255, 0); }
}
/* ⚠️ Al passaggio si accende SOLO il parallelogramma: il riquadro dritto della tendina (regola
   base del plugin) sotto al parallelogramma faceva un rettangolo grigio che sul negozio non c'e'. */
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-campo select:hover:not(:disabled) {
	background: transparent !important;
}

/* ⭐ LA TENDINA SCELTA SI ACCENDE DI ROSSO — l'effetto del negozio Shopify (21/09/2026, «mi
   piaceva quell'effetto rosso della selezione»): parallelogramma rosso trasparente con un filo
   rosso a sinistra, testo bianco in grassetto, freccetta rossa. Le stesse misure di
   garagehub-tuning.com (`ntc-barra-veicolo.css`: #b3373a33 + inset 3px).
   ⚠️ Solo CSS: «scelta» = l'opzione selezionata non e' il segnaposto (`value=""`). Prima c'era
   una regola su `.is-scelto`, ma nessuno metteva quella classe: non si accendeva mai. */
.ntc-barra-vigorosa .ntcv-barra-campo:has(option:checked:not([value=""]))::before,
.ntc-barra-vigorosa .ntcv-barra-campo.is-scelto::before {
	background: rgba(179, 55, 58, .2);
	box-shadow: inset 3px 0 0 var(--ntc-rosso, #b3373a);
}
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-campo:has(option:checked:not([value=""])) select {
	color: #fff !important;
	font-weight: 700;
}
.ntc-barra-vigorosa .ntcv-barra-campo:has(option:checked:not([value=""])):not(.ntcv-attesa)::after {
	border-right-color: #e2554f;
	border-bottom-color: #e2554f;
}

/* I separatori fra le tendine: un filo OBLIQUO come sul negozio. ⚠️ Fatto col fondo, non con
   ::after (che qui e' la freccetta del plugin) ne' con ::before (il parallelogramma). */
.ntc-barra-vigorosa .ntcv-barra-campo {
	background: linear-gradient(108deg, transparent calc(50% - .6px), var(--ntcv-b-bordo, #454545) calc(50% - .6px),
		var(--ntcv-b-bordo, #454545) calc(50% + .6px), transparent calc(50% + .6px)) no-repeat right -3px center / 8px calc(100% - 26px);
}

/* ── la X che azzera: parallelogramma che diventa rosso ──────────────────────────────────── */
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-azzera {
	position: relative;
	isolation: isolate;
	border-right: 0 !important;
	color: #c4c4c4 !important;
}
.ntc-barra-vigorosa .ntcv-barra-azzera::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 11px;
	bottom: 11px;
	left: 9px;
	right: 9px;
	border-radius: 5px;
	transform: skewX(-14deg);
	background: rgba(255, 255, 255, .07);
	transition: background-color .18s ease;
}
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-azzera:hover { background: transparent !important; color: #fff !important; }
.ntc-barra-vigorosa .ntcv-barra-azzera:hover::before { background: var(--ntc-rosso, #b3373a); }

/* ── il pulsante CERCA: come sul negozio — tagliato obliquo SOLO a sinistra, corsivo, con la
   freccia che scorre, e al passaggio le strisce che corrono ──────────────────────────────── */
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-cerca {
	position: relative;
	margin-left: -6px;
	padding: 0 38px 0 46px;
	font-style: italic;
	letter-spacing: .12em;
	clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
	background:
		repeating-linear-gradient(-62deg, rgba(255, 255, 255, .05) 0 9px, rgba(255, 255, 255, 0) 9px 22px),
		var(--ntc-carbone-2, #4a4a4a) !important;
}
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-cerca:not([disabled]) {
	background:
		repeating-linear-gradient(-62deg, rgba(255, 255, 255, .11) 0 9px, rgba(255, 255, 255, 0) 9px 22px),
		linear-gradient(120deg, #d4474a 0%, var(--ntc-rosso, #b3373a) 50%, #7c2326 100%) !important;
}
.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-cerca:not([disabled]):hover {
	filter: none;
	animation: ntc-barra-strisce .6s linear infinite;
}
@keyframes ntc-barra-strisce { from { background-position: 0 0, 0 0; } to { background-position: 24.92px 0, 0 0; } }
.ntc-barra-vigorosa .ntcv-barra-cerca::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 10px;
	margin-left: 10px;
	vertical-align: -1px;
	background: currentColor;
	transition: transform .2s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ntc-barra-vigorosa .ntcv-barra-cerca:not([disabled]):hover::after { transform: translateX(4px); }

@media (max-width: 860px) {
	/* ⚠️ Sul telefono i tagli obliqui si accorciano: a 22px su una barra alta 40 si mangiavano
	   mezza scritta. */
	.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-etichetta { padding-right: 28px; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%); }
	.ntc-barra-vigorosa .ntcv-barra-campo::before { top: 0; bottom: 0; left: 0; right: 0; border-radius: 6px; transform: none; }
	.ntc-barra-vigorosa .ntcv-barra-campo { background: none; }
	.ntc-barra-vigorosa .ntcv-barra-azzera::before { top: 0; bottom: 0; left: 0; right: 0; border-radius: 6px; transform: none; }
	.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-cerca { margin-left: 0; padding: 0 18px; clip-path: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ntc-barra-vigorosa .ntcv-barra-frecce,
	.ntc-barra-vigorosa .ntcv-barra-guscio .ntcv-barra .ntcv-barra-cerca:not([disabled]):hover { animation: none; }
}