/**
 * BD Urgency Bar — .espt-block-bd-urgency-bar (.bdu21)
 *
 * Sticky top / bottom (or in-flow) announcement strip: symbol + message,
 * countdown clock, order button, optional close button. Mobile-first.
 *
 * Root classes from the spec:
 *   .is-design-solid|gradient|dark|soft|stripe|glass|neon|ticker
 *   .is-position-top|bottom|inline   .is-layout-center|split|start
 *   .is-wrap-nowrap|wrap             .is-clock-style-chip|boxes|plain
 *   .is-btn-style-pill|solid|ghost|arrow   .is-pulse / .no-pulse
 * Root vars from the spec (only present when the user sets them, so every
 * read below carries a fallback):
 *   --max-w --pad-y --text-size --clock-size --btn-size --gap --bar-radius
 *   --ub-z --bar-bg --bar-bg2 --bar-color --clock-bg --clock-color --btn-bg
 *   --btn-color
 * Classes added by assets/js/blocks/bd-urgency-bar.js:
 *   .is-hidden (scrolled-in bar not shown yet) .is-gone (dismissed / expired)
 *   .bdu21.is-urgent (last minutes) .bdu21.is-over (expired) .bdu21-u.is-tick
 * Shared BD layer: the skins re-point --bd-*, --bd-pad drives the strip's
 * horizontal padding, and bd-hover-… plus bd-shadow-… are honoured below.
 * --bd-radius is deliberately NOT read: the widget's own "Corner radius"
 * control has to default to 0 (a full-width strip stuck to the screen edge
 * must not be rounded), so it supersedes the generic box radius.
 *
 * Each design only re-points the --ub-* tokens below, so the clock-style and
 * button-style choices always keep their own shape and still pick up the
 * design's palette.
 */

/* ------------------------------------------------------------- placement */

.espt-block-bd-urgency-bar {
	--ub-bar-bg: var(--bd-danger);
	--ub-bar-fg: #fff;
	--ub-clk-bg: rgba(0, 0, 0, 0.22);
	--ub-clk-fg: currentColor;
	--ub-clk-plain: currentColor;
	--ub-btn-bg: #fff;
	--ub-btn-fg: var(--bar-bg, var(--ub-bar-bg));
	--ub-x-hover: rgba(255, 255, 255, 0.16);
	margin: 0 auto 24px;
	max-width: 100%;
}

.espt-block-bd-urgency-bar.is-position-top,
.espt-block-bd-urgency-bar.is-position-bottom {
	left: 0;
	margin: 0;
	max-width: none;
	position: fixed;
	right: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	width: 100%;
	z-index: var(--ub-z, 9995);
}

/* Beat .espt-block.alignfull's negative margins / 100vw width in _shared.css:
   a fixed bar is already the width of the viewport. */
.espt-block.espt-block-bd-urgency-bar.is-position-top,
.espt-block.espt-block-bd-urgency-bar.is-position-bottom {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

.espt-block-bd-urgency-bar.is-position-top { top: 0; }
.espt-block-bd-urgency-bar.is-position-bottom { bottom: 0; }

.espt-block-bd-urgency-bar.is-position-inline { margin-bottom: 20px; }

/* Hidden until the visitor has scrolled far enough (JS adds .is-hidden). */
.espt-block-bd-urgency-bar.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-102%);
	visibility: hidden;
}

.espt-block-bd-urgency-bar.is-position-bottom.is-hidden { transform: translateY(102%); }

/* Dismissed, or expired with "hide the whole bar". */
.espt-block-bd-urgency-bar.is-gone { display: none; }

/* Inside the editor canvas the bar previews in place — position:fixed inside a
   transformed editor frame is useless and it would cover the toolbar. */
:where(.editor-styles-wrapper, .block-editor-page) .espt-block.espt-block-bd-urgency-bar.is-position-top,
:where(.editor-styles-wrapper, .block-editor-page) .espt-block.espt-block-bd-urgency-bar.is-position-bottom {
	bottom: auto;
	left: auto;
	margin: 0 auto 24px;
	max-width: 100%;
	opacity: 1;
	position: relative;
	right: auto;
	top: auto;
	transform: none;
	visibility: visible;
	width: auto;
}

