/* =========================================================
   OT Shop - shared styles
   Color palette taken from the existing app screenshots:
   - cyan/teal accent (buttons, active nav, totals)
   - light gray background, white cards
   ========================================================= */

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #eef0ff;
  --bg: #f1f3f5;
  --card: #ffffff;
  --text: #1f2933;
  --text-muted: #9aa5b1;
  --border: #e7eaee;
  --danger: #ff5c5c;
  --warning: #ff9f43;
  --success: #2ecc71;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 10px rgba(20, 30, 40, 0.06);
}

* {
  box-sizing: border-box;
}

/* Кнопка "Esc" веб-версии (2026-09-19) - аналог физической/жестовой
   кнопки "назад" на Android для десктопного браузера, см. index.html.
   Скрыта по умолчанию - показывается ТОЛЬКО у устройств с настоящим
   курсором (hover:hover + pointer:fine надёжнее отличает "мышь" от
   "палец", чем один любой из них по отдельности). position:fixed - от
   ВСЕГО окна браузера, не от центрированного "телефонного" контейнера
   (см. комментарий про background ниже) - осознанно: пользователь просил
   именно "в самом верхнем левом углу". */
#btn-web-esc {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999999;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 30, 40, 0.12);
  opacity: 0.85;
}
#btn-web-esc:hover {
  opacity: 1;
  color: var(--primary);
  border-color: var(--primary);
}
/* 2026-09-19 - по прямой просьбе пользователя саму кнопку скрыли
   (осталась только клавиша Esc на клавиатуре, см. keydown-обработчик в
   index.html - он не зависит от видимости кнопки). Раньше здесь было
   правило, показывающее #btn-web-esc на устройствах с настоящим курсором
   (@media hover:hover and pointer:fine) - если понадобится вернуть
   видимую кнопку, достаточно снова добавить его. */

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #d8dbdf; /* фон за пределами мобильного контейнера на широких экранах */
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------
   Screen & visibility system
   --------------------------------------------------------- */
.screen-wrap {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--bg);
  overflow: hidden;
}
.hidden {
  display: none !important;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* "О товаре" (2026-09-20) с полноэкранной карты "Магазины" открывает эту
   же модалку ПОВЕРХ ещё открытой modal-product-stores-map (z-index:250) -
   без переопределения карточка рендерилась бы технически открытой, но
   визуально ПОД картой (обычный .modal-overlay = z-index:200), тот же
   класс бага, что уже был у .toast (см. комментарий там) - решение то же:
   явный z-index выше карты именно у этой модалки. */
#modal-product-detail {
  z-index: 260;
}

/* "Карта" магазинов (2026-09-20) - ОТДЕЛЬНОЕ полноэкранное окно поверх
   modal-product-stores (z-index выше), не маленькая модалка-переключатель. */
.fullscreen-map-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.fullscreen-map-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.fullscreen-map-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
}
.fullscreen-map-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Фото товара (2026-09-20) - по прямой просьбе пользователя занимает
   левый верхний угол вместо крестика (крестик перенесён направо, см.
   .fullscreen-map-close). Бокс ВСЕГДА чисто белый фон - тот же стандарт,
   что и везде в проекте для боксов с фото товара (не логотипа/аватара),
   см. .product-img в этом же файле. */
.fullscreen-map-photo-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.fullscreen-map-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fullscreen-map-photo-placeholder {
  font-size: 20px;
  color: var(--text-muted);
}

/* Полноэкранный просмотр фото товара с карты "Магазины" (2026-09-20) -
   тот же принцип, что modal-product-photo-view в OT Shop: тёмный фон, тап
   по фону закрывает, кнопка "О товаре" слева сверху. */
.ps-photo-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: pointer;
}
.ps-photo-view-about-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  /* 2026-09-21 (доб.) - у увеличенного фото (transform:scale() в зуме)
     свой stacking context, без явного z-index кнопка оказывалась ПОД
     ним и переставала ловить тапы после зума (найдено пользователем) -
     тот же z-index:1, что уже стоит у аналогичной кнопки в OT Shop/
     OT Admin (btn-photo-view-about-product). */
  z-index: 1;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.fullscreen-map-canvas {
  flex: 1;
  min-height: 0;
}
.fullscreen-map-locate-btn {
  position: absolute;
  right: 16px;
  bottom: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Leaflet-контролы (напр. атрибуция "Leaflet | © OpenStreetMap" в
     правом нижнем углу карты) сидят на z-index:1000 - при z-index:500
     нижний край этой круглой кнопки перекрывался их кликабельной зоной,
     и тап чуть ниже центра кнопки уходил в ссылку атрибуции вместо
     кнопки (реальный баг, найден через elementFromPoint на границе
     перекрытия). z-index выше 1000 + сдвиг подальше от нижнего края - и
     кнопка теперь всегда "выше" контролов карты. */
  z-index: 1100;
}

