/*
 * Демо-витрина (`site.demo`): плашка сверху страницы и окно «Вы в демонстрационной версии».
 * Подключается ТОЛЬКО при демо-режиме — app/partials/shop-demo-bar.php. Разметка и скрипт:
 * там же и public/assets/shop-demo.js.
 *
 * ⚠ Плашка ЗЕЛЁНАЯ и ЛИПКАЯ (вариант D «Зелёный», принят владельцем 23.10.2026): `position: sticky; top: 0` — она не
 * уезжает при прокрутке и остаётся видна даже свёрнутой (тогда это строка с кнопкой «Запустить»). Высоту плашки скрипт
 * кладёт в `--sdemo-h` на <html>; липкие шапки витрины (`.sh`, `.clh`, `.lb-bar`) встают под неё через
 * `top: var(--sdemo-h, 0px)`. Без демо-режима переменной нет — запасное 0px, обычная витрина не меняется.
 *
 * ⚠ Цвет плашки ЗАШИТ, а не берётся из темы магазина: полоса одна и та же на всех демо-сайтах
 * и должна читаться как «служебное», а не как часть витрины. Всё остальное (окно, шрифт, скругление)
 * едет за темой магазина через её токены `--sh-*`, с запасным значением на случай, если shop.css
 * не подключён.
 */

.sdemo {
	/* ⚠ `color-scheme: dark` — белый текст на зелёном: браузер не рисует светлую полосу прокрутки и светлые рамки фокуса. */
	color-scheme: dark;
	background: #16a34a;
	color: #ffffff;
	font-size: 13px;
	line-height: 1.35;
	/* ⚠ Липкая, а не fixed: остаётся в потоке и держит своё место сама. Родитель — тело страницы без `overflow`. */
	position: sticky;
	top: 0;
	z-index: 60;
}

.sdemo__full { max-width: 1440px; margin: 0 auto; padding: 7px 32px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; }

/* Бейдж «ДЕМО» — кнопка (на телефоне открывает панель «ещё»), в свёрнутой строке — обычный span. */
.sdemo__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 0;
	background: #ffffff;
	color: #15803d;
	border-radius: 5px;
	padding: 2px 7px;
	font: inherit;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: default;
}

/*
 * ⚠ Высота плашки не растёт от текста: на ПК фраза переносится не больше чем на две строки (2 × 17 = 35 px < кнопки 38 px, плашка
 * остаётся 52 px), на телефоне — одна строка с многоточием (ниже). Фраза в 480 px не помещается в оставшиеся ~420 px рядом с
 * шаблоном и тремя кнопками, поэтому одной строкой её обрезало бы на слове «Хотите».
 */
