/*
 * Offer banners (inc/offers.php). Plain CSS, independent of Tailwind, so the
 * same file styles the bar on the site and the previews in wp-admin.
 * The layout follows the bar's own width (container queries), so a preview in
 * a narrow admin box looks like the phone version.
 * Every template is a set of colour tokens checked for WCAG AA contrast.
 */
.ma-offer {
	--mo-bg: #0f172a;
	--mo-fg: #f8fafc;
	--mo-muted: #cbd5e1;
	--mo-badge-bg: #1e3a8a;
	--mo-badge-fg: #dbeafe;
	--mo-chip-bg: rgba(96, 165, 250, .1);
	--mo-chip-fg: #e0f2fe;
	--mo-chip-border: #60a5fa;
	--mo-tile-bg: #1e293b;
	--mo-tile-fg: #f8fafc;
	--mo-tile-border: transparent;
	--mo-cta-bg: #2563eb;
	--mo-cta-fg: #fff;
	--mo-deco: #93c5fd;
	--mo-focus: #fff;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	container: mo / inline-size;
	background: var(--mo-bg);
	color: var(--mo-fg);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
}
.ma-offer *, .ma-offer *::before, .ma-offer *::after { box-sizing: border-box; }
.ma-offer [hidden] { display: none !important; }
.ma-offer.is-closing { transition: height .25s ease, opacity .2s ease; opacity: 0; }

.ma-offer__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	max-width: 88rem;
	min-height: 56px;
	margin: 0 auto;
	padding: 9px 60px 9px 24px;
}

