/**
 * AS Loyverse Sync — the locked layer of a promotion page.
 *
 * Loaded LAST, after assets/asls-promo.css (tokens + base) and
 * assets/asls-directions.css (the campaign's own design). Load order is what
 * makes these rules win now that the cascade layers are gone: unlayered author
 * CSS beats layered author CSS, so the layers surrendered the whole stylesheet
 * to OceanWP's reset. See the note at the top of asls-promo.css.
 *
 * What lives here is everything a campaign must never be able to restyle away:
 * the price block and its size floor, the urgency and terms lines, the call to
 * action, focus rings, hit targets, the Latin-numeral isolation, and the ended
 * panel. A direction changes how all of it LOOKS by redefining custom
 * properties, and tests/test-promo-directions.php fails the build if a
 * direction's CSS names one of these classes or uses `!important`.
 *
 * @package as-loyverse-sync
 */

/* ==================================================================== *
 * LOCKED
 *
 * Written last on purpose. A campaign design restyles all of this by
 * redefining tokens; tests/test-promo-directions.php fails the build if a
 * direction's CSS names one of these classes or uses `!important`.
 * ==================================================================== */

/* Numerals stay Latin and left-to-right inside Arabic text: a mirrored
   price is a wrong price. */
.asls-promo .as-num,
.asls-promo-card .as-num {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}

.asls-promo .screen-reader-text,
.asls-promo-card .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- The price. The loudest thing on the page, by construction. -------- */

.asls-promo .asls-promo__pricing {
	display: grid;
	gap: var(--p-price-gap, 0.15rem);
	margin: 0;
	padding: var(--p-price-pad, var(--p-pad));
	background: var(--p-price-bg, var(--p-surface-2));
	border: var(--p-price-border, 0 solid transparent);
	border-block-start: var(--p-price-rule, var(--p-price-border, 0 solid transparent));
	border-radius: var(--p-price-radius, var(--p-radius));
}

.asls-promo .asls-promo__pricing p {
	margin: 0;
}

.asls-promo .asls-promo__was {
	font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
	color: var(--p-price-was, var(--p-muted));
}

.asls-promo .asls-promo__was s {
	text-decoration-thickness: 2px;
	text-decoration-color: var(--p-accent);
}

/* The floor is the guarantee: whatever a direction asks for, the
   promotional price is never smaller than this and never lighter than 600. */
.asls-promo .asls-promo__now {
	font-family: var(--p-price-font);
	font-size: max(2.35rem, var(--p-price-size));
	font-weight: max(600, var(--p-price-weight));
	line-height: var(--p-price-leading, 0.98);
	letter-spacing: var(--p-price-track, -0.02em);
	color: var(--p-price-ink, var(--p-accent));
}

/*
 * wc_price() wraps the figure in .woocommerce-Price-amount, and the theme
 * colours that span itself, so colouring only the <p> left the price whatever
 * green the theme paints a sale price. The direction's intent has to reach the
 * actual glyphs.
 */
.asls-promo .asls-promo__now .amount,
.asls-promo .asls-promo__now .woocommerce-Price-amount,
.asls-promo .asls-promo__now .woocommerce-Price-currencySymbol,
.asls-promo .asls-promo__now ins,
.asls-promo .asls-promo__now bdi {
	color: inherit;
	background: none;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
}

.asls-promo .asls-promo__now .amount {
	white-space: nowrap;
}

.asls-promo .asls-promo__was .amount,
.asls-promo .asls-promo__was .woocommerce-Price-amount,
.asls-promo .asls-promo__was .woocommerce-Price-currencySymbol,
.asls-promo .asls-promo__was bdi {
	color: inherit;
	font-size: inherit;
}

.asls-promo .asls-promo__save .amount,
.asls-promo .asls-promo__save .woocommerce-Price-amount,
.asls-promo .asls-promo__save bdi {
	color: inherit;
	font-size: inherit;
}

