/**
 * Site-wide sale bar (template-parts/campaign-bar.php), loaded by
 * inc/campaign.php on every page while the /deals/ campaign runs.
 *
 * The bar takes its skin from the campaign page (`ta-cp-bar--{skin}`); each
 * skin only sets the tokens below. Its height stays close to the old bar's,
 * since page templates pad their first section for the fixed header.
 */

.ta-cp-bar {
	--bar-bg: #0d1020;
	--bar-text: #d4d7e3;
	--bar-heading: #ffffff;
	--bar-accent: #4f7cff;
	--bar-on-accent: #ffffff;
	--bar-box: rgba(255, 255, 255, 0.08);
	--bar-glow: rgba(79, 124, 255, 0.35);

	position: relative;
	overflow: hidden;
	padding: 10px 20px;
	background: var(--bar-bg);
	color: var(--bar-text);
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.ta-cp-bar::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 40% 140% at 50% 50%, var(--bar-glow), transparent 70%);
	pointer-events: none;
}

.ta-cp-bar--halloween {
	--bar-bg: #0f0b13;
	--bar-text: #e1d6cb;
	--bar-heading: #fbf3ea;
	--bar-accent: #ff7a1a;
	--bar-on-accent: #1c0d02;
	--bar-box: #261d2f;
	--bar-glow: rgba(255, 122, 26, 0.22);
}

.ta-cp-bar--bfcm {
	--bar-bg: #0a0a0a;
	--bar-text: #d9d9d9;
	--bar-heading: #ffffff;
	--bar-accent: #ffd400;
	--bar-on-accent: #0a0a0a;
	--bar-box: #222222;
	--bar-glow: rgba(255, 212, 0, 0.16);
}

.ta-cp-bar--christmas {
	--bar-bg: #0b1712;
	--bar-text: #dbe3dc;
	--bar-heading: #f7f4ec;
	--bar-accent: #e23b3b;
	--bar-on-accent: #ffffff;
	--bar-box: #1b3126;
	--bar-glow: rgba(226, 59, 59, 0.2);
}

.ta-cp-bar--newyear {
	--bar-bg: #0a0d1f;
	--bar-text: #d8d9e6;
	--bar-heading: #fbf7ee;
	--bar-accent: #e8b94a;
	--bar-on-accent: #1a1406;
	--bar-box: #1e2448;
	--bar-glow: rgba(232, 185, 74, 0.18);
}

/* The whole bar is one link; the visible "button" is just its label. */
.ta-cp-bar__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ta-cp-bar__link:focus-visible {
	outline: 2px solid var(--bar-accent);
	outline-offset: -4px;
}

.ta-cp-bar__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ta-cp-bar__text {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--bar-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

.ta-cp-bar__label {
	flex: none;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--bar-accent);
	color: var(--bar-on-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ta-cp-bar__right {
	display: flex;
	flex: none;
	align-items: center;
	gap: 18px;
}

.ta-cp-bar__timer {
	display: flex;
	gap: 6px;
}

.ta-cp-bar__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 66px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	background: var(--bar-box);
}

.ta-cp-bar__unit b {
	color: var(--bar-heading);
	font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.1;
}

.ta-cp-bar__unit small {
	color: var(--bar-text);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	opacity: 0.75;
	text-transform: uppercase;
}

.ta-cp-bar__cta {
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--bar-accent);
	color: var(--bar-on-accent);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 10px 24px -12px var(--bar-accent);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ta-cp-bar:hover .ta-cp-bar__cta {
	box-shadow: 0 14px 30px -10px var(--bar-accent);
	transform: translateY(-1px);
}

@media (max-width: 1200px) {
	.ta-cp-bar__text {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ta-cp-bar__cta {
		transition: none;
	}
}