/**
 * WpDevArt Pre-Orders for WooCommerce — storefront styles.
 *
 * Colors come from CSS custom properties printed from the settings
 * (--wda-po-badge-bg, --wda-po-badge-color, --wda-po-countdown-bg,
 * --wda-po-countdown-color); the fallbacks below match the defaults.
 */

/* Badge ------------------------------------------------------------------ */

/* Positioning contexts, from most to least specific:
   classic loop thumbnail wrapper (the plugin wraps the <img> so every corner
   is a corner of the photo)… */
.wda-po-thumb,
/* …block product cards: the badge is injected into the Product Image block
   as the first child of its wrapper, which is the image box… */
.wc-block-components-product-image,
/* …single product gallery image (see below), and the fallbacks: the classic
   card / product wrapper and the Product Collection card, used only when a
   theme prints its thumbnail in a way that could not be wrapped. */
.woocommerce ul.products li.product,
.products .product,
.woocommerce div.product,
li.wc-block-product,
.wc-block-product-template > li {
	position: relative;
}

/* Block, never inline-block: themes (and WooCommerce's own stylesheet) size
   loop thumbnails with width:100%, which inside a shrink-to-fit box would
   resolve against the image's intrinsic size and render it small. The img
   itself is left to the theme's rules (display, margins, alignment). */
.wda-po-thumb {
	display: block;
}