.asls-promo .asls-promo__save {
	font-size: clamp(0.9rem, 1.2vw, 1rem);
	font-weight: 700;
	color: var(--p-save-ink, var(--as-success, #1b7f4d));
}

/* --- Urgency and terms. Real facts only; see the template. ------------- */

.asls-promo .asls-promo__terms {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
}

.asls-promo .asls-promo__term {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--p-ink);
}

.asls-promo .asls-promo__term--when {
	font-weight: 700;
}

/*
 * Availability, not urgency: this line replaced the remaining-unit count, so
 * it must not inherit that line's alarm colour. Quiet and factual.
 */
.asls-promo .asls-promo__term--supply {
	color: var(--p-muted);
}

.asls-promo .asls-promo__term--note {
	font-size: 0.8125rem;
	color: var(--p-muted);
}

.asls-promo .asls-promo__countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

.asls-promo .asls-promo__countdown[hidden] {
	display: none;
}

.asls-promo .asls-promo__cd {
	display: grid;
	place-items: center;
	min-inline-size: 3.25rem;
	padding: 0.4rem 0.35rem;
	border-radius: calc(var(--p-radius) / 2);
	background: var(--p-cd-bg, var(--p-ink));
	color: var(--p-cd-ink, #ffffff);
}

.asls-promo .asls-promo__cd b {
	font-size: 1.3rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.asls-promo .asls-promo__cd small {
	font-size: 0.68rem;
	opacity: 0.85;
}

/* --- Actions ----------------------------------------------------------- */

.asls-promo .asls-promo__actions {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.asls-promo .asls-promo__actions {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.asls-promo .as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: 46px;
	margin: 0;
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: var(--p-radius);
	background: var(--p-ink);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--p-speed) var(--p-ease), transform 0.1s var(--p-ease), filter var(--p-speed) var(--p-ease);
}

.asls-promo .as-btn--primary {
	background: var(--p-accent);
	color: var(--p-accent-ink);
}

.asls-promo .as-btn--primary:hover {
	color: var(--p-accent-ink);
	filter: brightness(0.92);
}

.asls-promo .as-btn--outline {
	background: transparent;
	color: var(--p-ink);
	box-shadow: inset 0 0 0 2px var(--p-ink);
}

.asls-promo .as-btn--outline:hover {
	background: var(--p-ink);
	color: var(--p-surface);
}

.asls-promo .as-btn--wa {
	background: var(--as-wa, #1fb15a);
	color: #ffffff;
}

.asls-promo .as-btn--wa:hover {
	background: var(--as-wa-700, #178f48);
	color: #ffffff;
}

.asls-promo .as-btn:active {
	transform: translateY(1px);
}

.asls-promo .as-btn.is-disabled {
	background: var(--p-surface-2);
	color: var(--p-muted);
	box-shadow: inset 0 0 0 1px var(--p-rule);
	cursor: not-allowed;
}

.asls-promo .asls-promo__cta {
	min-block-size: 54px;
	font-size: 1.0625rem;
}

/* --- Focus, visible on every surface including the dark ones ----------- */

.asls-promo a:focus-visible,
.asls-promo button:focus-visible,
.asls-promo-card a:focus-visible {
	outline: 2px solid var(--p-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.asls-promo .asls-promo__thumb:focus-visible {
	outline: 3px solid var(--p-focus);
	outline-offset: 2px;
}

/* --- The ended panel ---------------------------------------------------- */

.asls-promo--ended .asls-promo__ended {
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2rem);
	background: var(--p-surface);
	border: 1px solid var(--p-rule);
	border-radius: var(--p-radius);
}

.asls-promo--ended .asls-promo__h1 {
	margin-block-end: 0.5rem;
	/* The owner specified this sentence exactly, so it is presented as
	   written. A direction that shouts its headlines in capitals must not
	   restyle the one line a disappointed customer reads. */
	text-transform: none;
}

.asls-promo .asls-promo__back {
	min-block-size: 54px;
	font-size: 1.0625rem;
}

.asls-promo .asls-promo__back-alt {
	margin: 0.65rem 0 0;
	font-size: 0.875rem;
	color: var(--p-muted);
}

.asls-promo .asls-promo__back-alt a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Motion is a courtesy, never a requirement ------------------------- */

@media (prefers-reduced-motion: reduce) {
	.asls-promo *,
	.asls-promo-card * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.asls-promo .asls-promo__share,
	.asls-promo .asls-promo__countdown,
	.asls-promo .asls-promo__wa {
		display: none;
	}
}