/* BD Delivery Date — .espt-block-bd-delivery-date
 * vars: --dot-size --icon-size --step-gap --title-size --text-size --header-size
 *       --clock-size --clock-radius --header-bg --header-color --clock-bg
 *       --clock-color --icon-color --dot-bg --line-color --title-color
 *       --text-color --date-color
 * classes: is-layout-timeline|horizontal|cards  is-header-style-soft|solid|plain
 *          is-connector-dashed|solid|dotted|none  is-cta-design-*  is-cta-hover-*
 *          is-cta-align-*  is-cta-full  is-cta-attn
 * state classes on .bdd22 (JS): is-after (past today's cutoff) is-urgent is-ended
 * Mobile-first. */

.espt-block-bd-delivery-date .bdd22 {
	color: var(--bd-ink);
	min-width: 0;
	overflow: hidden;
	overflow-wrap: anywhere;
	padding: 0;
}

/* ---------------------------------------------------------------- header */
.espt-block-bd-delivery-date .bdd22-cut {
	align-items: center;
	background: var(--header-bg, var(--bd-soft));
	border-bottom: 1px solid var(--bd-soft-line);
	color: var(--header-color, var(--bd-primary-dark));
	display: flex;
	flex-wrap: wrap;
	font-size: var(--header-size, 13.5px);
	font-weight: 600;
	gap: 8px 10px;
	line-height: 1.45;
	padding: calc(var(--bd-pad) * 0.7) var(--bd-pad);
}

.espt-block-bd-delivery-date .bdd22-lbl {
	flex: 1 1 180px;
	min-width: 0;
}

/* Both cutoff labels ship in the markup; .is-after (set by PHP and kept in
 * sync by the JS) picks the live one, so **bold** survives the swap. */
.espt-block-bd-delivery-date .bdd22-lb-a { display: none; }
.espt-block-bd-delivery-date .bdd22.is-after .bdd22-lb-b { display: none; }
.espt-block-bd-delivery-date .bdd22.is-after .bdd22-lb-a { display: inline; }

.espt-block-bd-delivery-date .bdd22-clk {
	background: var(--clock-bg, var(--bd-primary));
	border-radius: var(--clock-radius, 6px);
	color: var(--clock-color, #fff);
	flex: 0 0 auto;
	font-size: var(--clock-size, 14px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin-left: auto;
	padding: 0.3em 0.8em;
	transition: background 0.3s ease, box-shadow 0.3s ease;
	white-space: nowrap;
}

.espt-block-bd-delivery-date .bdd22.is-urgent .bdd22-clk {
	animation: bdd22-pulse 1s ease-in-out infinite;
	background: var(--clock-bg, var(--bd-danger));
}

.espt-block-bd-delivery-date .bdd22.is-ended .bdd22-clk { opacity: 0.6; }

@keyframes bdd22-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bd-danger) 45%, transparent); }
	50% { box-shadow: 0 0 0 7px transparent; }
}

/* header styles */
.espt-block-bd-delivery-date.is-header-style-solid .bdd22-cut {
	background: var(--header-bg, var(--bd-primary));
	border-bottom-color: transparent;
	color: var(--header-color, #fff);
}

.espt-block-bd-delivery-date.is-header-style-solid .bdd22-clk {
	background: var(--clock-bg, rgba(255, 255, 255, 0.16));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	color: var(--clock-color, #fff);
}

.espt-block-bd-delivery-date.is-header-style-plain .bdd22-cut {
	background: var(--header-bg, transparent);
	border-bottom: 1px solid var(--bd-line);
	color: var(--header-color, var(--bd-ink));
}

/* -------------------------------------------------------------- timeline */
.espt-block-bd-delivery-date .bdd22-tl {
	display: flex;
	flex-direction: column;
	gap: var(--step-gap, 22px);
	list-style: none;
	margin: 0;
	padding: var(--bd-pad);
}

.espt-block-bd-delivery-date .bdd22-st {
	animation: bdd22-in 0.5s ease both;
	animation-delay: calc(var(--i, 0) * 0.1s);
	display: flex;
	gap: 14px;
	margin: 0;
	min-width: 0;
	padding: 0;
	position: relative;
}

@keyframes bdd22-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* connector */
.espt-block-bd-delivery-date .bdd22-st::before {
	border-left: 2px dashed var(--line-color, var(--bd-line));
	bottom: calc(var(--step-gap, 22px) * -1);
	content: "";
	left: calc(var(--dot-size, 28px) / 2 - 1px);
	position: absolute;
	top: calc(var(--dot-size, 28px) + 4px);
}

.espt-block-bd-delivery-date .bdd22-st:last-child::before { display: none; }
.espt-block-bd-delivery-date.is-connector-solid .bdd22-st::before { border-style: solid; }
.espt-block-bd-delivery-date.is-connector-dotted .bdd22-st::before { border-style: dotted; }
.espt-block-bd-delivery-date.is-connector-none .bdd22-st::before { display: none; }

/* icon circle */
.espt-block-bd-delivery-date .bdd22-dot {
	align-items: center;
	background: var(--dot-bg, var(--bd-box-bg));
	border: 2px solid var(--icon-color, var(--bd-primary));
	border-radius: 50%;
	color: var(--icon-color, var(--bd-primary));
	display: inline-flex;
	flex: 0 0 auto;
	height: var(--dot-size, 28px);
	justify-content: center;
	line-height: 0;
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	width: var(--dot-size, 28px);
	z-index: 1;
}

.espt-block-bd-delivery-date .bdd22-st:hover .bdd22-dot {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--icon-color, var(--bd-primary)) 18%, transparent);
	transform: scale(1.06);
}