.espt-block-bd-urgency-bar .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0;
	padding: 12px 14px;
	text-align: center;
}

/* ------------------------------------------------------------- the strip */

.espt-block-bd-urgency-bar .bdu21 {
	background: var(--bar-bg, var(--ub-bar-bg));
	border-radius: var(--bar-radius, 0px);
	color: var(--bar-color, var(--ub-bar-fg));
	line-height: 1.3;
	max-width: 100%;
	/* Vertical = the "Bar height" control; horizontal = the shared BD "Box
	   padding" control (responsive, 16/20/24 by default) so the Design panel
	   is not dead weight on this widget. */
	padding: var(--pad-y, 8px) var(--bd-pad, 16px);
	position: relative;
	transition: transform 0.18s ease;
	width: 100%;
}

.espt-block-bd-urgency-bar.bd-shadow-soft .bdu21 { box-shadow: 0 4px 18px -8px rgba(15, 23, 42, 0.45); }
.espt-block-bd-urgency-bar.bd-shadow-strong .bdu21 { box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.6); }
.espt-block-bd-urgency-bar.is-position-bottom.bd-shadow-soft .bdu21 { box-shadow: 0 -4px 18px -8px rgba(15, 23, 42, 0.45); }
.espt-block-bd-urgency-bar.is-position-bottom.bd-shadow-strong .bdu21 { box-shadow: 0 -10px 30px -10px rgba(15, 23, 42, 0.6); }

.espt-block-bd-urgency-bar .bdu21-in {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gap, 10px);
	justify-content: center;
	margin: 0 auto;
	max-width: var(--max-w, 1140px);
	min-width: 0;
	width: 100%;
}

.espt-block-bd-urgency-bar.is-layout-center .bdu21-in { justify-content: center; }
.espt-block-bd-urgency-bar.is-layout-split .bdu21-in { justify-content: space-between; }
.espt-block-bd-urgency-bar.is-layout-start .bdu21-in { justify-content: flex-start; }

.espt-block-bd-urgency-bar.is-wrap-wrap .bdu21-in {
	flex-wrap: wrap;
	row-gap: calc(var(--gap, 10px) * 0.6);
}

/* ---------------------------------------------------------- message side */

/* The message gives up room first (it ellipsises), then the button; the clock
   never shrinks, so the digits stay readable at 320px. */
.espt-block-bd-urgency-bar .bdu21-t {
	align-items: center;
	display: flex;
	flex: 0 999 auto;
	gap: calc(var(--gap, 10px) * 0.7);
	min-width: 0;
}

.espt-block-bd-urgency-bar.is-layout-split .bdu21-t { flex: 1 999 auto; }