/* Средняя цена по ближайшим точкам (2026-09-21, доб.) - справа от
   Leaflet-зума (.leaflet-control-zoom сидит в top:10px/left:10px
   относительно .leaflet-container - тот же контейнер, что #product-
   stores-map). z-index:1100 - тот же приём, что и у .fullscreen-map-
   locate-btn выше (Leaflet-контролы сидят на 1000, иначе перекрывали бы). */
.consumer-map-avg-price-badge {
  position: absolute;
  top: 10px;
  left: 54px;
  z-index: 1100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  pointer-events: none;
  white-space: nowrap;
}

/* Легенда цветов флажков (2026-09-21, доб.) - низ-лево карты; низ-право
   занято кнопкой-прицелом (.fullscreen-map-locate-btn) и стандартной
   Leaflet-атрибуцией (тоже bottom-right по умолчанию) - конфликта нет.
   z-index:1100 - тот же приём, что и у остальных элементов поверх карты. */
.consumer-map-legend {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  pointer-events: none;
}
.consumer-map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.consumer-map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.consumer-map-legend-dot.status-green { background: var(--success, #2ecc71); }
.consumer-map-legend-dot.status-blue { background: #2563eb; }

/* Кастомные маркеры товара на карте (divIcon, не стандартный синий пин
   Leaflet) - цена НАД флажком, цвет флажка = market_status ТТ
   (crud._consumer_store_market_status): "green" - принимает И продаёт
   через приложение, "blue" - только принимает, "gray" - ни то, ни другое. */
.consumer-map-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-6px);
}
.consumer-map-marker-price {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(15,23,42,0.85);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  margin-bottom: 2px;
}
.consumer-map-marker-price.status-green { background: var(--success, #2ecc71); }
.consumer-map-marker-price.status-blue { background: #2563eb; }
.consumer-map-marker-price.status-gray { background: #6b7280; }
.consumer-map-marker-flag {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
/* 2026-09-21 (изм. третий раз, прямая просьба пользователя) - флажок
   ВСЕГДА бирюзовый (#13c2c2, системный цвет OT Shop - см. CLAUDE.md:
   "OT Shop - бирюзовый #13c2c2") - на этой карте и так показаны только
   ТТ, реально зарегистрированные в приложении (есть остаток товара),
   market_status здесь больше не участвует (остался только у ценника,
   .status-* ниже у .consumer-map-marker-price). Дружба (is_friend) не
   меняет цвет флажка - она меняет ЗАЛИВКУ белого кружка в центре (см.
   centerFill в app.js) на СПЛОШНОЙ тот же бирюзовый ("кольцо" vs
   "сплошной"), поэтому второго цвета/класса здесь не нужно. */
.consumer-map-marker-flag.flag-teal { color: #13c2c2; }
/* Leaflet's default .leaflet-div-icon рисует белый бокс с рамкой - гасим
   его, наш маркер сам себя рисует (SVG-пин + цена). */
.consumer-map-marker-icon-wrap {
  background: transparent !important;
  border: none !important;
}

/* ---------------------------------------------------------
   Status bar (decorative, mimics the phone screenshots)
   --------------------------------------------------------- */
.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px 0 16px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
}

.topbar.solid {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 20px;
  flex-shrink: 0;
}
.icon-btn:active {
  background: var(--border);
}

/* ---------------------------------------------------------
   Content area
   --------------------------------------------------------- */
.screen {
  flex: 1;
  padding: 0 16px 90px 16px;
  overflow-y: auto;
}

.screen.no-pad {
  padding: 0 0 90px 0;
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
}
.card-row + .card-row {
  border-top: 1px solid var(--border);
}
.card-row .label {
  color: var(--text-muted);
  font-size: 14px;
}
.card-row .value {
  font-weight: 600;
  font-size: 14px;
  text-align: right;
}

/* 2026-09-21 (доб., прямая просьба пользователя) - длинный свободный текст
   ("Описание"/"Состав" товара) в обычной .card-row (value справа, в одну
   строку по смыслу) при переносе выглядел "порушенным". .card-row-block
   переключает на блочную вёрстку - класс ДОБАВЛЯЕТСЯ к .card-row (не
   заменяет), разделитель ".card-row + .card-row" между строками работает
   как раньше. */
.card-row.card-row-block {
  display: block;
}
.card-row.card-row-block .label {
  display: block;
  margin-bottom: 5px;
}
.card-row.card-row-block .value {
  display: block;
  text-align: left;
  white-space: pre-wrap;
  line-height: 1.5;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:active {
  background: var(--primary-dark);
}

.btn-secondary {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.btn-secondary:active {
  background: #cdf3f3;
}

.btn-outline {
  background: transparent;
  color: var(--primary-dark);
  border: 1.5px solid var(--primary);
}

.btn-danger-outline {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}

.btn-row {
  display: flex;
  gap: 10px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
}
.field input[type="radio"] {
  width: auto;
  flex-shrink: 0;
}
.field .radio-option {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
.field textarea {
  resize: vertical;
  min-height: 70px;
}
.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.field-hint.field-hint-error {
  color: var(--danger, #ff5c5c);
}

.field-hint.field-hint-valid {
  color: var(--success, #2e9e5b);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  outline: none;
  color: var(--text);
}
.search-bar .icon {
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   Chips / filters
   --------------------------------------------------------- */
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin: -2px -2px 0 -2px;
}
.chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}
.chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.chip-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-with-icon .pm-icon {
  width: 16px;
  height: 16px;
  border: none;
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------
   List items (customers, debts, products)
   --------------------------------------------------------- */
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.list-item:active {
  background: #fafbfc;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-item-body {
  flex: 1;
  min-width: 0;
}
.list-item-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-sub {
  font-size: 13px;
  color: var(--text-muted);
}
.list-item-end {
  text-align: right;
  flex-shrink: 0;
}
.list-item-amount {
  font-weight: 700;
  font-size: 15px;
}
.list-item-chevron {
  color: var(--text-muted);
  font-size: 18px;
  margin-left: 4px;
}

/* ---------------------------------------------------------
   Badges / statuses
   --------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-overdue {
  background: #ffe5e5;
  color: var(--danger);
}
.badge-due {
  background: #fff3e0;
  color: var(--warning);
}
.badge-open {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.badge-paid {
  background: #e6f9ee;
  color: var(--success);
}
.badge-nodate {
  background: #f0f1f3;
  color: var(--text-muted);
}
.badge-partial {
  background: #fff3e0;
  color: var(--warning);
}
.badge-cancelled {
  background: #f0f1f3;
  color: var(--text-muted);
  text-decoration: line-through;
}
.badge-expired {
  background: #ffe5e5;
  color: var(--danger);
}

/* Истёкшее по периоду уведомление в ленте - бледнее, чтобы визуально
   отличалось от актуальных, но остаётся читаемым и кликабельным */
.history-row.notif-expired {
  opacity: 0.55;
}

/* ---------------------------------------------------------
   History rows (debts / payments on customer detail card)
   --------------------------------------------------------- */
.history-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.history-row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.history-row-title {
  font-weight: 600;
  font-size: 14px;
}

/* Иконки способов оплаты - в истории платежей, модалке оплаты, чеке.
   Размер синхронизирован с frontend-shop (40px, под высоту поля/окна
   способа оплаты). */
.pm-icon {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 3px;
  flex-shrink: 0;
}
.pm-icon-sm {
  width: 40px;
  height: 40px;
}
.history-row-amount {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.history-row-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.history-row-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   Dashboard tiles
   --------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.tile {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.tile-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.tile-value {
  font-size: 20px;
  font-weight: 700;
}
.tile-value.danger { color: var(--danger); }
.tile-value.warning { color: var(--warning); }
.tile-value.primary { color: var(--primary-dark); }

.hero-card {
  background: linear-gradient(135deg, var(--primary), #4338ca);
  border-radius: var(--radius);
  padding: 18px;
  color: #fff;
  margin-bottom: 12px;
}
.hero-card .hero-label {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.hero-card .hero-value {
  font-size: 28px;
  font-weight: 800;
}
.hero-card .hero-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 6px;
}

/* ---------------------------------------------------------
   Section headers
   --------------------------------------------------------- */
.section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 18px 0 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title .link {
  font-size: 13px;
  color: var(--primary-dark);
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------
   Bottom navigation
   --------------------------------------------------------- */
.bottom-nav {
  position: absolute; /* привязка к .screen-wrap (position: fixed), а не к окну */
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 398px;
  display: flex;
  background: var(--text);
  border-radius: 40px;
  padding: 10px 8px;
  box-shadow: 0 4px 24px rgba(20, 30, 40, 0.22);
  z-index: 100;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  padding: 4px 0;
  transition: color 0.15s;
}
.nav-item.active {
  color: #ffffff;
}
.nav-item .nav-icon {
  font-size: 22px;
}

/* ---------------------------------------------------------
   Empty state
   --------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}
.empty-state .emoji {
  font-size: 40px;
  margin-bottom: 10px;
}
.empty-state .title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* ---------------------------------------------------------
   Modal / bottom sheet
   --------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 40, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}
.sheet {
  background: var(--card);
  width: 100%;
  max-width: 430px;
  border-radius: 18px 18px 0 0;
  padding: 18px 16px 24px 16px;
  max-height: 88vh;
  overflow-y: auto;
}
.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 14px auto;
}
.sheet h2 {
  margin: 0 0 12px 0;
  font-size: 17px;
}

/* ---------------------------------------------------------
   Receipt ("Чек") styling
   --------------------------------------------------------- */
.receipt-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.receipt-store {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 4px;
}
.receipt-store .receipt-code {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.receipt-address {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.receipt-item {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.receipt-item-row {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
}
.receipt-item-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.receipt-total {
  font-size: 22px;
  font-weight: 800;
  margin-top: 16px;
}
.receipt-thanks {
  text-align: center;
  font-weight: 700;
  margin: 18px 0 4px 0;
}
.receipt-qr {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}
.receipt-qr img {
  width: 130px;
  height: 130px;
}

/* ---------------------------------------------------------
   Photos
   --------------------------------------------------------- */
.photo-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.photo-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
}
.photo-add {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1.5px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-muted);
  flex-shrink: 0;
  cursor: pointer;
  background: var(--bg);
}

/* ---------------------------------------------------------
   Calendar
   --------------------------------------------------------- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.calendar-dow {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  padding-bottom: 6px;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--card);
  position: relative;
}
.calendar-day.empty {
  background: transparent;
  cursor: default;
}
.calendar-day.has-debt {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.calendar-day.has-overdue {
  background: #ffe5e5;
  color: var(--danger);
}
.calendar-day.today {
  border: 2px solid var(--primary);
}
.calendar-day .dot-amount {
  font-size: 9px;
  font-weight: 700;
  margin-top: 1px;
}
.calendar-month-label {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2933;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  /* Было 100 - ниже .modal-overlay (200), поэтому тост с ошибкой
     ("номер уже зарегистрирован" и т.п.) технически показывался, но
     рендерился ПОД открытой модалкой и был не виден пользователю.
     Тост должен быть видно всегда, даже поверх открытой модалки. */
  z-index: 300;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

/* ---------------------------------------------------------
   Product grid (Касса)
   --------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.product-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  position: relative;
}
.product-card .qty-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 7px;
}
.product-img {
  width: 100%;
  height: 64px;
  border-radius: 8px;
  /* Белый фон по умолчанию для фото товара - см. CLAUDE.md, тот же
     стандарт, что и .cassa-tile-image-wrap в OT Shop (object-fit:contain
     не всегда заполняет бокс целиком у непрямоугольных фото). */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 8px;
}
.product-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
  min-height: 34px;
}
.product-price {
  font-size: 13px;
  color: var(--primary-dark);
  font-weight: 700;
}
/* 2026-09 (доб.) - кнопка "Магазины (N)" прямо на плитке товара (поиск в
   OT Consumer) - отдельная от тапа по всей карточке (тот открывает
   карточку товара), клик по кнопке останавливает всплытие. */
.product-card-stores-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  border-radius: 10px;
  border: none;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cart-bar {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-top: 12px;
}
.cart-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cart-total {
  font-weight: 700;
  font-size: 16px;
}
.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qty-control button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------------------
   Notification dot
   --------------------------------------------------------- */
.notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
}
.icon-btn-wrap {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
  border: 2px solid var(--bg);
  line-height: 1;
}

/* =========================================================
   Bottom sheet (модалки снизу)
   ========================================================= */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bottom-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 4px;
}
.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.bottom-sheet-title {
  font-weight: 700;
  font-size: 17px;
}

/* =========================================================
   Заглушки: Товары
   ========================================================= */
.stub-banner {
  border-radius: 16px;
  padding: 20px;
  color: #fff;
  text-align: center;
  margin: 16px 0;
}
.stub-banner-icon { font-size: 36px; margin-bottom: 8px; }
.stub-banner-title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.stub-banner-sub { font-size: 13px; opacity: 0.88; line-height: 1.5; }

.stub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stub-product-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
}
.stub-product-img  { font-size: 28px; margin-bottom: 6px; }
.stub-product-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.stub-product-price{ font-size: 12px; color: var(--primary); font-weight: 700; }

/* =========================================================
   Заглушки: Акции
   ========================================================= */
.deals-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.deal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border-radius: 14px;
  padding: 14px;
}
.deal-badge {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  padding: 4px 8px;
  white-space: nowrap;
  min-width: 40px;
  text-align: center;
}
.deal-info { flex: 1; }
.deal-name { font-weight: 700; font-size: 14px; }
.deal-desc { font-size: 12px; color: var(--text-muted); margin: 2px 0 4px; }
.deal-old  { color: var(--text-muted); text-decoration: line-through; font-size: 13px; }
.deal-new  { color: var(--success); font-weight: 700; font-size: 13px; }
.deal-emoji{ font-size: 28px; }

/* =========================================================
   Профиль
   ========================================================= */
.profile-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  font-size: 14px;
}
.profile-field-row.bordered {
  border-bottom: 1px solid var(--border);
}
.profile-field-label {
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Профиль ── */
.profile-hero { text-align:center; padding:24px 16px 20px; }
.profile-avatar-big {
  width:88px; height:88px; border-radius:50%;
  background:var(--primary); display:flex;
  align-items:center; justify-content:center;
  font-size:34px; color:#fff; margin:0 auto; font-weight:700;
}
.profile-field-row { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; font-size:14px; }
.profile-field-row.bordered { border-bottom:1px solid var(--border); }
.profile-field-label { color:var(--text-muted); font-size:13px; }
.btn-logout-red { width:100%; background:var(--bg); color:var(--danger); border:none; font-size:15px; padding:14px; border-radius:12px; cursor:pointer; font-family:inherit; font-weight:600; margin-bottom:16px; }

/* ── Бейдж ── */
.notif-badge {
  position:absolute; top:1px; right:1px; min-width:17px; height:17px;
  border-radius:9px; background:var(--danger); color:#fff; font-size:10px;
  font-weight:700; display:none; align-items:center; justify-content:center;
  padding:0 4px; pointer-events:none; border:2px solid var(--bg); line-height:1;
}

/* ── Товары ── */
.stub-banner { border-radius:16px; padding:20px; color:#fff; text-align:center; margin:16px 0 0; }
.stub-banner-icon { font-size:36px; margin-bottom:8px; }
.stub-banner-title { font-weight:700; font-size:17px; margin-bottom:6px; }
.stub-banner-sub { font-size:13px; opacity:.88; line-height:1.5; }
.stub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stub-product-card { background:var(--card); border-radius:12px; padding:12px 8px; text-align:center; cursor:pointer; box-shadow:var(--shadow); }
.stub-product-img { font-size:28px; margin-bottom:6px; }
.stub-product-name { font-size:11px; font-weight:600; color:var(--text); margin-bottom:4px; line-height:1.3; }
.stub-product-price { font-size:12px; color:var(--primary); font-weight:700; }

/* ── Акции ── */
.deals-list { display:flex; flex-direction:column; gap:10px; }
.deal-card { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; padding:14px; box-shadow:var(--shadow); }
.deal-badge { background:var(--danger); color:#fff; font-weight:700; font-size:12px; border-radius:8px; padding:4px 8px; white-space:nowrap; min-width:40px; text-align:center; flex-shrink:0; }
.deal-info { flex:1; }
.deal-name { font-weight:700; font-size:14px; }
.deal-desc { font-size:12px; color:var(--text-muted); margin:2px 0 4px; line-height:1.4; }
.deal-old { color:var(--text-muted); text-decoration:line-through; font-size:13px; }
.deal-new { color:var(--success); font-weight:700; font-size:13px; }
.deal-emoji { font-size:28px; flex-shrink:0; }

/* ── Bottom nav ── */
.bottom-nav {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  width:calc(100% - 32px); max-width:398px;
  display:flex; background:var(--text); border-radius:40px;
  padding:10px 8px; box-shadow:0 4px 24px rgba(20,30,40,.22); z-index:100;
}
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:rgba(255,255,255,.5); font-size:10px; cursor:pointer; border:none; background:none; font-family:inherit; padding:4px 0; transition:color .15s; }
.nav-item.active { color:#fff; }
.nav-item .nav-icon { font-size:22px; }

/* QR SVG иконка в bottom-nav */
.qr-nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0; /* скрыть если вдруг текст */
}
.qr-nav-icon svg {
  width: 24px;
  height: 24px;
  color: inherit; /* наследует цвет от .nav-item / .nav-item.active */
}

/* =========================================================
   Календарь выбора даты ответа покупателя
   ========================================================= */
.reply-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.reply-cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
}
.reply-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 16px;
}
.reply-cal-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.reply-cal-day-active {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}
.reply-cal-day-active:hover {
  background: var(--primary);
  color: #fff;
}
.reply-cal-day-disabled {
  color: var(--border);
  cursor: default;
}
.reply-cal-day-selected {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 700;
}

/* =========================================================
   OT Consumer: регистрация покупателя на экране входа
   ========================================================= */
.consumer-login-select-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.consumer-login-select-row select {
  flex: 1;
  min-width: 0;
}
.consumer-login-add-btn {
  width: 48px;
  min-width: 48px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
}
.consumer-login-add-btn:active {
  background: var(--primary-dark);
}
.consumer-register-card {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}
.consumer-register-passport-stub {
  min-height: 78px;
  resize: none;
  color: var(--text);
  background: #f7f8fb !important;
  opacity: 1;
  cursor: not-allowed;
}

/* =========================================================
   OT Consumer: фото при регистрации покупателя
   ========================================================= */
.consumer-register-photo-field {
  margin-top: 2px;
}
.consumer-photo-register-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.consumer-photo-placeholder {
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}
.consumer-photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.consumer-photo-register-text {
  flex: 1;
  min-width: 0;
}
.consumer-photo-choice-card {
  width: 100%;
  max-width: 340px;
  padding: 18px;
}
.profile-avatar-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* =========================================================
   OT Consumer: плитка и модалка «Личные данные»
   ========================================================= */
.personal-data-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.personal-data-tile:active { background: #fafbfc; }

/* "Настройка категорий" (Профиль -> Настройки) */
.category-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.category-settings-row:last-child { border-bottom: none; }
.category-settings-row .cs-name { flex: 1; font-size: 14px; min-width: 0; }
.category-settings-row input[type="checkbox"],
.category-settings-row input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.cs-default-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.personal-data-card {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}
.personal-photo-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 16px 0;
}
.personal-photo-avatar {
  width: 82px;
  height: 82px;
  min-width: 82px;
  border-radius: 50%;
  border: none;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}
.personal-photo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.personal-passport-stub {
  min-height: 78px;
  resize: none;
  color: var(--text);
  background: #f7f8fb !important;
  opacity: 1;
  cursor: not-allowed;
}
.personal-delete-account-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--danger);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 10px 4px;
  margin-top: 8px;
  cursor: pointer;
  font-family: inherit;
}
.personal-delete-account-btn:active { opacity: 0.65; }
.field input:disabled,
.field textarea:disabled {
  color: var(--text);
  background: #f7f8fb;
  opacity: 1;
  -webkit-text-fill-color: var(--text);
}



/* OT Consumer fix: scrollable reply calendar modal */
#modal-reply-calendar {
  align-items: center;
}
#modal-reply-calendar > .card {
  max-height: calc(100vh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#reply-cal-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 24px !important;
}
#modal-reply-calendar .card > div:last-child {
  flex-shrink: 0 !important;
  background: var(--card) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}


/* =========================================================
   OT Consumer: multi-store wallet (Stage 2)
   ========================================================= */
.wallet-store-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 14px;
}
.wallet-store-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.wallet-store-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.wallet-store-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.35;
}
.wallet-store-debt {
  text-align: right;
  flex-shrink: 0;
}
.wallet-store-debt-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.wallet-store-debt-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--danger);
  white-space: nowrap;
}
.wallet-store-section {
  margin-top: 12px;
}
.wallet-store-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.wallet-store-card .history-row {
  box-shadow: none;
  border: 1px solid var(--border);
  margin-bottom: 7px;
}
.wallet-mini-empty {
  background: var(--bg);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}


/* =========================================================
   OT Consumer: wallet UI fix — force Stage 2 card layout
   ========================================================= */
#md-wallet-store-list { display: block; margin-top: 10px; }
.wallet-store-card {
  display: block !important;
  background: var(--card) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
  padding: 14px !important;
  margin: 12px 0 16px 0 !important;
  overflow: hidden !important;
}
.wallet-store-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}
.wallet-store-name {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
.wallet-store-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
  line-height: 1.35 !important;
}
.wallet-relation-badge {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  margin-top: 6px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.wallet-relation-badge.removed {
  background: #ffe5e5 !important;
  color: var(--danger) !important;
}
.wallet-store-debt {
  text-align: right !important;
  flex-shrink: 0 !important;
  min-width: 92px !important;
}
.wallet-store-debt-label {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-bottom: 3px !important;
}
.wallet-store-debt-value {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--danger) !important;
  white-space: nowrap !important;
}
.wallet-store-section { margin-top: 13px !important; }
.wallet-store-section-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}
.wallet-store-card .history-row {
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 7px !important;
  background: #fff !important;
}
.wallet-store-card .history-row.notif-expired {
  opacity: .72 !important;
  background: #fafafa !important;
}
.wallet-mini-empty {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}


