/*
 * Frontend styles for gift rules: the product-page block and the
 * "Подарък" badge/pill reused on the shop loop and in the cart table.
 * Mobile-first; the block starts stacked, then gains a two-column head
 * at 480px+. No !important except where noted.
 */

.wcspr-gift {
	/* Fallbacks only — render_block() always sets these as inline custom
	 * properties per rule (WCSPR_Gifts::block_style()), derived from
	 * gift_block_bg/gift_urgency_bg with an automatic text/border/muted
	 * contrast pick. --wcspr-gift-accent is fixed on purpose (not a rule
	 * field): it matches the theme's own dark-navy heading colour
	 * (Blocksy staging palette color3, the same value as the timer box
	 * default) regardless of which block background is chosen. */
	--wcspr-gift-border: rgba(28,43,57,0.14);
	--wcspr-gift-bg: #f2f5f7;
	--wcspr-gift-text: #1c2b39;
	--wcspr-gift-muted: #5b6b78;
	--wcspr-gift-accent: #002b3d;
	--wcspr-gift-urgency-bg: #fceadd;
	--wcspr-gift-urgency-text: #1c2b39;
	/* Shared by the gift-item pill and the urgency strip so the two always
	 * round the same amount (founder call 20.09.2026 — the pill used to be
	 * a 999px "pill" and its white corners poked out past the photo). */
	--wcspr-gift-radius: 8px;

	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 20px 0;
	padding: 16px 18px;
	border: 1px solid var(--wcspr-gift-border);
	border-radius: 12px;
	background: var(--wcspr-gift-bg);
	color: var(--wcspr-gift-text);
}

/* ---- head: title + value together, flush left ---------------------- */

/*
 * Founder round 5, 20.09.2026: label and value belong together as one
 * line — "ПОДАРЪК НА СТОЙНОСТ: 34,20 €" — not label-left/value-pushed-
 * far-right. One row at every width now (no column-on-mobile switch);
 * flex-wrap only so a very long value never overflows a narrow screen.
 * text-transform lives here, once, on the whole head — the source string
 * (WCSPR_Gifts::render_block()) stays normal case with its own colon.
 */
.wcspr-gift__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	text-transform: uppercase;
}

/* 18px for the heading, its value and the rule's text (founder, 21.09.2026:
 * at 12px the heading "is extremely small and goes unnoticed"). */
.wcspr-gift__title {
	font-size: 18px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wcspr-gift-accent);
}

.wcspr-gift__value {
	font-size: 18px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--wcspr-gift-text);
}

.wcspr-gift__value .amount {
	font-weight: 600;
	color: var(--wcspr-gift-text);
}

/* wc_price() separates the number from the symbol with a  , which a
 * bold/condensed font can render as a barely-visible gap (same fix as the
 * badge's .wcspr-onsale__line, founder report 20.09.2026). Covers every
 * price shown inside the block: the head's value line and any {value}
 * substituted into the copy. */
.wcspr-gift .woocommerce-Price-currencySymbol {
	margin-left: 2px;
}

/* ---- gift thumbnails ------------------------------------------------ */

.wcspr-gift__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wcspr-gift__item {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 4px 10px 4px 4px;
	/* The pill's own background is always solid white, independent of the
	 * block's gift_block_bg — so its border and text must be fixed dark
	 * colours, never var(--wcspr-gift-border)/color:inherit. On a dark block
	 * background those variables flip to light (meant for text sitting
	 * directly on the dark block), which made the gift's name render white
	 * on the pill's white background — invisible. Caught in review, 20.09.2026. */
	border: 1px solid rgba( 28, 43, 57, 0.14 );
	border-radius: var(--wcspr-gift-radius);
	background: #fff;
	color: #1c2b39;
	text-decoration: none;
}

.wcspr-gift__item img {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	/* Inset radius so the photo's own corners sit inside the pill's rounded
	 * edge instead of poking past it; contain (not cover) so a product shot
	 * that isn't square never gets cropped inside the thumbnail. */
	border-radius: calc( var(--wcspr-gift-radius) - 3px );
	object-fit: contain;
	background: #fff;
}

.wcspr-gift__item:hover .wcspr-gift__name,
.wcspr-gift__item:focus-visible .wcspr-gift__name {
	text-decoration: underline;
}

.wcspr-gift__name {
	font-size: 15px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* ---- copy ------------------------------------------------------------ */

.wcspr-gift__text {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
}

.wcspr-gift__urgency {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--wcspr-gift-radius);
	background: var(--wcspr-gift-urgency-bg);
	color: var(--wcspr-gift-urgency-text);
	font-size: 18px; /* founder 21.09.2026: same size as the block's copy (was 14px) */
	line-height: 1.25;
	font-weight: 600;
}

