/**
 * WpDevArt Pre-Orders for WooCommerce Premium — storefront.
 *
 * Reservation progress of limited pre-orders. Low-specificity rules so theme
 * styles win when they target the same elements.
 */

:where(.wda-pop-progress) {
	display: block;
	margin: 0.75em 0 0;
	font-size: 0.9em;
	line-height: 1.4;
}

/* Author-origin display rules would beat the browser's [hidden]; restore it. */
.wda-pop-progress[hidden],
.wda-pop-progress [hidden] {
	display: none !important;
}

/* The free box hides its parts once the countdown reached zero; so does the progress. */
.wda-po-box.is-released .wda-pop-progress {
	display: none;
}

:where(.wda-pop-progress--loop) {
	margin: 0.35em 0 0;
	font-size: 0.8em;
}

:where(.wda-pop-progress__track) {
	display: block;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

:where(.wda-pop-progress--loop .wda-pop-progress__track) {
	height: 6px;
}

:where(.wda-pop-progress__fill) {
	display: block;
	height: 100%;
	max-width: 100%;
	border-radius: inherit;
	background: var(--wda-po-badge-bg, #222222);
	transition: width 0.4s ease;
}

:where(.wda-pop-progress.is-sold-out .wda-pop-progress__fill) {
	background: #8a8f98;
}

:where(.wda-pop-progress__text),
:where(.wda-pop-progress__low),
:where(.wda-pop-progress__batch) {
	display: block;
}

:where(.wda-pop-progress__text) {
	margin-top: 0.35em;
}

:where(.wda-pop-progress__low) {
	margin-top: 0.15em;
	font-weight: 600;
	color: #b32d2e;
}

:where(.wda-pop-progress__batch) {
	margin-top: 0.15em;
	opacity: 0.8;
}

:where(.wda-pop-progress--text .wda-pop-progress__text) {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	:where(.wda-pop-progress__fill) {
		transition: none;
	}
}

/* Campaign window: no countdown to the release before pre-orders even open.
   The script mirrors the marker's phase as a class on the box for browsers
   without :has(). */
.wda-po-box:has(.wda-pop-campaign--preopen) .wda-po-countdown,
.wda-po-box:has(.wda-pop-campaign--preopen) .wda-po-announce,
.wda-po-box.wda-pop-preopen .wda-po-countdown,
.wda-po-box.wda-pop-preopen .wda-po-announce {
	display: none;
}

/* Order splitting: checkout preview and thank-you list ---------------------- */

:where(.wda-pop-split-notice) {
	margin: 0 0 1em;
	padding: 0.9em 1em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.025);
	font-size: 0.92em;
	line-height: 1.5;
}

/* Inside the Checkout block's summary the wrapper already pads and separates. */
.wda-pop-split-notice--block {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 16px !important;
}

:where(.wda-pop-split-notice__text) {
	margin: 0 0 0.5em;
	font-weight: 600;
}

:where(.wda-pop-split-notice__list) {
	margin: 0;
	padding-inline-start: 1.4em;
}

:where(.wda-pop-split-notice__list li) {
	margin: 0 0 0.25em;
}

:where(.wda-pop-split-notice__when),
:where(.wda-pop-split-thankyou__when) {
	opacity: 0.75;
}

:where(.wda-pop-split-thankyou) {
	margin: 0 0 2em;
}

:where(.wda-pop-split-thankyou__list) {
	margin: 0.5em 0 0;
	padding-inline-start: 1.4em;
}

:where(.wda-pop-split-thankyou__items) {
	display: block;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Deposits ------------------------------------------------------------------ */

:where(.wda-pop-deposit-line) {
	display: block;
	margin: 0.6em 0 0;
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.4;
}

.wda-pop-deposit-line[hidden] {
	display: none !important;
}

/* Outside the free box (the fallback slot) the sentence stands on its own. */
.summary > .wda-pop-deposit-line {
	margin: 0 0 1em;
}

/* Classic cart and checkout totals: the row under the total. */
:where(.wda-pop-balance-row th),
:where(.wda-pop-balance-row td) {
	font-weight: 400;
	border-top: 0;
}

:where(.wda-pop-balance-row__note) {
	display: block;
	margin-top: 0.2em;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.75;
}

/* The blocks: WooCommerce's totals-item classes do the layout; only the
   description needs its tone. */
.wda-pop-balance-block .wc-block-components-totals-item__description {
	font-size: 0.85em;
	opacity: 0.8;
}

.wda-pop-balance-block .wda-pop-balance-block__consent {
	margin-top: 0.4em;
}

/* Thank-you page and My Account: the deposit summary, the balance order's
   note and the "balance due" notice. */
:where(.wda-pop-deposit-notice) {
	margin: 0 0 2em;
}

:where(.wda-pop-deposit-notice__title) {
	margin-bottom: 0.5em;
}

:where(.wda-pop-deposit-notice__pay) {
	display: inline-block;
}

:where(.wda-pop-balance-thankyou) {
	margin: 0 0 2em;
	padding: 0.9em 1em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.025);
}

:where(.wda-pop-balance-thankyou p) {
	margin: 0;
}

:where(.wda-pop-balance-link) {
	margin: 0 0 1.5em;
	opacity: 0.85;
}

:where(.wda-pop-deposit-meta) {
	margin: 4px 0 0;
	font-size: 0.9em;
	opacity: 0.85;
}

/* The pay page of a balance order: WooCommerce's pay table carries only the
   generic shop_table class, and some themes (Astra among them) give its item
   cells no left padding while the header row keeps 12px. Align them. */
.wda-pop-balance-pay form#order_review table.shop_table tbody td,
.wda-pop-balance-pay form#order_review table.shop_table tfoot td {
	padding-left: 12px;
	padding-right: 12px;
}