/* =========================================================
   OT Consumer: wallet store detail screen (Stage 2)
   ========================================================= */
.wallet-store-card.wallet-store-card-compact {
  cursor: pointer !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}
.wallet-store-card.wallet-store-card-compact:active {
  transform: scale(.992) !important;
  background: #fafbfc !important;
}
.wallet-store-card-compact .wallet-store-header {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.wallet-store-summary-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.wallet-summary-pill {
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
}
.wallet-summary-pill.danger {
  background: #ffe5e5;
  color: var(--danger);
}
.wallet-summary-pill.success {
  background: #e6f9ee;
  color: var(--success);
}
.wallet-card-chevron {
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  margin-left: 2px;
}
.wallet-store-detail-hero {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 14px;
}
.wallet-store-detail-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}
.wallet-store-detail-meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
}
.wallet-store-detail-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.wallet-store-detail-total .label {
  font-size: 12px;
  color: var(--text-muted);
}
.wallet-store-detail-total .value {
  font-size: 22px;
  font-weight: 900;
  color: var(--danger);
  white-space: nowrap;
}

/* =========================================================
   OT Consumer: wallet store detail - Календарь + История
   (Долги / Чеки) - тот же паттерн, что и в OT Shop / Карточка
   покупателя / Календарь / История (Долги, Платежи, Уведомления),
   но с двумя вкладками вместо трёх.
   ========================================================= */
