/**
 * CMP Offer Bar widget styles.
 * Mirrors components/ui/OfferBar.tsx: a flex-wrapped <ul> of amber-tint pill chips,
 * each = inline amber icon + label, pill radius, hover lift -2px.
 * All colours via CSS vars so the global CMP token stylesheet / Elementor kit drive
 * them; Style-tab controls emit scoped {{WRAPPER}} overrides per instance.
 * Handle: cmp-w-cmp-offer-bar (auto-registered).
 */

/* React: ul flex flex-wrap gap-2 */
.cmp-offer-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px; /* React gap-2; control "gap" overrides */
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: flex-start; /* control "align" overrides */
}

/* When the bar is dropped straight into a FULL-WIDTH Elementor container (e.g. the
   Custom Print hero), it would bleed to the viewport edge. Constrain it to the same
   max-width box the hero text uses so the first pill lines up with the heading /
   description above it. Scoped so a bar nested inside an already-boxed container is
   left untouched. */
.e-con-full > .elementor-widget-cmp-offer-bar > .elementor-widget-container > .cmp-offer-bar {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	box-sizing: border-box;
}

/* React <li>: inline-flex pill chip */
.cmp-offer-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* React gap-2; control "icon_gap" */
	border-radius: var(--r-pill, 999px); /* control "pill_radius" */
	border: 1px solid var(--amber-tint-border, #f7c9ac); /* group "pill_border" */
	background-color: var(--amber-tint, #fdeee4); /* control "pill_bg" */
	padding: 8px 14px; /* React px-3.5 py-2; control "pill_padding" */
	color: var(--ink, #161412);
	transition: transform var(--dur-fast, 180ms) ease,
		background-color var(--dur-fast, 180ms) ease;
	will-change: transform;
}

/* React hover:-translate-y-0.5 (~2px); control "hover_lift" + "hover_bg" */
.cmp-offer-pill:hover {
	transform: translateY(-2px);
}

/* React <span className="text-[var(--amber-text)]"> wrapping <Icon size={16}/> */
.cmp-offer-pill__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--amber-text, #c24a09); /* control "icon_color"; per-pill accent overrides */
}

.cmp-offer-pill__icon svg {
	width: 16px; /* React Icon size={16}; control "icon_size" */
	height: 16px;
	display: block;
}

/* React text-[0.82rem] font-medium text-[var(--ink)] */
.cmp-offer-pill__label {
	color: inherit; /* control "label_color" sets explicit value */
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.1;
}

/* Reveal hook (data-reveal) — initial state owned by the global reveal utility/GSAP.
   Listed here so the pills are styleable even before the global bundle runs. */
.cmp-offer-pill[data-reveal] {
	/* opacity / transform handled by the site-wide .cmp-reveal utility + GSAP */
}

/* ---- Responsive (mobile-first) ---- */

/* Tablet and up */
@media (min-width: 768px) {
	.cmp-offer-bar {
		gap: 8px;
	}
}

/* Desktop and up */
@media (min-width: 1024px) {
	.cmp-offer-pill {
		white-space: nowrap;
	}
}

/* Honour reduced-motion: kill the hover transform + transition (matches tokens.css) */
@media (prefers-reduced-motion: reduce) {
	.cmp-offer-pill {
		transition: none;
	}
	.cmp-offer-pill:hover {
		transform: none;
	}
}