/*
 * Набор элементов в едином оформлении (12.09.2026).
 *
 * Кнопки, поля, метки, карточки, уведомления и заголовки — те же, что в
 * оформлении заказа, но без привязки к странице: подключаются на всём сайте
 * и годятся для личного кабинета, профиля и новых страниц.
 * Значения — переменные --gsm-* (modules/design_tokens.php), образцы и
 * настройка — на странице /design/.
 */

/* Движение раскрывающихся списков — одно на весь сайт (23.09.2026):
   в начале быстро, в середине замедляется, в конце снова быстро. Тем же значением
   пользуется js/gsm_reveal.js, поэтому стрелки поворачиваются вместе со списком. */
:root { --gsm-ease-wave: cubic-bezier(.16,.9,.84,.1); }

.gsm-i { flex: none; vertical-align: middle; }

/* ── Заголовки и текст ─────────────────────────────────────────────────── */
.gsm-h1 { margin: 0; font-size: var(--gsm-fs-2xl, 28px); font-weight: 600; line-height: 1.2; color: var(--gsm-ink, #23282d); }
.gsm-h2 { margin: 0; font-size: var(--gsm-fs-xl, 22px); font-weight: 600; line-height: 1.25; color: var(--gsm-ink, #23282d); }
.gsm-h3 { margin: 0; font-size: var(--gsm-fs-lg, 18px); font-weight: 600; line-height: 1.3; color: var(--gsm-ink, #23282d); }
.gsm-text { margin: 0; font-size: var(--gsm-fs-md, 15px); line-height: 1.5; color: var(--gsm-ink, #23282d); }
.gsm-muted { margin: 0; font-size: var(--gsm-fs-sm, 13px); line-height: 1.5; color: var(--gsm-ink-2, #6b7480); }
.gsm-link, .gsm-link:link, .gsm-link:visited { color: var(--gsm-blue, #3399cc); text-decoration: none; }
.gsm-link:hover { color: var(--gsm-blue-dark, #2b83b0); text-decoration: underline; }

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.gsm-btn {
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: var(--gsm-s-2, 8px);
	min-height: var(--gsm-button-h, 52px); margin: 0; padding: 0 28px;
	border: 0; border-radius: var(--gsm-r-btn, 10px);
	background: var(--gsm-btn, #1f6f97); color: var(--gsm-btn-text, #fff);
	font-family: inherit; font-size: var(--gsm-fs-btn, 15px); font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer; box-shadow: none;
	transition: background-color .15s, color .15s, box-shadow .15s;
}
.gsm-btn:link, .gsm-btn:visited { color: var(--gsm-btn-text, #fff); }
.gsm-btn:hover { background: var(--gsm-btn-hover, #185c7d); color: var(--gsm-btn-text, #fff); text-decoration: none; }
.gsm-btn:focus-visible { outline: 2px solid var(--gsm-btn, #1f6f97); outline-offset: 2px; }
.gsm-btn:disabled,
.gsm-btn[aria-disabled="true"] { background: var(--gsm-ink-3, #949ba5); color: #fff; cursor: default; }
.gsm-btn--sm { min-height: var(--gsm-control-h, 44px); padding: 0 18px; border-radius: var(--gsm-r-btn, 10px); }
/* Кнопка-значок (27.09.2026): без рамки и фона, 32×32, серый значок 18 px; при наведении — светлая подложка.
   Подпись — в title/aria-label. На сенсорных экранах зона нажатия 44 px. --danger — красная при наведении. */
.gsm-btn.gsm-btn--icon { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; background: transparent; box-shadow: none; color: var(--gsm-ink-3, #949ba5); border-radius: var(--gsm-r-sm, 6px); }
.gsm-btn.gsm-btn--icon:hover, .gsm-btn.gsm-btn--icon:focus-visible { background: var(--gsm-bg, #f6f7f9); color: var(--gsm-ink, #23282d); }
.gsm-btn.gsm-btn--icon.gsm-btn--danger:hover { color: var(--gsm-red, #d64545); background: var(--gsm-red-soft, #fdeeee); }
.gsm-btn--icon svg { width: 18px; height: 18px; flex: none; }
@media (pointer: coarse) { .gsm-btn.gsm-btn--icon { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } }
.gsm-btn--secondary,
.gsm-btn--secondary:link,
.gsm-btn--secondary:visited { background: var(--gsm-card, #fff); color: var(--gsm-ink, #23282d); box-shadow: inset 0 0 0 1px var(--gsm-line-strong, #ccd3da); }
.gsm-btn--secondary:hover { background: var(--gsm-card, #fff); color: var(--gsm-blue, #3399cc); box-shadow: inset 0 0 0 1px var(--gsm-blue, #3399cc); }
.gsm-btn--danger { background: var(--gsm-red, #d64545); }
.gsm-btn--danger:hover { background: var(--gsm-red-ink, #9b2c2c); }
.gsm-btn--secondary:disabled { background: var(--gsm-bg, #f6f7f9); color: var(--gsm-ink-3, #949ba5); box-shadow: inset 0 0 0 1px var(--gsm-line, #e4e8ec); }

/* ── Поля ──────────────────────────────────────────────────────────────── */
.gsm-field { display: flex; flex-direction: column; gap: var(--gsm-s-1, 4px); margin: 0; }
.gsm-label { display: flex; align-items: center; gap: var(--gsm-s-2, 8px); font-size: var(--gsm-fs-sm, 13px); font-weight: 500; line-height: 1.4; color: var(--gsm-ink-2, #6b7480); }
.gsm-input {
	box-sizing: border-box; display: block; width: 100%; max-width: 100%;
	min-height: var(--gsm-control-h, 44px); margin: 0; padding: 10px 12px;
	border: 1px solid var(--gsm-line-strong, #ccd3da); border-radius: var(--gsm-r-sm, 8px);
	background: var(--gsm-card, #fff); color: var(--gsm-ink, #23282d);
	font-family: inherit; font-size: var(--gsm-fs-md, 15px); line-height: 1.3;
	box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.gsm-input::placeholder { color: var(--gsm-ink-3, #949ba5); }
.gsm-input:focus { outline: none; border-color: var(--gsm-blue, #3399cc); box-shadow: var(--gsm-focus, 0 0 0 3px rgba(51, 153, 204, .15)); }
.gsm-input:disabled { background: var(--gsm-bg, #f6f7f9); color: var(--gsm-ink-3, #949ba5); cursor: not-allowed; }
.gsm-input.is-invalid { border-color: var(--gsm-red, #d64545); box-shadow: 0 0 0 3px rgba(214, 69, 69, .12); }
.gsm-input.is-suggest { border-color: var(--gsm-amber, #e3a008); box-shadow: 0 0 0 3px rgba(227, 160, 8, .2); }
.gsm-field-note { margin: 0; font-size: var(--gsm-fs-sm, 13px); font-weight: 600; line-height: 1.4; color: var(--gsm-red, #d64545); }

.gsm-check { display: inline-flex; align-items: center; gap: var(--gsm-s-2, 8px); font-size: var(--gsm-fs-md, 15px); color: var(--gsm-ink, #23282d); cursor: pointer; }
.gsm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--gsm-blue, #3399cc); cursor: pointer; }

/* ── Метки ─────────────────────────────────────────────────────────────── */
.gsm-badge {
	display: inline-flex; align-items: center; gap: 4px;
	min-height: 20px; padding: 0 8px; border-radius: 999px;
	background: var(--gsm-bg, #f6f7f9); box-shadow: inset 0 0 0 1px var(--gsm-line, #e4e8ec);
	color: var(--gsm-ink-2, #6b7480); font-size: var(--gsm-fs-xs, 12px); font-weight: 500; line-height: 1.6; white-space: nowrap;
}
.gsm-badge--blue { background: var(--gsm-blue-soft, #f0f8fc); box-shadow: none; color: var(--gsm-blue-dark, #2b83b0); }
.gsm-badge--green { background: var(--gsm-green-soft, #eefaf3); box-shadow: none; color: var(--gsm-green, #17a05f); }
.gsm-badge--red { background: var(--gsm-red-soft, #fdf2f2); box-shadow: none; color: var(--gsm-red-ink, #9b2c2c); }

/* ── Метки товара и раздела: SALE, NEW, ХИТ, ТОП (modules/chips.php, chips_html). Цвет — --mark.
   Не нажимается и ничего не отбирает — этим отличается от чипа gsm-chip. ── */
.gsm-mark {
	box-sizing: border-box; display: inline-flex; align-items: center; gap: 3px;
	height: 18px; padding: 0 6px 0 5px; border-radius: 5px;
	background: var(--mark, #e03a2f); color: #fff;
	font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px;
}
.gsm-mark svg { flex: none; width: 11px; height: 11px; stroke-width: 2.6; }
.gsm-marks { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ── Чипы: выбор одного значения из ряда (фильтры, теги, быстрый отбор) ── */
.gsm-chip {
	box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
	min-height: 32px; padding: 0 12px; border: 1px solid var(--gsm-line, #e4e8ec); border-radius: 999px;
	background: var(--gsm-card, #fff); color: var(--gsm-ink, #23282d);
	font-family: inherit; font-size: var(--gsm-fs-sm, 13px); line-height: 1.2; white-space: nowrap;
	cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.gsm-chip:hover { border-color: var(--gsm-blue-line, #7bbcdd); color: var(--gsm-blue-dark, #2b83b0); }
.gsm-chip.is-on, .gsm-chip[aria-pressed="true"] { border-color: var(--gsm-blue, #3399cc); background: var(--gsm-blue-soft, #f0f8fc); color: var(--gsm-blue-dark, #2b83b0); font-weight: 600; }
.gsm-chip:disabled { background: var(--gsm-bg, #f6f7f9); color: var(--gsm-ink-3, #949ba5); cursor: default; }
.gsm-chip__count { color: var(--gsm-ink-3, #949ba5); font-weight: 400; }
.gsm-chips { display: flex; flex-wrap: wrap; gap: var(--gsm-s-2, 8px); }

/* ── Выпадающий список: та же высота и рамка, что у поля ───────────────── */
.gsm-select {
	box-sizing: border-box; min-height: var(--gsm-control-h, 44px); padding: 0 34px 0 12px;
	border: 1px solid var(--gsm-line-strong, #ccd3da); border-radius: var(--gsm-r-sm, 8px);
	background: var(--gsm-card, #fff) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	color: var(--gsm-ink, #23282d); font-family: inherit; font-size: var(--gsm-fs-md, 15px);
	appearance: none; -webkit-appearance: none; cursor: pointer;
}
.gsm-select:focus { outline: none; border-color: var(--gsm-blue, #3399cc); box-shadow: var(--gsm-focus, 0 0 0 3px rgba(51, 153, 204, .15)); }

/* ── Таблица: заголовок на фоне блоков, строки через тонкую линию ───────── */
.gsm-table { width: 100%; border-collapse: collapse; font-size: var(--gsm-fs-sm, 13px); color: var(--gsm-ink, #23282d); }
.gsm-table th {
	padding: var(--gsm-s-2, 8px) var(--gsm-s-3, 12px); background: var(--gsm-bg, #f6f7f9);
	color: var(--gsm-ink-2, #6b7480); font-weight: 600; text-align: left; white-space: nowrap;
}
.gsm-table td { padding: var(--gsm-s-2, 8px) var(--gsm-s-3, 12px); border-top: 1px solid var(--gsm-line, #e4e8ec); vertical-align: top; }
.gsm-table--num td, .gsm-table--num th { font-variant-numeric: tabular-nums; }

/* ── Карточки и уведомления ────────────────────────────────────────────── */
.gsm-card {
	box-sizing: border-box; padding: var(--gsm-s-5, 20px) var(--gsm-s-6, 24px);
	border: 1px solid var(--gsm-line, #e4e8ec); border-radius: var(--gsm-r-lg, 16px);
	background: var(--gsm-card, #fff); box-shadow: var(--gsm-shadow, 0 1px 2px rgba(20, 28, 38, .05)); color: var(--gsm-ink, #23282d);
}
.gsm-note {
	box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--gsm-s-2, 8px);
	margin: 0; padding: var(--gsm-s-3, 12px) var(--gsm-s-4, 16px); border-radius: var(--gsm-r-sm, 8px);
	font-size: var(--gsm-fs-sm, 13px); line-height: 1.5; color: var(--gsm-ink, #23282d);
}
.gsm-note .gsm-i, .gsm-note svg { margin-top: 1px; }
.gsm-note--info { background: var(--gsm-blue-soft, #f0f8fc); }
.gsm-note--info svg { color: var(--gsm-blue, #3399cc); }
.gsm-note--ok { background: var(--gsm-green-soft, #eefaf3); }
.gsm-note--ok svg { color: var(--gsm-green, #17a05f); }
.gsm-note--warn { background: var(--gsm-amber-soft, #fff8e6); color: var(--gsm-amber-ink, #8a5a00); font-weight: 600; }
.gsm-note--error { background: var(--gsm-red-soft, #fdf2f2); color: var(--gsm-red-ink, #9b2c2c); }
.gsm-note--error svg { color: var(--gsm-red, #d64545); }

@media (prefers-reduced-motion: reduce) {
	.gsm-btn, .gsm-input, .gsm-chip { transition: none; }
}

/* ── Сторис (24.09.2026): карточки листаются влево-вправо, как в Instagram ──
   Разметка: .gsm-sto[data-gsm-sto] > .gsm-sto__track > карточки; полоски и
   автолистание добавляет js/gsm_stories.js. */
.gsm-sto { position: relative; min-width: 0; max-width: 100%; }
.gsm-sto__track img { max-width: 100%; }
.gsm-sto__track { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--gsm-r-card, 14px); }
.gsm-sto__track::-webkit-scrollbar { display: none; }
.gsm-sto__track > * { flex: 0 0 100%; min-width: 0; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gsm-sto__bars { position: absolute; z-index: 2; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; }
.gsm-sto__bar { flex: 1; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.45); cursor: pointer; overflow: hidden; }
.gsm-sto__bar i { display: block; width: 0; height: 100%; background: #fff; }
.gsm-sto__bar.is-done i { width: 100%; }
.gsm-sto__bar.is-on i { animation: gsm-sto-fill var(--gsm-sto-time, 5s) linear forwards; }
.gsm-sto.is-paused .gsm-sto__bar.is-on i { animation-play-state: paused; }
.gsm-sto__nav { position: absolute; z-index: 2; top: 50%; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--gsm-ink, #23282d); box-shadow: 0 2px 8px rgba(20,28,38,.2); cursor: pointer; opacity: 0; transition: opacity .2s; font-size: 18px; line-height: 30px; }
.gsm-sto__nav--prev { left: 6px; } .gsm-sto__nav--next { right: 6px; }
.gsm-sto:hover .gsm-sto__nav { opacity: 1; }
.gsm-sto__nav[disabled] { visibility: hidden; }
@keyframes gsm-sto-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .gsm-sto__track { scroll-behavior: auto; } .gsm-sto__bar.is-on i { animation: none; width: 100%; } }
/* Прилипшие сторис (левая колонка): то, что ниже, уезжает под них */
.gsm-sto.is-stick { position: sticky; z-index: 5; background: var(--gsm-card, #fff); box-shadow: 0 -12px 0 var(--gsm-card, #fff), 0 12px 0 var(--gsm-card, #fff); }

/* Поле с кнопкой-значком внутри справа (28.09.2026): пароль с «глазом». Кнопка — gsm-btn--icon */
.gsm-input-wrap { position: relative; display: block; }
.gsm-input-wrap .gsm-input { width: 100%; padding-right: 48px; }
.gsm-input-wrap .gsm-btn--icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* Фирменные кнопки мессенджеров (28.09.2026): цвета брендов, белый текст и белый логотип.
   Telegram — градиент t_logo.svg; MAX — палитра брендбука go.max.ru/brandbook */
.gsm-btn--telegram, .gsm-btn--telegram:link, .gsm-btn--telegram:visited { background: linear-gradient(180deg, #2AABEE, #229ED9); color: #fff; box-shadow: none; }
.gsm-btn--max, .gsm-btn--max:link, .gsm-btn--max:visited { background: linear-gradient(90deg, #00BFFF, #471AFF 55%, #9500FF); color: #fff; box-shadow: none; }
.gsm-btn--telegram:hover, .gsm-btn--max:hover { color: #fff; filter: brightness(.94); }
.gsm-btn--telegram:disabled, .gsm-btn--max:disabled { opacity: .45; filter: none; cursor: default; }

/* Аватар покупателя (задание №79: фото из Telegram / MAX) — круг, фото без искажений */
.gsm-avatar { display: inline-block; flex: none; border-radius: 50%; object-fit: cover; background: var(--gsm-bg, #f3f5f7); }

/* Звёзды рейтинга и отзывы с Яндекс Маркета (задание №13) */
.gsm-stars { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gsm-fs-sm, 13px); white-space: nowrap; }
.gsm-stars__bar { position: relative; display: inline-block; width: 80px; height: 14px; background: linear-gradient(90deg, #d6dbe0 0 100%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M8 0l2 4.6 5 .5-3.8 3.3 1.1 4.9L8 10.8 3.7 13.3l1.1-4.9L1 5.1l5-.5z'/%3E%3C/svg%3E") repeat-x left / 16px 14px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M8 0l2 4.6 5 .5-3.8 3.3 1.1 4.9L8 10.8 3.7 13.3l1.1-4.9L1 5.1l5-.5z'/%3E%3C/svg%3E") repeat-x left / 16px 14px; }
.gsm-stars__bar > span { position: absolute; inset: 0 auto 0 0; background: var(--gsm-amber, #f5a623); }
.gsm-reviews { display: flex; flex-direction: column; gap: var(--gsm-s-3, 12px); }
.gsm-review-item { padding: var(--gsm-s-3, 12px) 0; border-top: 1px solid var(--gsm-line, #e6e9ec); }
.gsm-review-item header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.gsm-review-item p { margin: 4px 0; }
.gsm-review-item__answer { padding: 8px 12px; border-radius: 8px; background: var(--gsm-bg, #f3f5f7); }