.wda-po-badge {
	position: absolute;
	z-index: 9;
	display: inline-block;
	padding: 0.3em 0.75em;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 3px;
	background: var(--wda-po-badge-bg, #222222);
	color: var(--wda-po-badge-color, #ffffff);
	pointer-events: none;
}

.wda-po-badge--top-left {
	top: 0.75em;
	inset-inline-start: 0.75em;
}

.wda-po-badge--top-right {
	top: 0.75em;
	inset-inline-end: 0.75em;
}

.wda-po-badge--bottom-left {
	bottom: 0.75em;
	inset-inline-start: 0.75em;
}

.wda-po-badge--bottom-right {
	bottom: 0.75em;
	inset-inline-end: 0.75em;
}

/* Single product: the badge lives inside the main gallery image, so all
   four corners are corners of the photo. The image container gets a
   positioning context (WooCommerce's zoom script sets the same). */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
	position: relative;
}

/* Sharing a corner ------------------------------------------------------
   Sale badges and over-image buttons live in the top corners too; the
   rules below step the badge down (or across) so it never overlaps them.

   The generic rules describe WooCommerce's own stylesheet and are wrapped
   in :where(), which gives them the specificity of a single class: every
   theme rule in the next section outranks them whatever its shape, so a
   theme can be corrected without touching the others.

   Offsets are in the badge's em, 0.8 of the card's. WooCommerce's sale
   badge (0.857em text, 3.236em line-height, 0.5em negative margin) ends
   about 2.7 card-em from the corner; 3.75em clears it with a small gap. */

/* WooCommerce puts the loop sale badge top-RIGHT… */
:where(li.product.sale:not(:has(.wda-wqv-loop-overlay))) .wda-po-badge--top-right {
	top: 3.75em;
}

/* …and the single-product one top-LEFT, against the product wrapper, whose
   top-left corner is the gallery's. Only the page's own badge moves: loop
   badges inside the page (related products) keep their corner. */
:where(div.product.sale) .wda-po-badge--single.wda-po-badge--top-left,
/* Block themes render the page through the Product Image Gallery block,
   whose wrapper (not the product) carries the sale badge. */
:where(.wp-block-woocommerce-product-image-gallery:has(.onsale)) .wda-po-badge--single.wda-po-badge--top-left {
	top: 3.75em;
}

/* Product page, top-right corner: WooCommerce's image zoom button lives
   there (36px square, 1em in — 1.25 of the badge's em). The badge sits
   beside it, centred on it (the badge is 2em tall), whenever the gallery
   prints the button. */
:where(.woocommerce-product-gallery:has(.woocommerce-product-gallery__trigger)) .wda-po-badge--single.wda-po-badge--top-right {
	top: calc(18px + 0.25em);
	inset-inline-end: calc(36px + 1.85em);
}

/* Block product cards: the Product Image block's own sale badge sits in a
   top corner (right by default). */
:where(.wc-block-components-product-image:has(.wc-block-components-product-sale-badge--align-right)) .wda-po-badge--top-right,
:where(.wc-block-components-product-image:has(.wc-block-components-product-sale-badge--align-left)) .wda-po-badge--top-left {
	top: 3.4em;
}

/* WDA Wishlist & Quick View stacks its buttons in the top-right corner of
   the card: a badge set to that corner takes the free corner of the same
   row instead. Back at the top too: the right-hand sale badge it stepped
   down for (rules above) is no longer in its way… */
:where(li.product:has(.wda-wqv-loop-overlay), .wc-block-components-product-image:has(.wda-wqv-loop-overlay), li.wc-block-product:has(.wda-wqv-loop-overlay)) .wda-po-badge--top-right {
	top: 0.75em;
	inset-inline-end: auto;
	inset-inline-start: 0.75em;
}

/* …and, now on the left, clears a left-aligned block sale badge. */
:where(.wc-block-components-product-image:has(.wda-wqv-loop-overlay):has(.wc-block-components-product-sale-badge--align-left)) .wda-po-badge--top-right {
	top: 3.4em;
}

/* Theme-specific placement ---------------------------------------------
   Scoped by the body class the plugin adds for the active parent theme
   (`wda-po-theme-{slug}`), so a rule written for one theme can never
   reach another. Structural classes narrow the scope further where a
   theme ships several layouts. */

/* Astra, modern shop style: the "Sale!" pill is top-LEFT inside the
   thumbnail wrap (1.5em in, ~1.75em tall at 0.87em) and the cart button
   appears top-RIGHT on hover (1em in, 2em circle). The classic style keeps
   WooCommerce's top-right circle and needs nothing extra. */
.wda-po-theme-astra li.product:has(.ast-onsale-card) .wda-po-badge--top-left,
.wda-po-theme-astra li.product:has(.ast-onsale-card):has(.wda-wqv-loop-overlay) .wda-po-badge--top-right {
	top: 4.3em;
}

.wda-po-theme-astra li.product:has(.ast-onsale-card):not(:has(.wda-wqv-loop-overlay)) .wda-po-badge--top-right {
	top: 0.75em;
}

.wda-po-theme-astra li.product:has(.ast-on-card-button:not(.ast-onsale-card)):not(:has(.wda-wqv-loop-overlay)) .wda-po-badge--top-right {
	top: 3.9em;
}

/* Astra's single-product sale circle is 3.5em wide at the product's font
   size and starts half an em outside the corner. */
.wda-po-theme-astra div.product.sale .wda-po-badge--single.wda-po-badge--top-left {
	top: 4.25em;
}

/* Astra prints an "Out of stock" label over loop images straight from the
   stock meta; the plugin blanks it for pre-orders that sell while out of
   stock (see WDA_PO_Frontend::astra_out_of_stock_string) and the empty
   label, which would still paint its white bar, is hidden here. */
.wda-po-theme-astra .ast-shop-product-out-of-stock:empty {
	display: none;
}

/* OceanWP: the sale label is top-LEFT, 1.25rem in and 28px tall (12px text
   with 8px padding), in loops and on the product page alike; the theme
   hides it on out-of-stock products. */
.wda-po-theme-oceanwp li.product.sale .wda-po-badge--top-left,
.wda-po-theme-oceanwp li.product.sale:has(.wda-wqv-loop-overlay) .wda-po-badge--top-right,
.wda-po-theme-oceanwp div.product.sale .wda-po-badge--single.wda-po-badge--top-left {
	top: calc(1.25rem + 36px);
}

.wda-po-theme-oceanwp li.product.sale:not(:has(.wda-wqv-loop-overlay)) .wda-po-badge--top-right,
.wda-po-theme-oceanwp li.product.sale.outofstock .wda-po-badge--top-left,
.wda-po-theme-oceanwp li.product.sale.outofstock .wda-po-badge--top-right {
	top: 0.75em;
}

/* OceanWP's zoom button is a 32px square, 10px in. */
.wda-po-theme-oceanwp .woocommerce-product-gallery:has(.woocommerce-product-gallery__trigger) .wda-po-badge--single.wda-po-badge--top-right {
	top: calc(26px - 1em);
	inset-inline-end: calc(42px + 0.6em);
}

/* Kadence: sale badge top-RIGHT, 6px in and ~1.9em tall (0.857em text,
   0.5em padding). Wishlist & Quick View buttons sit in the action row under
   the image there, so a top-right badge keeps its corner. */
.wda-po-theme-kadence li.product:has(.wda-wqv-loop-overlay) .wda-po-badge--top-right {
	inset-inline-start: auto;
	inset-inline-end: 0.75em;
}

.wda-po-theme-kadence li.product.sale .wda-po-badge--top-right {
	top: calc(6px + 2.75em);
}

/* Storefront prints the sale badge in the text flow — under the title in
   loops, above the gallery on the product page — so nothing needs
   clearing. */
.wda-po-theme-storefront li.product.sale .wda-po-badge--top-right,
.wda-po-theme-storefront div.product.sale .wda-po-badge--single.wda-po-badge--top-left {
	top: 0.75em;
}

/* Storefront's zoom button is 2em square, 0.875em in (gallery em = 1.25
   badge em). */
.wda-po-theme-storefront .woocommerce-product-gallery:has(.woocommerce-product-gallery__trigger) .wda-po-badge--single.wda-po-badge--top-right {
	top: 1.35em;
	inset-inline-end: 4.2em;
}

/* Neve: sale badge top-LEFT, flush with the corner, ~1.8em tall. */
.wda-po-theme-neve li.product.sale .wda-po-badge--top-left,
.wda-po-theme-neve li.product.sale:has(.wda-wqv-loop-overlay) .wda-po-badge--top-right {
	top: 2.9em;
}

.wda-po-theme-neve li.product.sale:not(:has(.wda-wqv-loop-overlay)) .wda-po-badge--top-right {
	top: 0.75em;
}

/* wpdevart themes mirror the layout: WooCommerce's sale badge top-RIGHT,
   Wishlist & Quick View buttons top-LEFT. */
.wpdevart-woocommerce li.product:has(.wda-wqv-loop-overlay) .wda-po-badge--top-right {
	inset-inline-start: auto;
	inset-inline-end: 0.75em;
}

.wpdevart-woocommerce li.product:has(.wda-wqv-loop-overlay) .wda-po-badge--top-left {
	inset-inline-start: auto;
	inset-inline-end: 0.75em;
}

.wpdevart-woocommerce li.product.sale .wda-po-badge--top-right,
.wpdevart-woocommerce li.product.sale:has(.wda-wqv-loop-overlay) .wda-po-badge--top-left {
	top: 3.75em;
}

/* Loop availability ------------------------------------------------------ */

.wda-po-loop-availability {
	display: block;
	margin: 0.25em 0;
	font-size: 0.85em;
}

/* Availability + countdown box ------------------------------------------ */

.wda-po-box {
	margin: 0 0 1em;
}

/* The script toggles visibility through the `hidden` attribute; the
   display rules below would otherwise override its default display:none
   (e.g. a date-less "coming soon" variation showing empty countdown boxes). */
.wda-po-box[hidden],
.wda-po-box [hidden],
.wda-po-badge[hidden] {
	display: none !important;
}

.wda-po-availability {
	margin: 0 0 0.5em;
	font-weight: 600;
}

.wda-po-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1em;
}

