/* ═══════════════════════════════════════════════════════════════
   Жидкое стекло: базовая поверхность и элементы управления

   Два материала, и разница принципиальная:

   .glass   — настоящее стекло: размывает то, что под ним.
              Только для плавающих слоёв, которые НЕ прокручиваются:
              таб-бар, прилипшая шапка, шторка, тост, панель заказа.
              backdrop-filter на прокручиваемом элементе заставляет
              браузер пересобирать размытие на каждом кадре — отсюда
              и брались рывки при прокрутке.

   .pane    — то же ощущение стекла, но без размытия фона: плотность
              даёт полупрозрачная заливка, световая кромка и тень.
              Для всего, что едет вместе с содержимым.
   ═══════════════════════════════════════════════════════════════ */

/* ── общая кромка: тонкий световой кант по краю ──────────────── */
.glass,
.pane {
  position: relative;
  isolation: isolate;
}

.glass::before,
.pane::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.9px;
  /* Свет падает сверху-слева, слабый отражённый подхват снизу-справа —
     от этого край читается как толщина стекла, а не как обводка. */
  background: linear-gradient(
    148deg,
    var(--spec) 0%,
    var(--spec-2) 26%,
    transparent 52%,
    transparent 72%,
    var(--spec-2) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* ── плавающее стекло ────────────────────────────────────────── */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--inner-top), inset 0 -1px 0 var(--inner-bottom);
}

/* мягкий диагональный блик по телу стекла */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 46%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}
:root[data-theme='dark'] .glass::after { opacity: 0.3; }

.glass-strong { background: var(--glass-strong); }
.glass-flat::after { display: none; }

/* Fallback: без backdrop-filter стекло становится плотной подложкой */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--bg-2) 92%, transparent); }
}

/* ── прокручиваемая поверхность ──────────────────────────────── */
.pane {
  background: var(--surface);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--inner-top);
}
.pane-2 { background: var(--surface-2); }
.pane-weak {
  background: var(--surface-weak);
  box-shadow: inset 0 1px 0 var(--inner-top);
}

/* ── кнопки ──────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: var(--surface-2);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--inner-top);
  transition: transform var(--t-fast) var(--out-expo), background-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  overflow: hidden;
  user-select: none;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.9px;
  background: linear-gradient(148deg, var(--spec), var(--spec-2) 30%, transparent 56%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn:active { transform: scale(0.955); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-primary {
  background: var(--solid);
  color: var(--solid-ink);
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(11, 11, 12, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
:root[data-theme='dark'] .btn-primary { box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.9); }
.btn-primary::before { background: linear-gradient(148deg, rgba(255, 255, 255, 0.38), transparent 48%); }

.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn-ghost::before { display: none; }
.btn-ghost:active { background: var(--ink-4); }
.btn-outline { background: transparent; border: 1px solid var(--ink-4); box-shadow: none; }
.btn-outline::before { display: none; }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn-lg { min-height: 52px; font-size: 16px; padding: 0 24px; }
.btn-danger { color: var(--ink); }
.btn-danger:active { background: var(--ink-4); }

/* круглая иконочная кнопка */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--surface-2);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--inner-top);
  transition: transform var(--t-fast) var(--out-expo), background-color var(--t-fast) var(--ease);
  flex: none;
}
.icon-btn:active { transform: scale(0.9); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.plain { background: transparent; box-shadow: none; border-color: transparent; }
.icon-btn.on { background: var(--solid); color: var(--solid-ink); border-color: transparent; }

/* Палец больше иконки: зона нажатия дотягивается до 44px,
   не раздувая саму кнопку. */
.icon-btn.sm::after,
.qty button::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ── чипы ────────────────────────────────────────────────────── */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 560;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--surface-weak);
  border: 0.5px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--inner-top);
  transition: transform var(--t) var(--out-expo), background-color var(--t) var(--ease),
    color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Чип визуально остаётся компактным (36px), но по вертикали ловит
   палец на все 44px — лента фильтров не разъезжается по высоте. */