.espt-block-bd-urgency-bar .bdu21-msg {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.espt-block-bd-urgency-bar .bdu21-m1 {
	display: block;
	font-size: var(--text-size, 12px);
	font-weight: 700;
	letter-spacing: 0.005em;
	min-width: 0;
}

.espt-block-bd-urgency-bar .bdu21-m2 {
	display: none;
	font-size: calc(var(--text-size, 12px) * 0.82);
	font-weight: 500;
	min-width: 0;
	opacity: 0.85;
}

.espt-block-bd-urgency-bar.is-wrap-nowrap .bdu21-m1,
.espt-block-bd-urgency-bar.is-wrap-nowrap .bdu21-m2 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.espt-block-bd-urgency-bar.is-wrap-wrap .bdu21-m1,
.espt-block-bd-urgency-bar.is-wrap-wrap .bdu21-m2 { overflow-wrap: anywhere; }

.espt-block-bd-urgency-bar .bdu21-m1 strong { font-weight: 800; }
.espt-block-bd-urgency-bar .bdu21-m1 u {
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* symbol (emoji character or an icon from the library) */
.espt-block-bd-urgency-bar .bdu21-ic {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: calc(var(--text-size, 12px) * 1.3);
	line-height: 1;
}

.espt-block-bd-urgency-bar .bdu21-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-bd-urgency-bar.is-pulse .bdu21-ic {
	animation: espt-ub-pulse 1.5s ease-in-out infinite;
	transform-origin: center;
}

.espt-block-bd-urgency-bar .bdu21.is-over .bdu21-ic { animation: none; }

@keyframes espt-ub-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	45% { opacity: 0.72; transform: scale(1.16); }
}

/* ------------------------------------------------------------- the clock */

.espt-block-bd-urgency-bar .bdu21-clkw {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: calc(var(--gap, 10px) * 0.6);
	max-width: 100%;
	min-width: 0;
}

.espt-block-bd-urgency-bar .bdu21-lb {
	display: none;
	font-size: calc(var(--text-size, 12px) * 0.88);
	opacity: 0.88;
	white-space: nowrap;
}

.espt-block-bd-urgency-bar .bdu21-clk {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--clock-size, 13px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	gap: 1px;
	line-height: 1;
	white-space: nowrap;
}

.espt-block-bd-urgency-bar .bdu21-u {
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}

.espt-block-bd-urgency-bar .bdu21-u b { font-weight: 800; }
.espt-block-bd-urgency-bar .bdu21-u i { display: none; }

.espt-block-bd-urgency-bar .bdu21-sep {
	opacity: 0.7;
	padding: 0 1px;
}

.espt-block-bd-urgency-bar .bdu21-u.is-tick b { animation: espt-ub-tick 0.35s ease; }

@keyframes espt-ub-tick {
	0% { opacity: 0.45; transform: translateY(-3px); }
	100% { opacity: 1; transform: none; }
}

/* chip (default) */
.espt-block-bd-urgency-bar.is-clock-style-chip .bdu21-clk {
	background: var(--clock-bg, var(--ub-clk-bg));
	border-radius: 6px;
	color: var(--clock-color, var(--ub-clk-fg));
	padding: 4px 9px;
}

/* separate boxes with unit labels — labelled boxes plus a button never fit on a
   narrow phone, so the strip is allowed to wrap there whatever "if it does not
   fit" says; one line comes back from tablet up. */
.espt-block-bd-urgency-bar.is-clock-style-boxes .bdu21-in {
	flex-wrap: wrap;
	row-gap: 6px;
}

.espt-block-bd-urgency-bar.is-clock-style-boxes .bdu21-clk { gap: 4px; }
.espt-block-bd-urgency-bar.is-clock-style-boxes .bdu21-sep { display: none; }

.espt-block-bd-urgency-bar.is-clock-style-boxes .bdu21-u {
	background: var(--clock-bg, var(--ub-clk-bg));
	border-radius: 6px;
	color: var(--clock-color, var(--ub-clk-fg));
	min-width: calc(var(--clock-size, 13px) * 2.1);
	padding: 3px 5px;
}

.espt-block-bd-urgency-bar.is-clock-style-boxes .bdu21-u i {
	display: block;
	font-size: calc(var(--clock-size, 13px) * 0.52);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	opacity: 0.8;
}

/* plain digits */
.espt-block-bd-urgency-bar.is-clock-style-plain .bdu21-clk { color: var(--clock-color, var(--ub-clk-plain)); }

/* the last minutes */
.espt-block-bd-urgency-bar .bdu21.is-urgent .bdu21-clk { animation: espt-ub-beat 1s ease-in-out infinite; }

/* reached zero and staying there */
.espt-block-bd-urgency-bar .bdu21.is-over .bdu21-clk { opacity: 0.78; }

@keyframes espt-ub-beat {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.78; transform: scale(1.06); }
}

