/* BD Contact Strip — .espt-block-bd-contact-strip
   vars set by the spec: --strip-bg --heading-color --intro-color --heading-size --intro-size
   --all-bg --all-c --btn-size --btn-radius --btn-pad-y --btn-pad-x --btn-gap --btn-min --icon-size
   per-button inline: --bdc19-bg --bdc19-c
   root classes: is-strip-* is-btn-design-* is-btn-hover-* is-stack-* is-text-align-*
   icon animation rides on the icon span itself: .bdc19-ico-slide|bounce|pulse|ring */

/* ---------- the strip ---------- */
.espt-block-bd-contact-strip .bdc19 {
	--cs-heading: #fff;
	--cs-intro: rgba(255, 255, 255, 0.72);
	background: var(--strip-bg, var(--bd-ink));
	border-color: transparent;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-bd-contact-strip.is-text-align-left .bdc19 { text-align: left; }
.espt-block-bd-contact-strip.is-text-align-right .bdc19 { text-align: right; }

.espt-block-bd-contact-strip .bdc19-h {
	color: var(--heading-color, var(--cs-heading));
	font-size: var(--heading-size, 18px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 4px;
}

.espt-block-bd-contact-strip .bdc19-p {
	color: var(--intro-color, var(--cs-intro));
	font-size: var(--intro-size, 14px);
	line-height: 1.5;
	margin: 0 0 14px;
}

.espt-block-bd-contact-strip .bdc19-h:last-child,
.espt-block-bd-contact-strip .bdc19-p:last-child { margin-bottom: 0; }

/* strip designs */
.espt-block-bd-contact-strip.is-strip-primary .bdc19 { background: var(--strip-bg, var(--bd-primary)); }
.espt-block-bd-contact-strip.is-strip-gradient .bdc19 { background: var(--strip-bg, linear-gradient(135deg, var(--bd-deep) 0%, var(--bd-primary) 100%)); }
.espt-block-bd-contact-strip.is-strip-light .bdc19 {
	--cs-heading: var(--bd-ink);
	--cs-intro: var(--bd-muted);
	background: var(--strip-bg, var(--bd-box-bg));
	border-color: var(--bd-box-line);
}
.espt-block-bd-contact-strip.is-strip-plain .bdc19 {
	--cs-heading: var(--bd-ink);
	--cs-intro: var(--bd-muted);
	background: var(--strip-bg, transparent);
	border: 0;
	box-shadow: none;
	padding: 0;
}
.espt-block-bd-contact-strip.is-strip-plain .bdc19:hover { box-shadow: none; transform: none; }

/* ---------- buttons row ---------- */
.espt-block-bd-contact-strip .bdc19-b {
	display: flex;
	flex-wrap: wrap;
	gap: var(--btn-gap, 10px);
	justify-content: center;
	min-width: 0;
}

.espt-block-bd-contact-strip.is-text-align-left .bdc19-b { justify-content: flex-start; }
.espt-block-bd-contact-strip.is-text-align-right .bdc19-b { justify-content: flex-end; }

.espt-block-bd-contact-strip .bdc19-bt {
	align-items: center;
	background: var(--bdc19-bg, var(--bd-primary));
	border: 0;
	border-radius: var(--btn-radius, 8px);
	color: var(--bdc19-c, #fff);
	cursor: pointer;
	display: inline-flex;
	flex: 1 1 min(var(--btn-min, 150px), 100%);
	font-size: var(--btn-size, 15px);
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	max-width: 100%;
	min-width: 0;
	padding: var(--btn-pad-y, 13px) var(--btn-pad-x, 14px);
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}

.espt-block-bd-contact-strip .bdc19-bt:hover,
.espt-block-bd-contact-strip .bdc19-bt:focus-visible {
	color: var(--bdc19-c, #fff);
	filter: brightness(1.06);
	text-decoration: none;
}

/* The ring sits INSIDE the button and uses its own text colour, so it is
   visible whatever the button/strip colour combination turns out to be — an
   outside ring in the text colour disappears on e.g. the pale WhatsApp
   button over a light strip. */
.espt-block-bd-contact-strip .bdc19-bt:focus-visible {
	outline: 2px solid var(--bdc19-c, #fff);
	outline-offset: -4px;
}

/* left/right aligned: buttons hug their content instead of filling the row */
.espt-block-bd-contact-strip.is-text-align-left .bdc19-bt,
.espt-block-bd-contact-strip.is-text-align-right .bdc19-bt { flex: 0 1 auto; }

.espt-block-bd-contact-strip .bdc19-l { min-width: 0; overflow-wrap: anywhere; }

/* channel colours (per-button inline var wins; "all buttons" colours next; channel defaults last) */
.espt-block-bd-contact-strip .bdc19-ch-call      { --bdc19-bg: var(--all-bg, var(--bd-primary)); --bdc19-c: var(--all-c, #fff); }
.espt-block-bd-contact-strip .bdc19-ch-whatsapp  { --bdc19-bg: var(--all-bg, #e7ebe7); --bdc19-c: var(--all-c, #12211c); }
.espt-block-bd-contact-strip .bdc19-ch-messenger { --bdc19-bg: var(--all-bg, #0084ff); --bdc19-c: var(--all-c, #fff); }
.espt-block-bd-contact-strip .bdc19-ch-telegram  { --bdc19-bg: var(--all-bg, #229ed9); --bdc19-c: var(--all-c, #fff); }
.espt-block-bd-contact-strip .bdc19-ch-viber     { --bdc19-bg: var(--all-bg, #7360f2); --bdc19-c: var(--all-c, #fff); }
.espt-block-bd-contact-strip .bdc19-ch-sms       { --bdc19-bg: var(--all-bg, #16a34a); --bdc19-c: var(--all-c, #fff); }
.espt-block-bd-contact-strip .bdc19-ch-email     { --bdc19-bg: var(--all-bg, #ea4335); --bdc19-c: var(--all-c, #fff); }
.espt-block-bd-contact-strip .bdc19-ch-custom    { --bdc19-bg: var(--all-bg, var(--bd-deep)); --bdc19-c: var(--all-c, #fff); }

/* on a light strip the grey WhatsApp button becomes brand green */
.espt-block-bd-contact-strip.is-strip-light .bdc19-ch-whatsapp,
.espt-block-bd-contact-strip.is-strip-plain .bdc19-ch-whatsapp { --bdc19-bg: var(--all-bg, #25d366); --bdc19-c: var(--all-c, #062e1c); }

/* A custom-link button defaults to --bd-deep, which is almost the strip's own
   --bd-ink on every dark skin (identical on Noir) — the accent keeps it a
   button. It is usually the "order now" link anyway. */
.espt-block-bd-contact-strip.is-strip-dark .bdc19-ch-custom,
.espt-block-bd-contact-strip.is-strip-gradient .bdc19-ch-custom,
.espt-block-bd-contact-strip.is-strip-primary .bdc19-ch-custom { --bdc19-bg: var(--all-bg, var(--bd-accent)); --bdc19-c: var(--all-c, var(--bd-accent-ink)); }

/* A coloured strip can share its hue with a button default (the primary strip
   vs the green call/SMS buttons; Noir, where --bd-primary === --bd-ink). A
   hairline keeps every button readable as a button whatever the skin does.
   Declared before the button designs so glass/outline borders still win. */
.espt-block-bd-contact-strip.is-strip-dark .bdc19-bt,
.espt-block-bd-contact-strip.is-strip-gradient .bdc19-bt,
.espt-block-bd-contact-strip.is-strip-primary .bdc19-bt { border: 1px solid rgba(255, 255, 255, 0.26); }

/* ---------- icons ---------- */
.espt-block-bd-contact-strip .bdc19-ico {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--icon-size, 18px);
	line-height: 0;
	transition: transform 0.2s ease;
}

.espt-block-bd-contact-strip .bdc19-ico .espt-ic { display: inline-flex; line-height: 0; }
.espt-block-bd-contact-strip .bdc19-ico svg { display: block; height: 1em; width: 1em; }

.espt-block-bd-contact-strip .bdc19-bt:hover .bdc19-ico-slide { transform: translateX(4px); }
.espt-block-bd-contact-strip .bdc19-ico-bounce { animation: espt-cs-bounce 1.6s ease-in-out infinite; }
.espt-block-bd-contact-strip .bdc19-ico-pulse { animation: espt-cs-pulse 1.8s ease-in-out infinite; }
.espt-block-bd-contact-strip .bdc19-ico-ring { animation: espt-cs-ring 2.4s ease-in-out infinite; transform-origin: 50% 50%; }

@keyframes espt-cs-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes espt-cs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes espt-cs-ring {
	0%, 60%, 100% { transform: rotate(0); }
	64%, 72%, 80% { transform: rotate(-14deg); }
	68%, 76%, 84% { transform: rotate(14deg); }
}

/* ---------- button designs ---------- */
.espt-block-bd-contact-strip.is-btn-design-pill .bdc19-bt { border-radius: 999px; }

.espt-block-bd-contact-strip.is-btn-design-gradient .bdc19-bt {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.18));
}

.espt-block-bd-contact-strip.is-btn-design-3d .bdc19-bt { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.espt-block-bd-contact-strip.is-btn-design-3d .bdc19-bt:active { box-shadow: 0 0 0 rgba(0, 0, 0, 0.35); transform: translateY(3px); }

.espt-block-bd-contact-strip.is-btn-design-glow .bdc19-bt { box-shadow: 0 0 22px -4px color-mix(in srgb, var(--bdc19-bg, var(--bd-primary)) 70%, #fff); }
.espt-block-bd-contact-strip.is-strip-light.is-btn-design-glow .bdc19-bt,
.espt-block-bd-contact-strip.is-strip-plain.is-btn-design-glow .bdc19-bt { box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--bdc19-bg, var(--bd-primary)) 70%, transparent); }

.espt-block-bd-contact-strip.is-btn-design-glass .bdc19-bt {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
}
.espt-block-bd-contact-strip.is-strip-light.is-btn-design-glass .bdc19-bt,
.espt-block-bd-contact-strip.is-strip-plain.is-btn-design-glass .bdc19-bt {
	background: color-mix(in srgb, var(--bdc19-bg, var(--espt-btn-bg, var(--bd-primary))) 12%, transparent);
	border-color: color-mix(in srgb, var(--bdc19-bg, var(--bd-primary)) 35%, transparent);
	color: var(--bd-ink);
}

.espt-block-bd-contact-strip.is-btn-design-outline .bdc19-bt {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.45);
	color: #fff;
}
.espt-block-bd-contact-strip.is-btn-design-outline .bdc19-bt:hover { background: rgba(255, 255, 255, 0.1); }
.espt-block-bd-contact-strip.is-strip-light.is-btn-design-outline .bdc19-bt,
.espt-block-bd-contact-strip.is-strip-plain.is-btn-design-outline .bdc19-bt {
	border-color: var(--bdc19-bg, var(--bd-primary));
	color: var(--bdc19-bg, var(--bd-primary));
}
.espt-block-bd-contact-strip.is-strip-light.is-btn-design-outline .bdc19-bt:hover,
.espt-block-bd-contact-strip.is-strip-plain.is-btn-design-outline .bdc19-bt:hover {
	background: color-mix(in srgb, var(--bdc19-bg, var(--espt-btn-bg, var(--bd-primary))) 10%, transparent);
	color: var(--bdc19-bg, var(--bd-primary));
}
/* the grey WhatsApp default is unreadable as outline text on a light strip */
.espt-block-bd-contact-strip.is-strip-light.is-btn-design-outline .bdc19-ch-whatsapp,
.espt-block-bd-contact-strip.is-strip-plain.is-btn-design-outline .bdc19-ch-whatsapp { --bdc19-bg: var(--all-bg, #128c4a); }

.espt-block-bd-contact-strip.is-btn-design-shine .bdc19-bt { overflow: hidden; }
.espt-block-bd-contact-strip.is-btn-design-shine .bdc19-bt::after {
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	bottom: 0;
	content: "";
	left: -80%;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	width: 50%;
}
.espt-block-bd-contact-strip.is-btn-design-shine .bdc19-bt:hover::after { left: 130%; }

/* ---------- button hover effects ---------- */
.espt-block-bd-contact-strip.is-btn-hover-lift .bdc19-bt:hover { box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.55); transform: translateY(-3px); }
.espt-block-bd-contact-strip.is-btn-hover-scale .bdc19-bt:hover { transform: scale(1.03); }
.espt-block-bd-contact-strip.is-btn-hover-glow .bdc19-bt:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bdc19-bg, var(--bd-primary)) 35%, #fff), 0 10px 28px -12px var(--bdc19-bg, var(--bd-primary)); }

/* ---------- stacking ---------- */
.espt-block-bd-contact-strip.is-stack-yes .bdc19-b,
.espt-block-bd-contact-strip.is-stack-mobile .bdc19-b { flex-direction: column; }
.espt-block-bd-contact-strip.is-stack-yes .bdc19-bt,
.espt-block-bd-contact-strip.is-stack-mobile .bdc19-bt { flex: 1 1 auto; width: 100%; }

@media (min-width: 768px) {
	.espt-block-bd-contact-strip.is-stack-mobile .bdc19-b { flex-direction: row; }
	.espt-block-bd-contact-strip.is-stack-mobile .bdc19-bt { flex: 1 1 min(var(--btn-min, 150px), 100%); width: auto; }
	.espt-block-bd-contact-strip.is-stack-mobile.is-text-align-left .bdc19-bt,
	.espt-block-bd-contact-strip.is-stack-mobile.is-text-align-right .bdc19-bt { flex: 0 1 auto; }
	.espt-block-bd-contact-strip .bdc19-p { margin-bottom: 16px; }
}

@media (min-width: 1024px) {
	.espt-block-bd-contact-strip .bdc19-bt { gap: 10px; }
}

/* ---------- editor note ---------- */
.espt-block-bd-contact-strip .espt-block-note {
	border: 1px dashed currentColor;
	border-radius: 8px;
	color: var(--intro-color, var(--cs-intro, var(--bd-muted)));
	font-size: 13px;
	margin: 0;
	opacity: 0.75;
	padding: 10px 12px;
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-contact-strip .bdc19-ico-bounce,
	.espt-block-bd-contact-strip .bdc19-ico-pulse,
	.espt-block-bd-contact-strip .bdc19-ico-ring { animation: none; }
	.espt-block-bd-contact-strip .bdc19-bt,
	.espt-block-bd-contact-strip .bdc19-ico,
	.espt-block-bd-contact-strip.is-btn-design-shine .bdc19-bt::after { transition: none; }
	.espt-block-bd-contact-strip .bdc19-bt:hover { transform: none; }
	.espt-block-bd-contact-strip .bdc19-bt:hover .bdc19-ico-slide { transform: none; }
}