/* Numbers are filled by the script; keep the layout reserved but blank
   until then so a cached page never shows stale digits. */
.wda-po-countdown:not(.is-ready) .wda-po-num,
.wda-po-countdown:not(.is-ready) .wda-po-label {
	visibility: hidden;
}

.wda-po-box--boxes .wda-po-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3.6em;
	padding: 0.5em 0.6em;
	border-radius: 6px;
	background: var(--wda-po-countdown-bg, #f3f3f5);
	color: var(--wda-po-countdown-color, #222222);
}

.wda-po-box--boxes .wda-po-num {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.wda-po-box--boxes .wda-po-label {
	font-size: 0.7em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.75;
}

.wda-po-box--inline .wda-po-countdown {
	gap: 0.35em;
	font-weight: 600;
	color: var(--wda-po-countdown-color, #222222);
}

.wda-po-box--inline .wda-po-num {
	font-variant-numeric: tabular-nums;
}

.wda-po-box--inline .wda-po-label {
	margin-inline-start: 0.2em;
	font-weight: 400;
}

.wda-po-box.is-released .wda-po-availability,
.wda-po-box.is-released .wda-po-countdown {
	display: none;
}

/* Thank-you page notice ------------------------------------------------- */

.wda-po-thankyou-notice {
	margin: 0 0 2em;
	padding: 1em 1.25em;
	border: 1px solid var(--wda-po-countdown-bg, #f3f3f5);
	border-inline-start: 4px solid var(--wda-po-badge-bg, #222222);
	background: var(--wda-po-countdown-bg, #f3f3f5);
}

.wda-po-thankyou-notice__title {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.wda-po-thankyou-notice__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wda-po-thankyou-notice__list li {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.35em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.wda-po-thankyou-notice__release {
	font-weight: 600;
	white-space: nowrap;
}

/* Compact countdown ("17d 08h 14m") for tables ---------------------------- */

.wda-po-box--compact {
	display: inline;
	margin: 0;
}

.wda-po-box--compact .wda-po-countdown {
	display: inline-flex;
	gap: 0.3em;
	margin: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.wda-po-box--compact .wda-po-unit {
	display: inline;
}

.wda-po-box--compact .wda-po-label {
	margin-inline-start: 0.05em;
	font-weight: 400;
}

/* My Account → Pre-Orders ------------------------------------------------
   The table inherits the theme's shop_table styling on purpose; these
   rules only shape our own cell content. */

.wda-po-account-table .wda-po-account-col-release,
.wda-po-account-table .wda-po-account-col-status {
	white-space: nowrap;
}

.wda-po-account-meta {
	display: block;
	margin-top: 0.2em;
	font-size: 0.85em;
	opacity: 0.75;
}

.wda-po-account-date {
	display: block;
	font-weight: 600;
	white-space: nowrap;
}

.wda-po-account-countdown {
	display: block;
	margin-top: 0.2em;
	font-size: 0.85em;
	opacity: 0.8;
	white-space: nowrap;
}

.wda-po-account-countdown__prefix {
	margin-inline-end: 0.2em;
}

/* Visually hidden, still read by assistive technology (release announcement). */
.wda-po-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}