/* "show a message instead of the clock" */
.espt-block-bd-urgency-bar .bdu21-over {
	font-size: var(--text-size, 12px);
	font-weight: 800;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* [hidden] must beat the display rules above (the JS swaps clock ⇄ message) */
.espt-block-bd-urgency-bar .bdu21-clk[hidden],
.espt-block-bd-urgency-bar .bdu21-lb[hidden],
.espt-block-bd-urgency-bar .bdu21-over[hidden] { display: none; }

/* ------------------------------------------------------------ the button */

.espt-block-bd-urgency-bar .bdu21-btn {
	align-items: center;
	background: var(--btn-bg, var(--ub-btn-bg));
	border: 1.5px solid transparent;
	border-radius: 999px;
	color: var(--btn-color, var(--ub-btn-fg));
	display: inline-flex;
	flex: 0 1 auto;
	font-size: var(--btn-size, 13px);
	font-weight: 800;
	gap: 5px;
	line-height: 1.1;
	max-width: 100%;
	min-width: 0;
	padding: 7px 15px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	white-space: nowrap;
}

.espt-block-bd-urgency-bar .bdu21-btn > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.espt-block-bd-urgency-bar .bdu21-btn:hover,
.espt-block-bd-urgency-bar .bdu21-btn:focus-visible {
	box-shadow: 0 5px 14px -4px rgba(0, 0, 0, 0.4);
	color: var(--btn-color, var(--ub-btn-fg));
	filter: brightness(1.03);
	transform: translateY(-1px);
}

.espt-block-bd-urgency-bar .bdu21-btn:active { transform: translateY(0); }

.espt-block-bd-urgency-bar .bdu21-ar { display: none; }

/* white pill (default) */
.espt-block-bd-urgency-bar.is-btn-style-pill .bdu21-btn { border-radius: 999px; }

/* solid accent */
.espt-block-bd-urgency-bar.is-btn-style-solid .bdu21-btn {
	background: var(--btn-bg, var(--bd-accent));
	border-radius: var(--espt-btn-radius, 8px);
	color: var(--btn-color, var(--bd-accent-ink));
}

/* outline — must survive whatever palette the design picked */
.espt-block-bd-urgency-bar.is-btn-style-ghost .bdu21-btn {
	background: var(--btn-bg, transparent);
	border-color: currentColor;
	color: var(--btn-color, currentColor);
}

.espt-block-bd-urgency-bar.is-btn-style-ghost .bdu21-btn:hover,
.espt-block-bd-urgency-bar.is-btn-style-ghost .bdu21-btn:focus-visible {
	background: var(--btn-bg, rgba(255, 255, 255, 0.14));
	color: var(--btn-color, currentColor);
}

/* pill with an arrow */
.espt-block-bd-urgency-bar.is-btn-style-arrow .bdu21-ar {
	display: block;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.espt-block-bd-urgency-bar.is-btn-style-arrow .bdu21-btn:hover .bdu21-ar { transform: translateX(3px); }

/* The shared BD "Hover effect" choice drives the order button — a full-width
   strip stuck to the screen edge has nothing to lift, but an in-page bar does,
   so it gets the effect too. */
.espt-block-bd-urgency-bar.bd-hover-lift .bdu21-btn:hover,
.espt-block-bd-urgency-bar.bd-hover-lift .bdu21-btn:focus-visible {
	box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.5);
	transform: translateY(-3px);
}

.espt-block-bd-urgency-bar.bd-hover-glow .bdu21-btn:hover,
.espt-block-bd-urgency-bar.bd-hover-glow .bdu21-btn:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 35%, transparent), 0 8px 20px -8px rgba(0, 0, 0, 0.45);
	transform: none;
}

.espt-block-bd-urgency-bar.bd-hover-scale .bdu21-btn:hover,
.espt-block-bd-urgency-bar.bd-hover-scale .bdu21-btn:focus-visible { transform: scale(1.06); }

.espt-block-bd-urgency-bar.is-position-inline.bd-hover-lift .bdu21:hover { transform: translateY(-3px); }
.espt-block-bd-urgency-bar.is-position-inline.bd-hover-scale .bdu21:hover { transform: scale(1.01); }

/* -------------------------------------------------------- close button */

