/**
 * Product Contact Buttons — .espt-block-pd-contact
 *
 * Eight button designs (brand / solid / soft / outline / gradient / glass /
 * 3d / minimal) over three layouts (equal columns, inline, stacked), with
 * per-channel brand colours, icon + attention animations and an optional
 * fixed bottom bar on phones. Mobile-first; every size and colour arrives as
 * a CSS variable set by the block spec:
 *   --cols --gap --btn-min --size --sub-size --icon-size --radius
 *   --pad-y --pad-x --heading-size --note-size
 *   --heading-color --sub-color --note-color --btn-bg --btn-color
 *   --icon-color --border-color --hover-bg --hover-color
 *   --hover-border
 * Per-button overrides ride on the element itself: --pdc-bg --pdc-c --pdc-ic
 * --pdc-hbg --pdc-hc --pdc-hic.
 */

.espt-block-pd-contact .espt-pdc {
	max-width: 100%;
	min-width: 0;
}

.espt-block-pd-contact .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;
}

/* ------------------------------------------------------------- heading */
.espt-block-pd-contact .espt-pdc-head {
	margin: 0 0 10px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-contact .espt-pdc-h {
	color: var(--heading-color, var(--bd-ink));
	font-size: var(--heading-size, 16px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0;
}

.espt-block-pd-contact .espt-pdc-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: calc(var(--heading-size, 16px) - 3px);
	line-height: 1.5;
	margin: 4px 0 0;
}

.espt-block-pd-contact .espt-pdc-note {
	color: var(--note-color, var(--bd-muted));
	font-size: var(--note-size, 12px);
	line-height: 1.55;
	margin: 9px 0 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------- the row/grid */
.espt-block-pd-contact .espt-pdc-btns {
	display: grid;
	gap: var(--gap, 8px);
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	max-width: 100%;
	min-width: 0;
}

.espt-block-pd-contact.is-layout-inline .espt-pdc-btns {
	display: flex;
	flex-wrap: wrap;
}

.espt-block-pd-contact.is-layout-inline .espt-pdc-b {
	flex: 1 1 var(--btn-min, 150px);
	max-width: 100%;
}

.espt-block-pd-contact.is-layout-stack .espt-pdc-btns {
	display: flex;
	flex-direction: column;
}

/* Row alignment follows the button alignment when buttons are inline. */
.espt-block-pd-contact.is-layout-inline.is-text-align-left .espt-pdc-btns { justify-content: flex-start; }
.espt-block-pd-contact.is-layout-inline.is-text-align-center .espt-pdc-btns { justify-content: center; }
.espt-block-pd-contact.is-layout-inline.is-text-align-right .espt-pdc-btns { justify-content: flex-end; }

/* ----------------------------------------------------------- the button */
.espt-block-pd-contact .espt-pdc-b {
	--ch: var(--bd-primary);
	--ch-soft: color-mix(in srgb, var(--ch) 12%, #fff);
	--bg: var(--pdc-bg, var(--btn-bg, var(--auto-bg, var(--ch))));
	--c: var(--pdc-c, var(--btn-color, var(--auto-c, #fff)));
	--hbg: var(--pdc-hbg, var(--hover-bg, var(--auto-hbg, color-mix(in srgb, var(--bg) 88%, #000))));
	align-items: center;
	background: var(--bg);
	border: 1px solid var(--border-color, var(--auto-bd, transparent));
	border-radius: var(--radius, 12px);
	color: var(--c);
	cursor: pointer;
	display: flex;
	font-size: var(--size, 14px);
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.3;
	max-width: 100%;
	min-width: 0;
	padding: var(--pad-y, 12px) var(--pad-x, 16px);
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.espt-block-pd-contact .espt-pdc-b:hover,
.espt-block-pd-contact .espt-pdc-b:focus-visible {
	background: var(--hbg);
	border-color: var(--hover-border, var(--border-color, var(--auto-bd, transparent)));
	color: var(--pdc-hc, var(--hover-color, var(--c)));
	text-decoration: none;
}

.espt-block-pd-contact .espt-pdc-b:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--ch) 65%, #000);
	outline-offset: 2px;
}

.espt-block-pd-contact .espt-pdc-b:active {
	transform: translateY(1px) scale(0.995);
}

.espt-block-pd-contact .espt-pdc-b.is-unset {
	filter: grayscale(0.65);
	opacity: 0.55;
}

/* Text block. */
.espt-block-pd-contact .espt-pdc-tx {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.espt-block-pd-contact .espt-pdc-l {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-contact .espt-pdc-s {
	display: block;
	font-size: var(--sub-size, 11px);
	font-weight: 500;
	line-height: 1.35;
	min-width: 0;
	opacity: 0.82;
	overflow-wrap: anywhere;
}

/* Icon. */
.espt-block-pd-contact .espt-pdc-iw {
	align-items: center;
	color: var(--pdc-ic, var(--icon-color, inherit));
	display: inline-flex;
	flex: none;
	justify-content: center;
	line-height: 0;
	transition: transform 0.2s ease;
}

.espt-block-pd-contact .espt-pdc-b:hover .espt-pdc-iw,
.espt-block-pd-contact .espt-pdc-b:focus-visible .espt-pdc-iw {
	color: var(--pdc-hic, var(--pdc-ic, var(--icon-color, inherit)));
}

.espt-block-pd-contact .espt-pdc-ic svg {
	display: block;
	height: var(--icon-size, 17px);
	width: var(--icon-size, 17px);
}

.espt-block-pd-contact.is-icon-bubble .espt-pdc-iw {
	background: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 50%;
	height: calc(var(--icon-size, 17px) + 14px);
	width: calc(var(--icon-size, 17px) + 14px);
}

.espt-block-pd-contact.no-show-icons .espt-pdc-iw { display: none; }

/* Icon position. */
.espt-block-pd-contact.is-icon-pos-right .espt-pdc-b { flex-direction: row-reverse; }

.espt-block-pd-contact.is-icon-pos-top .espt-pdc-b {
	flex-direction: column;
	gap: 6px;
}

/* Content alignment inside the button. */
.espt-block-pd-contact.is-text-align-left .espt-pdc-b {
	justify-content: flex-start;
	text-align: left;
}

.espt-block-pd-contact.is-text-align-right .espt-pdc-b {
	justify-content: flex-end;
	text-align: right;
}

.espt-block-pd-contact.is-text-align-left.is-icon-pos-top .espt-pdc-b { align-items: flex-start; }
.espt-block-pd-contact.is-text-align-right.is-icon-pos-top .espt-pdc-b { align-items: flex-end; }

/* --------------------------------------------------- channel base colours */
.espt-block-pd-contact .espt-pdc-ch-whatsapp { --ch: #25d366; }
.espt-block-pd-contact .espt-pdc-ch-messenger { --ch: #0084ff; }
.espt-block-pd-contact .espt-pdc-ch-phone { --ch: #111827; }
.espt-block-pd-contact .espt-pdc-ch-sms { --ch: #0ea5e9; }
.espt-block-pd-contact .espt-pdc-ch-telegram { --ch: #229ed9; }
.espt-block-pd-contact .espt-pdc-ch-viber { --ch: #7360f2; }
.espt-block-pd-contact .espt-pdc-ch-email { --ch: #ea4335; }
.espt-block-pd-contact .espt-pdc-ch-custom { --ch: var(--bd-primary); }

/* ---------------------------------------------------------- 8 designs */

/* 1 — brand colours (plugin original): solid channel colour. */
.espt-block-pd-contact.is-design-brand .espt-pdc-b {
	--auto-bg: var(--ch);
	--auto-c: #fff;
}

/* 2 — one solid colour for every channel. */
.espt-block-pd-contact.is-design-solid .espt-pdc-b {
	--auto-bg: var(--bd-primary);
	--auto-c: #fff;
}

/* 3 — soft tint of the channel colour. */
.espt-block-pd-contact.is-design-soft .espt-pdc-b {
	--auto-bg: var(--ch-soft);
	--auto-c: color-mix(in srgb, var(--ch) 78%, #000);
	--auto-bd: color-mix(in srgb, var(--ch) 26%, transparent);
	--auto-hbg: color-mix(in srgb, var(--ch) 20%, #fff);
}

/* 4 — outline. */
.espt-block-pd-contact.is-design-outline .espt-pdc-b {
	--auto-bg: transparent;
	--auto-c: color-mix(in srgb, var(--ch) 82%, #000);
	--auto-bd: color-mix(in srgb, var(--ch) 55%, transparent);
	--auto-hbg: color-mix(in srgb, var(--ch) 10%, #fff);
	border-width: 1.5px;
}

/* 5 — gradient. */
.espt-block-pd-contact.is-design-gradient .espt-pdc-b {
	--auto-c: #fff;
	background: linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 62%, #000) 100%);
}

.espt-block-pd-contact.is-design-gradient .espt-pdc-b:hover,
.espt-block-pd-contact.is-design-gradient .espt-pdc-b:focus-visible {
	background: linear-gradient(135deg, var(--hbg) 0%, color-mix(in srgb, var(--hbg) 58%, #000) 100%);
}

/* 6 — glass: translucent, blurred, with a lit top edge so it never reads as
   the same thing as the flat "soft" tint. */
.espt-block-pd-contact.is-design-glass .espt-pdc-b {
	--auto-bg: color-mix(in srgb, var(--ch) 20%, transparent);
	--auto-c: color-mix(in srgb, var(--ch) 80%, #000);
	--auto-bd: color-mix(in srgb, var(--ch) 32%, transparent);
	--auto-hbg: color-mix(in srgb, var(--ch) 32%, transparent);
	backdrop-filter: blur(8px) saturate(1.4);
	-webkit-backdrop-filter: blur(8px) saturate(1.4);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0) 100%);
}

/* 7 — 3D pressed. */
.espt-block-pd-contact.is-design-3d .espt-pdc-b {
	--auto-c: #fff;
	box-shadow: 0 4px 0 0 color-mix(in srgb, var(--bg) 62%, #000), 0 8px 16px -8px rgba(15, 23, 42, 0.45);
	margin-bottom: 4px;
}

.espt-block-pd-contact.is-design-3d .espt-pdc-b:active {
	box-shadow: 0 1px 0 0 color-mix(in srgb, var(--bg) 62%, #000);
	transform: translateY(3px);
}

/* 8 — minimal text links. */
.espt-block-pd-contact.is-design-minimal .espt-pdc-b {
	--auto-bg: transparent;
	--auto-c: color-mix(in srgb, var(--ch) 85%, #000);
	--auto-hbg: transparent;
	padding: calc(var(--pad-y, 12px) / 2) 0;
}

.espt-block-pd-contact.is-design-minimal .espt-pdc-l {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.espt-block-pd-contact.is-design-minimal .espt-pdc-b:hover .espt-pdc-l {
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------- shadow */
.espt-block-pd-contact.is-shadow-soft .espt-pdc-b { box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.45); }
.espt-block-pd-contact.is-shadow-strong .espt-pdc-b { box-shadow: 0 14px 28px -12px rgba(15, 23, 42, 0.55); }
.espt-block-pd-contact.is-shadow-brand .espt-pdc-b { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--bg) 80%, transparent); }

.espt-block-pd-contact.is-design-3d.is-shadow-soft .espt-pdc-b,
.espt-block-pd-contact.is-design-3d.is-shadow-strong .espt-pdc-b,
.espt-block-pd-contact.is-design-3d.is-shadow-brand .espt-pdc-b {
	box-shadow: 0 4px 0 0 color-mix(in srgb, var(--bg) 62%, #000), 0 10px 22px -10px rgba(15, 23, 42, 0.5);
}

.espt-block-pd-contact.is-design-minimal .espt-pdc-b { box-shadow: none; }

/* -------------------------------------------------------- hover effects */
/* Pointer devices only — a tapped :hover would stick on a phone. */
@media (hover: hover) {
	.espt-block-pd-contact.is-hover-lift .espt-pdc-b:hover { transform: translateY(-3px); }
	.espt-block-pd-contact.is-hover-grow .espt-pdc-b:hover { transform: scale(1.05); }

	.espt-block-pd-contact.is-hover-glow .espt-pdc-b:hover {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 35%, transparent), 0 12px 26px -12px rgba(15, 23, 42, 0.5);
	}
}

.espt-block-pd-contact.is-hover-shine .espt-pdc-b {
	overflow: hidden;
}

.espt-block-pd-contact.is-hover-shine .espt-pdc-b::after {
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
	content: "";
	inset: 0 auto 0 -60%;
	pointer-events: none;
	position: absolute;
	transform: skewX(-18deg);
	transition: left 0.55s ease;
	width: 55%;
}

.espt-block-pd-contact.is-hover-shine .espt-pdc-b:hover::after {
	left: 115%;
}

/* …but never clip the "number copied" bubble. */
.espt-block-pd-contact.is-hover-shine .espt-pdc-b.is-copied {
	overflow: visible;
}

/* --------------------------------------------------- icon animations */
.espt-block-pd-contact.is-icon-anim-slide .espt-pdc-b:hover .espt-pdc-iw { transform: translateX(3px); }
.espt-block-pd-contact.is-icon-pos-right.is-icon-anim-slide .espt-pdc-b:hover .espt-pdc-iw { transform: translateX(-3px); }
.espt-block-pd-contact.is-icon-anim-bounce .espt-pdc-iw { animation: espt-pdcon-bounce 1.6s ease-in-out infinite; }
.espt-block-pd-contact.is-icon-anim-pulse .espt-pdc-iw { animation: espt-pdcon-pulse 1.6s ease-in-out infinite; }
.espt-block-pd-contact.is-icon-anim-ring .espt-pdc-iw { animation: espt-pdc-ring 2.4s ease-in-out infinite; transform-origin: 50% 0; }

/* ---------------------------------------------- attention animations */
.espt-block-pd-contact.is-anim-pulse .espt-pdc-b { animation: espt-pdcon-pulse 1.8s ease-in-out infinite; }
.espt-block-pd-contact.is-anim-bounce .espt-pdc-b { animation: espt-pdcon-bounce 1.8s ease-in-out infinite; }
.espt-block-pd-contact.is-anim-float .espt-pdc-b { animation: espt-pdc-float 1.8s ease-in-out infinite; }
.espt-block-pd-contact.is-anim-heartbeat .espt-pdc-b { animation: espt-pdcon-heartbeat 1.8s ease-in-out infinite; }
.espt-block-pd-contact.is-anim-shake .espt-pdc-b { animation: espt-pdcon-shake 2.4s ease-in-out infinite; }

.espt-block-pd-contact.is-anim-glow .espt-pdc-b {
	animation: espt-pdcon-glow 1.8s ease-in-out infinite;
}

/* "First button only" switches the animation off everywhere else. */
.espt-block-pd-contact.is-anim-first .espt-pdc-b:not(.is-first) { animation: none; }

/* Hovering stops the attention animation outright — merely pausing it would
   freeze a transform that then outranks the hover lift / grow, so the hover
   effect would look dead on any animated button. Must stay after the
   .is-anim-* rules: same specificity, source order decides. */
.espt-block-pd-contact .espt-pdc-b:hover,
.espt-block-pd-contact .espt-pdc-b:focus-visible {
	animation: none;
}

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

@keyframes espt-pdcon-bounce {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-6px); }
	60% { transform: translateY(-2px); }
}

@keyframes espt-pdc-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-pdcon-heartbeat {
	0%, 40%, 100% { transform: scale(1); }
	10%, 30% { transform: scale(1.08); }
	20% { transform: scale(0.97); }
}

@keyframes espt-pdcon-shake {
	0%, 88%, 100% { transform: translateX(0); }
	90%, 94% { transform: translateX(-4px); }
	92%, 96% { transform: translateX(4px); }
}

@keyframes espt-pdcon-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bg) 55%, transparent); }
	50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bg) 0%, transparent); }
}

@keyframes espt-pdc-ring {
	0%, 70%, 100% { transform: rotate(0); }
	74%, 82%, 90% { transform: rotate(-12deg); }
	78%, 86% { transform: rotate(12deg); }
}

/* ------------------------------------------------- copy confirmation */
.espt-block-pd-contact .espt-pdc-b.is-copied::before {
	background: #0f172a;
	border-radius: 8px;
	bottom: calc(100% + 8px);
	color: #fff;
	content: attr(data-msg);
	font-size: 12px;
	font-weight: 600;
	left: 50%;
	line-height: 1.3;
	max-width: min(90vw, 240px);
	overflow: hidden;
	padding: 6px 10px;
	pointer-events: none;
	position: absolute;
	text-overflow: ellipsis;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 3;
}

/* --------------------------------------------- sticky bar on phones */
/* Phone-only by design (the option says "on mobile"), so this is the one
   max-width query in the file — writing it mobile-first would mean undoing
   ten properties at 768px for every layout. */
@media (max-width: 767px) {
	.espt-block-pd-contact.is-sticky-mobile .espt-pdc-btns {
		background: var(--bd-box-bg, #fff);
		border-top: 1px solid var(--bd-line);
		bottom: 0;
		box-shadow: 0 -8px 24px -14px rgba(15, 23, 42, 0.5);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		left: 0;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
		position: fixed;
		right: 0;
		width: 100%;
		z-index: 60;
	}

	/* A bar reads as one row: three buttons still fit across a 320px phone,
	   so the basis stays under a third of the narrowest screen. */
	.espt-block-pd-contact.is-sticky-mobile .espt-pdc-b {
		flex: 1 1 86px;
		min-width: 0;
		padding-left: min(var(--pad-x, 16px), 10px);
		padding-right: min(var(--pad-x, 16px), 10px);
	}

	/* A tooltip above a bottom-pinned bar would sit off-screen. */
	.espt-block-pd-contact.is-sticky-mobile .espt-pdc-b.is-copied::before {
		bottom: auto;
		top: calc(100% + 8px);
	}

	/* In the editor canvas the bar previews in place — position:fixed inside
	   the editor frame is useless and would cover the toolbar. */
	:where(.editor-styles-wrapper, .block-editor-page) .espt-block-pd-contact.is-sticky-mobile .espt-pdc-btns {
		background: none;
		border-top: 0;
		bottom: auto;
		box-shadow: none;
		left: auto;
		padding: 0;
		position: static;
		right: auto;
		width: auto;
		z-index: auto;
	}

	:where(.editor-styles-wrapper, .block-editor-page) .espt-block-pd-contact.is-sticky-mobile .espt-pdc-b.is-copied::before {
		bottom: calc(100% + 8px);
		top: auto;
	}
}

/* ------------------------------------------------------- breakpoints */
@media (min-width: 768px) {
	.espt-block-pd-contact .espt-pdc-head { margin-bottom: 12px; }
}

@media (min-width: 1024px) {
	.espt-block-pd-contact .espt-pdc-head { margin-bottom: 14px; }
}

/* Copy-instead-of-dial only happens on mouse devices — hint it there. */
@media (hover: hover) and (pointer: fine) {
	.espt-block-pd-contact .espt-pdc-b[data-copy] { cursor: copy; }
}

/* Reduced motion. The switch-off rules repeat the exact selectors that turned
   each effect on: a media query adds no specificity, so only a matching (and
   later) selector actually wins. */
@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-contact.is-anim-pulse .espt-pdc-b,
	.espt-block-pd-contact.is-anim-bounce .espt-pdc-b,
	.espt-block-pd-contact.is-anim-float .espt-pdc-b,
	.espt-block-pd-contact.is-anim-heartbeat .espt-pdc-b,
	.espt-block-pd-contact.is-anim-shake .espt-pdc-b,
	.espt-block-pd-contact.is-anim-glow .espt-pdc-b,
	.espt-block-pd-contact.is-icon-anim-bounce .espt-pdc-iw,
	.espt-block-pd-contact.is-icon-anim-pulse .espt-pdc-iw,
	.espt-block-pd-contact.is-icon-anim-ring .espt-pdc-iw {
		animation: none;
	}

	.espt-block-pd-contact .espt-pdc-b,
	.espt-block-pd-contact .espt-pdc-iw,
	.espt-block-pd-contact .espt-pdc-b::after {
		transition: none;
	}

	.espt-block-pd-contact.is-hover-lift .espt-pdc-b:hover,
	.espt-block-pd-contact.is-hover-grow .espt-pdc-b:hover,
	.espt-block-pd-contact.is-icon-anim-slide .espt-pdc-b:hover .espt-pdc-iw,
	.espt-block-pd-contact.is-icon-pos-right.is-icon-anim-slide .espt-pdc-b:hover .espt-pdc-iw,
	.espt-block-pd-contact .espt-pdc-b:hover,
	.espt-block-pd-contact .espt-pdc-b:active,
	.espt-block-pd-contact.is-design-3d .espt-pdc-b:active {
		transform: none;
	}

	.espt-block-pd-contact.is-hover-shine .espt-pdc-b:hover::after { left: -60%; }
}