/**
 * BD Warning CTA (COD) — .espt-block-bd-warning-cta (.bdx20)
 *
 * The closing "one last thing…" warning card of a Bangladeshi COD landing
 * page. Port of the plugin's .bdx20 component: 8 design skins, 3 layouts,
 * the warning mark (symbol / icon) with idle effects, an optional reason
 * list (3 styles) and the shared CTA button system (10 button designs).
 *
 * Root classes: .is-design-{beige|card|softred|dark|gradient|outline|glass|minimal}
 *               .is-layout-{center|left|side}
 *               .is-icon-badge / .no-icon-badge
 *               .is-items-style-{plain|chips|cards}
 * Vars: --wx-head-size --wx-text-size --wx-text-width --wx-icon-size --wx-side-gap
 *       --wx-head-color --wx-text-color --wx-icon-color --wx-card-bg --wx-card-line
 *       --wx-pt-color --wx-cta-bg --wx-cta-color --wx-cta-size --wx-cta-radius --wx-cta-gap
 *       --wx-note-color
 * Mobile-first: base ≤767px, then 768px / 1024px.
 */

/* ------------------------------------------------------------ palette */
.espt-block-bd-warning-cta {
	--bd-box-bg: #f7f5ef;
	--bd-box-line: #ece7da;
	--wx-ink: var(--bd-ink);
	--wx-body: var(--bd-body);
	--wx-mark: var(--bd-danger);
	--wx-note: var(--bd-muted);
	--wx-eye-fg: var(--bd-danger);
	--wx-eye-bg: color-mix(in srgb, var(--bd-danger) 12%, transparent);
	--wx-tint: color-mix(in srgb, var(--bd-danger) 7%, transparent);
	--wx-tint-line: color-mix(in srgb, var(--bd-danger) 18%, transparent);
}

/* --------------------------------------------------------------- card */
.espt-block-bd-warning-cta .bdx20 {
	background: var(--wx-card-bg, var(--bd-box-bg));
	border: 1px solid var(--wx-card-line, var(--bd-box-line));
	border-radius: var(--bd-radius, 16px);
	min-width: 0;
	padding: var(--bd-pad, 16px);
	position: relative;
	text-align: center;
}

.espt-block-bd-warning-cta .bdx20-body {
	min-width: 0;
}

.espt-block-bd-warning-cta .bdx20-body > :first-child { margin-top: 0; }
.espt-block-bd-warning-cta .bdx20-body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ eyebrow */
.espt-block-bd-warning-cta .bdx20-eye {
	background: var(--wx-eye-bg);
	border-radius: 999px;
	color: var(--wx-eye-fg);
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin: 0 0 10px;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 4px 12px;
}

/* ------------------------------------------------- heading + the mark */
.espt-block-bd-warning-cta .bdx20-h {
	color: var(--wx-head-color, var(--wx-ink));
	font-size: var(--wx-head-size, 22px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.espt-block-bd-warning-cta .bdx20-p {
	color: var(--wx-text-color, var(--wx-body));
	font-size: var(--wx-text-size, 15px);
	line-height: 1.8;
	margin: 0 auto;
	max-width: var(--wx-text-width, 52ch);
	overflow-wrap: anywhere;
}

.espt-block-bd-warning-cta .bdx20-mark {
	color: var(--wx-icon-color, var(--wx-mark));
	display: inline-flex;
	line-height: 1;
	vertical-align: -0.08em;
}

.espt-block-bd-warning-cta .bdx20-sym {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
}

.espt-block-bd-warning-cta .bdx20-ic {
	display: inline-flex;
	line-height: 0;
}

.espt-block-bd-warning-cta .bdx20-ic svg {
	height: 1em;
	width: 1em;
}

/* mark on its own line (no heading text) */
.espt-block-bd-warning-cta .bdx20-markline {
	font-size: calc(var(--wx-head-size, 22px) * 1.5);
	line-height: 1;
	margin: 0 0 10px;
}

/* ------------------------------------------------------ mark effects */
.espt-block-bd-warning-cta .bdx20-fx-pulse { animation: espt-wx-pulse 1.9s ease-in-out infinite; }
.espt-block-bd-warning-cta .bdx20-fx-shake { animation: espt-wx-shake 2.8s ease-in-out infinite; transform-origin: 50% 85%; }
.espt-block-bd-warning-cta .bdx20-fx-glow { animation: espt-wx-glow 2.2s ease-in-out infinite; }

@keyframes espt-wx-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.14); }
}

