/**
 * Contact Bar — .espt-block-contact-bar
 *
 * Vars set by the spec: --cbar-accent --cbar-gap --cbar-head-gap --cbar-rotate
 * --cbar-head-size/-weight/-color/-bg/-radius/-px/-py
 * --cbar-btn-size/-py/-px/-radius/-min --cbar-ico --cbar-ico-gap
 * --cbar-all-bg --cbar-all-c, plus --cbar-max / --cbar-bg-d / --cbar-line-d
 * inline on the box. Design presets set --cbar-*-d fallbacks so a colour the
 * visitor picks (which lands on the block root, or inline) always wins.
 * The render adds .is-tilted / .has-chip-top / .has-chip-bottom to the wrap
 * so the tilt and the "heading on the border" overhang get room.
 * Mobile-first: ≤479px stacks, 480px+ rows, 768/1024 inherit the same rules.
 */

/* ------------------------------------------------------------ the shell */
.espt-block-contact-bar .espt-cbar-wrap {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.espt-block-contact-bar.is-text-align-left .espt-cbar-wrap { justify-content: flex-start; }
.espt-block-contact-bar.is-text-align-right .espt-cbar-wrap { justify-content: flex-end; }
.espt-block-contact-bar.is-text-align-left .espt-cbar { text-align: left; }
.espt-block-contact-bar.is-text-align-right .espt-cbar { text-align: right; }

/* The legend chip is pulled ~0.85em above the box — without this it would
   overlap whatever block sits above. */
.espt-block-contact-bar .espt-cbar-wrap.has-chip-top { padding-top: var(--cbar-head-size, 14px); }
.espt-block-contact-bar .espt-cbar-wrap.has-chip-bottom { padding-bottom: var(--cbar-head-size, 14px); }

/* A rotated box sticks out sideways; clipping the wrap keeps a phone from
   scrolling horizontally, and the padding leaves the shadow some room. */
.espt-block-contact-bar .espt-cbar-wrap.is-tilted {
	overflow-x: clip;
	overflow-y: visible;
	padding-left: 14px;
	padding-right: 14px;
}

.espt-block-contact-bar .espt-cbar {
	background: var(--cbar-bg-d, var(--bd-box-bg));
	border: 1.5px solid var(--cbar-line-d, var(--bd-box-line));
	border-radius: var(--bd-radius, 16px);
	display: flex;
	flex-direction: column;
	max-width: min(100%, var(--cbar-max, 100%));
	min-width: 0;
	padding: 0;
	position: relative;
	text-align: center;
	transform: rotate(var(--cbar-rotate, 0deg));
	transform-origin: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	width: 100%;
}

/* Shrink-to-fit once there is room for it. */
@media (min-width: 480px) {
	.espt-block-contact-bar .espt-cbar { width: auto; }
}

.espt-block-contact-bar .espt-cbar-body {
	display: flex;
	flex-direction: column;
	gap: var(--cbar-head-gap, 14px);
	min-width: 0;
	padding: var(--bd-pad, 16px);
}

/* With the heading on a border it is not inside the body, so "heading →
   buttons spacing" has to move the body's padding on that side instead. The
   14px is the control's own default, so leaving it alone keeps the box's
   padding even all round. */
.espt-block-contact-bar .espt-cbar-wrap.has-chip-top .espt-cbar-body {
	padding-top: calc(var(--bd-pad, 16px) + var(--cbar-head-gap, 14px) - 14px);
}

.espt-block-contact-bar .espt-cbar-wrap.has-chip-bottom .espt-cbar-body {
	padding-bottom: calc(var(--bd-pad, 16px) + var(--cbar-head-gap, 14px) - 14px);
}

/* The BD hover effects must not throw the tilt away. */
.espt-block-contact-bar.bd-hover-lift .espt-cbar:hover { transform: rotate(var(--cbar-rotate, 0deg)) translateY(-4px); }
.espt-block-contact-bar.bd-hover-scale .espt-cbar:hover { transform: rotate(var(--cbar-rotate, 0deg)) scale(1.015); }

/* ---------------------------------------------------------- box designs */
/* "legend" is the base look: a fieldset-style hairline the heading sits on. */
.espt-block-contact-bar.is-box-design-legend .espt-cbar { border-width: 1.5px; }

.espt-block-contact-bar.is-box-design-card .espt-cbar {
	border-width: 1px;
	box-shadow: 0 16px 40px -24px rgba(15, 23, 42, 0.36);
}

.espt-block-contact-bar.is-box-design-soft .espt-cbar {
	border-color: transparent;
	border-width: 0;
	box-shadow: 0 20px 46px -22px rgba(15, 23, 42, 0.3);
}

.espt-block-contact-bar.is-box-design-outline .espt-cbar {
	--cbar-bg-d: transparent;
	--cbar-line-d: var(--cbar-accent, var(--bd-primary));
	border-width: 2px;
}

.espt-block-contact-bar.is-box-design-gradient .espt-cbar {
	--cbar-bg-d: linear-gradient(135deg, var(--cbar-accent, var(--bd-primary)), var(--bd-deep));
	--cbar-head-bg-d: transparent;
	--cbar-head-ink-d: #ffffff;
	border-color: transparent;
	border-width: 0;
}

.espt-block-contact-bar.is-box-design-dark .espt-cbar {
	--cbar-bg-d: #0f172a;
	--cbar-line-d: #1e293b;
	--cbar-head-bg-d: #0f172a;
	--cbar-head-ink-d: #e2e8f0;
}

.espt-block-contact-bar.is-box-design-glass .espt-cbar {
	--cbar-bg-d: rgba(255, 255, 255, 0.14);
	--cbar-line-d: rgba(255, 255, 255, 0.38);
	--cbar-head-bg-d: transparent;
	--cbar-head-ink-d: #ffffff;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.espt-block-contact-bar.is-box-design-accent .espt-cbar {
	border-top: 4px solid var(--cbar-accent, var(--bd-primary));
	border-width: 4px 1px 1px;
	box-shadow: 0 14px 34px -24px rgba(15, 23, 42, 0.34);
}

.espt-block-contact-bar.is-box-design-minimal .espt-cbar {
	--cbar-bg-d: transparent;
	--cbar-head-bg-d: transparent;
	border-color: transparent;
	border-width: 0;
	box-shadow: none;
}

/* Selector depth matches the .has-chip-* padding rules above so "no box"
   really means no padding on any side. */
.espt-block-contact-bar.is-box-design-minimal .espt-cbar-wrap .espt-cbar-body { padding: 0; }

/* ------------------------------------------------------------- heading */
.espt-block-contact-bar .espt-cbar-head {
	align-self: center;
	background: var(--cbar-head-bg, transparent);
	border-radius: var(--cbar-head-radius, 8px);
	color: var(--cbar-head-color, var(--cbar-head-ink-d, var(--bd-ink)));
	font-size: var(--cbar-head-size, 14px);
	font-weight: var(--cbar-head-weight, 600);
	line-height: 1.45;
	max-width: calc(100% - 20px);
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--cbar-head-py, 3px) var(--cbar-head-px, 14px);
	position: relative;
	z-index: 1;
}