/* Text */
.ma-offer__text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; margin: 0; }
.ma-offer__badge {
	display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
	background: var(--mo-badge-bg); color: var(--mo-badge-fg);
	font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
.ma-offer__headline { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.ma-offer__message { color: var(--mo-muted); }

/* Code, countdown, button */
.ma-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ma-offer__code { display: inline-flex; align-items: center; gap: 8px; }
.ma-offer__code-label, .ma-offer__timer-label {
	color: var(--mo-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.ma-offer__copy {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 36px; margin: 0; padding: 4px 10px 4px 12px;
	border: 1.5px dashed var(--mo-chip-border); border-radius: 8px;
	background: var(--mo-chip-bg); color: var(--mo-chip-fg);
	font: inherit; font-weight: 700; line-height: 1; cursor: pointer;
	transition: border-color .15s, background-color .15s, transform .15s;
}
.ma-offer__copy:hover { border-style: solid; }
.ma-offer__copy:active { transform: scale(.97); }
.ma-offer__copy.is-copied { border-style: solid; }
.ma-offer__code-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .08em; }
.ma-offer__copy-icon { width: 16px; height: 16px; flex: none; }
.ma-offer__copy-text { font-size: 12px; font-weight: 600; }

.ma-offer__timer { display: inline-flex; align-items: center; gap: 8px; }
.ma-offer__units { display: inline-flex; gap: 4px; }
.ma-offer__unit {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 40px; padding: 4px 4px 3px; border-radius: 7px;
	border: 1px solid var(--mo-tile-border);
	background: var(--mo-tile-bg); color: var(--mo-tile-fg); line-height: 1;
}
.ma-offer__unit b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ma-offer__unit i { margin-top: 2px; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

.ma-offer__cta {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 36px; padding: 6px 16px; border-radius: 999px;
	background: var(--mo-cta-bg); color: var(--mo-cta-fg) !important;
	font-weight: 700; text-decoration: none !important; white-space: nowrap;
	transition: filter .15s, transform .15s;
}
.ma-offer__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ma-offer__cta svg { width: 16px; height: 16px; flex: none; }

.ma-offer__close {
	-webkit-appearance: none; appearance: none;
	position: absolute; z-index: 2; top: 50%; right: 10px; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 8px;
	background: transparent; color: var(--mo-fg); opacity: .85; cursor: pointer;
}
.ma-offer__close:hover { opacity: 1; background: rgba(127, 127, 127, .2); }
.ma-offer__close svg { width: 18px; height: 18px; }

.ma-offer a:focus-visible, .ma-offer button:focus-visible { outline: 2px solid var(--mo-focus); outline-offset: 2px; }
.ma-offer__sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Decorations: small drawings at the start or end of the row on wide bars. */
.ma-offer__deco { flex: none; height: 40px; width: auto; color: var(--mo-deco); }
.ma-offer__deco--start { margin-right: -8px; }
.ma-offer__deco--end { margin-left: -8px; }
@container mo (max-width: 1100px) {
	.ma-offer__deco { display: none; }
}
/* Wide bars stay on one row; a long message wraps inside its own column. */
@container mo (min-width: 1101px) {
	.ma-offer__inner { flex-wrap: nowrap; }
	.ma-offer__text { flex: 0 1 auto; }
	.ma-offer__actions { flex: none; flex-wrap: nowrap; }
}
/* Tablets: a little tighter. */
@container mo (max-width: 960px) {
	.ma-offer__inner { gap: 8px 16px; }
	.ma-offer__code-label { display: none; }
}
/* Phones: headline on top, actions underneath, no message. */
@container mo (max-width: 720px) {
	.ma-offer__inner { flex-direction: column; align-items: flex-start; gap: 7px; padding: 8px 52px 9px 16px; }
	.ma-offer__message, .ma-offer__timer-label, .ma-offer__copy-text { display: none; }
	.ma-offer__headline { font-size: 15px; white-space: normal; }
	.ma-offer__actions { gap: 8px; }
	.ma-offer__unit { min-width: 34px; padding: 3px 3px 2px; }
	.ma-offer__unit b { font-size: 14px; }
	.ma-offer__unit i { font-size: 8.5px; }
	.ma-offer__cta { padding: 6px 12px; }
	.ma-offer__close { top: 6px; transform: none; }
}

/* ---------- Templates ---------- */

/* Halloween Night: purple night, moon and bats, pumpkin orange. */
.ma-offer--halloween-night {
	--mo-bg-2: #2a0f3d;
	--mo-bg: radial-gradient(120% 220% at 50% 120%, #4c1d95 0%, transparent 55%), linear-gradient(90deg, #13071f 0%, #2a0f3d 50%, #13071f 100%);
	--mo-fg: #fff;
	--mo-muted: #e9d5ff;
	--mo-badge-bg: #f97316;
	--mo-badge-fg: #1a0b2e;
	--mo-chip-bg: rgba(249, 115, 22, .12);
	--mo-chip-fg: #fed7aa;
	--mo-chip-border: #fb923c;
	--mo-tile-bg: rgba(10, 4, 18, .6);
	--mo-tile-fg: #fdba74;
	--mo-tile-border: rgba(251, 146, 60, .45);
	--mo-cta-bg: #f97316;
	--mo-cta-fg: #1a0b2e;
	--mo-deco: #c4b5fd;
	--mo-focus: #fdba74;
}
.ma-offer--halloween-night .ma-offer__headline { color: #fdba74; }

/* Pumpkin Patch: warm orange, dark text. */
.ma-offer--pumpkin-patch {
	--mo-bg: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #f97316 100%);
	--mo-fg: #1c0a00;
	--mo-muted: #2a0e02;
	--mo-badge-bg: #1c0a00;
	--mo-badge-fg: #fed7aa;
	--mo-chip-bg: rgba(255, 247, 237, .55);
	--mo-chip-fg: #1c0a00;
	--mo-chip-border: #1c0a00;
	--mo-tile-bg: #1c0a00;
	--mo-tile-fg: #fff7ed;
	--mo-cta-bg: #1c0a00;
	--mo-cta-fg: #fff7ed;
	--mo-focus: #1c0a00;
}

/* Spooky Neon: black, neon green and purple, a spider web. */
.ma-offer--spooky-neon {
	--mo-bg: radial-gradient(60% 260% at 0% 50%, rgba(176, 38, 255, .28), transparent 60%), radial-gradient(50% 260% at 100% 50%, rgba(163, 255, 92, .14), transparent 60%), #07060b;
	--mo-fg: #f5f3ff;
	--mo-muted: #c4b5fd;
	--mo-badge-bg: #9d1ff0;
	--mo-badge-fg: #fff;
	--mo-chip-bg: rgba(163, 255, 92, .08);
	--mo-chip-fg: #d9ffc2;
	--mo-chip-border: #a3ff5c;
	--mo-tile-bg: #150d24;
	--mo-tile-fg: #a3ff5c;
	--mo-tile-border: #7c3aed;
	--mo-cta-bg: #a3ff5c;
	--mo-cta-fg: #07060b;
	--mo-deco: #6b7280;
	--mo-focus: #a3ff5c;
}
.ma-offer--spooky-neon .ma-offer__headline { color: #a3ff5c; text-shadow: 0 0 10px rgba(163, 255, 92, .55); animation: mo-flicker 6s infinite; }
.ma-offer--spooky-neon .ma-offer__badge { box-shadow: 0 0 12px rgba(176, 38, 255, .6); }
.ma-offer--spooky-neon .ma-offer__unit { box-shadow: 0 0 8px rgba(124, 58, 237, .45); }
.ma-offer--spooky-neon .ma-offer__spider { color: #a3ff5c; animation: mo-dangle 3.5s ease-in-out infinite; transform-box: fill-box; }

/* Candy Corn: light bar with candy-corn stripes and a ghost. */
.ma-offer--candy-corn {
	--mo-bg: #fff7ed;
	--mo-fg: #1f2937;
	--mo-muted: #4b5563;
	--mo-badge-bg: #c2410c;
	--mo-badge-fg: #fff;
	--mo-chip-bg: #fff;
	--mo-chip-fg: #9a3412;
	--mo-chip-border: #ea580c;
	--mo-tile-bg: #1f2937;
	--mo-tile-fg: #fff;
	--mo-cta-bg: #c2410c;
	--mo-cta-fg: #fff;
	--mo-focus: #9a3412;
	border-bottom: 1px solid #fed7aa;
}
.ma-offer--candy-corn::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 5px; z-index: 1;
	background: repeating-linear-gradient(-45deg, #facc15 0 10px, #f97316 10px 20px, #fff 20px 30px);
}
.ma-offer--candy-corn .ma-offer__ghost { animation: mo-float 4s ease-in-out infinite; transform-box: fill-box; }

/* Black Friday: black and yellow. */
.ma-offer--black-friday {
	--mo-bg: #0a0a0a;
	--mo-fg: #fff;
	--mo-muted: #d4d4d4;
	--mo-badge-bg: #facc15;
	--mo-badge-fg: #0a0a0a;
	--mo-chip-bg: rgba(250, 204, 21, .08);
	--mo-chip-fg: #fde047;
	--mo-chip-border: #facc15;
	--mo-tile-bg: #facc15;
	--mo-tile-fg: #0a0a0a;
	--mo-cta-bg: #facc15;
	--mo-cta-fg: #0a0a0a;
	--mo-deco: #facc15;
	--mo-focus: #facc15;
}
.ma-offer--black-friday .ma-offer__headline { text-transform: uppercase; letter-spacing: .06em; }

/* Midnight Minimal uses the defaults at the top. */

/* MatrixAddons Blue: the site's gradient. */
.ma-offer--brand-blue {
	--mo-bg: linear-gradient(90deg, #1d4ed8 0%, #2563eb 50%, #4f46e5 100%);
	--mo-fg: #fff;
	--mo-muted: #fff;
	--mo-badge-bg: #fff;
	--mo-badge-fg: #1d4ed8;
	--mo-chip-bg: rgba(15, 23, 42, .18);
	--mo-chip-fg: #fff;
	--mo-chip-border: rgba(255, 255, 255, .85);
	--mo-tile-bg: rgba(15, 23, 42, .25);
	--mo-tile-fg: #fff;
	--mo-cta-bg: #fff;
	--mo-cta-fg: #1d4ed8;
	--mo-deco: #bfdbfe;
	--mo-focus: #fff;
}

/* ---------- Motion ---------- */
.ma-offer__bat { animation: mo-float 3s ease-in-out infinite; }
.ma-offer__bat--2 { animation-duration: 3.8s; animation-delay: -1.2s; }
.ma-offer__unit b.is-tick { animation: mo-tick .35s ease-out; }
.ma-offer__copy.is-copied { animation: mo-pop .3s ease-out; }

@keyframes mo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mo-dangle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes mo-flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .55; } }
@keyframes mo-tick { from { transform: translateY(-3px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes mo-pop { 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
	.ma-offer *, .ma-offer { animation: none !important; transition: none !important; }
}
@media print { .ma-offer { display: none !important; } }
@media (forced-colors: active) {
	.ma-offer__copy, .ma-offer__cta, .ma-offer__unit, .ma-offer__badge { border: 1px solid CanvasText; }
}