/* ---------------------------------------------------------------------------
 * YPonton — плавающий виджет связи. [YP 2026-09-16]
 *
 * Замена плагину Chaty. Геометрия снята замером с прежнего виджета на dev,
 * чтобы после подмены ничего не «переехало»: кружок 54px, правый край 29px,
 * низ 25px, промежуток между кнопками 10px.
 *
 * Теней нет намеренно — правило проекта: кнопки на yponton.ru плоские.
 * ------------------------------------------------------------------------- */

.yp-cw {
	--yp-cw-size: 54px;
	--yp-cw-gap: 10px;
	--yp-cw-bottom: 25px;

	position: fixed;
	right: 29px;
	bottom: var(--yp-cw-bottom);
	/* Выше закреплённой панели оформления (60) и баннера куки (9999),
	   ниже полноэкранного оверлея квиза (100000). */
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--yp-cw-gap);
	line-height: 0;
	/* Собственный композиторный слой.
	   Без него Chrome на слабой графике (Windows, программная отрисовка) не
	   перерисовывал область целиком, когда подсказка гасла: на странице
	   оставался «след» от её тёмного фона, пропадавший при первом же скролле.
	   Слой замыкает перерисовку виджета внутри себя. Воспроизводится не на
	   всякой машине — на macOS следа нет.

	   `will-change` здесь не украшение: одного `translateZ(0)` мало — Chrome
	   сворачивает его к плоской матрице и слой может не завести. Держим оба:
	   `will-change` просит слой прямо, `transform` страхует в браузерах,
	   которые его игнорируют. */
	transform: translateZ(0);
	will-change: transform;
}

/* --- список каналов --- */

.yp-cw__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--yp-cw-gap);
}

/* Закрытый список выключен полностью: не в таб-порядке и не читается
   скринридером. Анимация входа висит на строках, а не на контейнере. */
.yp-cw__list[hidden] {
	display: none;
}

.yp-cw__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yp-cw.is-open .yp-cw__row {
	animation: yp-cw-in 220ms ease both;
	/* Ближний к кнопке канал появляется первым — взгляд идёт снизу вверх. */
	animation-delay: calc(var(--yp-cw-i, 0) * 45ms);
}

@keyframes yp-cw-in {
	from { opacity: 0; transform: translateY(12px) scale(.85); }
	to   { opacity: 1; transform: none; }
}

.yp-cw__item,
.yp-cw__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--yp-cw-size);
	height: var(--yp-cw-size);
	padding: 0;
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: transform 160ms ease, opacity 160ms ease;
	-webkit-tap-highlight-color: transparent;
}