#screen-wallet-store-detail .wsd-history-calendar-card,
#screen-wallet-store-detail .wsd-history-tabs-card,
#screen-wallet-store-detail .wsd-history-data-card {
  padding: 14px;
  margin-bottom: 12px;
}

#screen-wallet-store-detail .wsd-history-calendar-card {
  position: relative;
}

#screen-wallet-store-detail .wsd-history-block-title {
  margin: 0 0 10px 0;
  padding-right: 92px;
  line-height: 20px;
}

#screen-wallet-store-detail .wsd-history-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#screen-wallet-store-detail .wsd-amount-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#screen-wallet-store-detail .wsd-amount-filter-row .wsd-date-box {
  flex: 1;
  min-width: 0;
}

#screen-wallet-store-detail .wsd-amount-filter-row .chip {
  flex-shrink: 0;
  margin: 0;
}

#screen-wallet-store-detail .wsd-receipts-total {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

#screen-wallet-store-detail .wsd-date-box {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 9px;
  background: #fff;
  color: var(--text-muted);
  font-size: 13px;
  box-sizing: border-box;
}

#screen-wallet-store-detail .wsd-date-box input {
  border: none;
  background: transparent;
  min-width: 0;
  width: 100%;
  padding: 0;
  font-size: 13px;
  color: var(--text);
  outline: none;
}

