/**
 * Qhalesaa Shop Kit — sale countdown.
 *
 * Two appearances from one block of markup:
 *   - Single product (shortcode): full-width brand-maroon bar, square corners,
 *     "SALE ENDS IN" at the left, colon-separated digits at the right.
 *   - Archive overlay: compact frosted panel positioned over the image by the
 *     .archive-countdown-wrapper that the plugin prints around it.
 *
 * The base rules ARE the single-product bar; the archive section below
 * overrides them. Colours and key sizes are custom properties:
 *
 *   .wc-sale-countdown { --qav-cd-bg: #222; --qav-cd-num-size: 40px; }
 */

.wc-sale-countdown {
	/* Digit and unit-label colour. */
	--qav-cd-accent: #fff;
	/* Bar background follows the site's Elementor "primary" global colour, so
	   a client rebrand updates the countdown automatically. The hex fallback is
	   Qhalesaa's current primary. */
	--qav-cd-card-bg: var(--e-global-color-primary, #330917);
	/* "Sale Ends In" heading colour — white, matching the mobile bar. */
	--qav-cd-label-color: rgba(255, 255, 255, 0.85);
	/* The colon separators between units. */
	--qav-cd-colon: rgba(255, 255, 255, 0.6);
	--qav-cd-num-size: 13px;

	/* Compact one-row layout, same shape as the archive overlay:
	   label inline with the ticker. */
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	width: auto;
	max-width: 100%;
	padding: 10px 20px;
	margin: 20px 0;
	background: var(--qav-cd-card-bg);
	border-radius: 0;
	text-align: center;
}

.countdown-label {
	color: var(--qav-cd-label-color);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	padding-bottom: 0;
	white-space: nowrap;
}

.countdown-boxes {
	display: flex;
	justify-content: center;
	align-items: center;
	/* The colons sit in the middle of this gap. */
	gap: 12px;
	flex-wrap: wrap;
}

.countdown-box {
	position: relative;
	min-width: unset;
	text-align: center;
}

/* Colon between units, centred in the gap and on the digit chips. */
.countdown-box + .countdown-box::before {
	content: ':';
	position: absolute;
	left: -6px;
	top: 50%;
	transform: translate(-50%, -50%);
	color: var(--qav-cd-colon);
	font-size: 13px;
	line-height: 1;
}

.countdown-num {
	display: block;
	color: var(--qav-cd-accent);
	background: var(--e-global-color-accent, #14848c);
	font-size: var(--qav-cd-num-size);
	font-weight: 600;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 4px;
	font-family: 'Arial', sans-serif;
	font-variant-numeric: tabular-nums;
}

/* Unit words (Days/Hrs/Min/Sec) are dropped in this format; the archive
   overlay re-enables them below. */
.wc-sale-countdown .countdown-txt {
	display: none;
}

/* Days chip (and the following colon) drop off inside the final 24 hours.
   The ticker stamps data-days on the block. */
.wc-sale-countdown[data-days='0'] .countdown-box:first-child {
	display: none;
}

.wc-sale-countdown[data-days='0'] .countdown-box:nth-child(2)::before {
	content: none;
}

.countdown-txt {
	display: block;
	color: var(--qav-cd-accent);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Archive overlay
   The wrapper is printed by the plugin around the countdown on listings only.
   Reverts the bar layout back to a centred stacked block on one frosted panel.
   --------------------------------------------------------------------------- */

ul.products li.product {
	position: relative;
}

.archive-countdown-wrapper {
	position: absolute;
	bottom: 64px;
	left: 0;
	right: 0;
	z-index: 10;
	padding: 0 8%;
	pointer-events: none;
}

/* One-row frosted panel: label inline with the ticker, tiny unit words under
   each number. The days column drops off in the final 24 hours via the
   global [data-days='0'] rule. */
.archive-countdown-wrapper .wc-sale-countdown {
	--qav-cd-accent: #fff;
	--qav-cd-num-size: 11px;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	pointer-events: all;
	width: 100%;
	max-width: 100%;
	padding: 6px 12px;
	margin: 0 auto;
	background: rgba(217, 217, 217, 0.25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 8px;
	box-shadow: none;
}

.archive-countdown-wrapper .countdown-label {
	color: var(--qav-cd-accent);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.archive-countdown-wrapper .countdown-boxes {
	justify-content: center;
	gap: 10px;
	flex-wrap: nowrap;
}

.archive-countdown-wrapper .countdown-box {
	min-width: 0;
	padding: 0;
}

.archive-countdown-wrapper .countdown-num {
	background: none;
	padding: 0;
	border-radius: 0;
	margin-bottom: 2px;
	font-weight: 400;
}

.archive-countdown-wrapper .countdown-txt {
	display: block;
	font-size: 6px;
	letter-spacing: 0.5px;
	opacity: 0.85;
}

/* Compact panel keeps plain boxes — no colons. */
.archive-countdown-wrapper .countdown-box + .countdown-box::before {
	content: none;
}

.archive-countdown-wrapper .countdown-num {
	margin-bottom: 5px;
}

.archive-countdown-wrapper .countdown-txt {
	font-size: 8px;
	letter-spacing: 1px;
}

/* ---------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
	/* Half-width cards: slimmer padding and smaller type, same one-row shape. */
	.archive-countdown-wrapper {
		bottom: 55px;
		padding: 0 5%;
	}

	.archive-countdown-wrapper .wc-sale-countdown {
		--qav-cd-num-size: 11px;

		gap: 8px;
		padding: 5px 8px;
	}

	.archive-countdown-wrapper .countdown-label {
		font-size: 8px;
		font-weight: 600;
		letter-spacing: 0.5px;
	}

	.archive-countdown-wrapper .countdown-num {
		font-weight: 600;
		margin-bottom: 2px;
	}

	.archive-countdown-wrapper .countdown-boxes {
		gap: 4px;
	}

	.archive-countdown-wrapper .countdown-txt {
		font-size: 5px;
	}
}

/* ---------------------------------------------------------------------------
   Requested overrides — countdown digits
   --------------------------------------------------------------------------- */

@media (min-width: 601px) {
	/* Desktop & tablet: applies to the product page chips AND the archive
	   overlay digits (outranking the overlay's own size variable). */
	.countdown-num {
		font-size: 13px !important;
		font-weight: 600 !important;
	}

	.archive-countdown-wrapper .countdown-num {
		margin-bottom: 2px !important;
	}
}

@media (max-width: 600px) {
	.archive-countdown-wrapper .countdown-num {
		margin-bottom: 2px !important;
	}
}

/* ---------------------------------------------------------------------------
   Flash sale variant
   Applied when the product carries the _wcbsm_flash_sale flag written by the
   WooCommerce Bulk Sales Manager plugin. The ticker goes red, the label reads
   "⚡ Flash Sale", and label + digits are bolder. Placement and sizes are
   unchanged from the normal countdown.
   --------------------------------------------------------------------------- */

.wc-sale-countdown.flash-sale {
	/* Single-product bar: brand maroon becomes flash red. */
	--qav-cd-card-bg: #ff0000;
	--qav-cd-label-color: #fff;
}

.wc-sale-countdown.flash-sale .countdown-label {
	font-weight: 800;
}

.wc-sale-countdown.flash-sale .countdown-num {
	/* Digit chips: black so they stand out on the red bar. */
	background: #000;
	font-weight: 800 !important;
}

/* Archive overlay: the frosted grey panel becomes red. */
.archive-countdown-wrapper .wc-sale-countdown.flash-sale {
	background: rgba(255, 0, 0, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.archive-countdown-wrapper .wc-sale-countdown.flash-sale .countdown-label {
	font-weight: 700;
}

.archive-countdown-wrapper .wc-sale-countdown.flash-sale .countdown-num {
	background: none;
	font-weight: 700 !important;
}

/* The WooCommerce "-66%" sale badge turns red on flash-sale products
   (the plugin adds .qav-flash-sale to their product wrapper), on both
   the category grid and the single product page. */
.woocommerce ul.products li.product.qav-flash-sale span.onsale,
li.product.qav-flash-sale span.onsale,
.qav-flash-sale span.onsale {
	background: #ff0000 !important;
	background-color: #ff0000 !important;
	color: #fff !important;
}