/*
  Компоненты. Каждый самодостаточен и не знает, на какой он странице.

  Правило именования: блок — одно слово (.btn, .card), состояние — через
  дефис (.btn-primary), модификатор через отдельный класс (.is-open).
  Никаких «.page .btn» — иначе компонент перестаёт быть переиспользуемым.
*/

/* ================= Кнопка ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  height:52px;padding:0 26px;border:0;border-radius:var(--r-btn);cursor:pointer;
  background:transparent;font:500 16px/1 var(--font);letter-spacing:-.01em;
  transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease),
             background var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-primary{background:var(--rim);color:var(--ink-1);box-shadow:var(--e2)}
.btn-primary:hover:not(:disabled){opacity:.9}
.btn-ghost{color:var(--text);box-shadow:var(--ring)}
.btn-ghost:hover:not(:disabled){background:var(--ink-3)}
.btn-quiet{color:var(--silver-1)}
.btn-quiet:hover:not(:disabled){color:var(--text);background:var(--ink-3)}
.btn-danger{color:var(--alert);box-shadow:inset 0 0 0 1px rgba(229,72,77,.3)}
.btn-danger:hover:not(:disabled){background:rgba(229,72,77,.1)}
.btn-sm{height:40px;padding:0 18px;font-size:15px;border-radius:var(--r-field)}
.btn-lg{height:58px;padding:0 32px;font-size:17px}
/* Ширину задаёт раскладка, а не сам компонент. */
.btn-block{width:100%}

.icon-btn{
  flex:none;width:36px;height:36px;border:0;border-radius:var(--r-round);cursor:pointer;
  background:transparent;color:var(--silver-1);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.icon-btn:hover{background:var(--ink-3);color:var(--text)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Селектор — кнопка с текстом текущего выбора и стрелкой. Иконка-бургер
   на её месте не говорила, что это переключатель. */
.picker{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 14px;
  border:0;border-radius:var(--r-field);cursor:pointer;max-width:min(60vw,320px);
  background:var(--ink-3);color:var(--text);box-shadow:var(--ring);
  font:500 14px/1 var(--font);letter-spacing:-.01em;
  transition:background var(--fast) var(--ease);
}
.picker:hover{background:var(--ink-4)}
.picker .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker svg{flex:none;width:11px;height:7px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.55}

/* ================= Поверхности ================= */
.card{
  background:var(--ink-3);border-radius:var(--r-card);padding:var(--s24);
  /* Кромка нужна светлой теме: там тень почти не видна и карточка
     сливается с фоном. В тёмной линия едва заметна и не мешает. */
  box-shadow:var(--ring),var(--edge),var(--e1);
}
.card-flat{background:var(--ink-2)}
.card-lift{transition:transform var(--norm) var(--ease),box-shadow var(--norm) var(--ease)}
.card-lift:hover{transform:translateY(-2px);box-shadow:var(--ring),var(--edge),var(--e2)}
.card-sel{box-shadow:inset 0 0 0 2px var(--silver-1),var(--e2)}

/* ================= Список-группа ================= */
.group{background:var(--ink-2);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--ring)}
.group-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s12);padding:0 var(--s4) var(--s12)}
.group-head > *{margin:0}
.row{display:flex;align-items:center;gap:var(--s12);padding:14px 16px;text-align:left}
.row + .row{border-top:1px solid var(--line)}
.row-tap{width:100%;border:0;background:transparent;color:inherit;cursor:pointer;
  font:inherit;transition:background var(--fast) var(--ease)}
.row-tap:hover{background:var(--ink-3)}
.row-num{flex:none;width:24px;height:24px;border-radius:7px;background:var(--ink-4);
  color:var(--steel-3);font:500 12px/24px var(--font);text-align:center}
.row-main{flex:1;min-width:0}
.row-main b{display:block;font-weight:500;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-main small{display:block;color:var(--silver-1);font-size:13px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-side{flex:none;font-size:13px;color:var(--silver-1);white-space:nowrap}
.row-empty .row-main b{color:var(--silver-1);font-weight:400}
.row-empty .row-num{background:transparent;box-shadow:var(--ring)}

/* ================= Поля ================= */
.field{display:flex;gap:var(--s8)}
.field input{
  flex:1;min-width:0;width:100%;height:46px;padding:0 14px;border:0;
  border-radius:var(--r-field);background:var(--ink-2);color:var(--text);
  font:400 15px/46px var(--font);box-shadow:var(--ring);
}
.field input::placeholder{color:var(--steel-2)}
.field input:read-only{color:var(--silver-1)}
/* Кнопка рядом с полем не главная — ширину не занимает. */
.field .btn{flex:none;width:auto}
.field-code input{letter-spacing:.35em;text-align:center;font-size:20px}

/* ================= Выбор ================= */
.choice{display:grid;gap:var(--s8)}
.choice > button{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  width:100%;padding:15px 16px;border:0;border-radius:var(--r-field);
  background:var(--ink-2);color:var(--text);box-shadow:var(--ring);cursor:pointer;
  font:400 15px/1.3 var(--font);text-align:left;
  transition:box-shadow var(--fast) var(--ease);
}
.choice > button[aria-checked="true"],
.choice > button[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--silver-1)}
.choice small{display:block;color:var(--silver-1);font-size:13px;margin-top:2px}
.choice .price{font-weight:600;font-size:17px;white-space:nowrap}
.choice .save{display:block;color:var(--ok);font-size:13px;font-weight:500}

/* ================= Сообщения ================= */
.note{background:var(--ink-2);border-radius:var(--r-field);padding:14px 16px;
  font-size:14px;line-height:21px;color:var(--silver-1);box-shadow:var(--ring)}
.note-bad{background:rgba(229,72,77,.10);box-shadow:inset 0 0 0 1px rgba(229,72,77,.28)}
.note-ok{background:rgba(62,207,142,.10);box-shadow:inset 0 0 0 1px rgba(62,207,142,.28)}
.err{display:none;padding:12px 14px;border-radius:var(--r-field);
  background:rgba(229,72,77,.12);box-shadow:inset 0 0 0 1px rgba(229,72,77,.3);
  color:var(--alert);font-size:14px;line-height:20px}
.err.is-on{display:block}
.hint{font-size:13px;line-height:19px;color:var(--silver-1);text-align:center}

/* ================= Индикаторы ================= */
.spin{width:34px;height:34px;border-radius:var(--r-round);
  border:2.5px solid var(--line);border-top-color:var(--silver-1);
  animation:spin .9s linear infinite}
.spin-sm{width:18px;height:18px;border-width:2px;display:inline-block;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:2.5s}}