#screen-wallet-store-detail .wsd-history-reset-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: auto;
  height: 20px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--danger);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

#screen-wallet-store-detail .wsd-history-filter-hint {
  display: none;
}

#screen-wallet-store-detail .wsd-history-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

#screen-wallet-store-detail .wsd-history-tab {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 10px 6px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

#screen-wallet-store-detail .wsd-history-tab.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
}

#screen-wallet-store-detail .wsd-history-tab-icon {
  font-size: 18px;
  line-height: 1;
}

#screen-wallet-store-detail .wsd-history-tab-main {
  white-space: nowrap;
}

#screen-wallet-store-detail .wsd-history-panel.hidden {
  display: none;
}


/* =========================================================
   OT Consumer: stores / friend requests (Stage 3)
   ========================================================= */
.store-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border-radius: 14px;
  padding: 11px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.store-search-bar .icon { color: var(--text-muted); }
.store-search-bar input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  width: 100%;
  font-family: inherit;
}

/* ---------------------------------------------------------
   "Товары" - иконка категории поиска + выпадающий список
   --------------------------------------------------------- */
.catalog-search-bar { position: relative; }
.category-filter-btn { color: var(--text-muted); }
.category-filter-btn.active { background: var(--primary-light); color: var(--primary-dark); }
.category-dropdown {
  position: absolute;
  top: 54px;
  left: 0;
  z-index: 50;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  min-width: 230px;
  max-width: 85vw;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
}
.category-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14px;
  cursor: pointer;
}
.category-dropdown-item:active { background: var(--bg); }
.category-dropdown-item.active { color: var(--primary-dark); font-weight: 700; }
.consumer-store-card {
  position: relative;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 10px;
}
/* 2026-09-21 (доб., затем перенесено в нижний правый угол по прямой
   просьбе пользователя) - бейдж-кружок на карточке ТТ (экран "Магазины" +
   список "Магазины (N)" при поиске товара): бирюзовое КОЛЬЦО (белый
   центр) - ТТ зарегистрирована в ОптимТрейд, СПЛОШНОЙ бирюзовый -
   покупатель в друзьях с этой ТТ (is_friend/статус "В друзьях"). Критерий
   "зарегистрирована" - см. комментарий у _consumerRegBadgeHtml в app.js.
   Ничего не показываем, если ТТ не зарегистрирована и не друг. */
