/**
 * KL Delivery frontend presentation styles (DELIVERY-005F-D, DELIVERY-005F-D2).
 *
 * Presentation only -- this file never affects which SLA/dispatch/cutoff/
 * transit values are calculated or which surfaces render; it only styles
 * markup KL Delivery's own PHP already emits.
 *
 * Scoped strictly to KL Delivery's own classes:
 *   .wysylka-timer-*     the 24H countdown timer (unchanged class names --
 *                        see class-kl-delivery-timer-renderer.php)
 *   .kl-delivery-estimate the estimated-delivery text wrapper (new,
 *                        KL-owned -- see class-kl-delivery-wpc-position-integration.php)
 *
 * INTENTIONAL OMISSION: this file never sets `background`, `border`, or
 * `color` on the timer's box/block elements. The green countdown boxes are
 * an existing, live visual identity produced by a legacy stylesheet that is
 * not part of this repository and was not readable while making this
 * change -- only layout, spacing, and typography scale are adjusted here,
 * so this file can never accidentally remove or repaint that existing
 * color treatment. If that legacy styling is ever retired, a follow-up
 * task should add explicit color/background rules here, confirmed against
 * the live site first.
 *
 * Contextual selectors use only real, standard WordPress/WooCommerce body
 * classes (`body.home`, `body.single-product`) and the standard WooCommerce
 * `.summary` product-summary container -- never fragile DOM-depth or
 * theme-specific selectors, and no `!important` was needed anywhere below.
 */

/* ----------------------------------------------------------------------
 * Timer -- shared layout, every context
 * ---------------------------------------------------------------------- */

.wysylka-timer-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.6em;
	row-gap: 0.35em;
	max-width: 100%;
	box-sizing: border-box;
	line-height: 1.25;
}

.wysylka-timer-label,
.wysylka-timer-po {
	font-size: 0.85em;
}

.wysylka-timer-bloki-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	column-gap: 0.3em;
}

.wysylka-timer-blok {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.4em;
}

.wysylka-timer-blok [data-kl-unit] {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
}

.wysylka-timer-opis {
	font-size: 0.6em;
	line-height: 1;
}

.wysylka-timer-kropka {
	font-size: 1.2em;
	font-weight: 700;
}

/* ----------------------------------------------------------------------
 * Timer -- homepage / store-wide (wide horizontal space)
 * ---------------------------------------------------------------------- */

body.home .wysylka-timer-box {
	/* DELIVERY-005F-D2: slightly tighter vertical margin than the initial
	   005F-D pass -- feedback was "acceptable, substantially improved" but
	   still feels a little detached from surrounding content; this is a
	   subtle refinement only, not a redesign. */
	padding: 0.4em 0;
	margin: 0.25em 0 0.75em;
	column-gap: 1em;
}

body.home .wysylka-timer-blok [data-kl-unit] {
	font-size: 1.75em;
}

@media (max-width: 782px) {
	/* DELIVERY-005F-D2: the original 005F-D pass never reduced the
	   homepage-specific digit size on narrow widths -- body.home's selector
	   is more specific than the generic mobile rule further below, so it
	   always won regardless of viewport. Fixing that gap here. */
	body.home .wysylka-timer-blok [data-kl-unit] {
		font-size: 1.4em;
	}
}

@media (max-width: 480px) {
	body.home .wysylka-timer-blok [data-kl-unit] {
		font-size: 1.25em;
	}
}

/* ----------------------------------------------------------------------
 * Timer -- single product (compact; must not push purchase info down)
 * ---------------------------------------------------------------------- */

body.single-product .summary .wysylka-timer-box {
	/* DELIVERY-005F-D2: this was the primary reported issue -- the timer
	   read as a "minor technical widget". Height stays compact (padding
	   barely increased); the moderate scale increase below is what actually
	   fixes legibility. justify-content:center keeps it centered in the
	   summary column, which the brief marks as an acceptable layout here. */
	display: flex;
	justify-content: center;
	margin: 0.6em 0;
	padding: 0.4em 0;
	column-gap: 0.6em;
}

body.single-product .summary .wysylka-timer-blok {
	min-width: 2.5em;
}

body.single-product .summary .wysylka-timer-blok [data-kl-unit] {
	font-size: 1.6em;
}

body.single-product .summary .wysylka-timer-label,
body.single-product .summary .wysylka-timer-po {
	font-size: 0.95em;
}

/* ----------------------------------------------------------------------
 * Timer -- narrow widths (tablet / mobile / narrow summary column)
 * ---------------------------------------------------------------------- */

@media (max-width: 782px) {
	.wysylka-timer-blok [data-kl-unit] {
		font-size: 1.15em;
	}

	/* DELIVERY-005F-D2: the single-product override above is more specific
	   than the generic rule just above, so it would otherwise win at every
	   width, including narrow ones, now that it was raised to 1.6em -- this
	   keeps the narrow-width digit size reduced without shrinking it back
	   to the "too small" 1.25em the live feedback was about. */
	body.single-product .summary .wysylka-timer-blok [data-kl-unit] {
		font-size: 1.4em;
	}
}

@media (max-width: 480px) {
	.wysylka-timer-label,
	.wysylka-timer-po {
		display: block;
		width: 100%;
	}

	body.single-product .summary .wysylka-timer-blok [data-kl-unit] {
		font-size: 1.3em;
	}
}

/* ----------------------------------------------------------------------
 * Estimated delivery -- shared default (used as-is on archive/shop cards)
 * ---------------------------------------------------------------------- */

.kl-delivery-estimate {
	/* DELIVERY-005F-D2: live feedback was that this read as a technical
	   footnote sitting too close to the card boundary -- larger size,
	   stronger opacity/weight, and generous top+bottom margin (the bottom
	   margin is the fix for "touches the card boundary") address that
	   without introducing a background/box. Text-align is deliberately
	   left untouched (inherits from the card) since this repository cannot
	   confirm whether the live Woodmart grid centers or left-aligns card
	   content. */
	font-size: 0.95em;
	font-weight: 500;
	opacity: 0.95;
	line-height: 1.4;
	margin: 0.6em 0 0.5em;
}

/* ----------------------------------------------------------------------
 * Estimated delivery -- single product (more visible than a footnote,
 * still secondary to title/price/add-to-cart)
 * ---------------------------------------------------------------------- */

body.single-product .summary .kl-delivery-estimate {
	/* DELIVERY-005F-D2: moderate legibility increase per live feedback.
	   The label and the date are not in separate markup (one sentence, one
	   centralized string -- see class-kl-delivery-estimated-delivery-text.php),
	   so this rule can only emphasize the whole line, not the date alone;
	   splitting them would need a markup change, out of scope for this
	   CSS-only follow-up -- see the task report for that trade-off. */
	font-size: 1.05em;
	font-weight: 600;
	opacity: 1;
	line-height: 1.3;
	margin: 0.6em 0;
}

/* ----------------------------------------------------------------------
 * Estimated delivery -- cart overall (order-level information element,
 * not a floating line of text)
 * ---------------------------------------------------------------------- */

.kl-delivery-estimate--cart-overall {
	display: block;
	font-size: 1em;
	font-weight: 600;
	opacity: 1;
	margin: 0.75em 0;
	padding: 0.5em 0.75em;
	border-left: 3px solid currentColor;
}