@keyframes espt-wx-shake {
	0%, 62%, 100% { transform: rotate(0deg); }
	66% { transform: rotate(-11deg); }
	72% { transform: rotate(9deg); }
	78% { transform: rotate(-7deg); }
	84% { transform: rotate(5deg); }
	90% { transform: rotate(-2deg); }
}

@keyframes espt-wx-glow {
	0%, 100% { filter: drop-shadow(0 0 0 transparent); }
	50% { filter: drop-shadow(0 0 10px currentColor); }
}

/* ------------------------------------------------------- reason list */
.espt-block-bd-warning-cta .bdx20-pts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 14px auto 0;
	max-width: min(100%, var(--wx-text-width, 52ch));
	min-width: 0;
	padding: 0;
	width: fit-content;
}

.espt-block-bd-warning-cta .bdx20-pt {
	align-items: flex-start;
	color: var(--wx-text-color, var(--wx-body));
	display: flex;
	font-size: var(--wx-text-size, 15px);
	gap: 8px;
	line-height: 1.6;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

.espt-block-bd-warning-cta .bdx20-pt > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-warning-cta .bdx20-pi {
	color: var(--wx-pt-color, var(--bd-danger));
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	margin-top: 0.22em;
}

.espt-block-bd-warning-cta .bdx20-pi svg {
	height: 1.05em;
	width: 1.05em;
}

/* chips */
.espt-block-bd-warning-cta.is-items-style-chips .bdx20-pts {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: auto;
}

.espt-block-bd-warning-cta.is-items-style-chips .bdx20-pt {
	align-items: center;
	background: var(--wx-tint);
	border: 1px solid var(--wx-tint-line);
	border-radius: 999px;
	font-size: calc(var(--wx-text-size, 15px) * 0.94);
	gap: 6px;
	padding: 6px 13px;
}

.espt-block-bd-warning-cta.is-items-style-chips .bdx20-pi { margin-top: 0; }

/* tinted rows */
.espt-block-bd-warning-cta.is-items-style-cards .bdx20-pts { width: 100%; }

.espt-block-bd-warning-cta.is-items-style-cards .bdx20-pt {
	background: var(--wx-tint);
	border: 1px solid var(--wx-tint-line);
	border-radius: var(--espt-btn-radius, 12px);
	padding: 10px 13px;
}

/* --------------------------------------------------------- CTA block */
.espt-block-bd-warning-cta .bd-cta {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: var(--wx-cta-gap, 18px);
	min-width: 0;
}

.espt-block-bd-warning-cta .bd-cta-al-left { align-items: flex-start; }
.espt-block-bd-warning-cta .bd-cta-al-center { align-items: center; }
.espt-block-bd-warning-cta .bd-cta-al-right { align-items: flex-end; }

.espt-block-bd-warning-cta .bd-cta-btn {
	align-items: center;
	background: var(--wx-cta-bg, var(--espt-btn-bg, var(--bd-primary)));
	border: 0;
	border-radius: var(--wx-cta-radius, 9px);
	color: var(--wx-cta-color, #fff);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wx-cta-size, 17px);
	font-weight: 800;
	gap: 9px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 13px 26px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	width: 100%;
}

.espt-block-bd-warning-cta .bd-cta-btn > span { min-width: 0; }

.espt-block-bd-warning-cta .bd-cta-btn:hover,
.espt-block-bd-warning-cta .bd-cta-btn:focus {
	color: var(--wx-cta-color, #fff);
	filter: brightness(1.06);
	text-decoration: none;
}

.espt-block-bd-warning-cta .bd-cta-note {
	color: var(--wx-note-color, var(--wx-note));
	font-size: 12.5px;
	line-height: 1.5;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* button icon */
.espt-block-bd-warning-cta .bd-bico {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	transition: transform 0.2s ease;
}

.espt-block-bd-warning-cta .bd-bico svg { height: 1em; width: 1em; }

.espt-block-bd-warning-cta .bd-cta-btn:hover .bd-bico-slide { transform: translateX(4px); }
.espt-block-bd-warning-cta .bd-bico-bounce { animation: espt-wx-bico-bounce 1.6s ease-in-out infinite; }
.espt-block-bd-warning-cta .bd-bico-pulse { animation: espt-wx-bico-pulse 1.8s ease-in-out infinite; }

@keyframes espt-wx-bico-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-wx-bico-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); }
}

/* --------------------------------------------------- button designs */
.espt-block-bd-warning-cta .bd-cta-pill .bd-cta-btn { border-radius: 999px; }

.espt-block-bd-warning-cta .bd-cta-gradient .bd-cta-btn {
	background-image: linear-gradient(135deg, var(--wx-cta-bg, var(--bd-primary)), var(--bd-primary-dark));
}

.espt-block-bd-warning-cta .bd-cta-outline .bd-cta-btn {
	background: transparent;
	border: 2px solid var(--wx-cta-bg, var(--bd-primary));
	color: var(--wx-cta-color, var(--wx-cta-bg, var(--bd-primary)));
	padding: 11px 24px;
}

.espt-block-bd-warning-cta .bd-cta-outline .bd-cta-btn:hover {
	background: color-mix(in srgb, var(--wx-cta-bg, var(--espt-btn-bg, var(--bd-primary))) 10%, transparent);
	color: var(--wx-cta-color, var(--wx-cta-bg, var(--bd-primary)));
}

.espt-block-bd-warning-cta .bd-cta-soft .bd-cta-btn {
	background: var(--wx-cta-bg, var(--bd-soft));
	color: var(--wx-cta-color, var(--bd-primary-dark));
}

.espt-block-bd-warning-cta .bd-cta-soft .bd-cta-btn:hover { color: var(--wx-cta-color, var(--bd-primary-dark)); }

.espt-block-bd-warning-cta .bd-cta-3d .bd-cta-btn { box-shadow: 0 4px 0 var(--bd-primary-dark); }
.espt-block-bd-warning-cta .bd-cta-3d .bd-cta-btn:active { box-shadow: 0 0 0 var(--bd-primary-dark); transform: translateY(4px); }

.espt-block-bd-warning-cta .bd-cta-glow .bd-cta-btn { box-shadow: 0 8px 26px -8px var(--wx-cta-bg, var(--bd-primary)); }
.espt-block-bd-warning-cta .bd-cta-elevated .bd-cta-btn { box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.5); }