.sdemo__text { margin: 0 6px 0 4px; min-width: 0; flex: 1 1 auto; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.sdemo__short { display: none; }
.sdemo__btn-short { display: none; }

/* Обёртка действий: на ПК её содержимое стоит в общем ряду плашки, на телефоне — выпадающая панель (ниже). */
.sdemo__more { display: contents; }

/* ⚠ Порядок в разметке — порядок Tab (шаблон, кабинет, вход, «Запустить», крестик); на ПК глазами: шаблон, «Запустить», кабинет, вход, крестик. */
.sdemo__tpl { order: 2; }
.sdemo__full .sdemo__btn--main { order: 3; }
.sdemo__more .sdemo__btn { order: 4; }
.sdemo__x { order: 5; }

/* Переключатель раскладок «Шаблон: Классика · Лукбук» — рядом с кнопками, отделён чертой. */
.sdemo__tpl { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px; margin-right: 6px; padding-right: 14px; border-right: 1px solid #4ade80; white-space: nowrap; }
.sdemo__tpl-lbl { margin-right: 2px; color: #bbf7d0; font-weight: 500; }
.sdemo__tpl-dot { color: #bbf7d0; }
.sdemo .sdemo__tpl-a { padding: 3px 9px; border-radius: 6px; color: #ffffff; font-weight: 600; text-decoration: none; transition: background .15s; }
.sdemo .sdemo__tpl-a:hover { background: rgba(255, 255, 255, .14); color: #ffffff; text-decoration: none; }
/* Выбранный шаблон — тёмно-зелёная заливка без светлой рамки (на зелёной полосе читается и так). */
.sdemo .sdemo__tpl-a.is-on { background: #14532d; color: #ffffff; }
.sdemo :focus-visible { outline: 2px solid #fde047; outline-offset: 2px; }

/* Кнопки плашки. Окно оплаты берёт ту же базовую форму, но цвета у него свои (ниже, `.sdemo-modal …`). */
.sdemo .sdemo__btn,
.sdemo-modal .sdemo__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 5px 13px;
	border: 1px solid #475569;
	border-radius: 8px;
	background: transparent;
	color: #e2e8f0;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.sdemo .sdemo__btn { flex: 0 0 auto; min-height: 34px; border-color: #86efac; color: #ffffff; }
.sdemo .sdemo__btn:hover { background: rgba(255, 255, 255, .14); border-color: #86efac; color: #ffffff; text-decoration: none; }

/* ⚠ Главная кнопка — жёлтая со свечением: единственное яркое пятно на плашке, должна находиться глазами за секунду. */
.sdemo .sdemo__btn--main {
	min-height: 38px;
	padding: 0 16px;
	border-color: #fbbf24;
	border-radius: 8px;
	background: #fbbf24;
	color: #0f172a;
	font-weight: 700;
	box-shadow: 0 0 0 3px rgba(251, 191, 36, .35);
}
.sdemo .sdemo__btn--main:hover { background: #fcd34d; border-color: #fcd34d; color: #0f172a; }
.sdemo__arrow { margin-left: 6px; }

.sdemo__x {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-left: 2px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #bbf7d0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.sdemo__x:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }

/* Скрытый текст для озвучки: на экране его нет, а читалка его произносит. */
.sdemo__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Свёрнутая плашка — НЕ узкая серая полоска, а компактная строка 36 px (телефон 40): бейдж, название, та же главная кнопка и «⌄».
 * ⚠ Кнопка «Запустить» видна и свёрнутой — ради неё плашка и липкая.
 */
.sdemo__thin { display: none; }
.sdemo__thin-in { max-width: 1440px; min-height: 36px; margin: 0 auto; padding: 4px 32px; display: flex; align-items: center; gap: 10px; box-sizing: border-box; }
.sdemo__thin-name { flex: 1 1 auto; min-width: 0; color: #bbf7d0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdemo .sdemo__btn--main.sdemo__btn--compact { min-height: 28px; padding: 0 12px; font-size: 12px; }
.sdemo__open {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #bbf7d0;
	cursor: pointer;
}
.sdemo__open:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }

.sdemo.is-min .sdemo__full { display: none; }
.sdemo.is-min .sdemo__thin { display: block; }

/* Не широкий монитор: вместо длинной фразы — короткая, чтобы ряд кнопок не сжимал текст до трёх слов. */
@media (max-width: 1360px) {
	.sdemo__long { display: none; }
	.sdemo__short { display: inline; }
}

/*
 * Узкий монитор (1101–1240): рядом с шаблоном и тремя кнопками на фразу остаётся 50–150 px (на узбекском ещё меньше) — обрезок
 * в два слова хуже, чем ничего: фразу прячем, бейдж «ДЕМО» остаётся и прижимает ряд кнопок вправо.
 */
@media (min-width: 1101px) and (max-width: 1240px) {
	.sdemo__text { display: none; }
	.sdemo__full .sdemo__badge { margin-right: auto; }
}

/*
 * Планшет и телефон (до 1100): плашка — ОДНА строка 56 px: бейдж, короткий текст с многоточием, главная кнопка «Запустить магазин», крестик.
 * Шаблон, «Открыть кабинет» и вход покупателем-демо прячутся в панель `.sdemo__more` под плашкой; открывает её бейдж «ДЕМО».
 * ⚠ До 1100, а не до 860: на узбекском подписи кнопок длиннее русских, и на 1024 ряд кнопок съедал почти всю ширину плашки.
 */
@media (max-width: 1100px) {
	.sdemo__full { padding: 11px 12px; }
	.sdemo__thin-in { min-height: 40px; padding: 6px 12px; }
	.sdemo__text { margin: 0 4px 0 2px; display: block; white-space: nowrap; text-overflow: ellipsis; }
	.sdemo__btn-long { display: none; }
	.sdemo__btn-short { display: inline; }
	.sdemo .sdemo__btn--main { min-height: 34px; padding: 0 12px; }
	.sdemo .sdemo__btn--main.sdemo__btn--compact { min-height: 28px; padding: 0 12px; }

	/* Бейдж-кнопка: маленький треугольник подсказывает, что за ним панель. */
	.sdemo__full .sdemo__badge { cursor: pointer; padding: 4px 8px; }
	.sdemo__full .sdemo__badge::after { content: ""; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; transition: transform .15s; }
	.sdemo.is-more .sdemo__badge::after { transform: rotate(180deg); }

	.sdemo__more {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 12px;
		background: #14532d;
		box-shadow: 0 10px 24px rgba(15, 23, 42, .28);
	}
	.sdemo.is-more .sdemo__more { display: flex; }

	.sdemo__tpl { flex: 0 0 auto; flex-wrap: wrap; margin: 0; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); white-space: normal; }
	.sdemo .sdemo__tpl-a.is-on { background: rgba(255, 255, 255, .22); }
	.sdemo__more .sdemo__btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
}

/* Совсем узкий телефон: бейджа достаточно, фраза рядом уже не помещается. */
@media (max-width: 359px) {
	.sdemo__text { display: none; }
	.sdemo__full .sdemo__btn--main { margin-left: auto; }
}

/*
 * ПЛАШКА С ПОМОЩНИКОМ (`.sdemo--assist`, плашка v2, 23.10.2026): в строке только бейдж, фраза, «Запустить свой магазин» и «×» —
 * шаблоны, кабинет и вход переехали в окно ИИ-помощника. Высота 48 px на ПК (кнопка 38 + рамка 2 + 2 × 4) и 52 px до 1100 (кнопка 34 + рамка 2 + 2 × 8) — как в макете;
 * фраза в ОДНУ строку — места хватает: длинная до 1100 px, короче («Хотите такой же?») на планшете и телефоне.
 * ⚠ Правила стоят после общих медиа-блоков и сильнее по селектору (`.sdemo--assist .x`), поэтому порядок не важен.
 */
.sdemo--assist .sdemo__full { padding-top: 4px; padding-bottom: 4px; }
.sdemo--assist .sdemo__text { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset; }
.sdemo--assist .sdemo__long { display: inline; }
.sdemo--assist .sdemo__short { display: none; }
.sdemo--assist .sdemo__full .sdemo__badge { margin-right: 0; }

@media (max-width: 1100px) {
	.sdemo--assist .sdemo__full { padding: 8px 12px; }
	.sdemo--assist .sdemo__long { display: none; }
	.sdemo--assist .sdemo__short { display: inline; }
	/* Бейдж — метка, а не кнопка: ни стрелки, ни «руки». */
	.sdemo--assist .sdemo__full .sdemo__badge { cursor: default; padding: 2px 7px; }
	.sdemo--assist .sdemo__full .sdemo__badge::after { content: none; }
	/* Телефон 375: «ДЕМО», «Хотите такой же?», «Запустить магазин →» и «×» помещаются в одну строку, фраза не режется на «Хотите так…». */
	.sdemo--assist .sdemo__full { gap: 6px; }
	.sdemo--assist .sdemo__text { margin: 0 2px; font-size: 12.5px; }
	.sdemo--assist .sdemo__btn--main { padding: 0 9px; font-size: 12px; }
	.sdemo--assist .sdemo__arrow { margin-left: 4px; }
	.sdemo--assist .sdemo__x { width: 26px; margin-left: 0; }
}

@media (max-width: 359px) {
	.sdemo--assist .sdemo__text { display: none; }
}

/* ─────────────────────── Окно вместо оплаты ─────────────────────── */

body.sdemo-lock { overflow: hidden; }

.sdemo-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, .62);
	overflow-y: auto;
}
.sdemo-modal[hidden] { display: none; }

.sdemo-modal__box {
	width: 100%;
	max-width: 440px;
	margin: auto;
	padding: 28px 24px 22px;
	border-radius: var(--sh-radius, 16px);
	background: var(--sh-card, #fff);
	color: var(--sh-ink, #212529);
	box-shadow: 0 24px 70px rgba(15, 23, 42, .45);
	text-align: center;
}

.sdemo-modal__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--sh-soft, #e7f1ff);
	color: var(--sh-blue, #0d6efd);
}

.sdemo-modal h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; }
.sdemo-modal p { margin: 0 0 14px; color: var(--sh-muted, #6c757d); font-size: 14px; line-height: 1.5; }

.sdemo-modal__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.sdemo-modal__chips li {
	padding: 5px 13px;
	border: 1px solid var(--sh-line, #e5e7eb);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sh-ink, #212529);
}

.sdemo-modal__btns { display: flex; flex-direction: column; gap: 8px; }
.sdemo-modal .sdemo-modal__btns .sdemo__btn { min-height: 44px; font-size: 15px; border-radius: 10px; }
.sdemo-modal .sdemo-modal__main { background: var(--sh-blue, #0d6efd); border-color: var(--sh-blue, #0d6efd); color: #fff; }
.sdemo-modal .sdemo-modal__main:hover { background: var(--sh-blue-dark, #0b5fda); border-color: var(--sh-blue-dark, #0b5fda); color: #fff; text-decoration: none; }
.sdemo-modal .sdemo-modal__back { border-color: var(--sh-line, #e5e7eb); color: var(--sh-ink, #212529); }
.sdemo-modal .sdemo-modal__back:hover { background: var(--sh-bg, #f8f9fa); border-color: var(--sh-muted, #6c757d); color: var(--sh-ink, #212529); text-decoration: none; }
.sdemo-modal .sdemo__btn:focus-visible { outline: 2px solid var(--sh-blue, #0d6efd); outline-offset: 2px; }

.sdemo-modal__note { margin: 16px 0 0; font-size: 12.5px; }

@media (min-width: 520px) {
	.sdemo-modal__btns { flex-direction: row; }
	.sdemo-modal__btns .sdemo__btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.sdemo-modal { animation: sdemo-fade .18s ease-out; }
	.sdemo-modal__box { animation: sdemo-rise .22s ease-out; }
}
@keyframes sdemo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sdemo-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }