/**
 * Flash Promo — barra countdown.
 *
 * Colori via custom properties, impostate inline dal JS a partire dalla configurazione.
 * Selettori tutti sotto .flash-promo e z-index alto ma non massimo, per stare sopra il
 * contenuto senza coprire eventuali modali del negozio.
 */

.flash-promo {
	background: var(--flash-promo-bg, #111827);
	color: var(--flash-promo-text, #fff);
	font-size: 15px;
	line-height: 1.35;
}

/* --- Barra fissa (opzionale, spenta di default) --- */

.flash-promo--sticky {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9990;
	box-shadow: 0 -2px 18px rgba(0, 0, 0, .28);
	animation: flash-promo-in .35s ease-out both;
}

.flash-promo--bottom {
	bottom: 0;
}

.flash-promo--top {
	top: 0;
	box-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

/* --- Banner inline: prodotto, carrello, checkout --- */

.flash-promo--product,
.flash-promo--cart,
.flash-promo--checkout,
.flash-promo--atc {
	position: relative;
	border-radius: 6px;
	margin: 14px 0;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}

/* Sulla scheda prodotto il banner sta sotto al prezzo, in una colonna stretta:
   allineato a sinistra come il resto della colonna, non centrato. */
.flash-promo--product .flash-promo__inner,
.flash-promo--cart .flash-promo__inner,
.flash-promo--checkout .flash-promo__inner,
.flash-promo--atc .flash-promo__inner {
	justify-content: flex-start;
	text-align: left;
	padding: 12px 16px;
	max-width: none;
}

.flash-promo--product {
	margin-top: 10px;
}

.flash-promo__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 48px 12px 16px;
	position: relative;
	text-align: center;
}

.flash-promo__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.flash-promo__main {
	font-weight: 600;
}

.flash-promo__sub {
	font-size: 13px;
	opacity: .78;
}

.flash-promo__discount,
.flash-promo__timer {
	color: var(--flash-promo-accent, #f59e0b);
	font-weight: 700;
}

/* Cifre a larghezza fissa: senza, il testo intorno balla a ogni secondo. */
.flash-promo__timer {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.flash-promo__close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	opacity: .6;
}

.flash-promo__close:hover,
.flash-promo__close:focus {
	opacity: 1;
}

.flash-promo.is-urgent .flash-promo__timer {
	animation: flash-promo-pulse 1s ease-in-out infinite;
}

.flash-promo.is-expired {
	opacity: .75;
}

.flash-promo.is-expired .flash-promo__inner {
	justify-content: center;
	padding: 12px 16px;
}

@keyframes flash-promo-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.flash-promo--top {
	animation-name: flash-promo-in-top;
}

@keyframes flash-promo-in-top {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

@keyframes flash-promo-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

@media (max-width: 640px) {
	.flash-promo {
		font-size: 14px;
	}

	.flash-promo__inner {
		padding: 10px 40px 10px 12px;
	}

	.flash-promo__sub {
		font-size: 12px;
	}
}

/* Rispetta chi ha chiesto meno animazioni: la barra compare, ma senza scivolare. */
@media (prefers-reduced-motion: reduce) {
	.flash-promo,
	.flash-promo--top {
		animation: none;
	}

	.flash-promo.is-urgent .flash-promo__timer {
		animation: none;
	}
}