/* Chip that masks the border for the four "on the border" positions. */
.espt-block-contact-bar.is-heading-pos-border-center .espt-cbar > .espt-cbar-head,
.espt-block-contact-bar.is-heading-pos-border-left .espt-cbar > .espt-cbar-head,
.espt-block-contact-bar.is-heading-pos-border-right .espt-cbar > .espt-cbar-head,
.espt-block-contact-bar.is-heading-pos-bottom-border .espt-cbar > .espt-cbar-head {
	background: var(--cbar-head-bg, var(--cbar-head-bg-d, var(--bd-box-bg)));
}

.espt-block-contact-bar.is-heading-pos-border-center .espt-cbar > .espt-cbar-head,
.espt-block-contact-bar.is-heading-pos-border-left .espt-cbar > .espt-cbar-head,
.espt-block-contact-bar.is-heading-pos-border-right .espt-cbar > .espt-cbar-head {
	margin-top: -0.85em;
}

.espt-block-contact-bar.is-heading-pos-border-left .espt-cbar > .espt-cbar-head {
	align-self: flex-start;
	margin-left: 16px;
}

.espt-block-contact-bar.is-heading-pos-border-right .espt-cbar > .espt-cbar-head {
	align-self: flex-end;
	margin-right: 16px;
}

.espt-block-contact-bar.is-heading-pos-bottom-border .espt-cbar > .espt-cbar-head { margin-bottom: -0.85em; }

