/**
 * Variant CSS: promo--flash-sale-countdown
 *
 * Dark flash-sale promotional band with a STATIC countdown. A full-width dark band
 * holds the offer copy on the left — kicker, an accent discount badge ("-40%"),
 * a big headline with an accent highlight and one line — and a right-hand action
 * column with a four-tile countdown grid (dni / godz / min / sek; plain editable
 * text, no JS) above the CTA. The dark surface, badge and tile grid build time
 * pressure and set this apart from the light promo bands.
 *
 * KI-020 discipline: on this always-dark band every text colour is
 * var(--text-on-dark,#fff); the accent (badge, em, kicker, countdown numbers) is
 * lifted via color-mix(... var(--accent) 60%, var(--on-dark,#fff)) so it never
 * renders dark-on-dark. A local `--flash-bg` drives the band. Stacks on mobile.
 * Part of the `promo` role.
 */

body.aibt-universal .universal-promo--flash-sale-countdown {
	--flash-bg: var(--background-dark, #141414);
	/* Lifted accent that stays legible on the dark band. */
	--flash-accent: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #ffffff));
	background: var(--bg-main);
	padding-block: calc(clamp(2.6rem, 6vw, 4.4rem) * var(--density, 1));
}

/* The dark flash-sale band. */
body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__band {
	gap: clamp(1.6rem, 4vw, 3rem) !important;
	padding: clamp(1.9rem, 4.4vw, 3.2rem);
	border-radius: clamp(16px, 2vw, 22px);
	background: var(--flash-bg);
	border: 1px solid color-mix(in srgb, var(--flash-accent) 30%, transparent);
	box-shadow: 0 28px 56px -30px rgba(0, 0, 0, 0.6);
}

/* Offer copy column. */
body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__copy {
	flex: 1 1 360px !important;
	min-width: 0;
}

/* Kicker + badge row. */
body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__toprow {
	gap: clamp(0.6rem, 1.6vw, 0.9rem) !important;
	margin-bottom: var(--space-sm);
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--flash-accent) !important;
	margin: 0 !important;
}

/* Discount badge. */
body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__badge {
	display: inline-block;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wide) !important;
	color: var(--flash-bg) !important;
	background: var(--flash-accent) !important;
	margin: 0 !important;
	padding: 0.26rem 0.7rem;
	border-radius: var(--decor-radius-pill, 999px);
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__headline {
	font-family: var(--font-display) !important;
	color: var(--text-on-dark, #ffffff) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__headline em {
	color: var(--flash-accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-on-dark, #ffffff) !important;
	opacity: 0.82;
	max-width: 46ch;
	margin: 0 !important;
}

/* Action column: countdown grid over the CTA. */
body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__action {
	flex: 0 0 auto !important;
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 2vw, 1.2rem);
	align-items: center;
}

/* Four-tile static countdown. */
body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__clock {
	gap: clamp(0.5rem, 1.4vw, 0.8rem) !important;
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	min-width: clamp(54px, 9vw, 70px);
	padding: clamp(0.55rem, 1.4vw, 0.85rem) clamp(0.4rem, 1vw, 0.65rem);
	border-radius: clamp(10px, 1.4vw, 14px);
	background: color-mix(in srgb, var(--on-dark, #ffffff) 8%, var(--flash-bg));
	border: 1px solid color-mix(in srgb, var(--on-dark, #ffffff) 16%, transparent);
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__num {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem) !important;
	line-height: 1 !important;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--flash-accent) !important;
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__unitlabel {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--text-on-dark, #ffffff) !important;
	opacity: 0.72;
	margin: 0 !important;
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__cta .wp-block-button__link {
	display: inline-block;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	padding: 0.82rem 1.7rem !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary, #ffffff) !important;
	border: 1px solid var(--cta-bg-primary, var(--accent)) !important;
	transition: background var(--duration-fast, 0.18s) var(--ease-default, ease),
		transform var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-1px);
}

/* Keyboard focus ring (a11y) — lifted accent stays visible on the dark band. */
body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--flash-accent);
	outline-offset: 2px;
	border-radius: inherit;
}

/* Mobile: single column, left-aligned copy, full-width action. */
@media (max-width: 781px) {
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__band {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__copy {
		flex: 1 1 auto !important;
	}
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__action {
		width: 100%;
		align-items: stretch;
	}
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__clock {
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
	}
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__unit {
		flex: 1 1 0;
		min-width: 0;
	}
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__cta,
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* Cap tracking on uppercase text at small sizes (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__kicker,
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__unitlabel {
		letter-spacing: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-promo--flash-sale-countdown .universal-promo__cta .wp-block-button__link {
		transition: none;
	}
}