.espt-block-bd-warning-cta .bd-cta-shine .bd-cta-btn { overflow: hidden; position: relative; }

.espt-block-bd-warning-cta .bd-cta-shine .bd-cta-btn::after {
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
	bottom: 0;
	content: "";
	left: -80%;
	position: absolute;
	top: 0;
	transform: skewX(-20deg);
	transition: left 0.55s ease;
	width: 50%;
}

.espt-block-bd-warning-cta .bd-cta-shine .bd-cta-btn:hover::after { left: 130%; }

.espt-block-bd-warning-cta .bd-cta-ghost .bd-cta-btn {
	background: transparent;
	box-shadow: none;
	color: var(--wx-cta-color, var(--bd-primary-dark));
	padding: 6px 10px;
	text-decoration: underline;
	width: auto;
}

.espt-block-bd-warning-cta .bd-cta-ghost .bd-cta-btn:hover { color: var(--wx-cta-color, var(--bd-primary-dark)); }

/* hover effects + attention pulse */
.espt-block-bd-warning-cta .bd-cta-hover-lift:hover { box-shadow: 0 14px 26px -14px rgba(15, 23, 42, 0.5); transform: translateY(-3px); }
.espt-block-bd-warning-cta .bd-cta-hover-scale:hover { transform: scale(1.04); }
.espt-block-bd-warning-cta .bd-cta-hover-glow:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-cta-bg, var(--bd-primary)) 28%, transparent); }