.espt-block-contact-bar .espt-cbar-body > .espt-cbar-head {
	align-self: stretch;
	max-width: 100%;
}

/* currentColor keeps the outline readable on the dark / gradient / glass
   designs, where the box's border colour would disappear. */
.espt-block-contact-bar.is-head-border .espt-cbar-head {
	border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

/* ------------------------------------------------------------- buttons */
.espt-block-contact-bar .espt-cbar-buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbar-gap, 10px);
	justify-content: center;
	min-width: 0;
}

.espt-block-contact-bar.is-btn-justify-start .espt-cbar-buttons { justify-content: flex-start; }
.espt-block-contact-bar.is-btn-justify-end .espt-cbar-buttons { justify-content: flex-end; }
.espt-block-contact-bar.is-btn-justify-stretch .espt-cbar-buttons { align-items: stretch; }

/* Direction: stacked on the smallest screens, side by side from 480px. */
.espt-block-contact-bar.is-btn-dir-auto .espt-cbar-buttons,
.espt-block-contact-bar.is-btn-dir-column .espt-cbar-buttons {
	align-items: stretch;
	flex-direction: column;
}

.espt-block-contact-bar.is-btn-dir-column.is-btn-justify-start .espt-cbar-buttons { align-items: flex-start; }
.espt-block-contact-bar.is-btn-dir-column.is-btn-justify-center .espt-cbar-buttons { align-items: center; }
.espt-block-contact-bar.is-btn-dir-column.is-btn-justify-end .espt-cbar-buttons { align-items: flex-end; }

@media (min-width: 480px) {
	.espt-block-contact-bar.is-btn-dir-auto .espt-cbar-buttons {
		align-items: center;
		flex-direction: row;
	}

	.espt-block-contact-bar.is-btn-dir-auto.is-btn-justify-start .espt-cbar-buttons { align-items: flex-start; }
	.espt-block-contact-bar.is-btn-dir-auto.is-btn-justify-end .espt-cbar-buttons { align-items: flex-end; }
	.espt-block-contact-bar.is-btn-dir-auto.is-btn-justify-stretch .espt-cbar-buttons { align-items: stretch; }
}

.espt-block-contact-bar.is-btn-dir-row .espt-cbar-buttons { flex-direction: row; }