.wda-pop-balance-pay form#order_review table.shop_table tbody td {
	vertical-align: top;
}

/* Waitlist form ------------------------------------------------------------ */

:where(.wda-pop-waitlist) {
	display: block;
	margin: 1em 0;
	padding: 1em 1.1em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.025);
	font-size: 0.95em;
}

.wda-pop-waitlist[hidden],
.wda-pop-waitlist [hidden] {
	display: none !important;
}

:where(.wda-pop-waitlist__title) {
	margin: 0 0 0.6em;
	font-weight: 600;
}

:where(.wda-pop-waitlist__row) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: stretch;
}

:where(.wda-pop-waitlist__email) {
	flex: 1 1 200px;
	min-width: 0;
	padding: 0.6em 0.8em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	font: inherit;
}

:where(.wda-pop-waitlist__button) {
	flex: 0 0 auto;
	cursor: pointer;
}

:where(.wda-pop-waitlist__consent) {
	display: block;
	margin: 0.6em 0 0;
	font-size: 0.9em;
}

.wda-pop-waitlist__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* Always rendered (a live region must exist before it speaks); takes no room while empty. */
:where(.wda-pop-waitlist__message) {
	margin: 0.6em 0 0;
	font-weight: 600;
	outline: 0;
}

.wda-pop-waitlist__message:empty {
	margin: 0;
}

:where(.wda-pop-waitlist__message.is-error) {
	color: #b32d2e;
}

:where(.wda-pop-waitlist__message.is-success) {
	color: #0f834d;
}

/* Icon badge ------------------------------------------------------------
   The free badge with an icon instead of the text (the text stays as the
   accessible name). A fixed 1:1 box so every corner rule of the free
   stylesheet keeps working. */

.wda-po-badge.wda-pop-badge--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	padding: 0;
	line-height: 1;
	border-radius: 5px;
	background: var(--wda-pop-icon-bg, #222222);
	color: var(--wda-pop-icon, #ffffff);
}

.wda-po-badge.wda-pop-badge--icon.wda-pop-badge--circle {
	border-radius: 50%;
}

.wda-po-badge--single.wda-pop-badge--icon {
	width: 40px;
	height: 40px;
}

/* Whole-pixel icon sizes: a fractional size puts the glyph's edges on
   different sub-pixel phases, which reads as an off-centre clock face. */
.wda-po-badge.wda-pop-badge--icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.wda-po-badge--single.wda-pop-badge--icon svg {
	width: 24px;
	height: 24px;
}

/* Circle countdown -------------------------------------------------------
   One ring per unit, drawn by the script around the free plugin's unit
   markup: a track, and a bar that shrinks with the time left in the unit. */

.wda-po-box--circles .wda-po-countdown {
	gap: 0.75em;
}

.wda-po-box--circles .wda-po-unit {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--wda-pop-circle-size, 85px);
	height: var(--wda-pop-circle-size, 85px);
	border-radius: 50%;
	background: var(--wda-po-countdown-bg, #f3f3f5);
	color: var(--wda-po-countdown-color, #222222);
}

.wda-po-box--circles .wda-pop-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wda-po-box--circles .wda-pop-ring__track,
.wda-po-box--circles .wda-pop-ring__bar {
	fill: none;
	stroke-width: 6;
}

.wda-po-box--circles .wda-pop-ring__track {
	stroke: var(--wda-pop-track, #e5e7eb);
}

.wda-po-box--circles .wda-pop-ring__bar {
	stroke: var(--wda-pop-ring, #222222);
	stroke-linecap: butt;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 0.6s ease;
}

.wda-po-box--circles .wda-po-num {
	position: relative;
	font-size: calc(var(--wda-pop-circle-size, 85px) * 0.3);
	font-weight: 600;
	line-height: 1;
}

.wda-po-box--circles .wda-po-label {
	position: relative;
	margin-top: 0.3em;
	font-size: calc(var(--wda-pop-circle-size, 85px) * 0.12);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.wda-po-box--circles .wda-po-unit {
		width: var(--wda-pop-circle-size-sm, 65px);
		height: var(--wda-pop-circle-size-sm, 65px);
	}

	.wda-po-box--circles .wda-po-num {
		font-size: calc(var(--wda-pop-circle-size-sm, 65px) * 0.3);
	}

	.wda-po-box--circles .wda-po-label {
		font-size: calc(var(--wda-pop-circle-size-sm, 65px) * 0.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wda-po-box--circles .wda-pop-ring__bar {
		transition: none;
	}
}