.esf-cb {
	--esf-cb-gap: 8px;
	position: fixed;
	right: var(--esf-cb-side, 25px);
	bottom: var(--esf-cb-bottom, 25px);
	z-index: var(--esf-cb-z, 9990);
	width: var(--esf-cb-size, 52px);
	font-family: inherit;
	line-height: 1.2;
}

.esf-cb--left {
	right: auto;
	left: var(--esf-cb-side, 25px);
}

/* ---------- Channel list ---------- */

.esf-cb__list {
	position: absolute;
	right: 0;
	bottom: calc(var(--esf-cb-size, 52px) + var(--esf-cb-gap));
	display: flex;
	flex-direction: column;
	gap: var(--esf-cb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .3s;
}

.esf-cb--left .esf-cb__list {
	right: auto;
	left: 0;
}

.esf-cb.is-open .esf-cb__list {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.esf-cb__item {
	margin: 0;
	padding: 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .3s ease, transform .3s ease;
}

.esf-cb.is-open .esf-cb__item {
	opacity: 1;
	transform: none;
}

.esf-cb.is-open .esf-cb__item:nth-last-child(1) { transition-delay: 0s; }
.esf-cb.is-open .esf-cb__item:nth-last-child(2) { transition-delay: .04s; }
.esf-cb.is-open .esf-cb__item:nth-last-child(3) { transition-delay: .08s; }
.esf-cb.is-open .esf-cb__item:nth-last-child(4) { transition-delay: .12s; }

/* ---------- Buttons ---------- */

.esf-cb__link,
.esf-cb__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--esf-cb-size, 52px);
	height: var(--esf-cb-size, 52px);
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.esf-cb--square .esf-cb__link,
.esf-cb--square .esf-cb__toggle {
	border-radius: 0;
}

.esf-cb--circle .esf-cb__link,
.esf-cb--circle .esf-cb__toggle {
	border-radius: 50%;
}

.esf-cb__toggle {
	background: var(--esf-cb-color, #4B4BFF);
	border-color: var(--esf-cb-color, #4B4BFF);
}

.esf-cb__link:focus-visible,
.esf-cb__toggle:focus-visible {
	outline: 2px solid var(--esf-cb-color, #4B4BFF);
	outline-offset: 3px;
}

/* Site style: like the site buttons. Filled main button, white channels with an accent frame that fill on hover. */
.esf-cb--site .esf-cb__link {
	background: #fff;
	border-color: var(--esf-cb-color, #4B4BFF);
	color: var(--esf-cb-color, #4B4BFF);
}

.esf-cb--site .esf-cb__link:hover,
.esf-cb--site .esf-cb__link:focus-visible {
	background: var(--esf-cb-color, #4B4BFF);
	color: #fff;
}

.esf-cb--site .esf-cb__toggle:hover {
	background: #fff;
	color: var(--esf-cb-color, #4B4BFF);
}

/* Brand style: messenger colors, round shadowed buttons. */
.esf-cb--brand .esf-cb__link,
.esf-cb--brand .esf-cb__toggle {
	box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.esf-cb--brand .esf-cb__link:hover,
.esf-cb--brand .esf-cb__toggle:hover {
	transform: scale(1.06);
	box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
}

.esf-cb--brand .esf-cb__link--phone { background: #03E78B; }
.esf-cb--brand .esf-cb__link--whatsapp { background: #49E670; }
.esf-cb--brand .esf-cb__link--telegram { background: #3E99D8; }
.esf-cb--brand .esf-cb__link--viber { background: #665CAC; }

/* ---------- Icons ---------- */

.esf-cb__icon {
	display: block;
	width: 50%;
	height: 50%;
	pointer-events: none;
}

.esf-cb__ink {
	fill: var(--esf-cb-color, #4B4BFF);
}

.esf-cb__link .esf-cb__ink {
	fill: currentColor;
	opacity: .35;
}

.esf-cb--site .esf-cb__link:hover .esf-cb__ink,
.esf-cb--site .esf-cb__link:focus-visible .esf-cb__ink {
	opacity: .45;
}

.esf-cb--site .esf-cb__toggle:hover .esf-cb__ink {
	fill: #fff;
}

/* Site style: thin outline icons at the proportion of the LH header buttons (16 px in 40 px). */
.esf-cb--site .esf-cb__icon {
	width: 44%;
	height: 44%;
}

.esf-cb--site .esf-cb__icon--close {
	width: 40%;
	height: 40%;
}

.esf-cb--site .esf-cb__link,
.esf-cb--site .esf-cb__toggle {
	transition-duration: .4s;
	transition-timing-function: ease-in-out;
}

.esf-cb__icon--chat,
.esf-cb__icon--close {
	transition: opacity .25s ease, transform .25s ease;
}

.esf-cb__icon--close {
	position: absolute;
	width: 42%;
	height: 42%;
	opacity: 0;
	transform: rotate(-90deg);
}

.esf-cb.is-open .esf-cb__icon--chat {
	opacity: 0;
	transform: rotate(90deg);
}

.esf-cb.is-open .esf-cb__icon--close {
	opacity: 1;
	transform: none;
}

/* ---------- Labels: tooltip on hover or keyboard focus, always available to screen readers ---------- */

.esf-cb__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	padding: 6px 10px;
	background: #fff;
	color: #292929;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	transform: translate(6px, -50%);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.esf-cb--site .esf-cb__label {
	padding: 9px 14px;
	border: 1px solid #D9D9D9;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.esf-cb--brand .esf-cb__label {
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.esf-cb--left .esf-cb__label {
	right: auto;
	left: calc(100% + 10px);
	transform: translate(-6px, -50%);
}

.esf-cb__label--close,
.esf-cb.is-open .esf-cb__label--open {
	display: none;
}

.esf-cb.is-open .esf-cb__label--close {
	display: block;
}

@media (hover: hover) {
	.esf-cb__link:hover .esf-cb__label,
	.esf-cb__toggle:hover .esf-cb__label {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

.esf-cb__link:focus-visible .esf-cb__label,
.esf-cb__toggle:focus-visible .esf-cb__label {
	opacity: 1;
	transform: translate(0, -50%);
}

/* ---------- Visibility ---------- */

@media (max-width: 767px) {
	.esf-cb--no-mobile { display: none; }
}

@media (min-width: 768px) {
	.esf-cb--no-desktop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.esf-cb *,
	.esf-cb *::before,
	.esf-cb *::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

@media print {
	.esf-cb { display: none; }
}