/* ---- countdown boxes (days / hours / minutes / seconds) ----------------
 * Styled like the sale marquee's Greenshift countdown: one box per unit,
 * big digits, small label underneath. Colour, digit size and radius come
 * from the rule as custom properties on .wcspr-gift (see timer_style()).
 */

.wcspr-gift {
	--wcspr-timer-bg: #002b3d;
	--wcspr-timer-color: #ffffff;
	--wcspr-timer-size: 22px;
	--wcspr-timer-radius: 6px;
}

.wcspr-gift__timer {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 5px;
	vertical-align: middle;
}

.wcspr-gift__unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: calc( var(--wcspr-timer-size) * 2 );
	/* Asymmetric on purpose: the digit's own line-box already carries visual
	 * weight at the top, and the label used to sit far enough below it
	 * (0.18× margin) that the pair read as bottom-heavy in the box. More
	 * headroom above the digit + a tighter label gap re-centers the
	 * digit+label group inside the box (founder screenshot review 20.09.2026).
	 * Second review pass (20.09.2026): 0.32/0.2 still read bottom-light — the
	 * label sat almost against the bottom edge. Top and bottom are now equal
	 * so the digit+label group centers as a group, not just the digit. */
	padding: calc( var(--wcspr-timer-size) * 0.26 ) calc( var(--wcspr-timer-size) * 0.3 );
	border-radius: var(--wcspr-timer-radius);
	background: var(--wcspr-timer-bg);
	color: var(--wcspr-timer-color);
	line-height: 1;
	text-align: center;
}