.tick{width:56px;height:56px;border-radius:var(--r-round);background:rgba(62,207,142,.14);
  display:flex;align-items:center;justify-content:center}
.tick svg{width:26px;height:26px;fill:none;stroke:var(--ok);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

.track{height:3px;border-radius:var(--r-round);background:var(--ink-3);overflow:hidden}
.track > span{display:block;height:100%;border-radius:var(--r-round);
  background:var(--silver-1);transition:width var(--slow) var(--ease)}
.track-low > span{background:var(--alert)}

.dot{flex:none;width:8px;height:8px;border-radius:var(--r-round);background:var(--steel-2)}
.dot-ok{background:var(--ok)}
.dot-alert{background:var(--alert)}

/* ================= Шторка ================= */
.veil{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
.veil.is-on{display:flex}
@media (min-width:641px){.veil{align-items:center}}
.sheet{
  width:100%;max-width:440px;background:var(--ink-1);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:var(--s24) var(--s24) var(--s32);
  box-shadow:var(--ring),var(--e3);
  max-height:92vh;overflow-y:auto;
  animation:sheet-in var(--norm) var(--ease-out);
}
@media (min-width:641px){
  .sheet{border-radius:var(--r-sheet);margin:var(--s24);padding:var(--s32)}
}
@keyframes sheet-in{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.sheet{animation:none}}
.sheet-head{display:flex;align-items:center;gap:var(--s16);margin-bottom:var(--s24)}
.sheet-head h2{flex:1;font-weight:600;font-size:20px;letter-spacing:-.02em}
.sheet-close{flex:none;width:32px;height:32px;border:0;border-radius:var(--r-round);
  cursor:pointer;background:var(--ink-3);color:var(--silver-1);font-size:16px;line-height:1}
/* Растягиваем только прямые действия шторки. Без этого ограничения
   кнопки внутри строк и полей раздувались на всю ширину и выдавливали
   текст по одному слову в строку. */
.sheet > .btn,
.sheet > .stack > .btn{width:100%}
.sheet > .btn + .btn{margin-top:var(--s8)}

/* ================= Шаги ================= */
.step{display:flex;gap:14px;padding:14px 0}
.step + .step{border-top:1px solid var(--line)}
.step-n{flex:none;width:24px;height:24px;border-radius:var(--r-round);
  background:var(--ink-3);color:var(--silver-2);
  font:500 12px/24px var(--font);text-align:center}
.step b{display:block;font-weight:500;font-size:15px;margin-bottom:2px}
.step small{color:var(--silver-1);font-size:14px;line-height:20px}

/* ================= QR ================= */
/* Белая подложка обязательна: сканеры плохо читают код на тёмном. */
.qr{background:#fff;border-radius:var(--r-card);padding:12px;width:max-content;margin:0 auto}
.qr img{display:block;width:196px;height:196px;image-rendering:pixelated}

/* ================= Крупное число ================= */
/* Одно на экран. Два больших числа рядом спорят за внимание. */
.big-num{font-weight:600;font-size:clamp(56px,16vw,72px);line-height:.9;letter-spacing:-.05em}

/* ================= Согласие ================= */
.agree{font-size:12px;line-height:18px;color:var(--steel-2);text-align:center}
.agree a{color:var(--silver-1);text-decoration:underline;text-underline-offset:2px}

/* ================= Метка ================= */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;
  border-radius:var(--r-chip);background:var(--ink-4);color:var(--silver-1);
  font:500 12px/22px var(--font)}
.chip-ok{background:rgba(62,207,142,.14);color:var(--ok)}
.chip-alert{background:rgba(229,72,77,.14);color:var(--alert)}
.chip-solid{background:var(--rim);color:var(--ink-1);letter-spacing:.06em;
  text-transform:uppercase;font-size:11px}