.espt-block-contact-bar .espt-cbar-btn {
	--cbtn: var(--cbtn-bg, var(--cbar-all-bg, var(--cbtn-ch, var(--cbar-accent, var(--bd-primary)))));
	--cbtn-ink: var(--cbtn-c, var(--cbar-all-c, #ffffff));
	align-items: center;
	background: var(--cbtn);
	border: 2px solid transparent;
	border-radius: var(--cbar-btn-radius, 10px);
	color: var(--cbtn-ink);
	cursor: pointer;
	display: inline-flex;
	flex: 0 1 auto;
	font-size: var(--cbar-btn-size, 15px);
	font-weight: 700;
	gap: var(--cbar-ico-gap, 8px);
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	min-width: min(100%, var(--cbar-btn-min, 150px));
	overflow-wrap: anywhere;
	padding: var(--cbar-btn-py, 12px) var(--cbar-btn-px, 20px);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

/* Theme link styles must not repaint or underline the buttons. */
.espt-block-contact-bar .espt-cbar-btn:visited,
.espt-block-contact-bar .espt-cbar-btn:hover,
.espt-block-contact-bar .espt-cbar-btn:focus-visible {
	color: var(--cbtn-ink);
	text-decoration: none;
}

.espt-block-contact-bar .espt-cbar-btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cbtn) 55%, #ffffff);
	outline-offset: 2px;
}

.espt-block-contact-bar.is-btn-equal .espt-cbar-btn {
	flex: 1 1 0;
	min-width: 0;
}

.espt-block-contact-bar.is-btn-justify-stretch .espt-cbar-btn { flex: 1 1 auto; }

.espt-block-contact-bar .espt-cbar-btn-txt {
	display: inline-block;
	min-width: 0;
}

.espt-block-contact-bar .espt-cbar-btn-ico {
	align-items: center;
	display: inline-flex;
	flex: none;
	font-size: var(--cbar-ico, 18px);
	height: var(--cbar-ico, 18px);
	justify-content: center;
	line-height: 0;
	width: var(--cbar-ico, 18px);
}

.espt-block-contact-bar .espt-cbar-btn-ico svg {
	display: block;
	height: 100%;
	width: 100%;
}

.espt-block-contact-bar.no-show-icons .espt-cbar-btn-ico { display: none; }
.espt-block-contact-bar.is-icon-pos-right .espt-cbar-btn { flex-direction: row-reverse; }

/* --- channel brand colours (a per-button colour still wins) --- */
.espt-block-contact-bar .espt-cbar-ch-whatsapp { --cbtn-ch: #128c7e; }
.espt-block-contact-bar .espt-cbar-ch-call { --cbtn-ch: #111827; }
.espt-block-contact-bar .espt-cbar-ch-messenger { --cbtn-ch: #0084ff; }
.espt-block-contact-bar .espt-cbar-ch-telegram { --cbtn-ch: #229ed9; }
.espt-block-contact-bar .espt-cbar-ch-viber { --cbtn-ch: #7360f2; }
.espt-block-contact-bar .espt-cbar-ch-sms { --cbtn-ch: #16a34a; }
.espt-block-contact-bar .espt-cbar-ch-email { --cbtn-ch: #ea4335; }
.espt-block-contact-bar .espt-cbar-ch-custom { --cbtn-ch: var(--cbar-accent, var(--bd-primary)); }
.espt-block-contact-bar.no-use-brand .espt-cbar-btn { --cbtn-ch: var(--cbar-accent, var(--bd-primary)); }

/* ------------------------------------------------------- button designs */
.espt-block-contact-bar.is-btn-design-gradient .espt-cbar-btn {
	background: linear-gradient(135deg, var(--cbtn), color-mix(in srgb, var(--cbtn) 55%, #000000));
}

.espt-block-contact-bar.is-btn-design-soft .espt-cbar-btn {
	background: color-mix(in srgb, var(--cbtn) 15%, #ffffff);
	color: var(--cbtn-c, var(--cbar-all-c, var(--cbtn)));
}

.espt-block-contact-bar.is-btn-design-outline .espt-cbar-btn {
	background: transparent;
	border-color: var(--cbtn);
	color: var(--cbtn-c, var(--cbar-all-c, var(--cbtn)));
}

.espt-block-contact-bar.is-btn-design-ghost .espt-cbar-btn {
	background: transparent;
	color: var(--cbtn-c, var(--cbar-all-c, var(--cbtn)));
}

.espt-block-contact-bar.is-btn-design-ghost .espt-cbar-btn:hover {
	background: color-mix(in srgb, var(--cbtn) 12%, transparent);
}

.espt-block-contact-bar.is-btn-design-glass .espt-cbar-btn {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: color-mix(in srgb, var(--cbtn) 24%, transparent);
	border-color: color-mix(in srgb, var(--cbtn) 45%, #ffffff);
}

.espt-block-contact-bar.is-btn-design-3d .espt-cbar-btn {
	box-shadow: 0 4px 0 color-mix(in srgb, var(--cbtn) 60%, #000000);
}

.espt-block-contact-bar.is-btn-design-3d .espt-cbar-btn:active {
	box-shadow: 0 1px 0 color-mix(in srgb, var(--cbtn) 60%, #000000);
	transform: translateY(3px);
}

.espt-block-contact-bar.is-btn-design-glow .espt-cbar-btn {
	box-shadow: 0 0 18px -2px var(--cbtn);
}

.espt-block-contact-bar.is-btn-design-pill .espt-cbar-btn {
	background: transparent;
	border-color: var(--cbtn);
	border-radius: 999px;
	color: var(--cbtn-c, var(--cbar-all-c, var(--cbtn)));
}

.espt-block-contact-bar.is-btn-design-shine .espt-cbar-btn {
	overflow: hidden;
	position: relative;
}

.espt-block-contact-bar.is-btn-design-shine .espt-cbar-btn::after {
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	content: "";
	height: 100%;
	left: -120%;
	position: absolute;
	top: 0;
	transform: skewX(-18deg);
	width: 55%;
}

.espt-block-contact-bar.is-btn-design-shine .espt-cbar-btn:hover::after { animation: espt-cbar-shine 0.85s ease; }

@keyframes espt-cbar-shine {
	to { left: 140%; }
}

/* -------------------------------------------------------- hover effects */
.espt-block-contact-bar.is-btn-hover-lift .espt-cbar-btn:hover {
	box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.55);
	transform: translateY(-3px);
}

.espt-block-contact-bar.is-btn-hover-scale .espt-cbar-btn:hover { transform: scale(1.06); }
.espt-block-contact-bar.is-btn-hover-glow .espt-cbar-btn:hover { box-shadow: 0 0 22px -2px var(--cbtn); }

.espt-block-contact-bar.is-btn-hover-sink .espt-cbar-btn:hover {
	filter: brightness(0.94);
	transform: translateY(2px);
}

/* ---------------------------------------------------- floating on scroll */
.espt-block-contact-bar .espt-cbar-x { display: none; }

.espt-block-contact-bar.is-floating {
	background: color-mix(in srgb, var(--bd-box-bg) 90%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	bottom: 0;
	box-shadow: 0 -10px 30px -14px rgba(15, 23, 42, 0.45);
	left: 0;
	margin: 0;
	max-width: 100%;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	position: fixed;
	right: 0;
	top: auto;
	transform: translateY(115%);
	transition: transform 0.35s ease;
	width: 100%;
	z-index: 60;
}

.espt-block-contact-bar.is-floating.is-stuck { transform: none; }

.espt-block-contact-bar.is-floating .espt-cbar,
.espt-block-contact-bar.is-floating .espt-cbar:hover {
	box-shadow: none;
	transform: none;
}

.espt-block-contact-bar.is-floating .espt-cbar-wrap .espt-cbar-body { padding: calc(var(--bd-pad, 16px) * 0.6); }

/* A pinned bar must stay a bar: buttons share one row and a long heading is
   clamped, so it can never grow into a wall across the screen. */
.espt-block-contact-bar.is-floating .espt-cbar-buttons {
	align-items: center;
	flex-direction: row;
}

.espt-block-contact-bar.is-floating .espt-cbar-btn {
	flex: 1 1 0;
	min-width: 0;
}

.espt-block-contact-bar.is-floating .espt-cbar-head {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	line-clamp: 2;
	overflow: hidden;
}

.espt-block-contact-bar.is-floating .espt-cbar-wrap.is-tilted {
	padding-left: 0;
	padding-right: 0;
}

.espt-block-contact-bar.is-floating .espt-cbar-x {
	align-items: center;
	background: var(--bd-ink);
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	height: 26px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 10px;
	top: -13px;
	width: 26px;
	z-index: 2;
}

.espt-block-contact-bar.is-floating .espt-cbar-x svg {
	height: 14px;
	width: 14px;
}

/* ---------------------------------------------------------------- notes */
.espt-block-contact-bar .espt-block-note {
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-contact-bar .espt-cbar,
	.espt-block-contact-bar .espt-cbar-btn,
	.espt-block-contact-bar.is-floating { transition: none; }

	.espt-block-contact-bar.is-btn-hover-lift .espt-cbar-btn:hover,
	.espt-block-contact-bar.is-btn-hover-scale .espt-cbar-btn:hover,
	.espt-block-contact-bar.is-btn-hover-sink .espt-cbar-btn:hover,
	.espt-block-contact-bar.is-btn-design-3d .espt-cbar-btn:active { transform: none; }

	.espt-block-contact-bar.bd-hover-lift .espt-cbar:hover,
	.espt-block-contact-bar.bd-hover-scale .espt-cbar:hover { transform: rotate(var(--cbar-rotate, 0deg)); }

	.espt-block-contact-bar.is-btn-design-shine .espt-cbar-btn:hover::after { animation: none; }
}