.espt-block-bd-delivery-date .bdd22-ic { display: inline-flex; line-height: 0; }

.espt-block-bd-delivery-date .bdd22-dot svg {
	height: var(--icon-size, 14px);
	width: var(--icon-size, 14px);
}

.espt-block-bd-delivery-date .bdd22-emoji {
	font-size: var(--icon-size, 14px);
	font-style: normal;
	line-height: 1;
}

.espt-block-bd-delivery-date .bdd22-dot img {
	border-radius: 50%;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* text */
.espt-block-bd-delivery-date .bdd22-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: max(0px, calc((var(--dot-size, 28px) - var(--title-size, 15px) * 1.4) / 2));
}

.espt-block-bd-delivery-date .bdd22-t {
	color: var(--title-color, var(--bd-ink));
	display: block;
	font-size: var(--title-size, 15px);
	font-weight: 700;
	line-height: 1.4;
}

.espt-block-bd-delivery-date .bdd22-x {
	color: var(--text-color, var(--bd-muted));
	display: block;
	font-size: var(--text-size, 13px);
	line-height: 1.6;
}

.espt-block-bd-delivery-date .bdd22-d {
	color: var(--date-color, var(--bd-primary-dark));
	font-style: normal;
	font-weight: 800;
}

/* ------------------------------------------------------ layout: cards */
.espt-block-bd-delivery-date.is-layout-cards .bdd22-tl { gap: calc(var(--step-gap, 22px) * 0.5); }

.espt-block-bd-delivery-date.is-layout-cards .bdd22-st {
	background: var(--bd-soft);
	border: 1px solid var(--bd-soft-line);
	border-radius: calc(var(--bd-radius) * 0.7);
	padding: calc(var(--bd-pad) * 0.75);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.espt-block-bd-delivery-date.is-layout-cards .bdd22-st:hover {
	box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.3);
	transform: translateY(-2px);
}

.espt-block-bd-delivery-date.is-layout-cards .bdd22-st::before { display: none; }
.espt-block-bd-delivery-date.is-layout-cards .bdd22-dot { background: var(--dot-bg, var(--bd-box-bg)); }

/* --------------------------------------------------------------- CTA */
.espt-block-bd-delivery-date .bdd22-cta {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 0 var(--bd-pad) var(--bd-pad);
}

/* No timeline between the header strip and the button. */
.espt-block-bd-delivery-date .bdd22-cut + .bdd22-cta { padding-top: var(--bd-pad); }

.espt-block-bd-delivery-date.is-cta-align-left .bdd22-cta { align-items: flex-start; }
.espt-block-bd-delivery-date.is-cta-align-right .bdd22-cta { align-items: flex-end; }

.espt-block-bd-delivery-date .bdd22-cta .bdd22-btn {
	border-radius: var(--espt-btn-radius, 9px);
	font-size: 16px;
	max-width: 100%;
	padding: 13px 28px;
	position: relative;
	width: 100%;
}

