/**
 * Нижняя полоса и её окна.
 *
 * Полоса спрятана по умолчанию: показывает её строка `@media` для каждого
 * включённого экрана — модуль печатает её рядом, с высотой и значками этого
 * экрана. На компьютере полосы нет никогда.
 */

.boiko-bar {
	--bb-h: 56px;
	--bb-icon: 24px;
	--bb-text: #1e293b;
	--bb-muted: #64748b;
	--bb-accent: #e65100;

	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	/* Ниже окна корзины Caddy и меню темы — иначе полоса закрыла бы «Оформить». */
	z-index: 9990;
	display: none;
	align-items: stretch;
	height: calc(var(--bb-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background: #fff;
	border-top: 1px solid #e2e8f0;
	box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
}

/* Меню темы открыто или в поле печатают — полоса не мешает. */
body.is-menu-sidebar .boiko-bar,
body.boiko-bar-typing .boiko-bar {
	display: none !important;
}

.boiko-bar__item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 48px;
	min-height: 48px;
	padding: 4px 2px;
	color: var(--bb-text);
	text-decoration: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.boiko-bar__item:hover,
.boiko-bar__item:focus {
	color: var(--bb-text);
	text-decoration: none;
}

.boiko-bar__item:active {
	background: #f1f5f9;
}

.boiko-bar__item:focus-visible {
	outline: 2px solid var(--bb-accent);
	outline-offset: -2px;
}

.boiko-bar__icon {
	display: block;
	flex: 0 0 auto;
	width: var(--bb-icon);
	height: var(--bb-icon);
}

.boiko-bar__label {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: normal;
	white-space: nowrap;
}

/* Число товаров — кружок на углу значка корзины. Ноль — не показываем. */
.boiko-bar__count {
	position: absolute;
	top: 4px;
	left: calc(50% + var(--bb-icon) / 2 - 8px);
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--bb-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.boiko-bar__count.cc_cart_zero {
	display: none;
}

/*
 * Подсветка корзины, пока в ней товар (тумблер на экране). Пустая ли она —
 * знает Caddy: снимает класс `cc_cart_zero` с числа, когда товар положили.
 */
.boiko-bar--hl .boiko-bar__item--cart:has(.boiko-bar__count:not(.cc_cart_zero)) {
	background: #fff3e0;
	color: var(--bb-accent);
	font-weight: 700;
}

/* ---------- Окна полосы ---------- */

.boiko-bar-dialog {
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	max-height: 100%;
	margin: auto auto 0;
	padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
	border: 0;
	border-radius: 16px 16px 0 0;
	background: #fff;
	color: #1e293b;
}

.boiko-bar-dialog::backdrop {
	background: rgba(15, 23, 42, 0.5);
}

/* Поиск — сверху: клавиатура выезжает снизу и закрыла бы поле. */
.boiko-bar-dialog--search {
	margin: 0 auto auto;
	border-radius: 0 0 16px 16px;
}

.boiko-bar-dialog__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}

.boiko-bar-dialog__close {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 12px 0 0;
	padding: 0 16px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	background: #fff;
	color: #1e293b;
	font-size: 16px;
	letter-spacing: normal !important;
	cursor: pointer;
}

.boiko-bar-search {
	display: flex;
	gap: 8px;
	margin: 0;
}

/* 16px — меньше iPhone увеличивает страницу при нажатии на поле. */
.boiko-bar-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	font-size: 16px;
}

.boiko-bar-search__go {
	flex: 0 0 auto;
	width: auto !important;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--bb-accent, #e65100);
	color: #fff;
	font-size: 16px;
	letter-spacing: normal !important;
	cursor: pointer;
}

.boiko-bar-call__phones {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Номер — зелёная кнопка-таблетка: нажал — звонок. */
.boiko-bar-call__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	margin: 0 0 10px;
	padding: 0 20px;
	border-radius: 999px;
	background: #4fc95d;
	color: #0f3d17;
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
}

.boiko-bar-call__phone:hover,
.boiko-bar-call__phone:focus {
	color: #0f3d17;
	text-decoration: none;
}

.boiko-bar-call__phone .boiko-bar__icon {
	width: 22px;
	height: 22px;
	color: #0f3d17;
}

.boiko-bar-call__lead {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.4;
	color: #475569;
}

/* Окошко «Позвонить» — белая карточка со скруглением со всех сторон, над полосой. */
.boiko-bar-dialog--call {
	margin: auto 12px calc(12px + env(safe-area-inset-bottom));
	width: calc(100% - 24px);
	/* Окно «Контакты» выше низкого телефона — листается внутри себя. */
	max-height: calc(100% - 24px - env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 20px;
	box-shadow: 0 8px 30px rgba(15, 23, 42, 0.25);
}

@media (min-width: 544px) {
	.boiko-bar-dialog--call {
		margin: auto auto 12px;
	}
}

/* «Заказать звонок» — белая карточка со скруглением и зелёной кнопкой-таблеткой. */
.boiko-bar-callback {
	margin: 4px 0 8px;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
}

.boiko-bar-callback__title {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.35;
	color: #1e293b;
}

.boiko-bar-callback__field {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0 0 10px;
	padding: 0 14px;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	background: #fff;
	color: #1e293b;
	font-size: 16px; /* не меньше 16 — иначе iPhone увеличивает страницу */
}

.boiko-bar-callback__field:focus {
	border-color: #4fc95d;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(79, 201, 93, 0.25);
}

.boiko-bar-callback__field::placeholder {
	color: #94a3b8;
	opacity: 1;
}

/* Номер — крупнее и с ровными цифрами: маска не «пляшет» при наборе. */
.boiko-bar-callback__phone {
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* «Когда вам удобно?» — три плитки в ряд, выбранная — зелёная, как кнопка. */
.boiko-bar-callback__when {
	margin: 2px 0 14px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.boiko-bar-callback__when legend {
	margin: 0 0 8px;
	padding: 0;
	font-size: 15px;
	color: #475569;
}

/* Ряд в своей обёртке: `display: flex` на самом fieldset Safari рисует криво. */
.boiko-bar-callback__pills {
	display: flex;
	gap: 8px;
}

.boiko-bar-callback__pill {
	position: relative;
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 4px 6px;
	align-items: center;
	justify-content: center;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	background: #fff;
	color: #334155;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.boiko-bar-callback__when[hidden],
.boiko-bar-callback__pill[hidden] {
	display: none;
}

/* Сам кружок не нужен — выбор видно по плитке. В форме он остаётся: клавиатура и чтецы экрана. */
.boiko-bar-callback__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.boiko-bar-callback__pill:has(input:checked) {
	border: 2px solid #4fc95d;
	background: #effbf0;
	color: #0f3d17;
	font-weight: 700;
}

.boiko-bar-callback__pill:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(79, 201, 93, 0.35);
}

/* Ловушка для ботов — вне экрана, но в форме. */
.boiko-bar-callback__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.boiko-bar-callback__go {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: #4fc95d;
	color: #0f3d17;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: normal !important;
	cursor: pointer;
}

.boiko-bar-callback__go:disabled {
	opacity: 0.6;
}

.boiko-bar-callback__status {
	margin: 10px 0 0;
	font-size: 15px;
}

.boiko-bar-callback__status:empty {
	display: none;
}

.boiko-bar-callback__status.is-ok {
	color: #2e7d32;
}

.boiko-bar-callback__status.is-fail {
	color: #c62828;
}

.boiko-bar-call__head {
	margin: 16px 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
}

.boiko-bar-call__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

/* Время работы: день слева, часы справа. */
.boiko-bar-call__hours {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	gap: 2px 16px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.boiko-bar-call__hours dt,
.boiko-bar-call__hours dd {
	margin: 0;
}

.boiko-bar-call__hours dd {
	text-align: right;
}

/* Соцсети — таблетки с обводкой, нажимать удобно пальцем. */
.boiko-bar-call__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.boiko-bar-call__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	color: #1e293b;
	font-size: 15px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.boiko-bar-call__link:hover,
.boiko-bar-call__link:focus {
	color: #1e293b;
	text-decoration: none;
}

/* Знак сети — в её фирменном цвете. */
.boiko-bar-call__brand {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.boiko-bar-call__link--telegram .boiko-bar-call__brand { color: #26a5e4; }
.boiko-bar-call__link--viber .boiko-bar-call__brand { color: #7360f2; }
.boiko-bar-call__link--youtube .boiko-bar-call__brand { color: #f00; }
.boiko-bar-call__link--instagram .boiko-bar-call__brand { color: #e4405f; }
.boiko-bar-call__link--facebook .boiko-bar-call__brand { color: #0866ff; }
.boiko-bar-call__link--tiktok .boiko-bar-call__brand { color: #000; }

/* Под кнопками, когда «Написать в Viber» ничего не открыл (viber.js). */
.boiko-bar-call__miss {
	margin: 8px 0 0;
	font-size: 14px;
	color: #b45309;
}

/* «Спасибо за заказ»: «Напишите нам, указав номер заказа» и кнопки чатов. */
.boiko-thanks {
	margin: 16px 0 24px;
}

.boiko-thanks__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: #1e293b;
}

/* «Сейчас работаем» — зелёным, «не работаем» — серым; под ней «написать можно…». */
.boiko-bar-call__now {
	margin: 0 0 4px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #f1f5f9;
	color: #475569;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.boiko-bar-call__now.is-open {
	background: #e8f7ea;
	color: #1e7e34;
}

.boiko-bar-call__now[hidden] {
	display: none;
}

.boiko-bar-call__write {
	display: block;
	margin-top: 2px;
	font-weight: 400;
}

/* «Перейти в контакты» — зелёная обводка, чтобы не спорить с номером. */
.boiko-bar-call__page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 16px 0 0;
	border: 2px solid #4fc95d;
	border-radius: 999px;
	color: #1e7e34;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}