.yp-cw__item {
	background: var(--yp-cw-bg, #03E78B);
}

/* Цвет иконок закрепляем во ВСЕХ состояниях ссылки.
   Тема красит `a:hover/:focus/:active` в `#001f3f`, а иконки берут цвет через
   `currentColor` — при наведении трубка, конверт и самолётик чернели.
   Специфичность (0,3,0) против (0,1,1) у темы, поэтому без `!important`. */
.yp-cw .yp-cw__item,
.yp-cw .yp-cw__item:link,
.yp-cw .yp-cw__item:visited,
.yp-cw .yp-cw__item:hover,
.yp-cw .yp-cw__item:focus,
.yp-cw .yp-cw__item:active {
	color: #fff;
}

.yp-cw__item:hover,
.yp-cw__toggle:hover {
	transform: scale(1.07);
}

.yp-cw__item:active,
.yp-cw__toggle:active {
	transform: scale(.96);
}

/* Тема вешает на `button:focus` СИСТЕМНОЕ кольцо
   (`outline: -webkit-focus-ring-color auto 5px`, специфичность 0,1,1) и
   перебивает наш `outline: 0` у `.yp-cw__toggle` (0,1,0). При клике мышью
   срабатывает `:focus`, а не `:focus-visible`, и на оранжевой кнопке
   вспыхивало синее системное кольцо. Снимаем селектором выше по
   специфичности — не `!important`. */
.yp-cw .yp-cw__toggle:focus,
.yp-cw .yp-cw__item:focus {
	outline: 0;
}

/* Клавиатурный фокус подсвечиваем кольцом В ЦВЕТ САМОЙ КНОПКИ и увеличением.
   Тёмное кольцо (было #001f3f) читалось как чёрная обводка и выбивалось из
   плоского оформления. Правило стоит НИЖЕ предыдущего: специфичность равная,
   решает порядок. */
.yp-cw .yp-cw__item:focus-visible,
.yp-cw .yp-cw__toggle:focus-visible {
	outline: 3px solid var(--yp-cw-bg, #f78e1f);
	outline-offset: 3px;
	transform: scale(1.07);
}

/* У каналов-плиток фон прозрачный, поэтому кольцо берём из палитры логотипа. */
.yp-cw .yp-cw__item--max:focus-visible {
	outline-color: #53e;
}

.yp-cw .yp-cw__item--telegram:focus-visible {
	outline-color: #2a9bd8;
}

.yp-cw .yp-cw__item--whatsapp:focus-visible {
	outline-color: #23b33a;
}

.yp-cw__svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* Каналы, у которых иконка — готовая плитка логотипа (WhatsApp, Телеграм,
   «Макс»): она занимает кружок целиком, поэтому своего фона кнопке не нужно.
   Всё лишнее за круглой границей (углы плитки «Макса», хвостик и белый кант
   пузыря WhatsApp) срезаем.

   ⚠️ Обрезку держит САМ SVG, а не кнопка. `overflow: hidden` на кнопке
   срезал заодно и подпись-подсказку, которая выходит за её пределы:
   подсказки у этих трёх каналов просто не показывались, хотя в замерах
   исправно значились видимыми. */
.yp-cw__svg--full {
	width: 100%;
	height: 100%;
	clip-path: circle(50%);
}

/* У WhatsApp маску снимаем: его знак — пузырь с «шипом» слева внизу, и
   круглая обрезка этот шип съедала. Круг при этом не уменьшается — шип
   лежит в том же квадрате 54×54, что и сам кружок, и за габариты кнопки
   не выходит. У «Макса» маска нужна: там скруглённый квадрат с углами. */
.yp-cw__item--whatsapp .yp-cw__svg--full {
	clip-path: none;
}

/* --- подписи-подсказки --- */

/* Плашка слева от кружка. Нативный `title` не годится: он всплывает с
   задержкой около секунды, выглядит по-разному в каждом браузере и на
   сенсорном экране не показывается вовсе. */
.yp-cw__tip {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	/* Сдвиг на 6px гасится при показе — подпись «подъезжает» к кнопке. */
	transform: translateY(-50%) translateX(6px);
	padding: 7px 11px;
	border-radius: 8px;
	background: #001f3f;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	opacity: 0;
	/* Иначе плашка перехватывала бы курсор у самой кнопки. */
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease;
	/* Из той же истории со «следом»: просим не держать обратную сторону
	   элемента и сглаживать его как плоский слой. */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Мышь: показываем по наведению. `hover: hover` отсекает сенсорные экраны,
   где «наведение» залипает после тапа. */
@media (hover: hover) {
	.yp-cw__item:hover .yp-cw__tip,
	.yp-cw__toggle:hover .yp-cw__tip {
		opacity: 1;
		transform: translateY(-50%);
	}
}

/* Клавиатура: подпись видна вместе с кольцом фокуса. */
.yp-cw__item:focus-visible .yp-cw__tip,
.yp-cw__toggle:focus-visible .yp-cw__tip {
	opacity: 1;
	transform: translateY(-50%);
}

/* Сенсорный экран: наводить нечем, поэтому подписи у каналов показываем
   сразу, как только список раскрыт. */
@media (hover: none) {
	.yp-cw.is-open .yp-cw__item .yp-cw__tip {
		opacity: 1;
		transform: translateY(-50%);
	}
}

/* У главной кнопки подпись нужна, только пока список закрыт: при открытом
   списке она означала бы «закрыть», а рядом уже стоят подписи каналов. */
.yp-cw.is-open .yp-cw__toggle .yp-cw__tip {
	opacity: 0;
}

/* --- главная кнопка --- */

.yp-cw__toggle {
	background: #f78e1f;
	outline: 0;
	/* Сетка вместо флекса: обе иконки кладутся в одну ячейку. */
	display: grid;
	place-items: center;
}

/* Иконки лежат друг на друге, меняется только видимая: так переключение
   не дёргает размер кнопки. */
.yp-cw__ico {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 160ms ease, transform 160ms ease;
}

.yp-cw__ico--close {
	opacity: 0;
	transform: rotate(-90deg) scale(.7);
}

.yp-cw.is-open .yp-cw__ico--open {
	opacity: 0;
	transform: rotate(90deg) scale(.7);
}

.yp-cw.is-open .yp-cw__ico--close {
	opacity: 1;
	transform: none;
}

/* --- закреплённая панель оформления --- */

/* На ≤768px корзина, оформление и оплата держат внизу панель с итогом и
   главной кнопкой. Без этого правила виджет накрывал правый край кнопки
   «Подтвердить заказ» — с этого и началась правка.

   160px = замеренная высота панели 142 + зазор 18. Замер на dev 16.09 на
   360/520/768: панель одинаковая на всех трёх, кнопка панели свободна. */
@media (max-width: 768px) {
	body.yp-of-has-bar .yp-cw {
		--yp-cw-bottom: 160px;
	}
}

/* --- бережный режим --- */

@media (prefers-reduced-motion: reduce) {
	.yp-cw.is-open .yp-cw__row,
	.yp-cw__item,
	.yp-cw__toggle,
	.yp-cw__ico,
	.yp-cw__tip {
		animation: none;
		transition: none;
	}
}

/* Печать: плавающие элементы на бумаге не нужны (на /price/ печатают прайс). */
@media print {
	.yp-cw { display: none; }
}