.chip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.chip:active { transform: scale(0.94); }
.chip.on {
  background: var(--solid);
  color: var(--solid-ink);
  border-color: transparent;
  box-shadow: 0 4px 14px -6px rgba(11, 11, 12, 0.5);
  animation: chip-pick 0.34s var(--out-expo);
}
.chip.off { opacity: 0.35; text-decoration: line-through; pointer-events: none; }
@keyframes chip-pick {
  0% { transform: scale(0.92); }
  55% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* ── сегменты: «капля» переезжает под выбранную кнопку ───────── */
.segment {
  position: relative;
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  border: 0.5px solid var(--glass-edge);
  isolation: isolate;
}
.seg-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  border-radius: var(--r-pill);
  background: var(--solid);
  box-shadow: 0 3px 10px -4px rgba(11, 11, 12, 0.5);
  transform: translate3d(0, 0, 0);
  /* только transform: кнопки сегмента растянуты flex:1, поэтому ширина
     «капли» между вариантами не меняется, а её анимация дёргала раскладку */
  transition: transform var(--t-slow) var(--out-expo);
  pointer-events: none;
  z-index: 0;
}
.seg-pill.instant { transition: none; }
.segment button {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: color var(--t) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.segment button:active { transform: scale(0.96); }
/* Пока «капля» не смонтирована (или если скрипт не выполнился),
   выбранная кнопка красится сама — без :has(), который есть не во всех
   вебвью Telegram на Android. */
.segment button.on { color: var(--solid-ink); background: var(--solid); }
.segment.has-pill button.on { background: transparent; }

/* ── поля ввода ──────────────────────────────────────────────── */
.field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  /* Без этого поле не сжимается ниже собственной min-content ширины
     (у input она равна размеру по умолчанию, ~180px) и распирает
     колонку в двухколоночных формах, вылезая за край экрана. */
  min-width: 0;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--surface-weak);
  border: 0.5px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--inner-top);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.field:focus-within {
  border-color: var(--ink-3);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--ink-4);
}
.field input,
.field textarea,
.field select {
  flex: 1;
  min-width: 0;
  background: none;
  font-size: 16px; /* < 16px заставляет iOS зумить страницу при фокусе */
  color: var(--ink);
  padding: 12px 0;
}
.field textarea { resize: vertical; min-height: 86px; line-height: 1.45; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }
.field select { appearance: none; cursor: pointer; }
.field.err { border-color: var(--ink-2); box-shadow: 0 0 0 3px var(--ink-4); }

.form-row { display: grid; gap: 7px; min-width: 0; }
.form-row > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding-left: 4px; }
/* уточнение в подписи поля: тише самой подписи, чтобы не спорило с ней */
.form-row > label .hint { font-weight: 400; color: var(--ink-faint); }
.form-grid { display: grid; gap: 14px; }
.form-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.form-2 > * { min-width: 0; }

/* переключатель */
.switch {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  transition: background-color var(--t) var(--ease);
  flex: none;
}
.switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform var(--t) var(--out-expo);
}
.switch.on { background: var(--solid); }
.switch.on i { transform: translateX(20px); }
:root[data-theme='dark'] .switch.on i { background: #0b0b0c; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 4px;
}

/* ── карточки-контейнеры ─────────────────────────────────────── */
.card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--surface);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--inner-top);
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.9px;
  background: linear-gradient(150deg, var(--spec), var(--spec-2) 28%, transparent 54%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card.tight { padding: 12px; }
.card.flush { padding: 0; }

/* ── шторка (bottom sheet) ───────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 8, 10, 0.34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.scrim.in { opacity: 1; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  /* центрируем полями, а не transform: transform занят анимацией выезда */
  margin-inline: auto;
  width: min(100%, var(--app-w));
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(40px) saturate(190%) brightness(var(--glass-bright));
  backdrop-filter: blur(40px) saturate(190%) brightness(var(--glass-bright));
  border-top: 0.5px solid var(--glass-stroke);
  box-shadow: var(--shadow-3);
  transform: translate3d(0, 100%, 0);
  transition: transform var(--t-slow) var(--out-expo);
  overscroll-behavior: contain;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet { background: var(--bg-2); }
}
.sheet.in { transform: translate3d(0, 0, 0); }
.sheet-grip {
  padding: 10px 0 4px;
  display: grid;
  place-items: center;
  flex: none;
  cursor: grab;
  touch-action: none;
}
.sheet-grip i { width: 38px; height: 5px; border-radius: 3px; background: var(--ink-4); display: block; }
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px calc(20px + var(--safe-bottom));
  overscroll-behavior: contain;
}
.sheet-foot {
  flex: none;
  padding: 12px 18px calc(14px + var(--safe-bottom));
  border-top: 0.5px solid var(--hair);
  background: linear-gradient(to top, var(--glass-strong), transparent);
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 18px 12px;
  flex: none;
}

/* ── тосты ───────────────────────────────────────────────────── */
.toast-root {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--safe-top) + 10px);
  margin-inline: auto;
  max-width: var(--app-w);
  z-index: 90;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(var(--glass-bright));
  backdrop-filter: blur(24px) saturate(190%) brightness(var(--glass-bright));
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--inner-top);
  animation: toast-in 0.4s var(--out-expo);
}
.toast.out { animation: toast-out 0.26s var(--ease) forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-18px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

/* ── скелетоны ───────────────────────────────────────────────── */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--ink-4);
  border-radius: var(--r-sm);
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: shimmer 1.35s infinite;
}
:root[data-theme='dark'] .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ── разделители и пустые состояния ──────────────────────────── */
.hr { height: 0.5px; background: var(--hair); margin: 14px 0; border: 0; }
.empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-2);
}
.empty .ic { width: 34px; height: 34px; stroke-width: 1.3; color: var(--ink-faint); }
.empty h3 { font-size: 17px; font-weight: 650; color: var(--ink); }