.espt-block-bd-urgency-bar .bdu21-x {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	line-height: 0;
	opacity: 0.7;
	padding: 5px;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.espt-block-bd-urgency-bar .bdu21-x:hover,
.espt-block-bd-urgency-bar .bdu21-x:focus-visible {
	background: var(--ub-x-hover);
	opacity: 1;
}

/* ================================================================ designs */

/* solid red — the plugin original */
.espt-block-bd-urgency-bar.is-design-solid {
	--ub-bar-bg: var(--bd-danger);
	--ub-bar-fg: #fff;
}

/* gradient */
.espt-block-bd-urgency-bar.is-design-gradient {
	--ub-bar-fg: #fff;
}

.espt-block-bd-urgency-bar.is-design-gradient .bdu21 {
	background: linear-gradient(100deg, var(--bar-bg, var(--bd-danger)) 0%, var(--bar-bg2, var(--bd-deep)) 100%);
}

/* dark + gold clock */
.espt-block-bd-urgency-bar.is-design-dark {
	--ub-bar-bg: #0f172a;
	--ub-bar-fg: #fff;
	--ub-clk-bg: var(--bd-accent);
	--ub-clk-fg: var(--bd-accent-ink);
	--ub-clk-plain: var(--bd-accent);
	--ub-btn-bg: var(--bd-accent);
	--ub-btn-fg: var(--bd-accent-ink);
}

/* soft tinted */
.espt-block-bd-urgency-bar.is-design-soft {
	--ub-bar-bg: var(--bd-soft);
	--ub-bar-fg: var(--bd-ink);
	--ub-clk-bg: var(--bd-primary);
	--ub-clk-fg: #fff;
	--ub-clk-plain: var(--bd-primary-dark);
	--ub-btn-bg: var(--espt-btn-bg, var(--bd-primary));
	--ub-btn-fg: #fff;
	--ub-x-hover: rgba(0, 0, 0, 0.08);
}

.espt-block-bd-urgency-bar.is-design-soft .bdu21 { box-shadow: inset 0 -1px 0 var(--bd-soft-line); }
.espt-block-bd-urgency-bar.is-design-soft.bd-shadow-soft .bdu21 { box-shadow: inset 0 -1px 0 var(--bd-soft-line), 0 4px 18px -8px rgba(15, 23, 42, 0.35); }
.espt-block-bd-urgency-bar.is-design-soft.is-btn-style-ghost .bdu21-btn:hover { background: var(--btn-bg, rgba(0, 0, 0, 0.06)); }

/* warning stripes */
.espt-block-bd-urgency-bar.is-design-stripe {
	--ub-bar-bg: var(--bd-accent);
	--ub-bar-fg: var(--bd-accent-ink);
	--ub-clk-bg: rgba(0, 0, 0, 0.78);
	--ub-clk-fg: #fff;
	--ub-btn-bg: #111827;
	--ub-btn-fg: #fff;
	--ub-x-hover: rgba(0, 0, 0, 0.12);
}

.espt-block-bd-urgency-bar.is-design-stripe .bdu21 {
	animation: espt-ub-stripe 1.6s linear infinite;
	background-color: var(--bar-bg, var(--bd-accent));
	background-image: repeating-linear-gradient(45deg, transparent 0 12px, var(--bar-bg2, rgba(0, 0, 0, 0.14)) 12px 24px);
	background-position: 0 0;
	background-size: 34px 34px;
}

@keyframes espt-ub-stripe {
	from { background-position: 0 0; }
	to { background-position: 34px 0; }
}

/* glass */
.espt-block-bd-urgency-bar.is-design-glass {
	--ub-bar-bg: rgba(15, 23, 42, 0.72);
	--ub-bar-fg: #fff;
	--ub-clk-bg: rgba(255, 255, 255, 0.18);
	--ub-btn-bg: rgba(255, 255, 255, 0.92);
	--ub-btn-fg: #0f172a;
}

.espt-block-bd-urgency-bar.is-design-glass .bdu21 {
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	backdrop-filter: blur(12px) saturate(150%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

/* neon */
.espt-block-bd-urgency-bar.is-design-neon {
	--ub-bar-bg: #0b1020;
	--ub-bar-fg: #d9fff2;
	--ub-clk-bg: rgba(255, 255, 255, 0.06);
	--ub-clk-fg: var(--bar-bg2, #34d399);
	--ub-clk-plain: var(--bar-bg2, #34d399);
	--ub-btn-bg: transparent;
	--ub-btn-fg: var(--bar-bg2, #34d399);
	--ub-x-hover: rgba(52, 211, 153, 0.18);
}

.espt-block-bd-urgency-bar.is-design-neon .bdu21 { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--bar-bg2, #34d399) 55%, transparent); }
.espt-block-bd-urgency-bar.is-design-neon .bdu21-m1 { text-shadow: 0 0 10px color-mix(in srgb, var(--bar-bg2, #34d399) 65%, transparent); }

.espt-block-bd-urgency-bar.is-design-neon.is-clock-style-chip .bdu21-clk,
.espt-block-bd-urgency-bar.is-design-neon.is-clock-style-boxes .bdu21-u {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--bar-bg2, #34d399) 60%, transparent),
		0 0 14px -2px color-mix(in srgb, var(--bar-bg2, #34d399) 60%, transparent);
}

.espt-block-bd-urgency-bar.is-design-neon .bdu21-btn {
	border-color: var(--bar-bg2, #34d399);
	box-shadow: 0 0 14px -3px color-mix(in srgb, var(--bar-bg2, #34d399) 70%, transparent);
}

/* scrolling ticker — the message rolls right to left */
.espt-block-bd-urgency-bar.is-design-ticker {
	--ub-bar-bg: var(--bd-danger);
	--ub-bar-fg: #fff;
}

.espt-block-bd-urgency-bar.is-design-ticker .bdu21-t {
	flex: 1 1 auto;
	overflow: hidden;
}

/* Classic marquee: the message box is (container width + text width) wide and
   slides left by exactly its own width. `flex: 0 0 auto` is load-bearing — as a
   shrinkable flex item with min-width:0 it would collapse to the container
   width and the text would reset half-way through. */
.espt-block-bd-urgency-bar.is-design-ticker .bdu21-msg {
	animation: espt-ub-ticker 16s linear infinite;
	flex: 0 0 auto;
	flex-direction: row;
	gap: 14px;
	padding-left: 100%;
	white-space: nowrap;
	will-change: transform;
}

.espt-block-bd-urgency-bar.is-design-ticker .bdu21-m1,
.espt-block-bd-urgency-bar.is-design-ticker .bdu21-m2 {
	display: inline;
	overflow: visible;
	overflow-wrap: normal;
	text-overflow: clip;
	white-space: nowrap;
}

.espt-block-bd-urgency-bar.is-design-ticker .bdu21:hover .bdu21-msg { animation-play-state: paused; }

@keyframes espt-ub-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* ------------------------------------------------------------ tablet + up */

@media (min-width: 768px) {
	.espt-block-bd-urgency-bar .bdu21-lb { display: inline; }
	.espt-block-bd-urgency-bar .bdu21-m2 { display: block; }
	.espt-block-bd-urgency-bar .bdu21-btn { padding: 8px 18px; }
	.espt-block-bd-urgency-bar.is-clock-style-chip .bdu21-clk { padding: 5px 11px; }
	.espt-block-bd-urgency-bar.is-design-ticker .bdu21-m2 { display: inline; }
	.espt-block-bd-urgency-bar.is-wrap-nowrap.is-clock-style-boxes .bdu21-in { flex-wrap: nowrap; }
}

@media (min-width: 1024px) {
	.espt-block-bd-urgency-bar .bdu21-btn { padding: 9px 22px; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-urgency-bar.is-pulse .bdu21-ic,
	.espt-block-bd-urgency-bar .bdu21.is-urgent .bdu21-clk,
	.espt-block-bd-urgency-bar .bdu21-u.is-tick b,
	.espt-block-bd-urgency-bar.is-design-stripe .bdu21 { animation: none; }

	/* The marquee becomes a normal (ellipsised) message, so the box has to be
	   shrinkable again — otherwise it keeps its container+text width and
	   overflows instead of ellipsising. */
	.espt-block-bd-urgency-bar.is-design-ticker .bdu21-msg {
		animation: none;
		flex: 0 1 auto;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
		padding-left: 0;
	}

	.espt-block-bd-urgency-bar.is-design-ticker .bdu21-m1,
	.espt-block-bd-urgency-bar.is-design-ticker .bdu21-m2 {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.espt-block-bd-urgency-bar.is-position-top,
	.espt-block-bd-urgency-bar.is-position-bottom,
	.espt-block-bd-urgency-bar .bdu21,
	.espt-block-bd-urgency-bar .bdu21-btn,
	.espt-block-bd-urgency-bar .bdu21-x { transition: none; }

	.espt-block-bd-urgency-bar.is-position-inline.bd-hover-lift .bdu21:hover,
	.espt-block-bd-urgency-bar.is-position-inline.bd-hover-scale .bdu21:hover { transform: none; }
}