.espt-block-bd-warning-cta .bd-cta-attn .bd-cta-btn { animation: espt-wx-pop 1.8s ease-in-out infinite; }

@keyframes espt-wx-pop {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.045); }
}

/* -------------------------------------------------------- 01 beige */
/* (the default palette above) */

/* --------------------------------------------------- 02 white card */
.espt-block-bd-warning-cta.is-design-card {
	--bd-box-bg: #ffffff;
	--bd-box-line: var(--bd-line);
}

/* its own drop shadow, unless the design panel already picked one */
.espt-block-bd-warning-cta.is-design-card:not(.bd-shadow-soft):not(.bd-shadow-strong) .bdx20 {
	box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.38);
}

/* ----------------------------------------------------- 03 soft red */
.espt-block-bd-warning-cta.is-design-softred {
	--bd-box-bg: #fdf3f1;
	--bd-box-line: #f0d4ce;
}

/* --------------------------------------------------- 04 dark panel */
.espt-block-bd-warning-cta.is-design-dark {
	--bd-box-bg: var(--bd-deep);
	--bd-box-line: rgba(255, 255, 255, 0.12);
	--wx-ink: #ffffff;
	--wx-body: rgba(255, 255, 255, 0.78);
	--wx-note: rgba(255, 255, 255, 0.6);
	--wx-mark: var(--bd-accent);
	--wx-eye-fg: var(--bd-accent);
	--wx-eye-bg: rgba(255, 255, 255, 0.12);
	--wx-tint: rgba(255, 255, 255, 0.08);
	--wx-tint-line: rgba(255, 255, 255, 0.14);
}

.espt-block-bd-warning-cta.is-design-dark .bdx20-pi { color: var(--wx-pt-color, var(--bd-accent)); }

/* ----------------------------------------------- 05 warm gradient */
.espt-block-bd-warning-cta.is-design-gradient {
	--bd-box-bg: #fdf3f1;
	--bd-box-line: #f0e2ce;
}

.espt-block-bd-warning-cta.is-design-gradient .bdx20 {
	background-image: linear-gradient(135deg, transparent 10%, rgba(255, 246, 228, 0.92));
}

/* -------------------------------------------- 06 dashed red outline */
.espt-block-bd-warning-cta.is-design-outline {
	--bd-box-bg: transparent;
	--bd-box-line: var(--bd-danger);
}

.espt-block-bd-warning-cta.is-design-outline .bdx20 {
	border-style: dashed;
	border-width: 2px;
}

/* ---------------------------------------------------- 07 glass blur */
.espt-block-bd-warning-cta.is-design-glass {
	--bd-box-bg: rgba(255, 255, 255, 0.55);
	--bd-box-line: rgba(255, 255, 255, 0.65);
}

.espt-block-bd-warning-cta.is-design-glass .bdx20 {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ------------------------------------------------------- 08 minimal */
.espt-block-bd-warning-cta.is-design-minimal {
	--bd-box-bg: transparent;
	--bd-box-line: transparent;
}

.espt-block-bd-warning-cta.is-design-minimal .bdx20 {
	border-color: var(--wx-card-line, transparent);
	box-shadow: none;
	padding: 4px 0;
}

/* ----------------------------------------------------------- layouts */
.espt-block-bd-warning-cta.is-layout-left .bdx20 { text-align: left; }
.espt-block-bd-warning-cta.is-layout-left .bdx20-p { margin-inline: 0; }
.espt-block-bd-warning-cta.is-layout-left .bdx20-pts { margin-inline: 0; }
.espt-block-bd-warning-cta.is-layout-left.is-items-style-chips .bdx20-pts { justify-content: flex-start; }
.espt-block-bd-warning-cta.is-layout-left .bd-cta { align-items: flex-start; }
.espt-block-bd-warning-cta.is-layout-left .bd-cta-al-center { align-items: center; }
.espt-block-bd-warning-cta.is-layout-left .bd-cta-al-right { align-items: flex-end; }

/* side: the mark gets its own column (stacked and centred on phones) */
.espt-block-bd-warning-cta.is-layout-side .bdx20 {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--wx-side-gap, 16px);
}