.wcspr-gift__num {
	font-size: var(--wcspr-timer-size);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.wcspr-gift__lbl {
	/* Tightened again (founder round 5, 20.09.2026: still a bit too much air
	 * between the digit and its label) — box top/bottom padding (0.26,
	 * above) is untouched, only the digit-to-label gap shrinks further. */
	margin-top: calc( var(--wcspr-timer-size) * 0.02 );
	font-size: max( 10px, calc( var(--wcspr-timer-size) * 0.45 ) );
	font-weight: 500;
	line-height: 1;
	opacity: 0.9;
	text-transform: lowercase;
}

/* The server prints the boxes empty; they take their space but stay invisible
 * until gift-countdown.js has filled them (it sets data-wcspr-days on the
 * first tick). With the script blocked nobody sees four empty boxes. */
.wcspr-gift__timer:not([data-wcspr-days]) {
	visibility: hidden;
}

/* Days hide themselves once the countdown drops under a day. */
.wcspr-gift__timer[data-wcspr-days="0"] .wcspr-gift__unit--d {
	display: none;
}

@media ( max-width: 689.98px ) {
	.wcspr-gift__unit {
		min-width: calc( var(--wcspr-timer-size) * 1.7 );
	}
	.wcspr-gift__num {
		font-size: calc( var(--wcspr-timer-size) * 0.85 );
	}
}

/* ---- reused outside the block: cart row label + qty ------------------ */

.wcspr-gift__label {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--wcspr-gift-urgency-bg, #fdefe3);
	color: var(--wcspr-gift-urgency-text, #a3410a);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.6;
	vertical-align: middle;
	white-space: nowrap;
}

.wcspr-gift__qty {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	color: #7a7060;
}

/* ---- product-thumbnail badge: replaces the percent-off "onsale" flash */

/*
 * Reuses the theme's .onsale positioning (top corner over the product
 * image, absolute, sized by the theme's own --badge-top/--badge-left) via
 * the shared class. The modifier turns the pill itself into a transparent
 * flex column so a text row and a thumbnail row can each size themselves,
 * at a specificity that beats a plain `.onsale` theme rule without needing
 * !important — except the font-size below (see the comment there).
 */
.woocommerce span.onsale.wcspr-onsale--gift,
.woocommerce ul.products li.product .onsale.wcspr-onsale--gift,
.woocommerce div.product .onsale.wcspr-onsale--gift {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: auto;
	height: auto;
	/* 11px measured inset of the theme's own image wrapper inside the card
	 * (Blocksy product card, staging 20.09.2026) on both sides. */
	max-width: calc( 100% - 22px );
	padding: 0;
	background: none;
	text-align: left;
}

/*
 * Box model copied 1:1 from .wcspr-saving-badge (WCSPR_Pricing::output_saving_badge_css())
 * — height:28px, padding:6px 10px, box-sizing:content-box, line-height:1em —
 * so the two badges read as a matched pair when both are on the same card
 * (founder call 20.09.2026). Only possible because the text is now short
 * ("Подарък: 49,60 €"); the old "Подарък на стойност …" line needed to wrap.
 */
.wcspr-onsale__line {
	display: inline-flex;
	align-items: center;
	/* No flex `gap` here on purpose (founder report 20.09.2026: "Подарък:  10,20 €"
	 * read as a double space) — the icon's own trailing space and the
	 *   before the price already provide the exact single-space gap,
	 * same technique .wcspr-saving-badge uses. A `gap` would stack an extra
	 * 4px on top of that at every anonymous-flex-item boundary (the icon
	 * span, the "Подарък:" text run and wc_price()'s own <span> are three
	 * separate flex items). */
	max-width: 100%;
	height: 28px;
	padding: 6px 10px;
	box-sizing: content-box;
	/* Same radius as the sibling "Спестяваш" badge (--badge-radius, 2px) —
	 * founder call 20.09.2026, was 10px. */
	border-radius: var( --badge-radius, 2px );
	/* Same variable chain the theme's own .onsale rule reads, so the pill
	 * always matches the theme's current badge color instead of a fixed
	 * green; #8db93b (Hygea's current palette color) is only the fallback. */
	background: var( --badge-background-color, var( --theme-palette-color-1, #8db93b ) );
	color: var( --badge-text-color, #fff );
	/*
	 * WooCommerce's own inline stylesheet ships `.woocommerce-js span.onsale
	 * { font-size: 1.2em !important }`; nothing short of !important here
	 * beats it, which is why the badge used to render at ~19px and wrap.
	 * 16px matches the sibling "Спестяваш" badge (.wcspr-saving-badge).
	 */
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1em;
	white-space: nowrap;
}

.wcspr-onsale__line .amount {
	font-weight: 700;
}

.wcspr-onsale__icon {
	font-size: 14px;
	line-height: 1;
	/* Without flex `gap` (removed above — it doubled the colon/price space),
	 * whitespace between flex children collapses to nothing, so the emoji
	 * glued itself to "Подарък:" (founder report 20.09.2026). A margin on
	 * the icon itself, not gap, keeps the colon/price spacing untouched. */
	margin-right: 5px;
}

/* wc_price() already separates the number from the symbol with a &nbsp;,
 * but a bold condensed font at 16px can render that as a barely-visible
 * gap (founder report 20.09.2026: "49,00€" read as glued together). A small
 * explicit margin guarantees a real gap in the badge without touching the
 * site-wide price format. */
.wcspr-onsale__line .woocommerce-Price-currencySymbol {
	margin-left: 2px;
}

/* ---- gift-photo strip under the pill (every context the badge appears) - */

/*
 * One shared white plate for the whole strip (founder review 20.09.2026:
 * with two thumbnails on a busy product photo, a bare "+" between them had
 * no background of its own and nearly disappeared). Individual thumbnails
 * no longer carry their own white/border/shadow — the plate provides it —
 * so a single gift also just gets one small white square around its photo.
 *
 * Exact values approved by the founder in DevTools, 20.09.2026: a hairline
 * border instead of the earlier 1px/box-shadow combo (too heavy) or a bare
 * borderless plate (too flat) — 0.5px reads as a thin edge without a
 * shadow. No other selector (mobile media query, single-page variant, the
 * Task 10 mega-menu compact variant) may re-add a shadow or a heavier
 * border to this element.
 */
.wcspr-onsale__thumbs {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border-radius: 4px;
	border: 0.5px solid rgba( 0, 0, 0, 0.1 );
	padding: 3px;
}

.wcspr-onsale__thumbs img {
	display: block;
	flex: 0 0 auto;
	border-radius: 3px;
	object-fit: contain;
}

.wcspr-onsale__thumbs--1 img {
	width: 56px;
	height: 56px;
}

.wcspr-onsale__thumbs--2 img,
.wcspr-onsale__thumbs--3 img {
	width: 40px;
	height: 40px;
}

.wcspr-onsale__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 1px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	/* Fixed, not var(--wcspr-gift-text) — the plate behind it is always
	 * white regardless of the block's own gift_block_bg, so the glyph needs
	 * its own guaranteed-dark colour, not one that tracks the block. */
	color: #1c2b39;
}

/* The overflow chip ("+N") reads as a thumbnail-shaped slot rather than a
 * lone glyph, so it doesn't look like a stray "+" tacked onto the strip.
 * A faint fill (not another white square) so it still reads as a distinct
 * slot against the shared white plate. */
.wcspr-onsale__plus--more {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.05 );
	font-size: 14px;
	font-weight: 800;
	color: #1c2b39;
}

/* A card is narrowest on a phone-width grid: the 56/40px plate started
 * covering too much of the product photo there (founder review 20.09.2026).
 * Smaller on ≤689px, same breakpoint as the countdown boxes. */
@media ( max-width: 689.98px ) {
	.wcspr-onsale__thumbs--1 img {
		width: 48px;
		height: 48px;
	}

	.wcspr-onsale__thumbs--2 img,
	.wcspr-onsale__thumbs--3 img {
		width: 36px;
		height: 36px;
	}

	.wcspr-onsale__plus--more {
		width: 36px;
		height: 36px;
	}
}

/*
 * Same top offset as the standard "Спестяваш" badge (.wcspr-saving-badge,
 * top-right of the same card/gallery) sits at — founder round 4/5,
 * 20.09.2026. Originally this only fired when a saving badge was actually
 * present on the same card (`:has(.wcspr-saving-badge)`), to clear below it
 * and avoid overlap; since Task 5 makes gift and discount mutually
 * exclusive, the two badges never appear together any more, so that
 * selector would now never match — the gift badge would silently fall back
 * to the theme's own unrelated default position, which is exactly what
 * still read as "lower" in the founder's screenshot. The fix is
 * unconditional: the gift badge always claims the same slot a standard
 * badge would, whether or not one happens to be showing, via the same
 * `--has-container`/`--badge-top` chain output_saving_badge_css() reads —
 * whatever the theme sets it to (default, breakpoint, layout), both follow
 * it together.
 *
 * The two badges sit on different offsetParents on the real DOM (Blocksy
 * product-loop card AND single-product gallery, staging 20.09.2026): the
 * gift badge is absolutely positioned on the image wrapper (a <figure> in
 * a card, the gallery container on a single page), the saving badge
 * directly on the shared ancestor matched below. On a card the image
 * wrapper is inset 11px inside that shared ancestor, so matching the
 * saving badge's top needs the var expression minus that inset; on the
 * single-product gallery the image wrapper is flush with the shared
 * ancestor (verified on staging: both computed to the same 20px there), so
 * the same var expression applies with no adjustment.
 */
.woocommerce ul.products li.product .onsale.wcspr-onsale--gift {
	top: calc( var( --has-container, var( --badge-top, 25px ) ) - 11px );
}

.woocommerce div.product .onsale.wcspr-onsale--gift {
	top: var( --has-container, var( --badge-top, 25px ) );
}

/* ---- mega menu compact variant (Task 10, 20.09.2026) -------------------
 *
 * WCSPR_Gifts::inject_mega_menu_gift_badge() drops the normal badge markup
 * straight inside GreenShift's own `.gspb-discountbox` — already absolutely
 * positioned by that block's own per-instance settings, at whatever
 * top/left the founder configured there. None of the rules above apply
 * (this markup never sits inside a `li.product`/`div.product`), so this
 * resets position/sizing explicitly rather than relying on a cascade that
 * was never written for this context. Scoped to `.wcspr-onsale--gift-
 * compact` only — the normal card/single badge is untouched.
 *
 * Text-only: no thumbnails. A mega-menu card has no vertical room for the
 * photo strip without crowding the product image (founder said text-only
 * is an acceptable fallback when thumbnails don't fit cleanly).
 * Font-size/padding intentionally match the menu's own "-15%" discount
 * pill (computed on staging: 16px, 8px/20px, 6px radius) — "match its size
 * exactly" — while keeping this plugin's own green/white colour scheme for
 * brand consistency with the gift badge everywhere else on the site.
 */
.wcspr-onsale--gift-compact {
	display: inline-block;
}

/*
 * background/padding (21.09.2026): the mega menu is on EVERY page, but the
 * rule that turns the theme's own `.onsale` pill transparent is scoped to
 * `.woocommerce …` and only matches on WooCommerce pages. On the home page
 * Blocksy's `:is(.onsale, …)` background plus the site's own Customizer
 * `--badge-padding: 20px 15px` stayed visible BEHIND our green line — the
 * founder's "two green bars, one on top of the other". Switched off here,
 * unscoped, so the compact badge looks the same on every page.
 */
.wcspr-onsale--gift-compact .onsale.wcspr-onsale--gift {
	position: static !important;
	top: auto !important;
	left: auto !important;
	max-width: none !important;
	display: inline-flex !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

.wcspr-onsale--gift-compact .wcspr-onsale__thumbs {
	display: none;
}

/* height/line-height: the card badge's fixed 28px box made this pill 44px
 * tall next to the menu's own 38px "-15%" (16px text, 22px line, 8px + 8px). */
.wcspr-onsale--gift-compact .wcspr-onsale__line {
	height: auto;
	padding: 8px 20px;
	border-radius: 6px;
	font-size: 16px;
	line-height: 22px;
}