.consumer-store-reg-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #13c2c2;
}
.consumer-store-reg-badge.reg-badge-ring { background: #fff; }
.consumer-store-reg-badge.reg-badge-solid { background: #13c2c2; }
.consumer-store-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.consumer-store-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
}
.consumer-store-body { flex: 1; min-width: 0; }
.consumer-store-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
/* "Отображение цены" (2026-09-20) - цена справа сверху, напротив названия
   ТТ (по прямой просьбе пользователя), а не отдельной строкой ниже. */
.consumer-store-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.consumer-store-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--success);
  white-space: nowrap;
  flex-shrink: 0;
}
.consumer-store-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 3px;
}
.consumer-store-status {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.consumer-store-status.success { background: #e6f9ee; color: var(--success); }
.consumer-store-status.pending { background: #fff3e0; color: var(--warning); }
.consumer-store-status.danger { background: #ffe5e5; color: var(--danger); }
.consumer-store-status.neutral { background: var(--bg); color: var(--text-muted); }
/* 2026-09-21 (изм., прямая просьба пользователя) - раньше .btn растягивала
   кнопку на всю ширину карточки (display:flex + width:100%); теперь
   display:inline-flex + width:auto - кнопка сжимается по содержимому и,
   как блочный элемент без обёртки-флекса, остаётся у левого края. */
.consumer-store-request-btn {
  display: inline-flex;
  width: auto;
  margin-top: 12px;
  padding: 10px 18px;
  font-size: 13px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
}
.consumer-store-request-btn:disabled {
  background: var(--bg);
  color: var(--text-muted);
  opacity: 1;
}
.store-empty-card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}


/* =========================================================
   OT Consumer: clickable store cards refinement (Stage 3)
   ========================================================= */
.consumer-store-card-clickable {
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.consumer-store-card-clickable:active {
  transform: scale(.992);
  background: #fafbfc;
}
.consumer-store-request-btn {
  position: relative;
  z-index: 2;
}

/* Stage 4.2.5.2: цвет кнопки "Отменить запрос" как у статуса "Ожидает подтверждения" */
.consumer-store-request-btn[data-action="cancel"] {
  background: #fff3e0;
  color: var(--warning);
}
.consumer-store-request-btn[data-action="cancel"]:active {
  background: #ffe6bd;
}


/* Stage 4.2.6: покупатель может отменить дружбу с магазином */
.consumer-store-request-btn[data-action="cancel-friendship"] {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}
.consumer-store-request-btn[data-action="cancel-friendship"]:active {
  background: #ffe5e5;
}

/* Stage 4.2.6.2: кнопка "Отменить дружбу" в верхней части карточки магазина */
.consumer-store-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.consumer-store-title-row .consumer-store-title {
  flex: 1;
  min-width: 0;
}
.consumer-store-friendship-top-btn {
  width: auto !important;
  margin-top: 0 !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}


/* Stage 4.2.6.3: кнопка "Отменить дружбу" только внутри детальной карточки магазина */
.wallet-store-detail-title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}
.wallet-store-detail-title-row .wallet-store-detail-title {
  flex: 1 !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}
.wallet-store-cancel-friendship-btn {
  width: auto !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--danger) !important;
  background: transparent !important;
  color: var(--danger) !important;
  border-radius: 999px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.wallet-store-cancel-friendship-btn:active {
  background: #ffe5e5 !important;
}
.wallet-store-cancel-friendship-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}