.espt-block-bd-warning-cta.is-layout-side .bdx20-body {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.espt-block-bd-warning-cta .bdx20-big {
	color: var(--wx-icon-color, var(--wx-mark));
	flex: 0 0 auto;
	font-size: var(--wx-icon-size, 44px);
	line-height: 1;
}

.espt-block-bd-warning-cta .bdx20-big .bdx20-mark { vertical-align: baseline; }
.espt-block-bd-warning-cta .bdx20-big .bdx20-ic svg { height: 1em; width: 1em; }

/* tinted circle behind the big mark */
.espt-block-bd-warning-cta.is-icon-badge .bdx20-big {
	align-items: center;
	background: var(--wx-tint);
	border: 1px solid var(--wx-tint-line);
	border-radius: 50%;
	display: inline-flex;
	height: 1.9em;
	justify-content: center;
	width: 1.9em;
}

/* ----------------------------------------------- tablet & up (768px) */
@media (min-width: 768px) {
	.espt-block-bd-warning-cta .bd-cta-btn { width: auto; }
	.espt-block-bd-warning-cta .bd-cta-full .bd-cta-btn { width: 100%; }
	.espt-block-bd-warning-cta .bd-cta-ghost .bd-cta-btn { width: auto; }

	.espt-block-bd-warning-cta.is-layout-side .bdx20 {
		align-items: flex-start;
		flex-direction: row;
		text-align: left;
	}

	.espt-block-bd-warning-cta.is-layout-side .bdx20-body { width: auto; }

	.espt-block-bd-warning-cta.is-layout-side .bdx20-p,
	.espt-block-bd-warning-cta.is-layout-side .bdx20-pts { margin-inline: 0; }

	.espt-block-bd-warning-cta.is-layout-side.is-items-style-chips .bdx20-pts { justify-content: flex-start; }

	.espt-block-bd-warning-cta.is-layout-side .bd-cta { align-items: flex-start; }
	.espt-block-bd-warning-cta.is-layout-side .bd-cta-al-center { align-items: center; }
	.espt-block-bd-warning-cta.is-layout-side .bd-cta-al-right { align-items: flex-end; }
}

/* ---------------------------------------------- desktop & up (1024px) */
@media (min-width: 1024px) {
	.espt-block-bd-warning-cta .bdx20 { padding: calc(var(--bd-pad, 16px) * 1.15) var(--bd-pad, 16px); }
	.espt-block-bd-warning-cta.is-design-minimal .bdx20 { padding: 6px 0; }
	.espt-block-bd-warning-cta .bd-cta-btn { padding: 14px 30px; }
	.espt-block-bd-warning-cta .bd-cta-outline .bd-cta-btn { padding: 12px 28px; }
	.espt-block-bd-warning-cta .bd-cta-ghost .bd-cta-btn { padding: 6px 10px; }
}

/* -------------------------------------------------------- a11y / motion */
@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-warning-cta .bdx20-fx-pulse,
	.espt-block-bd-warning-cta .bdx20-fx-shake,
	.espt-block-bd-warning-cta .bdx20-fx-glow,
	.espt-block-bd-warning-cta .bd-bico-bounce,
	.espt-block-bd-warning-cta .bd-bico-pulse,
	.espt-block-bd-warning-cta .bd-cta-attn .bd-cta-btn {
		animation: none;
	}

	.espt-block-bd-warning-cta .bd-cta-btn,
	.espt-block-bd-warning-cta .bd-bico,
	.espt-block-bd-warning-cta .bd-cta-shine .bd-cta-btn::after {
		transition: none;
	}
}

.espt-block-bd-warning-cta .bd-cta-btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wx-cta-bg, var(--bd-primary)) 55%, transparent);
	outline-offset: 3px;
}