.espt-block-bd-delivery-date .bdd22-cta-note {
	color: var(--bd-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* CTA designs */
.espt-block-bd-delivery-date.is-cta-design-pill .bdd22-btn { border-radius: 99px; }
.espt-block-bd-delivery-date.is-cta-design-gradient .bdd22-btn { background-image: linear-gradient(135deg, var(--bd-primary), var(--bd-primary-dark)); }
.espt-block-bd-delivery-date.is-cta-design-outline .bdd22-btn { background: transparent; border: 2px solid var(--bd-primary); color: var(--bd-primary); }
.espt-block-bd-delivery-date.is-cta-design-outline .bdd22-btn:hover { background: var(--bd-soft); color: var(--bd-primary-dark); }
.espt-block-bd-delivery-date.is-cta-design-soft .bdd22-btn { background: var(--bd-soft); color: var(--bd-primary-dark); }
.espt-block-bd-delivery-date.is-cta-design-soft .bdd22-btn:hover { color: var(--bd-primary-dark); }
.espt-block-bd-delivery-date.is-cta-design-3d .bdd22-btn { box-shadow: 0 4px 0 var(--bd-primary-dark); }
.espt-block-bd-delivery-date.is-cta-design-3d .bdd22-btn:active { box-shadow: 0 0 0 var(--bd-primary-dark); transform: translateY(4px); }
.espt-block-bd-delivery-date.is-cta-design-glow .bdd22-btn { box-shadow: 0 8px 26px -8px var(--bd-primary); }
.espt-block-bd-delivery-date.is-cta-design-elevated .bdd22-btn { box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.5); }
.espt-block-bd-delivery-date.is-cta-design-shine .bdd22-btn { overflow: hidden; }
.espt-block-bd-delivery-date.is-cta-design-shine .bdd22-btn::after {
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	bottom: 0;
	content: "";
	left: -80%;
	position: absolute;
	top: 0;
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	width: 50%;
}
.espt-block-bd-delivery-date.is-cta-design-shine .bdd22-btn:hover::after { left: 130%; }
.espt-block-bd-delivery-date.is-cta-design-ghost .bdd22-btn { background: transparent; color: var(--bd-primary-dark); padding: 6px 12px; text-decoration: underline; width: auto; }
.espt-block-bd-delivery-date.is-cta-design-ghost .bdd22-btn:hover { color: var(--bd-primary); filter: none; }

/* CTA hover */
.espt-block-bd-delivery-date.is-cta-hover-lift .bdd22-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.45); }
.espt-block-bd-delivery-date.is-cta-hover-scale .bdd22-btn:hover { transform: scale(1.04); }
.espt-block-bd-delivery-date.is-cta-hover-glow .bdd22-btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bd-primary) 28%, transparent); }

/* CTA icon + attention */
.espt-block-bd-delivery-date .bdd22-bico { transition: transform 0.2s ease; }
.espt-block-bd-delivery-date .bdd22-btn:hover .bdd22-bico-slide { transform: translateX(4px); }
.espt-block-bd-delivery-date .bdd22-bico-bounce { animation: bdd22-ico-bounce 1.6s ease-in-out infinite; }
.espt-block-bd-delivery-date .bdd22-bico-pulse { animation: bdd22-ico-pulse 1.8s ease-in-out infinite; }
.espt-block-bd-delivery-date.is-cta-attn .bdd22-btn { animation: bdd22-pop 1.8s ease-in-out infinite; }

@keyframes bdd22-ico-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bdd22-ico-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes bdd22-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ------------------------------------------------------------ tablet + */
@media (min-width: 768px) {
	.espt-block-bd-delivery-date .bdd22-cta .bdd22-btn { width: auto; }
	.espt-block-bd-delivery-date.is-cta-full .bdd22-cta .bdd22-btn { width: 100%; }

	/* horizontal: steps side by side, dots on top, line across */
	.espt-block-bd-delivery-date.is-layout-horizontal .bdd22-tl {
		flex-direction: row;
		gap: calc(var(--step-gap, 22px) * 0.6);
	}

	.espt-block-bd-delivery-date.is-layout-horizontal .bdd22-st {
		align-items: center;
		flex: 1 1 0;
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.espt-block-bd-delivery-date.is-layout-horizontal .bdd22-st::before {
		border-left: 0;
		border-top: 2px dashed var(--line-color, var(--bd-line));
		bottom: auto;
		left: 50%;
		right: auto;
		top: calc(var(--dot-size, 28px) / 2 - 1px);
		width: calc(100% + var(--step-gap, 22px) * 0.6);
	}

	.espt-block-bd-delivery-date.is-layout-horizontal.is-connector-solid .bdd22-st::before { border-top-style: solid; }
	.espt-block-bd-delivery-date.is-layout-horizontal.is-connector-dotted .bdd22-st::before { border-top-style: dotted; }
	.espt-block-bd-delivery-date.is-layout-horizontal .bdd22-body { align-items: center; padding-top: 0; }

	/* cards: a row of equal cards, wrapping rather than crushing */
	.espt-block-bd-delivery-date.is-layout-cards .bdd22-tl { flex-direction: row; flex-wrap: wrap; }
	.espt-block-bd-delivery-date.is-layout-cards .bdd22-st { flex: 1 1 160px; flex-direction: column; gap: 10px; }
	.espt-block-bd-delivery-date.is-layout-cards .bdd22-body { padding-top: 0; }
}

@media (min-width: 1024px) {
	.espt-block-bd-delivery-date .bdd22-cut { gap: 10px 14px; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-delivery-date .bdd22-st,
	.espt-block-bd-delivery-date .bdd22.is-urgent .bdd22-clk,
	.espt-block-bd-delivery-date .bdd22-bico-bounce,
	.espt-block-bd-delivery-date .bdd22-bico-pulse,
	.espt-block-bd-delivery-date.is-cta-attn .bdd22-btn { animation: none; }
	.espt-block-bd-delivery-date .bdd22-dot,
	.espt-block-bd-delivery-date .bdd22-btn,
	.espt-block-bd-delivery-date .bdd22-bico { transition: none; }
}