/* ---------------------------------------------------------------------------
   Экран заявки form.php — по образцу приложения такси.

   Карта прилипает к верху, под ней лист с шагами, у нижнего края одна
   кнопка. Заполненный шаг сворачивается в строку и остаётся наверху листа.

   Мобильная версия основная. На широком экране раскладка та же, просто
   лист ограничен по ширине и стоит по центру: страница остаётся экраном
   приложения, а не превращается в другую вёрстку.

   Шрифт и цвета — те же, что на сайте.
--------------------------------------------------------------------------- */

:root {
  --dp-ink: #14171A;
  --dp-muted: #63696F;
  --dp-line: #E7E9EC;
  /* Граница поля и кнопки. Светлее — и на белом листе поле пропадает:
     человек не понимает, куда нажимать и куда писать */
  --dp-edge: #C9CFD6;
  --dp-bg: #F4F5F7;
  --dp-red: #F94F49;
  --dp-red-dark: #E13B35;
  --dp-green: #1F9D55;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--dp-bg); }

/* Шрифт свой, из папки сайта: страница не тянет ни одного чужого файла,
   кроме самой карты. Те же файлы использует остальной сайт. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/manrope-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/manrope-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/manrope-cyrillic-800-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/**
 * ЭКРАН, А НЕ СТРАНИЦА.
 *
 * Карта занимает верхнюю часть и никуда не уезжает, лист с шагами —
 * нижнюю и прокручивается внутри себя. Прокрутки у страницы целиком нет:
 * иначе лист при первом же длинном шаге наезжает на карту и закрывает её,
 * а на шаге адреса карту как раз и нужно двигать.
 *
 * 100dvh, а не 100vh: на телефоне адресная строка браузера то появляется,
 * то исчезает, и vh считается по её отсутствию — нижняя кнопка уезжала бы
 * под край экрана. Старым браузерам оставляем vh запасным значением.
 */
body.form2-page {
  margin: 0;
  background: var(--dp-bg);
  color: var(--dp-ink);
  font-family: Manrope, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.form2-page a { color: var(--dp-red); }

/* ---------- карта ---------- */

.q-map {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: #dfe3e7;
}

.q-map__canvas {
  flex: 1 1 auto;
  height: 42vh;
  height: 42dvh;
  min-height: 220px;
  width: 100%;
  /* Высота меняется на трёх положениях карты — плавно, иначе экран
     дёргается на каждом шаге */
  transition: height .22s ease, min-height .22s ease;
}

/* Лист убран — карта забирает всё, что он освободил */
.form2-page.is-sheet-off .q-map { flex: 1 1 auto; }
.form2-page.is-sheet-off .q-map__canvas { height: auto; }

/* Карты на шаге нет совсем — так у гигиены и проката везде, кроме адреса
   доставки. Место отдаём форме: лист начинается от верха экрана. */
.form2-page.is-map-off .q-map { display: none; }
.form2-page.is-map-off .q-sheet { margin-top: 0; border-radius: 0; box-shadow: none; }
.form2-page.is-map-off .q-sheet__grip { display: none; }

/* Карта в полоску: точку уже выбрали, дальше заполняют поля.

   Не прячем совсем: в полоске видно маршрут и расстояние — по ним
   человек и проверяет, что везти будут туда, куда он думает. Обратно
   карта разворачивается свайпом вниз по листу или полоской-кнопкой. */
.form2-page.is-map-min .q-map__canvas { height: 116px; min-height: 116px; }

/* «Моё местоположение» в полоску не влезает, а нужна она только там,
   где ставят точку, — на этих шагах карта развёрнута */
.form2-page.is-map-min .q-map__btn--locate { display: none; }

/* Круглые кнопки поверх карты — как в приложении */
.q-map__btn {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 30;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 23, 26, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dp-ink);
  text-decoration: none;
}

.q-map__btn--back { left: 14px; }
.q-map__btn--call { right: 14px; color: var(--dp-red); }

/* «Моё местоположение» — под кнопкой звонка, как в приложениях карт */
.q-map__btn--locate { right: 14px; top: calc(64px + env(safe-area-inset-top)); }
.q-map__btn--locate[hidden] { display: none; }

/* Центральная метка. Карта ездит под ней, метка стоит; мышь она не ловит,
   иначе перетаскивание обрывалось бы на ней. Видна только на шаге адреса. */
.q-map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 25;
  display: none;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.q-map.is-picking .q-map__pin { display: flex; }

/**
 * Шаг больницы — центральной метки нет.
 *
 * Больницу выбирают нажатием на её значок, и второй способ здесь только
 * мешал: метка по центру предлагала «поставить точку», а поставленная
 * точка — это уже не больница, а ближайший дом. Двигать карту и
 * разглядывать значки это не мешает.
 */
.q-map.is-hospital .q-map__pin { display: none; }

/* Метка (этап 215): крупнее, с плюсом — «поставить точку здесь».
   Цвет — какую строку выбираем: «Откуда» тёмная, «Куда» красная. */
.q-map__pin { --pin: var(--dp-ink); }
.q-map.is-pt-to .q-map__pin { --pin: var(--dp-red); }
.q-map__pin-head {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--pin);
  border: 4px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(20, 23, 26, 0.35);
  transition: transform .18s ease, background-color .18s;
}
.q-map__pin-icon { display: flex; align-items: center; justify-content: center; }
.q-map__pin-leg {
  width: 4px;
  height: 18px;
  margin-top: -2px;
  border-radius: 0 0 3px 3px;
  background: var(--pin);
  transition: transform .18s ease;
}
/* Тень на земле — точка, куда встанет метка */
.q-map__pin-shadow {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 10px;
  height: 5px;
  margin-left: -5px;
  border-radius: 50%;
  background: rgba(20, 23, 26, 0.35);
}
/* Карту тянут — метка приподнята */
.q-map.is-moving .q-map__pin-head,
.q-map.is-moving .q-map__pin-leg { transform: translateY(-10px); }
.q-map.is-moving .q-map__pin-shadow { width: 14px; margin-left: -7px; opacity: .6; }
/* Метка на больнице, вокзале, аэропорте — в ней их знак, вокруг ореол */
.q-map.is-snap .q-map__pin-head { box-shadow: 0 0 0 6px rgba(249, 79, 73, 0.22), 0 6px 16px rgba(20, 23, 26, 0.35); }
.q-map.is-pt-to.is-snap .q-map__pin-head { box-shadow: 0 0 0 6px rgba(249, 79, 73, 0.3), 0 6px 16px rgba(20, 23, 26, 0.35); }
.q-map:not(.is-pt-to).is-snap .q-map__pin-head { box-shadow: 0 0 0 6px rgba(20, 23, 26, 0.18), 0 6px 16px rgba(20, 23, 26, 0.35); }

.q-map__badge {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 25;
  background: rgba(20, 23, 26, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  white-space: nowrap;
}

.q-map__badge[hidden] { display: none; }
.q-map.is-picking .q-map__badge { display: none; }

.q-map__idle {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--dp-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  font-size: 13.5px;
  color: var(--dp-muted);
}

.q-map__idle[hidden] { display: none; }
.q-map__idle-icon { color: #c3c8ce; }
.q-map__idle code { font-size: 12px; background: #fff; padding: 1px 5px; border-radius: 5px; }

/* Метки точек маршрута. Яндекс ставит элемент левым верхним углом в
   координату — сдвигаем сами, чтобы кружок сидел ровно на точке. */
.q-pin {
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--dp-ink);
  box-shadow: 0 3px 10px rgba(20, 23, 26, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-family: Manrope, Helvetica, Arial, sans-serif;
}

.q-pin--hosp { background: var(--dp-red); }

/* Значок больницы — по нему её и выбирают.

   Подпись стоит рядом с крестом всегда: без неё на карте видны одинаковые
   красные кружки, и «нажмите значок больницы» превращается в угадайку.
   Две строки — название и адрес: в городе больниц несколько, и по одному
   «ГБ№ 1» не всегда понятно, та ли это.

   Оформление лёгкое: тонкая рамка, мягкая тень, обычная насыщенность
   шрифта. Жирные плашки на карте сливались в сплошные пятна и закрывали
   улицы, по которым человек и ориентируется. Крупным остаётся только
   размер кнопки — палец шире значка. */
.q-hpin {
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  font-family: Manrope, Helvetica, Arial, sans-serif;
  line-height: 1.15;
  text-align: left;
  color: var(--dp-ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(20, 23, 26, 0.1);
  border-radius: 10px;
  padding: 5px 9px 5px 5px;
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(20, 23, 26, 0.14);
  /* Нажатие должно доходить до кнопки, а не тонуть в жестах карты */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.q-hpin:hover { border-color: var(--dp-red); }
.q-hpin:active { transform: translate(-50%, -50%) scale(0.96); }

/* Выбранная больница — тёмная, чтобы нажатие было видно на самой карте */
.q-hpin.is-picked {
  background: var(--dp-ink);
  border-color: var(--dp-ink);
  color: #fff;
}

.q-hpin.is-picked .q-hpin__addr { color: rgba(255, 255, 255, 0.7); }

.q-hpin__cross {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  background: var(--dp-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Название и улица — одной строкой: «ГБ№ 1 Металлургов, 3А».

   Строка вместо двух: плашка в две строки выше значка соседней улицы и
   закрывает её, а читают подпись всё равно слева направо. Не поместилось —
   обрезаем целиком, а не каждую часть отдельно, иначе от улицы остаётся
   одно многоточие. */
.q-hpin__text {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 66vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-hpin__name { font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.q-hpin__addr {
  font-size: 11px;
  font-weight: 500;
  color: var(--dp-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- лист с шагами ---------- */

.q-sheet {
  position: relative;
  z-index: 15;
  flex: 1 1 auto;
  margin-top: -18px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 26px rgba(20, 23, 26, 0.1);
  padding: 8px 16px 24px;
  /* Прокручивается лист, а не страница: карта остаётся на месте */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Полоска-кнопка: сворачивает лист, оставляя одну карту.

   Прижата к верху листа и не уезжает вместе с содержимым — иначе, чтобы
   вернуть форму, пришлось бы сначала прокрутить лист к началу. */
.q-sheet__grip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: calc(100% + 32px);
  margin: -8px -16px 8px;
  padding: 8px 0 6px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--dp-muted);
  -webkit-tap-highlight-color: transparent;
}

.q-sheet__grip-bar {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #dfe2e6;
}

.q-sheet__grip-text { font-size: 11.5px; font-weight: 600; }
.q-sheet__grip:active .q-sheet__grip-bar { background: #c8ccd1; }

/* Свёрнутый лист: остаётся одна полоска. Высоту не задаём числом — лист
   сам сжимается до кнопки, и подпись на ней не обрежется. */
.form2-page.is-sheet-off .q-sheet {
  flex: 0 0 auto;
  overflow: hidden;
  padding-bottom: 4px;
}

.form2-page.is-sheet-off .q-sheet > .q-form { display: none; }

/* Порядок шагов задаётся стилями (order выставляет скрипт по
   направлению) — разметка при этом не переставляется. */
.q-steps { display: flex; flex-direction: column; }

.q-step > .q-row { display: none; }
.q-step > .q-body { display: none; }
.q-step.is-done > .q-row { display: flex; }
.q-step.is-active > .q-body { display: block; }

/* Заполненные шаги свёрнуты — на экране остаётся один вопрос */
.form2-page.is-rows-off .q-step.is-done > .q-row { display: none; }

/* Строка-кнопка «заполненное»: тонкая, приглушённая — она о прошлом,
   а не о том, что делать сейчас */
.q-filled {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--dp-line);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--dp-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.q-filled[hidden] { display: none; }
.q-filled__text { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-filled__chev { display: flex; transition: transform .18s; }

/* Свёрнуто — стрелка вниз: нажатие (или свайп вниз) раскроет */
.form2-page.is-rows-off .q-filled__chev { transform: rotate(180deg); }

/* Карта во весь экран — прячем и эту строку вместе с формой */
.form2-page.is-sheet-off .q-filled { display: none; }

/* Строка заполненного шага */
.q-row {
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--dp-line);
  padding: 13px 2px;
  cursor: pointer;
  color: inherit;
}

.q-row__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  background: var(--dp-bg);
  color: var(--dp-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.q-row__icon--red { background: rgba(249, 79, 73, 0.12); color: var(--dp-red); }

.q-row__text {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-row__edit { font-size: 13px; color: var(--dp-muted); flex: 0 0 auto; }

/* Тело открытого шага */
.q-body { padding: 6px 0 4px; }

.q-title { margin: 6px 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

/**
 * ЗАГОЛОВОК ШАГА И ВХОД ЧЕРЕЗ MAX.
 *
 * Кнопка стоит под заголовком и выглядит как обычная кнопка шага — крупная и
 * коралловая. Сбоку от заголовка её уже пробовали: на телефоне ей там тесно,
 * строка всё равно переносилась, а ужатая до угла кнопка читалась как
 * служебная и терялась.
 *
 * Обычный блок, без flex: заголовок, кнопка, подсказка — сверху вниз.
 */
.q-head { display: block; }

.q-head .q-title { margin: 6px 0 12px; }
/* Заголовок главной страницы (этап 93): строка над «Выберите услугу» */
.q-h1 { margin: 0; font-size: 13px; line-height: 1.35; font-weight: 700; letter-spacing: 0; color: #63696F; }

.q-head__max { margin: 0 0 16px; }
.q-head__max[hidden] { display: none; }
.q-head__max .q-hint { margin: 8px 0 0; font-size: 13px; }

.q-hint { margin: 0 0 12px; font-size: 13px; color: var(--dp-muted); }

/**
 * Ссылка внутри подсказки, сделанная кнопкой.
 *
 * «Указать другой» рядом с телефоном из MAX — действие, а не переход, и
 * тег у него кнопочный; выглядеть он должен ссылкой, иначе рядом с полем
 * появляется вторая большая кнопка и спорит с главной.
 */
.q-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--dp-red);
  text-decoration: underline;
  cursor: pointer;
}

.q-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.q-field[hidden] { display: none; }

.q-label { font-size: 13px; font-weight: 700; color: var(--dp-muted); }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Поле ввода — белое в рамке.

   Раньше поля были светло-серыми без границы: на белом листе они
   сливались с фоном, и по виду было не отличить поле от подписи над ним.
   Рамка и белая заливка делают поле полем, а нажатый фокус — тёмная
   рамка с мягким кольцом — видно, куда сейчас пишут. */
.q-inp {
  font-family: inherit;
  font-size: 16px;   /* меньше 16px — iOS зумит страницу при фокусе */
  color: var(--dp-ink);
  background: #fff;
  border: 1.5px solid var(--dp-edge);
  border-radius: 14px;
  padding: 14px 15px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.q-inp:hover { border-color: #aeb6bf; }

.q-inp:focus {
  background: #fff;
  border-color: var(--dp-ink);
  box-shadow: 0 0 0 3px rgba(20, 23, 26, 0.08);
}

.q-inp::placeholder { color: #9aa1a9; }
.q-inp--short { max-width: 160px; }
textarea.q-inp { resize: vertical; min-height: 70px; }

.q-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
  margin-bottom: 16px;
}

.q-check[hidden] { display: none; }
.q-check input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; accent-color: var(--dp-red); }
.q-consent { font-size: 12px; color: var(--dp-muted); }
.q-consent.is-error { color: var(--dp-red); }
.q-consent + .q-consent { margin-top: 8px; }

/* ---------- выбор услуги ---------- */

.q-svc { display: flex; flex-direction: column; gap: 10px; }

.q-svc__card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--dp-ink);
  background: #fff;
  border: 1.5px solid var(--dp-edge);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
}

.q-svc__card:hover { border-color: var(--dp-ink); }

.q-svc__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  background: var(--dp-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dp-red);
}

.q-svc__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.q-svc__text small { font-size: 13px; font-weight: 500; color: var(--dp-muted); }

.q-stub { margin-top: 14px; background: var(--dp-bg); border-radius: 16px; padding: 16px; }
.q-stub[hidden] { display: none; }
.q-stub p { margin: 0 0 12px; font-size: 14px; color: var(--dp-muted); }

.q-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--dp-red);
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.q-btn--wide { display: block; }

/**
 * Кнопка чуть меньше обычной — для входа через MAX под заголовком.
 *
 * В полный размер она спорит с карточками услуг: главное действие шага —
 * выбрать услугу, а вход дело добровольное. В угловой мелкий размер её уже
 * пробовали — там она терялась.
 *
 * Стоит ПОСЛЕ .q-btn нарочно: сила у правил одинаковая, побеждает тот, кто
 * ниже. Объявленная выше, эта строка молча не работала бы.
 */
.q-btn--md { padding: 11px 18px; font-size: 14px; }

/**
 * Скрытая кнопка должна быть скрыта.
 *
 * Атрибут hidden браузер выполняет через display: none, но это правило
 * браузера, и любое наше display его перебивает — а оно здесь есть, строкой
 * выше. Без этой строки кнопка «вернуться к подтверждению» на экране
 * возврата из банка оставалась видимой и после того, как ссылка кассы
 * протухла, то есть вела в ошибку.
 */
.q-btn[hidden] { display: none; }

/**
 * КНОПКА-ССЫЛКА ДОЛЖНА БЫТЬ С БЕЛЫМ ТЕКСТОМ.
 *
 * Правило `.form2-page a { color: var(--dp-red) }` выше сильнее, чем
 * `.q-btn`: у него и класс, и тип элемента. Поэтому у всякой кнопки,
 * сделанной ссылкой, текст получался красным — на красной кнопке, то есть
 * невидимым. Видно это было только на экранах «Заявка принята», где
 * кнопки как раз ссылки, — там «На главную» читалась пустой плашкой.
 */
.form2-page a.q-btn { color: #fff; }
.form2-page a.q-btn--ghost { color: var(--dp-ink); }

/**
 * Второстепенная кнопка на экране возврата из банка.
 *
 * «Вернуться к подтверждению» там главное действие и остаётся красной, а
 * «оформить ещё одну» и «на главную» рядом с ней должны читаться как
 * запасные пути: две одинаково яркие кнопки заставляют выбирать, хотя
 * выбор уже сделан.
 */
.q-btn--ghost {
  color: var(--dp-ink);
  background: var(--dp-bg);
}

/* ---------- кнопки-переключатели ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip[hidden] { display: none; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Кнопка выбора: белая в рамке — как поле, только нажимается.
   Выбранная заливается тёмным, и видно её издалека. */
.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Подпись с ценой стоит рядом с названием — без зазора они слипались
     в «День1 500 ₽» */
  gap: 6px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  border: 1.5px solid var(--dp-edge);
  transition: background .15s, color .15s, border-color .15s;
}

.chip span:hover { border-color: #aeb6bf; }
.chip input:checked + span { background: var(--dp-ink); border-color: var(--dp-ink); color: #fff; }
.chip input:focus-visible + span { border-color: var(--dp-red); box-shadow: 0 0 0 3px rgba(249, 79, 73, 0.18); }

.chips--wide { flex-direction: column; }
.chips--wide .chip { width: 100%; }

.chips--wide .chip span {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.chip__cap { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--dp-muted); }
.chip input:checked + span .chip__cap { color: rgba(255, 255, 255, 0.75); }

.chips--days {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px 4px;
}

.chips--days::-webkit-scrollbar { display: none; }
.chips--days .chip { flex: 0 0 auto; }

.chips--days .chip span {
  flex-direction: column;
  gap: 1px;
  min-width: 74px;
  padding: 9px 12px;
  font-weight: 700;
}

.day__wd { font-size: 11px; font-weight: 600; color: var(--dp-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.chip input:checked + span .day__wd { color: rgba(255, 255, 255, 0.75); }

.q-other-date { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dp-muted); }

.q-other-date input {
  font-family: inherit;
  font-size: 14px;
  color: var(--dp-ink);
  border: 1.5px solid var(--dp-edge);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
}

/* ---------- корзина: товары и прокат ----------

   Список того, что уже выбрано: строка на позицию, сумма справа, крестик
   убирает. Ниже — итог и залог за прокат отдельной строкой: залог
   возвращают, и в итог он не входит — так же считает кабинет. */

.q-cart { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.q-cart[hidden] { display: none; }

.q-cart__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--dp-edge);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

.q-cart__text { flex: 1; min-width: 0; }
.q-cart__sum { font-weight: 800; white-space: nowrap; }

.q-cart__remove {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--dp-bg);
  color: var(--dp-muted);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.q-cart__remove:hover { background: #e7eaee; color: var(--dp-ink); }
.q-cart__total { font-size: 15px; font-weight: 800; }
.q-cart__note { font-size: 12.5px; color: var(--dp-muted); }

/* Кнопка «Добавить в заявку»: пока выбор неполный — серая */
.js-goods-add[disabled] { background: #d3d6da; cursor: default; }

/* Карточка компании-исполнителя: цена справа, под ней разбивка.
   Вся карточка — переключатель, поэтому сам radio не показываем. */

.q-car--exec { display: block; cursor: pointer; }
.q-car--exec.is-picked { border-color: var(--dp-ink); box-shadow: 0 0 0 1px var(--dp-ink); }
.q-car__pick { position: absolute; opacity: 0; width: 0; height: 0; }
.q-car--exec .q-car__head { display: flex; align-items: flex-start; gap: 10px; }
.q-car--exec .q-car__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-car--exec .q-car__tag { font-size: 12.5px; color: var(--dp-muted); }
.q-car__sum { flex: 0 0 auto; font-size: 17px; font-weight: 800; white-space: nowrap; }

.q-car__calc { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }

.q-car__line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--dp-muted);
}

.q-car__line span:last-child { white-space: nowrap; }
.q-car__note { font-size: 12.5px; color: var(--dp-muted); margin-top: 4px; }

/* ---------- дни сиделки ----------

   Строка на день: дата, три кнопки смены и крестик. Смена правится там
   же, где виден день, — без отдельного списка под календарём. */

.care-days { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }

.care-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--dp-edge);
  border-radius: 14px;
}

.care-day__date { flex: 0 0 auto; min-width: 72px; font-size: 14px; font-weight: 700; }
.care-day__picks { display: flex; gap: 6px; flex: 1; min-width: 0; }

.care-day__btn {
  flex: 1;
  min-width: 0;
  padding: 9px 4px;
  border: 1.5px solid var(--dp-edge);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--dp-ink);
  cursor: pointer;
}

.care-day__btn.is-on { background: var(--dp-ink); border-color: var(--dp-ink); color: #fff; }
.care-day__hint { flex: 1; font-size: 13px; color: var(--dp-muted); }

.care-day__remove {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--dp-bg);
  color: var(--dp-muted);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.care-day__total { font-size: 15px; font-weight: 800; padding-top: 2px; }

/* Часы «по часам»: кнопок много, поэтому они мельче обычных */
.chips--hours { gap: 6px; margin-bottom: 6px; }
.chips--hours .chip span { min-height: 38px; padding: 7px 9px; font-size: 13px; font-weight: 600; }

/* ---------- подсказки адреса ---------- */

.suggest { position: relative; }

.suggest__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  background: #fff;
  border: 1px solid var(--dp-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(20, 23, 26, 0.16);
  overflow: hidden auto;
  max-height: 240px;
}

.suggest__list[hidden] { display: none; }

.suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--dp-line);
  padding: 12px 15px;
  cursor: pointer;
  color: var(--dp-ink);
}

.suggest__item:last-child { border-bottom: 0; }
.suggest__item:hover { background: var(--dp-bg); }

/* Знакомые больницы — группами по городам: сверху название города, под ним
   лентой его больницы. Больниц в справочнике сотни, и без города «Городская
   больница № 1» из трёх соседних городов выглядит одной кнопкой трижды. */
.q-quick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}

.q-quick__city {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--dp-muted);
  margin-bottom: 6px;
}

.q-quick__row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px;
}

.q-quick__row::-webkit-scrollbar { display: none; }

/* «Ещё N городов» — остальные группы разворачиваются по нажатию */
.q-quick__more {
  align-self: flex-start;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--dp-ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px dashed var(--dp-edge);
  padding: 2px 0;
  cursor: pointer;
}

/**
 * Лента свёрнута: больницу уже выбрали.
 *
 * Остаётся одна строка «Выбрать другую больницу» — список из сорока чужих
 * больниц под выбранной только уводит вниз отделение и палату.
 */
.q-quick.is-folded > .q-quick__group,
.q-quick.is-folded > .q-quick__more { display: none; }

.q-quick__again {
  align-self: flex-start;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--dp-red);
  background: transparent;
  border: 0;
  border-bottom: 1.5px dashed currentColor;
  padding: 2px 0;
  cursor: pointer;
}

.q-quick__btn {
  flex: 0 0 auto;
  max-width: 70vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--dp-ink);
  background: #fff;
  border: 1.5px solid var(--dp-edge);
  border-radius: 16px;
  padding: 8px 14px;
  cursor: pointer;
  overflow: hidden;
}

/* Название и адрес — каждое в одну строку, длинное обрывается многоточием */
.q-quick__name,
.q-quick__addr {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.q-quick__addr {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dp-muted);
}

/* Частные больницы (этап 136).

   Кнопка «Показать частные» над лентой больниц: по умолчанию частных не
   видно ни на карте, ни в ленте. Значок частной — тот же, что у
   больницы, но с фиолетовым кружком и знаком рубля: на карте её не
   спутать с государственной. */
.q-paid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--dp-ink);
  background: #fff;
  border: 1.5px solid var(--dp-edge);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  cursor: pointer;
}
.q-paid[hidden] { display: none; }
.q-paid__mark {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #7B4FD6;
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.q-paid.is-on { border-color: #7B4FD6; background: #F3EEFC; }

.q-hpin--paid .q-hpin__cross { background: #7B4FD6; }
.q-hpin--paid:hover { border-color: #7B4FD6; }
.q-hpin--paid.is-picked { background: var(--dp-ink); border-color: var(--dp-ink); }

.q-quick__btn--paid { border-color: #CDBDF0; }
.q-quick__paid {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #7B4FD6;
  text-transform: lowercase;
}

/* ---------- перевозчики и тарифы ---------- */

.q-carriers { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.q-car { border: 1px solid var(--dp-line); border-radius: 16px; padding: 12px; }
.q-car.is-picked { border-color: var(--dp-ink); }

.q-car__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.q-car__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-car__name { font-size: 15px; font-weight: 800; }

.q-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--dp-green);
  background: rgba(31, 157, 85, 0.12);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}

.q-car__tag {
  font-size: 12.5px;
  color: var(--dp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-car__more {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dp-red);
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
}

/* Карточка компании на перевозке — одна строка, одна цена.
   Плиток тарифов («Стандарт», «Комфорт») больше нет: посетитель выбирает
   компанию, а не класс машины. Нажатие по карточке и есть выбор. */
.q-car--one { cursor: pointer; }
.q-car--one.is-picked { border-color: var(--dp-ink); box-shadow: 0 0 0 1px var(--dp-ink); }
.q-car--one .q-car__head { margin-bottom: 0; align-items: center; }
.q-car--one .q-car__more { margin-top: 8px; }

.q-car__details { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.q-car__details[hidden] { display: none; }

/* ---------- логотип компании ---------- */

.q-car__logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--dp-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.q-car__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- лента фотографий ---------- */

.q-gallery { position: relative; }

.q-photos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.q-photos::-webkit-scrollbar { display: none; }

.q-photo {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  scroll-snap-align: start;
  line-height: 0;
}

.q-photo img {
  width: 200px;
  height: 126px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--dp-bg);
}

/* Стрелки — только там, где есть мышь: пальцем лента листается и так */
.q-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  color: var(--dp-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: none;
}

.q-gallery__arrow--prev { left: 4px; }
.q-gallery__arrow--next { right: 4px; }

@media (hover: hover) and (pointer: fine) {
  .q-gallery__arrow { display: block; }
}

/* ---------- фотография во весь экран ---------- */

body.q-lb-open { overflow: hidden; }

.q-lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 13, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.q-lb[hidden] { display: none; }

.q-lb__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.q-lb__figure img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 10px;
}

.q-lb__figure figcaption {
  color: #fff;
  font-size: 13.5px;
  text-align: center;
  opacity: .85;
}

.q-lb__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.q-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.q-lb__nav[hidden] { display: none; }
.q-lb__nav--prev { left: 10px; }
.q-lb__nav--next { right: 10px; }

.q-lb__count {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  opacity: .8;
}

.q-car__desc { margin: 0; font-size: 13.5px; color: var(--dp-muted); }

.q-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.q-features li { font-size: 13px; color: var(--dp-muted); padding-left: 20px; position: relative; }

/* Плюс, а не галочка: галочка читается как «сделано», а здесь перечислено
   то, что компания добавляет к поездке. Коралловый — цвет акцента сайта. */
.q-features li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--dp-red);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

/* ---------- нижняя панель ---------- */

.q-bar {
  flex: 0 0 auto;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--dp-line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

.q-bar[hidden] { display: none; }
.q-bar__in { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

.q-bar__msg { font-size: 13px; color: var(--dp-muted); }
.q-bar__msg:empty { display: none; }
.q-bar__msg.is-error { color: var(--dp-red); }

.q-bar__row { display: flex; align-items: center; gap: 12px; }

.q-bar__price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.q-bar__price[hidden] { display: none; }

.q-next {
  flex: 1;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: var(--dp-ink);
  border: 0;
  border-radius: 16px;
  padding: 17px 24px;
  cursor: pointer;
  transition: background .18s;
}

.q-next:hover { background: #000; }
.q-next--order { background: var(--dp-red); }
.q-next--order:hover { background: var(--dp-red-dark); }
.q-next:disabled { background: #d3d6da; cursor: default; }

/* ---------- экран «отправлено» ---------- */

.q-done { padding: 20px 0 10px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.q-done[hidden] { display: none; }
.q-done__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.q-done__text { margin: 0; font-size: 15px; color: var(--dp-muted); }

/* ---------- широкий экран ----------

   Раскладка та же: это экран приложения, а не другая страница. Лист
   ограничен по ширине и стоит по центру, карта становится выше. */

@media (min-width: 720px) {
  .q-map__canvas { height: 46vh; height: 46dvh; min-height: 300px; }

  .q-sheet {
    width: 100%;
    max-width: 620px;
    margin: -22px auto 0;
    border-radius: 22px 22px 0 0;
    padding: 10px 28px 24px;
  }

  .q-bar__in { max-width: 620px; }
  .q-car--one .q-car__sum { font-size: 18px; }
}

/* ---------- машины внутри карточки компании (этап 42) ----------

   Раньше карточка компании была одной строкой с одной ценой. Но машина
   машине рознь: Ларгус везёт лежачего на каталке, реанимобиль — на
   функциональных носилках, с кислородом и бригадой. Поэтому внутри
   компании по строке на машину: название, своя цена, «Подробнее». */

.q-autos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.q-auto {
  border: 1.5px solid var(--dp-line);
  border-radius: 12px;
  padding: 8px 10px;
  background: #fff;
}

.q-auto.is-picked { border-color: var(--dp-ink); }

.q-auto__head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}

/* Кружок и цена держатся строки названия, а не середины двух строк */
.q-auto__head > .q-auto__mark,
.q-auto__head > .q-auto__sum { margin-top: 1px; }

/* Кружок выбора — тот же, что у точки маршрута: выбирают строку целиком,
   а не маленькую мишень внутри неё */
.q-auto__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--dp-edge);
  background: #fff;
}

.q-auto.is-picked .q-auto__mark {
  border-color: var(--dp-ink);
  box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--dp-ink);
}

/* Название и краткое описание — столбиком, цена справа от них обоих */
.q-auto__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.q-auto__name {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * Краткое описание машины — ровно две строки.
 *
 * Директор пишет его в кабинете и может увлечься; список машин от этого
 * не должен превращаться в три абзаца подряд. Всё, что длиннее, обрывается
 * многоточием, а полный текст лежит под «Подробнее».
 */
.q-auto__short {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--dp-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.q-auto__sum {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.q-auto__more {
  margin-top: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dp-red);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.q-auto__details { margin-top: 6px; }

.q-auto__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dp-muted);
}

.q-auto__details .q-features { margin-top: 6px; }

/* Лента фотографий внутри строки машины: те же снимки, что были у
   компании, только теперь их открывают там, где выбирают */
.q-auto__details .q-photos { margin-bottom: 8px; }

/* ======================================================================
   ГЛАВНАЯ = ФОРМА ЗАЯВКИ: ШАПКА САЙТА, РИСОВАННАЯ КАРТА, ГОРОД (этап 86).

   Сама форма — шаги, их порядок, поля, кнопка «Далее» — не меняется ни на
   одной ширине. Добавлено только вокруг неё:
     • шапка сайта (логотип, город, «по местоположению», меню);
     • рисованная карта со скорой, пока настоящая не загружена;
     • под первым экраном — информация о сервисе (только главная).

   Первый экран (.q-screen) — ровно в высоту окна: внутри него форма
   работает как экран приложения, а страница прокручивается ниже, к
   информации о сервисе.

   Телефон и планшет (до 1024 px) — карта сверху, лист с шагами снизу, как
   и было. Широкий экран — раскладка Яндекс.Такси: панель слева, карта
   справа.
   ====================================================================== */

.q-legal, .q-promo, .q-more, .q-top__drop[hidden] { display: none; }

/* ---------- общее для всех ширин ---------- */
body.form2-page {
  display: block;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.q-below { display: block; }

.q-top {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid var(--dp-line);
}
.q-top__logo img { display: block; height: auto; }
.q-top__city { display: flex; gap: 6px; min-width: 0; }
.q-city {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; min-width: 0;
  border: 0; border-radius: 999px; background: #f4f5f7; color: var(--dp-ink);
  font: 600 14px/1 Manrope, Helvetica, Arial, sans-serif; cursor: pointer; max-width: 260px;
}
.q-city span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-city:hover { background: #eceef1; }
.q-city--geo { flex: 0 0 38px; width: 38px; padding: 0; justify-content: center; color: var(--dp-red); }
.q-city--geo.is-busy { opacity: .5; cursor: progress; }
.q-top__nav a {
  color: var(--dp-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 10px;
}
.q-top__nav a:hover { background: #f4f5f7; }
.q-top__menu {
  display: none; width: 40px; height: 40px; margin-left: auto; flex: 0 0 40px;
  border: 0; border-radius: 12px; background: #f4f5f7; padding: 12px 10px; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.q-top__menu span { display: block; height: 2px; background: var(--dp-ink); border-radius: 2px; }
.q-top__drop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 80;
  background: #fff; border-bottom: 1px solid var(--dp-line); box-shadow: 0 12px 24px rgba(20, 23, 26, .08);
  padding: 6px 16px 12px;
}
.q-top__drop a {
  display: block; padding: 12px 4px; font-weight: 700; color: var(--dp-ink); text-decoration: none;
  border-bottom: 1px solid var(--dp-line);
}
.q-top__drop a:last-child { border-bottom: 0; }

/* Рисованная карта со скорой — пока настоящая не загружена */
.q-map__art {
  --map-bg: #EEF0F3; --map-road: #fff; --map-block: #E3E6EA;
  --map-park: #DCEFD9; --map-water: #D5E6F5; --red: #F94F49; --ink: #14171A; --line: #E7E9EC;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Рисунок нарисован шире своей рамки (overflow="visible"), чтобы на
     любом соотношении сторон не было пустых полей. Обрезаем по карте —
     иначе на широких экранах дороги вылезали на блоки под формой. */
  overflow: hidden;
  background: var(--map-bg);
}
.q-map__art .mapart { width: 100%; height: 100%; display: block; }
.q-map__art .mapart__route { /* рисуется SMIL-анимацией в самом SVG (этап 89) */ }
.q-map__art .mapart__amb-static { display: none; }
.q-map__idle { background: #EEF0F3; }
.q-map__idle-icon { display: none; }
.q-map__idle > :not(.q-map__art) {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 4px 14px rgba(20, 23, 26, 0.12);
}
@keyframes q-route { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .q-map__art .mapart__amb { display: none; }
  .q-map__art .mapart__amb-static { display: inline; }
}

/* «Как это работает ↓» поверх карты */
.q-more {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30;
  align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--dp-ink); font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(20, 23, 26, .18);
}
.form2-page a.q-more { color: var(--dp-ink); }

/* Окно выбора города */
.q-citybox {
  position: fixed; inset: 0; z-index: 200; background: rgba(20, 23, 26, .45);
  display: grid; place-items: start center; padding: 72px 12px 12px;
}
.q-citybox[hidden] { display: none; }
.q-citybox__card {
  width: 100%; max-width: 480px; background: #fff; border-radius: 24px; padding: 20px;
  box-shadow: 0 12px 40px rgba(20, 23, 26, .16); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
  display: flex; flex-direction: column; box-sizing: border-box;
}
.q-citybox__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.q-citybox__title { font-size: 22px; font-weight: 800; }
.q-citybox__x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f4f5f7; font-size: 24px; line-height: 1; cursor: pointer; }
.q-citybox__q {
  width: 100%; height: 52px; border-radius: 14px; border: 1.5px solid var(--dp-line); padding: 0 18px;
  font: 400 16px Manrope, Helvetica, Arial, sans-serif; box-sizing: border-box;
}
.q-citybox__q:focus { border-color: var(--dp-red); outline: none; }
.q-citybox__geo {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--dp-red);
  font: 700 15px Manrope, Helvetica, Arial, sans-serif; padding: 12px 2px; cursor: pointer; align-self: flex-start;
}
.q-citybox__geo:disabled { opacity: .5; cursor: progress; }
.q-citybox__msg { margin: 0 0 8px; font-size: 13px; color: var(--dp-muted); }
.q-citybox__list { list-style: none; margin: 0; padding: 0; overflow: auto; }
.q-citybox__list button {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 0;
  border-radius: 10px; background: none; text-align: left; cursor: pointer; color: var(--dp-ink);
  font: 500 15px Manrope, Helvetica, Arial, sans-serif;
}
.q-citybox__list button:hover, .q-citybox__list button:focus { background: #f4f5f7; outline: none; }
.q-citybox__list small { color: var(--dp-muted); font-size: 13px; text-align: right; }
.q-citybox__list .is-served small { color: #1F7A34; font-weight: 700; }
.q-citybox__list .is-on { background: #FFF1F0; }
.q-citybox__sub { font-size: 12px; font-weight: 700; color: var(--dp-muted); text-transform: uppercase; letter-spacing: .06em; padding: 12px 12px 4px; }

/* ---------- телефон и планшет: карта сверху, лист снизу, как было ---------- */
@media (max-width: 1023.98px) {
  /* Первый экран повторяет прежнюю раскладку body: колонка в высоту окна */
  .q-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }
  .q-top { flex: 0 0 auto; height: 56px; padding: 0 12px; padding-top: env(safe-area-inset-top); gap: 6px; }
  .q-top__logo img { width: 76px; }
  .q-top__city { margin-left: 4px; flex: 0 1 auto; }
  .q-city { height: 36px; padding: 0 12px; font-size: 13.5px; max-width: 150px; }
  .q-city--geo { flex-basis: 36px; width: 36px; padding: 0; }
  .q-top__nav { display: none; }
  .q-top__menu { display: flex; }

  /* Кнопка «На главную» на карте не нужна: в шапке логотип */
  .q-map__btn--back { display: none; }
  .q-map__btn, .q-map__btn--locate { top: 12px; }

  /* Докрутили список шагов до конца — прокрутка продолжается вниз по
     странице, к информации о сервисе */
  .q-sheet { overscroll-behavior: auto; }

  /* Рисованная карта — повыше: снизу на ней кнопка «Как это работает».
     Точный сдвиг (поровну сверху и снизу) считает assets/home.js */
  .q-map__art .mapart { transform: translateY(-32px); }

  /* На шаге выбора услуги карты не было — теперь там рисованная карта со
     скорой, пониже обычной. Порядок шагов это не меняет. */
  .form2-page.is-map-off:has(.q-step[data-step="service"].is-active) .q-map { display: flex; }
  .form2-page:has(.q-step[data-step="service"].is-active) .q-map__canvas { height: 30vh; height: 30dvh; min-height: 170px; }
  .form2-page.is-map-off:has(.q-step[data-step="service"].is-active) .q-sheet {
    margin-top: -18px; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 26px rgba(20, 23, 26, 0.1);
  }
  .form2-page:has(.q-step[data-step="service"].is-active) .q-map__idle > :not(.q-map__art) { display: none; }
  .form2-page:has(.q-step[data-step="service"].is-active) .q-more { display: inline-flex; bottom: 28px; padding: 8px 14px; font-size: 13px; }
  .q-map__idle { justify-content: flex-end; padding-bottom: 30px; }
}
@media (min-width: 720px) and (max-width: 1023.98px) {
  .form2-page:has(.q-step[data-step="service"].is-active) .q-map__canvas { height: 34vh; height: 34dvh; }
}

/* ---------- широкий экран: раскладка Яндекс.Такси ---------- */
@media (min-width: 1024px) {
  .q-screen {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
  }

  .q-top { grid-column: 1 / -1; grid-row: 1; padding: 0 24px; }
  .q-top__logo img { width: 92px; }
  .q-top__city { margin-left: 20px; }
  .q-top__nav { display: flex; gap: 4px; margin-left: auto; }

  /* Карта — справа во всю высоту, на любом шаге */
  .q-map,
  .form2-page.is-map-off .q-map,
  .form2-page.is-sheet-off .q-map {
    grid-column: 2;
    grid-row: 2 / 4;
    display: flex;
    flex: none;
  }
  .q-map__canvas,
  .form2-page.is-map-min .q-map__canvas,
  .form2-page.is-sheet-off .q-map__canvas {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    transition: none;
  }
  .q-map__btn--back { display: none; }
  .q-map__btn--locate { top: 92px; }
  .form2-page.is-map-min .q-map__btn--locate { display: flex; }
  .form2-page.is-map-min .q-map__btn--locate[hidden] { display: none; }

  /* Панель с шагами — слева */
  .q-sheet,
  .form2-page.is-map-off .q-sheet,
  .form2-page.is-sheet-off .q-sheet {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: 6px 0 24px rgba(20, 23, 26, 0.08);
    padding: 16px 28px 24px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Докрутили панель до конца — дальше прокручивается страница */
    overscroll-behavior: auto;
  }
  .form2-page.is-sheet-off .q-sheet > .q-form { display: block; }
  .form2-page.is-sheet-off .q-filled { display: block; }
  .q-sheet__grip { display: none; }

  .q-bar {
    grid-column: 1;
    grid-row: 3;
    z-index: 20;
    padding: 12px 28px 16px;
    box-shadow: 6px 0 24px rgba(20, 23, 26, 0.08);
  }
  .q-bar__in { max-width: none; }

  /* Подвал панели — прижат книзу, как у Яндекса */
  .q-legal {
    display: block;
    margin-top: auto;
    padding-top: 28px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dp-muted);
  }
  .q-legal p { margin: 0; }
  /* Только пока услуга не выбрана: дальше панель — про заявку */
  .q-sheet:not(:has(.q-step[data-step="service"].is-active)) .q-legal { display: none; }

  /* «Стать исполнителем» поверх карты, справа сверху */
  .q-promo {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(20, 23, 26, 0.18);
    color: var(--dp-ink);
    text-decoration: none;
  }
  .q-promo b { display: block; font-size: 15px; }
  .q-promo small { display: block; font-size: 12px; color: var(--dp-muted); }
  .q-promo img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
  .q-promo:hover { box-shadow: 0 8px 22px rgba(20, 23, 26, 0.22); }

  /* Подпись поверх рисованной карты — внизу, над «Как это работает» */
  .q-map__idle { justify-content: flex-end; padding-bottom: 76px; }
  .q-more { display: inline-flex; }
  .q-more:hover { box-shadow: 0 8px 22px rgba(20, 23, 26, .22); }
}


/* ---------- этап 87: вокзалы и аэропорты ----------

   Значок вокзала или аэропорта — того же вида, что значок больницы, но
   кружок синий, а внутри поезд или самолёт: на шаге «вокзал» больниц на
   карте нет, но цвет не должен напоминать о них. Метка выбранного вокзала
   на маршруте — тем же синим. */
.q-hpin--station .q-hpin__cross { background: #2563c9; }
.q-hpin--station.is-picked { background: var(--dp-ink); border-color: var(--dp-ink); color: #fff; }
.q-hpin--station:hover { border-color: #2563c9; }
.q-pin--stat { background: #2563c9; }

.q-quick__btn--station .q-quick__name { display: inline-flex; align-items: center; gap: 5px; }
.q-quick__btn--station .q-quick__name svg { color: #2563c9; flex: 0 0 auto; }
.q-quick__btn--station[hidden] { display: none; }

/* ======================================================================
   КАРТОЧКА ИСПОЛНИТЕЛЯ — НОВЫЙ ВИД (этап 89).

   Было: голый текст в рамке, реквизиты обычным кеглем на пол-карточки.
   Стало: логотип (или буква на подложке), название, подзаголовок, короткие
   метки «город · подача · только наличные»; машины — строками с
   миниатюрой своего первого снимка; реквизиты — мелкой приглушённой
   строкой внизу, за тонкой линией. Разметку шагов и порядок выбора это
   не меняет — только вид.
   ====================================================================== */

.q-car {
  border: 1px solid var(--dp-line);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 23, 26, 0.04), 0 6px 18px rgba(20, 23, 26, 0.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.q-car:hover { border-color: var(--dp-edge); }
.q-car.is-picked,
.q-car--one.is-picked,
.q-car--exec.is-picked {
  border-color: var(--dp-ink);
  box-shadow: 0 0 0 1px var(--dp-ink), 0 8px 22px rgba(20, 23, 26, 0.08);
}

.q-car__head { gap: 12px; }
.q-car--one .q-car__head,
.q-car--exec .q-car__head { align-items: flex-start; }

.q-car__logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--dp-line);
}
.q-car__logo--letter {
  border: 0;
  background: #FFECEB;
  color: var(--dp-red);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.q-car__titles { gap: 3px; padding-top: 1px; }
.q-car__name { font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.q-car__tag,
.q-car--exec .q-car__tag {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--dp-muted);
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.q-car__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.q-car__chip {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--dp-muted);
  background: var(--dp-bg);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.q-car__chip--cash { color: #8A5A00; background: #FFF4DB; }
/* Примерное расстояние до исполнителя (этап 142) */
.q-car__chip--km { color: var(--dp-ink, #14171A); font-weight: 700; }

/* Исполнитель дальше CITY_FAR_KM от заявки (этап 141) */
.q-car__far {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: #8A5A00;
  background: #FFF4DB;
}

.q-car__sum,
.q-car--one .q-car__sum { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; padding-top: 1px; }
.q-car__sum small { font-size: 12px; font-weight: 600; color: var(--dp-muted); }

/* Разбивка цены — компактный «чек» на светлой подложке */
.q-car__calc {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--dp-bg);
  gap: 4px;
}
.q-car__line { font-size: 12.5px; }
.q-car__note { font-size: 12px; }

/* ---------- машины ---------- */

.q-autos { gap: 8px; margin-top: 12px; }

.q-auto {
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 8px;
  background: var(--dp-bg);
  transition: background .15s ease, border-color .15s ease;
}
.q-auto:hover { background: #EEF0F3; }
.q-auto.is-picked { background: #fff; border-color: var(--dp-ink); box-shadow: 0 0 0 0.5px var(--dp-ink); }

.q-auto__head { align-items: center; gap: 10px; }
.q-auto__head > .q-auto__mark,
.q-auto__head > .q-auto__sum { margin-top: 0; }

/* Кружок выбора — справа, у цены: слева теперь миниатюра машины */
.q-auto__mark { order: 3; width: 20px; height: 20px; border-color: var(--dp-edge); }
.q-auto.is-picked .q-auto__mark {
  border-color: var(--dp-red);
  background: var(--dp-red);
  box-shadow: inset 0 0 0 4px #fff;
}

.q-auto__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: #E3E6EA;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA1A9;
}
.q-auto__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.q-auto__name { font-size: 14.5px; font-weight: 700; }
.q-auto__short { font-size: 12px; }
.q-auto__sum { order: 2; font-size: 15px; }

.q-auto .q-car__calc { margin: 8px 0 0; background: var(--dp-bg); }

.q-auto__more,
.q-car__more {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dp-red);
}
.q-auto__more::after,
.q-car__more::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .15s ease;
}
.q-auto__more.is-open::after { transform: rotate(-135deg) translate(-1px, -1px); }
.q-auto__more { margin-left: 74px; }

.q-auto__details { margin: 8px 0 2px; }
.q-auto__desc { font-size: 12.5px; }

/* ---------- сведения об исполнителе: мелко и тихо ---------- */

.q-car__legal {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--dp-line);
  font-size: 11px;
  line-height: 1.45;
  color: #8A9097;
  cursor: default;
}
.q-car__legal-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A3A9AF;
  margin-bottom: 2px;
}

/* Выбранная машина — красной рамкой в цвет отметки; у карточки с машинами
   внешняя рамка спокойнее, чтобы две чёрные рамки не стояли одна в другой */
.q-auto.is-picked { border-color: var(--dp-red); box-shadow: 0 0 0 1px var(--dp-red); }
.q-car--one.is-picked:has(.q-autos) {
  border-color: var(--dp-edge);
  box-shadow: 0 1px 2px rgba(20, 23, 26, 0.04), 0 8px 22px rgba(20, 23, 26, 0.08);
}
.q-car--exec.is-picked,
.q-car--one.is-picked:not(:has(.q-autos)) { border-color: var(--dp-red); box-shadow: 0 0 0 1px var(--dp-red), 0 8px 22px rgba(20, 23, 26, 0.08); }

/* ======================================================================
   КАРТОЧКА-ВИТРИНА С ВЫБОРОМ МАШИНЫ (этап 89, макет «вариант 3А»).

   Фото выбранной машины сверху (цена и подпись поверх), под ним компания
   и список «Выберите машину» строками с кружком. Отмеченная строка — в
   красной рамке; фото и цена сверху — всегда её.
   ====================================================================== */

.q-car--cars { padding: 0; overflow: hidden; cursor: pointer; }
.q-car--cars.is-picked {
  border-color: var(--dp-edge);
  box-shadow: 0 1px 2px rgba(20, 23, 26, 0.04), 0 10px 26px rgba(20, 23, 26, 0.09);
}
.q-car__body { padding: 12px 14px 14px; }
.q-car--cars .q-car__head { margin-bottom: 0; }

.q-hero {
  position: relative;
  height: 196px;
  background: #E3E6EA;
  overflow: hidden;
}
.q-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-hero.is-zoom { cursor: zoom-in; }
.q-hero--none { display: flex; align-items: center; justify-content: center; color: #A3AAB1; }

.q-hero__count {
  position: absolute; left: 12px; top: 12px;
  background: rgba(20, 23, 26, 0.6); color: #fff;
  border-radius: 999px; padding: 4px 9px;
  font-size: 11px; font-weight: 700;
}
.q-hero__price {
  position: absolute; right: 12px; top: 12px;
  background: #fff; color: var(--dp-ink);
  border-radius: 12px; padding: 7px 11px;
  font-size: 17px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.q-hero__price small { font-size: 12px; font-weight: 600; color: var(--dp-muted); }
.q-hero__cap {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  background: rgba(20, 23, 26, 0.72); color: #fff;
  border-radius: 10px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
}
.q-hero__cap small { display: block; font-size: 11px; font-weight: 500; opacity: 0.8; }

.q-pick__label {
  margin: 14px 0 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--dp-muted);
}
.q-pick { display: flex; flex-direction: column; gap: 6px; }
.q-pick__row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 12px;
  background: var(--dp-bg); border: 1.5px solid transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.q-pick__row:hover { background: #EEF0F3; }
.q-pick__row.is-on { background: #fff; border-color: var(--dp-red); }
.q-pick__radio {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid var(--dp-edge); background: #fff;
}
.q-pick__row.is-on .q-pick__radio {
  border-color: var(--dp-red); background: var(--dp-red);
  box-shadow: inset 0 0 0 4px #fff;
}
.q-pick__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.q-pick__name { font-size: 14px; font-weight: 700; }
.q-pick__short {
  font-size: 11.5px; line-height: 1.35; color: var(--dp-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.q-pick__sum { flex: 0 0 auto; font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.q-pick .q-car__calc { margin: 0 0 2px; }
.q-pick__hint { margin: 8px 0 0; font-size: 11.5px; color: var(--dp-muted); }

/* СВОБОДНА ЛИ МАШИНА В ВЫБРАННОЕ ВРЕМЯ (этап 114).
   Строка под машиной: зелёная — свободна, жёлтая — занята, и тогда рядом
   кнопка «Перенести на 14:15». Цвет не единственный признак: слова
   «свободна» и «занята» стоят в самой строке. */
.q-slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: -2px 0 2px; padding: 7px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.q-slot__text { flex: 1 1 180px; min-width: 0; }
.q-slot--free { background: #E9F6EE; color: #17643A; }
.q-slot--busy { background: #FFF4D6; color: #6B4E00; }
/* Этап 170: можно, если диспетчер сдвинет другую заявку — время подтвердит звонком */
.q-slot--soft { background: #EEF6E9; color: #355E1B; }
.q-slot__move {
  flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border-radius: 9px;
  border: 1.5px solid #C99A12; background: #fff; color: #6B4E00;
  font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.q-slot__move:hover { background: #FFFBEE; }
.q-car--one > .q-slot { margin: 10px 0 0; }
.q-hint--approx { margin-top: -6px; }
.q-car--cars .q-car__more { margin-top: 10px; }
.q-car__more.is-open::after { transform: rotate(-135deg) translate(-1px, -1px); }

/* ---------- слайдер фото машины (этап 89) ----------
   Обычная горизонтальная прокрутка с защёлкой: пальцем листается как
   галерея. Стрелки — там, где есть мышь; на телефоне листают пальцем. */

.q-hero__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.q-hero__track::-webkit-scrollbar { display: none; }
.q-hero__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.q-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }

.q-hero__dots {
  position: absolute; right: 12px; bottom: 14px;
  display: flex; gap: 5px; pointer-events: none;
}
.q-hero__dots span {
  width: 6px; height: 6px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
  transition: width .2s ease, background .2s ease;
}
.q-hero__dots span.is-on { width: 16px; background: #fff; }

.q-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255, 255, 255, 0.92); color: var(--dp-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer; display: none;
  opacity: 0; transition: opacity .15s ease;
}
.q-hero__nav::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.q-hero__nav--prev { left: 10px; }
.q-hero__nav--prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.q-hero__nav--next { right: 10px; }
.q-hero__nav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }

@media (hover: hover) and (pointer: fine) {
  .q-hero__nav { display: block; }
  .q-hero:hover .q-hero__nav { opacity: 1; }
  .q-hero__nav:focus-visible { opacity: 1; outline: 2px solid var(--dp-red); }
}

/* Машина не успевает к названному времени — вопрос над кнопкой «Заказать» (этап 154) */
.q-early {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FFF4D6;
  color: #6B4E00;
}
.q-early__text { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.q-early__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.q-early__btn {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #E2C46B;
  border-radius: 10px;
  background: #fff;
  color: #4A3600;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.q-early__btn--main { background: #6B4E00; border-color: #6B4E00; color: #fff; font-weight: 600; }
.q-early__btn:hover { filter: brightness(0.97); }


/* ==========================================================================
   Этап 170: свободного времени нет ни у кого — предупреждение над
   исполнителями; кнопка «Оставить заявку исполнителю в резерв» и строка
   под ней в нижней панели.
   ========================================================================== */
.q-busy-none {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FFF4D6;
  color: #6B4E00;
  font-size: 14px;
  line-height: 1.4;
}
.q-busy-none strong { font-weight: 700; }
.q-bar__note { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--dp-muted); text-align: center; }
/* Этап 239: машина занята — жёлтой плашкой над кнопкой, как строка занятости у машины */
.q-bar__note--busy { margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; background: #FFF4D6; color: #6B4E00; text-align: left; font-size: 13.5px; }
.q-next--reserve { white-space: normal; line-height: 1.2; }

/* ---------------------------------------------------------------------------
   ЭКРАН ИСПОЛНИТЕЛЯ ПЕРЕВОЗКИ: ПОД ЦЕНАМИ — КОГДА, БОЛЬНИЦА, О БОЛЬНОМ
   (этап 213)

   Цены видно сразу после маршрута, а то, что раньше было отдельными
   шагами, — блоками ниже, через линию. Заголовки блоков меньше заголовка
   шага, чтобы экран читался как один шаг, а не как три.
--------------------------------------------------------------------------- */
.q-sub { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dp-line); }
.q-sub[hidden] { display: none; }
.q-subtitle { margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.q-sub .q-field + .q-field { margin-top: 14px; }

/* ---------- «Откуда / Куда» — точки на карте (этап 214) ---------- */

/* Адрес над меткой: нажатие выбирает точку */
.q-map__tip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 26;
  /* над меткой: её высота 46 + 18 + отступ (этап 215 — метка крупнее) */
  transform: translate(-50%, calc(-100% - 78px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: min(320px, calc(100% - 32px));
  border-radius: 14px;
  background: var(--dp-ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(20, 23, 26, 0.3);
}
.q-map__tip-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.q-map__tip-icon {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--dp-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.q-map__tip-icon[hidden] { display: none; }
.q-map__tip-alt {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: none;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  padding: 7px 14px 8px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-map__tip-alt[hidden] { display: none; }
.q-map__tip-alt:hover { color: #fff; }
.q-map__tip[hidden] { display: none; }
.q-map__tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--dp-ink);
  transform: rotate(45deg);
  border-radius: 2px;
}
.q-map__tip-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.q-map__tip-go { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--dp-red); }

/* Поиск: значок типа — адрес, больница, вокзал */
.suggest__item--pt { display: flex; align-items: flex-start; gap: 10px; }
.suggest__icon {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dp-bg);
  color: var(--dp-ink);
  margin-top: 1px;
}
.suggest__icon--hosp { color: var(--dp-red); }
.suggest__text { display: flex; flex-direction: column; min-width: 0; }
.suggest__text small { color: var(--dp-muted); font-size: 12px; margin-top: 2px; }

/* Экран исполнителя: подписи адресов в блоке «Подъём» */
.q-label--strong { color: var(--dp-ink); font-weight: 700; }
.q-back-slot[hidden] { display: none; }
.q-back-slot { margin-bottom: 14px; }

/* «Нужен путь обратно» — заметной строкой, рамкой */
.q-check--back {
  padding: 12px 14px;
  border: 1.5px solid var(--dp-line);
  border-radius: 14px;
  background: #fff;
}
.q-check--back:has(input:checked) { border-color: var(--dp-ink); }
.q-check--back b { font-weight: 800; }


/* ---------------------------------------------------------------------------
   ЭТАП 215. «Маршрут»: «Откуда» и «Куда» одним экраном, как в такси.
   Две строки, кружок слева — цвет метки этой строки; отмеченная строка
   (в неё выбирает карта) — в рамке. Справа от строк — ⇅.
--------------------------------------------------------------------------- */
.q-route {
  position: relative;
  border: 1.5px solid var(--dp-edge);
  border-radius: 16px;
  background: #fff;
}
.q-route__pt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 54px 8px 14px;
  border-radius: 14px;
  cursor: text;
}
.q-route__pt + .q-route__pt { border-top: 1px solid var(--dp-line); }
.q-route__pt.is-active { background: #fff; box-shadow: inset 0 0 0 2px var(--dp-ink); }
.q-route__pt[data-role="to"].is-active { box-shadow: inset 0 0 0 2px var(--dp-red); }
.q-route__pt + .q-route__pt.is-active,
.q-route__pt.is-active + .q-route__pt { border-top-color: transparent; }
/* Пунктир между кружками — линия маршрута */
.q-route__pt[data-role="from"]::after {
  content: "";
  position: absolute;
  left: 20px;
  top: calc(50% + 10px);
  height: calc(50% + 2px);
  border-left: 2px dotted #b7bec6;
  z-index: 1;
}
.q-route__pt[data-role="to"]::before {
  content: "";
  position: absolute;
  left: 20px;
  bottom: calc(50% + 10px);
  height: calc(50% - 8px);
  border-left: 2px dotted #b7bec6;
}
.q-route__dot {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--dp-ink);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--dp-line);
  position: relative;
  z-index: 2;
}
.q-route__dot--to { background: var(--dp-red); border-radius: 4px; }
.q-route__field { flex: 1 1 auto; min-width: 0; }
.q-route__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--dp-muted);
  line-height: 1.2;
  cursor: text;
}
.q-route__pt.is-active .q-route__label { color: var(--dp-ink); }
.q-route__inp {
  display: block;
  width: 100%;
  border: 0;
  outline: none;
  background: none;
  padding: 2px 0 1px;
  font: inherit;
  font-size: 16px;   /* меньше 16px — iOS зумит страницу при фокусе */
  font-weight: 700;
  color: var(--dp-ink);
  text-overflow: ellipsis;
}
.q-route__inp::placeholder { color: #9aa2ab; font-weight: 500; }
.q-route__type {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--dp-muted);
}
.q-route__type:empty { display: none; }
.q-route__swap {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--dp-line);
  background: #fff;
  color: var(--dp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 23, 26, 0.08);
}
.q-route__swap[hidden] { display: none; }
.q-route__swap:hover { border-color: var(--dp-ink); }
/* Подсказки поиска — под строкой, во всю ширину блока */
.q-route .suggest__list { left: -40px; right: -54px; }
.q-route + .q-hint { margin-top: 10px; }

/* ЭТАП 239. «Откуда» и «Куда» — два отдельных поля, а не один блок с
   чертой посередине (правка Александра 19.10: «визуально как одно»).
   Каждая строка — своя серая плашка со скруглением, между ними зазор;
   отмеченная — белая в рамке своего цвета. Пунктир между кружками и ⇅
   справа — как были, поверх зазора. */
.q-route { border: 0; border-radius: 0; background: none; display: grid; gap: 8px; }
.q-route__pt { background: var(--dp-bg, #F4F5F7); box-shadow: inset 0 0 0 1.5px transparent; }
.q-route__pt + .q-route__pt { border-top: 0; }
.q-route__pt.is-active { background: #fff; }
.q-route__pt[data-role="from"]::after { top: calc(50% + 10px); height: calc(50% + 6px); }
.q-route__pt[data-role="to"]::before { bottom: calc(50% + 10px); height: calc(50% - 4px); }
.q-route__dot { box-shadow: 0 0 0 3px var(--dp-bg, #F4F5F7), 0 0 0 4px var(--dp-line); }
.q-route__pt.is-active .q-route__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--dp-line); }
.q-route .suggest__list { left: -40px; right: -54px; }

/* Значок больницы / вокзала, на котором стоит метка (этап 215) */
.q-hpin.is-snap {
  border-color: var(--dp-red);
  box-shadow: 0 0 0 3px rgba(249, 79, 73, 0.28), 0 2px 8px rgba(20, 23, 26, 0.14);
  z-index: 2;
}

/* «Туда и обратно» на «Маршруте» — под строками, рамкой */
.q-back-line { margin-top: 12px; }
.q-back-line[hidden] { display: none; }
.q-back-line .q-back-slot { margin: 12px 0 0; }

/* Над карточками исполнителя — то, что меняет цену: компактно, блоком */
.q-params {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--dp-line);
  border-radius: 16px;
  background: #fff;
}
.q-param[hidden] { display: none; }
.q-param + .q-param { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dp-line); }
.q-param__label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--dp-ink); }
.q-params .q-field { margin: 0; }
.q-params .q-field + .q-field { margin-top: 10px; }
.q-params .chips--days { margin-bottom: 0; }
.q-params .q-other-date { margin-top: 8px; }
/* Этаж и лифт — одной строкой */
.q-params .js-home-details,
.q-params .js-back-details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.q-params .js-home-details .q-grid,
.q-params .js-back-details .q-grid { display: block; flex: 0 0 96px; margin: 0; }
.q-params .js-home-details .q-grid .q-label,
.q-params .js-back-details .q-grid .q-label { display: none; }
.q-params .js-home-details .q-check,
.q-params .js-back-details .q-check { flex: 1 1 160px; margin: 0; }
.q-params .js-floor-hint { flex: 1 0 100%; margin: 0; }
.q-params .js-addr-back-box { margin-top: 12px; }

/* «Детали и связь» у перевозки: то, что на цену не влияет */
.q-trip-details[hidden] { display: none; }
.q-trip-details { margin-bottom: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--dp-line); }
.q-trip-details > * + * { margin-top: 14px; }
.q-trip-details .js-order-dept-box[hidden],
.q-trip-details .js-flat-box[hidden],
.q-trip-details [hidden] { display: none; }

/* Маршрут виден всегда, даже когда заполненное свёрнуто: адрес правят
   одним нажатием с любого шага (этап 215) */
.form2-page.is-rows-off .q-step.is-done[data-step="route"] > .q-row { display: flex; }
.q-step[data-step="route"] > .q-row .q-row__text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Этап 215: блок над карточками — компактно, чтобы карточки с ценами
   начинались на первом экране */
.q-params .js-time-field { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.q-params .js-time-field .js-time-mode { flex: 1 0 100%; }
.q-params .js-time-field .js-time-label { margin: 0; font-size: 14px; font-weight: 700; color: var(--dp-ink); }
.q-params .js-time-field .q-inp--short { width: 110px; padding: 10px 12px; }
.q-params .js-time-field .q-hint { flex: 1 0 100%; margin: 0; }
.q-params .q-other-date { margin-top: 8px; }
.q-params .q-other-date input { padding: 6px 10px; }
.q-params .js-home-details .q-inp,
.q-params .js-back-details .q-inp { padding: 10px 12px; }
.q-params .js-floor-hint { display: none; }
.q-params .chips .chip span { padding-top: 9px; padding-bottom: 9px; }
.q-params .js-time-field [hidden] { display: none; }
.q-params .q-other-date { display: inline-flex; }

/* ---------------------------------------------------------------------------
   ЭТАП 216
--------------------------------------------------------------------------- */

/* «Когда и надбавки» тоже не сворачивается в «заполненное» — его строку
   правят одним нажатием с экрана исполнителя */
.form2-page.is-rows-off .q-step.is-done[data-step="trip"] > .q-row { display: flex; }

/* Над полоской листа не просвечивает прокрученное содержимое: раньше
   над «Свернуть — показать карту» виднелась строка предыдущего шага */
.q-sheet__grip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 40px;
  background: #fff;
}

/* «Маршрут» на телефоне: карта крупнее — по ней выбирают точки, а лист
   под ней короче (строки «Откуда / Куда», «Туда и обратно», подсказка) */
@media (max-width: 1023.98px) {
  .form2-page.is-route-step:not(.is-map-min):not(.is-sheet-off) .q-map__canvas { height: 56vh; height: 56dvh; }
  .form2-page.is-route-step .q-step[data-step="route"] .q-title { display: none; }
  .form2-page.is-route-step .q-route__pt { padding-top: 6px; padding-bottom: 6px; }
  .q-back-line .q-check--back { padding: 9px 12px; font-size: 14px; }
  .q-back-line { margin-top: 10px; }
  .q-route + .q-back-line + .q-hint,
  .q-back-line + .q-hint { font-size: 12.5px; margin-top: 8px; }
}

/* ---------------------------------------------------------------------------
   ЭТАП 218
--------------------------------------------------------------------------- */

/* Кнопка внизу — всегда в одну строку и пониже: длинная подпись рядом с
   ценой переносилась на две строки, и кнопка выходила огромной */
.q-next {
  min-width: 0;
  font-size: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-next[hidden] { display: none; }
.q-next.q-next--reserve { white-space: normal; }
.q-bar { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.q-bar__price { font-size: 20px; }

/* «Маршрут»: пока не выбраны обе точки — без кнопки; нет и сообщения —
   панель не занимает места вовсе */
.q-bar.is-route-wait:has(.q-bar__msg:empty) { display: none; }

/* ---------------------------------------------------------------------------
   ЭТАП 219. «Маршрут» на телефоне: лист внизу — только «Откуда», «Куда» и
   «Туда и обратно», по высоте содержимого; всё остальное место — карте.
   Подсказка, кнопки «Рядом» и строка «Перевозка» здесь не показываются
   (услугу меняют логотипом — на главную). Начали печатать адрес — лист
   вырастает, чтобы под полем поместились подсказки поиска.
--------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .form2-page.is-route-step:not(.is-sheet-off) .q-map { flex: 1 1 auto; }
  .form2-page.is-route-step:not(.is-sheet-off):not(.is-map-min) .q-map__canvas { height: auto; min-height: 200px; }
  .form2-page.is-route-step:not(.is-sheet-off) .q-sheet { flex: 0 0 auto; max-height: 62vh; max-height: 62dvh; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .form2-page.is-route-step .js-pt-hint,
  .form2-page.is-route-step .js-pt-near,
  .form2-page.is-route-step .q-filled,
  .form2-page.is-route-step .q-step.is-done > .q-row { display: none; }
  .form2-page.is-route-step .q-step[data-step="route"] .q-body { padding-top: 0; }
  .form2-page.is-route-step .q-sheet__grip { margin-bottom: 10px; }

  /* Печатают адрес или открыт список подсказок — листу нужно место */
  .form2-page.is-route-step:has(.js-pt-input:focus) .q-sheet,
  .form2-page.is-route-step:has(.js-pt-list:not([hidden])) .q-sheet,
  .form2-page.is-route-step:has(.js-back-fields:not([hidden]) .js-address:focus) .q-sheet { flex: 1 1 auto; max-height: none; }
  .form2-page.is-route-step:has(.js-pt-input:focus) .q-map__canvas,
  .form2-page.is-route-step:has(.js-pt-list:not([hidden])) .q-map__canvas { min-height: 120px; }
}


/* ---------------------------------------------------------------------------
   ЭТАП 220
--------------------------------------------------------------------------- */
/* Над карточками исполнителей — без пояснений */
.q-step[data-step="order"] .js-busy-note { display: none; }
.q-step[data-step="order"] .js-carriers-note[hidden] { display: none; }

/* «Заявка принята» → дополнительно: отделение, палата, квартира */
.q-extra[hidden] { display: none; }
.q-extra {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1.5px solid var(--dp-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}
.q-extra__lead { margin: 0 0 12px; font-size: 14.5px; line-height: 1.4; color: var(--dp-ink); }
.q-extra .q-trip-details { margin: 0 0 14px; padding: 0; border: 0; }
.q-extra .q-btn { margin-top: 4px; }
.q-extra__msg { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--dp-green); }
.q-extra__msg.is-error { color: var(--dp-red); }
.q-extra__msg[hidden], .q-extra .q-btn[hidden] { display: none; }
.q-extra { align-self: stretch; }

/* ---------------------------------------------------------------------------
   ЭТАП 221. Телефон: правки формы заявки
--------------------------------------------------------------------------- */

/* «Выберите услугу»: кнопки «Далее» нет — услуга открывается нажатием на
   карточку. Сообщение в панели (если есть) остаётся. */
.form2-page:has(.q-step[data-step="service"].is-active) .q-bar:has(.q-bar__msg:empty) { display: none; }
.form2-page:has(.q-step[data-step="service"].is-active) .q-next { display: none; }

/* «Другой день» убран — семи дней кнопками хватает */
.q-other-date[hidden], .q-params .q-other-date[hidden] { display: none !important; }

/* Над карточками исполнителей — без надписи «свободного времени нет…» */
.q-step[data-step="order"] .js-busy-none { display: none !important; }

@media (max-width: 1023.98px) {
  /* ЖЁСТКАЯ ФИКСАЦИЯ НА ЗАЯВКЕ (этап 111, стили потерялись — вернули).
     Услуга выбрана — экран заявки прибит к окну, страница под ним не
     прокручивается, блоки о сервисе спрятаны. Включает и снимает
     syncLock() в assets/form2.js (класс is-order-lock на <html>); высоту
     по видимой части окна ставит fitLock(). */
  html.is-order-lock,
  html.is-order-lock body.form2-page {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.is-order-lock .q-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 100vh;
    height: 100dvh;
  }
  html.is-order-lock .q-below,
  html.is-order-lock .q-more { display: none !important; }

  /* Открыта клавиатура: шапка прячется, карта — в полоску, место — полю */
  html.is-order-lock body.is-kbd .q-top { display: none; }
  html.is-order-lock body.is-kbd .q-map__canvas { height: 116px !important; min-height: 116px !important; flex: 0 0 auto; }
  html.is-order-lock body.is-kbd .q-map { flex: 0 0 auto !important; }

  /* «Маршрут»: под «Туда и обратно» — без лишнего белого поля. Отступ у
     нижнего края — только под системную полоску телефона */
  .form2-page.is-route-step .q-back-line .q-check--back { margin-bottom: 0; }
  .form2-page.is-route-step .q-step[data-step="route"] .q-body { padding-bottom: 0; }
  .form2-page.is-route-step:not(.is-sheet-off) .q-sheet { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* «Выберите исполнителя» и «Оплата и связь»: карта не нужна — лист на весь
     экран. «Свернуть — показать карту» остаётся: нажали — карта на весь
     экран, как раньше */
  .form2-page.is-map-gone:not(.is-sheet-off) .q-map { display: none; }
  .form2-page.is-map-gone:not(.is-sheet-off) .q-sheet { margin-top: 0; border-radius: 0; box-shadow: none; }
}

/* Этаж кнопками 1–9 (этап 221): одна строка из девяти кнопок */
.chips--floor { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.chips--floor .chip { display: block; }
.chips--floor .chip span { display: flex; justify-content: center; min-width: 0; min-height: 42px; padding: 8px 0; border-radius: 10px; }
.q-grid > .js-floor-field,
.q-grid > .js-floor-field-back { grid-column: 1 / -1; }
.q-params .js-home-details .q-grid,
.q-params .js-back-details .q-grid { flex: 1 0 100%; }
.q-params .js-home-details .q-check,
.q-params .js-back-details .q-check { flex: 1 0 100%; }

/* Нажатие на карточку исполнителя, машину, кнопки — без синей вспышки
   Android поверх всего блока: у выбранного и так меняется вид */
.q-sheet, .q-sheet *, .q-bar, .q-bar * { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------------------
   ЭТАП 223. «Заявка принята»: ответ строками, квартира под адресом,
   полная карточка заявки
--------------------------------------------------------------------------- */
.q-done .js-done-text { white-space: pre-line; color: var(--dp-ink); line-height: 1.55; }
.q-done .js-done-text[hidden] { display: none; }
.q-flat-addr[hidden] { display: none; }
.q-flat-addr { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--dp-ink); }
.q-extra .js-flat-box { display: block; }
.q-extra .js-flat-box > * + * { margin-top: 12px; }
.q-extra .js-flat-box .q-inp { max-width: 160px; }
.q-extra__lead[hidden] { display: none; }

.q-order-card[hidden] { display: none; }
.q-order-card {
  align-self: stretch;
  margin: 4px 0 18px;
  padding: 14px;
  border: 1.5px solid var(--dp-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}
.q-order-card__title { display: block; margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--dp-ink); }
.q-order-card__list { margin: 0; display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 7px 12px; font-size: 14px; line-height: 1.4; }
.q-order-card__list dt { margin: 0; color: var(--dp-muted); }
.q-order-card__list dd { margin: 0; color: var(--dp-ink); font-weight: 600; overflow-wrap: anywhere; }
.q-order-card__note { margin: 12px 0 0; font-size: 13px; color: var(--dp-muted); }
.q-extra.is-sent { margin: 0; padding: 0; border: 0; }
.q-extra.is-sent .q-extra__msg { margin: 0; }

/* ---------------------------------------------------------------------------
   ЭТАП 225. Ввод доп. информации — отдельный экран; экран заявки по ссылке
   (zayavka.php) — как отслеживание в такси
--------------------------------------------------------------------------- */

/* Ввод доп. информации: только заголовок, поля и одна кнопка. «Заявка
   принята», ответ строками и кнопки под ними на этом экране не нужны —
   после «Пропустить» / «Подтвердить» заказчик сразу на экране заявки */
.form2-page.is-extra .q-done > :not(.js-done-extra) { display: none !important; }
.form2-page.is-extra .q-done { padding-top: 4px; }
.form2-page.is-extra .q-extra { margin: 0; padding: 0; border: 0; border-radius: 0; }
.q-extra__title { margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--dp-ink); }
.q-extra__sub { margin: 0 0 16px; font-size: 15px; color: var(--dp-muted); }

/* ---------- экран заявки: раскладка ---------- */
.is-lead-page .q-sheet { background: var(--dp-bg); padding-top: 8px; }
.q-sheet__grip--still { cursor: default; background: var(--dp-bg); }

@media (max-width: 1023.98px) {
  /* Карта сверху — почти половина экрана, лист под ней прокручивается */
  .is-lead-page .q-map { flex: 0 0 auto; }
  .is-lead-page .q-map__canvas { height: 44vh; height: 44dvh; min-height: 240px; }
  .is-lead-page .q-sheet { flex: 1 1 auto; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* Карты нет — лист от шапки */
  .is-lead-page.is-lead-nomap .q-map { display: none; }
  .is-lead-page.is-lead-nomap .q-sheet { margin-top: 0; border-radius: 0; box-shadow: none; }
  .is-lead-page.is-lead-nomap .q-sheet__grip { display: none; }
  .is-lead-page.is-lead-nomap .q-trk { margin-bottom: 16px; }   /* кнопки чата в углу больше нет (этап 227) */
}
@media (min-width: 1024px) {
  /* Без карты — лист по центру, а не узкой полосой слева */
  .is-lead-page.is-lead-nomap .q-sheet { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 620px; box-shadow: none; }
}

/* ЭТАП 239. «Изменить время или адрес» и «Сменить исполнителя» — окном на
   весь экран, как развёрнутый лист формы: карта прячется, на экране только
   то, что меняют. Выбор точки на карте (.q-pick) — как был, поверх всего. */
@media (max-width: 1023.98px) {
  .is-lead-page.is-sheet-full .q-map { display: none; }
  .is-lead-page.is-sheet-full .q-sheet { margin-top: 0; border-radius: 0; box-shadow: none; min-height: 100vh; min-height: 100dvh; }
  .is-lead-page.is-sheet-full .q-sheet__grip { display: none; }
}
.is-lead-page.is-sheet-full .q-trk > :not(.is-focus):not(.q-trk__flash--err) { display: none; }
.is-lead-page.is-sheet-full .q-trk__manage.is-focus > :not(.q-change):not(.q-cancel[open]):not(.q-pick) { display: none; }
.is-lead-page.is-sheet-full .q-trk__manage.is-focus { grid-template-columns: 1fr; }

/* Адреса строками в «Дополнительно» — только когда карты нет */
.is-lead-page:not(.is-lead-nomap) .q-trk__more-row.is-addr { display: none; }

.q-trk[hidden] { display: none; }
.q-trk {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 -8px 6px;
  text-align: left;
  color: var(--dp-ink);
}
.q-trk__sec {
  background: #fff;
  border-radius: 20px;
  padding: 16px 18px;
}

/* 1. Состояние */
.q-trk__head { display: flex; flex-direction: column; gap: 12px; }
.q-trk__state { font-size: 13px; font-weight: 700; color: var(--dp-red-dark); }
.q-trk__state.is-ok { color: #1a7f45; }
.q-trk__state.is-no { color: var(--dp-red-dark); }
.q-trk__title { margin: -8px 0 0; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.q-trk__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.q-trk__steps[hidden] { display: none; }
.q-trk__steps li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.q-trk__bar { display: block; height: 4px; border-radius: 2px; background: var(--dp-line); }
.q-trk__steps li.is-on .q-trk__bar { background: var(--dp-red); }
.q-trk__step { font-size: 10.5px; font-weight: 600; color: var(--dp-muted); white-space: nowrap; letter-spacing: -0.01em; }
.q-trk__steps li.is-on .q-trk__step { font-weight: 700; color: var(--dp-ink); }
.q-trk__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--dp-muted); }
.q-trk__note[hidden] { display: none; }
.q-trk__head.is-closed .q-trk__title { font-size: 16px; font-weight: 600; line-height: 1.45; }

/* 2. Машина, цена, водитель */
.q-trk__card { display: flex; flex-direction: column; }
.q-trk__car { display: flex; align-items: center; gap: 14px; }
.q-trk__car-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.q-trk__car-name { font-size: 19px; font-weight: 800; }
.q-trk__car-who { font-size: 14px; font-weight: 600; color: var(--dp-muted); }
/* Этап 242: цвет и госномер — номер табличкой, как в такси */
.q-trk__car-look { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.q-trk__plate {
  display: inline-block; padding: 2px 8px; border: 1.5px solid var(--dp-ink, #14171a); border-radius: 6px;
  font-size: 15px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; background: #fff;
}
.q-trk__car-pic {
  flex: 0 0 auto; width: 96px; height: 62px; border-radius: 14px; overflow: hidden;
  background: var(--dp-bg); color: var(--dp-muted);
  display: flex; align-items: center; justify-content: center;
}
.q-trk__car-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-trk__price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dp-line);
}
.q-trk__pay { font-size: 14px; font-weight: 600; color: var(--dp-muted); }
.q-trk__sum { font-size: 22px; font-weight: 800; white-space: nowrap; }
.q-trk__driver {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dp-line);
}
.q-trk__driver[hidden] { display: none; }
.q-trk__driver-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--dp-bg); color: var(--dp-muted);
  display: flex; align-items: center; justify-content: center;
}
.q-trk__driver-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-trk__driver-label { font-size: 12px; font-weight: 600; color: var(--dp-muted); }
.q-trk__driver-name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.q-trk__driver-phone { font-size: 15px; font-weight: 600; white-space: nowrap; }
.q-trk__driver-wait { font-size: 14px; font-weight: 600; color: var(--dp-muted); }
.q-trk__call {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: var(--dp-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.q-trk__call:hover { background: var(--dp-red-dark); }
.form2-page a.q-trk__call { color: #fff; }
.q-trk__call svg { display: block; }

/* 3. Круглые кнопки */
.q-trk__acts { display: grid; grid-template-columns: repeat(var(--acts, 3), minmax(0, 1fr)); gap: 4px; padding: 14px 8px; }
.q-trk__act {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 2px; text-decoration: none; color: var(--dp-ink);
}
.form2-page a.q-trk__act { color: var(--dp-ink); }   /* сильнее «.form2-page a» — красного */
.q-trk__act-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--dp-bg);
  display: flex; align-items: center; justify-content: center;
}
.q-trk__act:hover .q-trk__act-icon { background: #e9ebee; }
.q-trk__act-text { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; }

/* 4. «Дополнительно» */
.q-trk__more { padding-top: 4px; padding-bottom: 4px; }
.q-trk__more.is-open { padding-bottom: 12px; }
.q-trk__more-btn {
  appearance: none; border: 0; background: transparent; width: 100%;
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0;
  font: inherit; color: var(--dp-ink); cursor: pointer; text-align: left;
}
.q-trk__more-title { flex: 0 0 auto; font-size: 16px; font-weight: 800; }
.q-trk__more-sum { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--dp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-trk__more.is-open .q-trk__more-sum { visibility: hidden; }
.q-trk__more-chev { flex: 0 0 auto; display: flex; transition: transform .2s ease; }
.q-trk__more.is-open .q-trk__more-chev { transform: rotate(180deg); }
.q-trk__more-list { margin: 0; border-top: 1px solid var(--dp-line); }
.q-trk__more-list[hidden] { display: none; }
.q-trk__more-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--dp-line); font-size: 14px; }
.q-trk__more-row:last-child { border-bottom: 0; }
.q-trk__more-row dt { margin: 0; color: var(--dp-muted); flex: 0 0 auto; }
.q-trk__more-row dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* Метка с подписью на карте «Ваша заявка» */
.q-tpin { position: relative; width: 0; height: 0; }
.q-tpin .q-tpin__dot { position: absolute; left: 0; top: 0; }
.q-tpin__label {
  position: absolute;
  left: 0;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: max-content;
  max-width: 210px;
  padding: 7px 11px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(20, 23, 26, 0.18);
  color: var(--dp-ink);
  font-family: inherit;
  line-height: 1.25;
  pointer-events: none;
}
.q-tpin__label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 5px rgba(20, 23, 26, 0.08);
}
.q-tpin--below .q-tpin__label { bottom: auto; top: 20px; }
.q-tpin--below .q-tpin__label::after { bottom: auto; top: -5px; box-shadow: -3px -3px 5px rgba(20, 23, 26, 0.06); }
.q-tpin__place { font-size: 13px; font-weight: 700; }
.q-tpin__note { font-size: 12px; font-weight: 600; color: var(--dp-muted); }
.q-tpin__back { font-size: 12px; font-weight: 700; color: var(--dp-ink); }

/* ---------- экран заявки: остальное ---------- */
.q-trk__h1, .q-trk__h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--dp-ink); }
.q-trk__muted { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--dp-muted); }
.q-trk__note--warn { color: #8a5a00; }
.q-trk__flash { margin: 0; padding: 12px 16px; border-radius: 16px; background: #e8f6ee; color: #1a6b3c; font-size: 14px; font-weight: 600; }
.q-trk__flash--err { background: #fdeceb; color: #b3271e; }
.q-trk__pay-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--dp-bg); font-size: 14px; color: var(--dp-ink); }
.q-trk__copied { margin: -2px 6px 2px; font-size: 13px; line-height: 1.4; color: #1a6b3c; font-weight: 600; overflow-wrap: anywhere; }
.q-trk__copied[hidden] { display: none; }
.q-trk__plain { margin: 0; }
.q-trk__plain .q-btn { width: 100%; }
button.q-trk__act { appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; width: 100%; }
.q-trk__act-form { margin: 0; display: flex; }
.q-trk .q-btn--wide { display: block; width: 100%; box-sizing: border-box; }
.q-trk .q-btn--ghost { background: var(--dp-bg); color: var(--dp-ink); }
.q-trk__sec .q-btn + .q-btn, .q-trk__sec .q-trk__muted + .q-btn { margin-top: 8px; }
.q-trk .q-inp { width: 100%; box-sizing: border-box; margin: 0 0 8px; }
.q-trk .q-label { display: block; margin: 8px 0 6px; }
.q-trk__more-row dd a { color: var(--dp-red); }

/* Другие компании (этап 159) */
.q-relay {
  display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 12px 14px;
  border: 1.5px solid var(--dp-line); border-radius: 14px; cursor: pointer; font-size: 15px;
}
.q-relay:has(input:checked) { border-color: var(--dp-red); background: #fff7f6; }
.q-relay input { flex: 0 0 auto; margin: 0; accent-color: var(--dp-red); }
.q-relay__name { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.q-relay__name small { font-weight: 500; color: var(--dp-muted); }
.q-relay__warn { color: #8a5a00 !important; }
.q-relay__price { font-weight: 800; white-space: nowrap; }
.q-relay__check { margin: 10px 0; font-size: 14px; line-height: 1.4; }
.q-trk__relay .q-btn { margin-top: 6px; }

/* Оценка (этап 116) */
.q-rate { margin: 0; }
.q-rate__stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
.q-rate__star { display: block; }
.q-rate__star input { position: absolute; opacity: 0; pointer-events: none; }
.q-rate__star span {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  border-radius: 12px; border: 1.5px solid var(--dp-line); font-size: 16px; font-weight: 800; cursor: pointer;
}
.q-rate__star input:checked + span { border-color: var(--dp-red); background: #fff7f6; color: var(--dp-red-dark); }
.q-rate__star input:focus-visible + span { outline: 2px solid var(--dp-ink); outline-offset: 2px; }

/* Жалоба и поддержка */
.q-trk__help { display: flex; flex-direction: column; gap: 10px; }
.q-trk__help .q-trk__muted { margin: 0; }
.q-trk__complaint summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--dp-ink); padding: 4px 0; }
.q-trk__complaint form { margin-top: 10px; }

/* Где моя заявка — без ключа */
.q-trk--find { margin-top: 8px; }
.q-trk--find .q-trk__title { margin: 0 0 6px; }
.q-find { margin: 0; }
.q-find .q-btn { margin-top: 6px; }
.q-mine a { display: block; padding: 11px 0; border-bottom: 1px solid var(--dp-line); color: var(--dp-ink); text-decoration: none; font-weight: 700; }
.q-mine a small { display: block; font-weight: 500; color: var(--dp-muted); }
.q-mine a:last-of-type { border-bottom: 0; }
.q-mine form { margin-top: 10px; }
.q-mine[hidden], .js-max-login[hidden] { display: none; }


/* ---------------------------------------------------------------------------
   ЭТАП 226. Кнопка «Свернуть — показать карту» пропадала после нескольких
   нажатий.

   Яндекс-карта пишет себе высоту числом (style="height: 690px") по размеру
   блока, в котором стоит. А у блока карты на «Маршруте» и при карте во весь
   экран высота «auto» — по содержимому, то есть по той же карте. Получался
   замкнутый круг: развернули карту во весь экран — она запомнила 690px;
   вернули лист — блок карты по-прежнему 690px, потому что внутри карта
   690px. Лист с полоской-кнопкой уезжал за нижний край экрана.

   Теперь карта лежит в своём блоке поверх (position: absolute) и на его
   высоту не влияет: высоту блоку задаёт только раскладка экрана, а карта
   подстраивается под блок — и при разворачивании, и при сворачивании.
--------------------------------------------------------------------------- */
.q-map__canvas { position: relative; overflow: hidden; }
.q-map__canvas > .ymaps3--map-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* ---------------------------------------------------------------------------
   ЭТАП 227. Экран «Введите дополнительную информацию» — как шаг заявки.

   • Кнопка «Пропустить» / «Подтвердить» — в нижней панели во всю ширину,
     как «Далее» и «Заказать» на остальных шагах (раньше — отдельная кнопка
     в листе, на телефоне висела «таблеткой» поверх полей).
   • На телефоне экран прибит к окну (is-order-lock), как во время ввода
     заявки: страница под ним не прокручивается, ездят только поля.
   • Цены, «Заказать» и строки резерва в панели на этом экране нет.
   Плавающей кнопки чата больше нет нигде — «Поддержка» в меню (chat.js).
--------------------------------------------------------------------------- */
.form2-page.is-extra .q-bar .js-next,
.form2-page.is-extra .q-bar .js-price,
.form2-page.is-extra .q-bar .js-reserve-note { display: none !important; }
.q-bar .js-extra-send[hidden] { display: none; }
.form2-page.is-extra .q-bar:not([hidden]) { display: block; }
.form2-page.is-extra .q-bar .js-extra-send { display: block; flex: 1 1 auto; width: 100%; }
/* Поля — до самой панели, без пустого хвоста */
.form2-page.is-extra .q-done { padding-bottom: 12px; }
.form2-page.is-extra .q-extra .q-trip-details { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   ЭТАП 230. Экран заявки: заказчик сам меняет исполнителя и отменяет заявку;
   без синей вспышки при касании (Android); значок MAX — официальный.
--------------------------------------------------------------------------- */

/* Синяя подсветка касания в Chrome на Android — нигде. Вместо неё — своё
   лёгкое затемнение у кнопок (:active ниже) */
html, body, a, button, summary, label, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
.q-btn:active, .q-trk__act:active .q-trk__act-icon, .q-relay:active, .q-reason:active { filter: brightness(.95); }
.q-btn:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }

/*
 * Этап 236: кнопки «Изменить время или адрес», «Сменить исполнителя»,
 * «Отменить заявку». Раньше у кнопки-summary стояло height: 100% — Safari на
 * iPhone при прокрутке иногда считал эти 100% от всего листа, и кнопка
 * раздувалась в огромный овал (скругление 999px). Высота теперь по
 * содержимому, скругление — как у карточек, а не «таблеткой».
 */
.q-trk__manage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.q-trk__manage > details { display: block; min-width: 0; }
.q-trk__manage-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 48px; max-height: 72px;
  box-sizing: border-box; padding: 10px 8px; font-size: 14px; line-height: 1.2; border-radius: 16px; overflow: hidden; }
.q-trk .q-trk__manage .q-btn--ghost { background: var(--dp-bg); color: var(--dp-ink); }
.q-cancel { margin: 0; }
@media (max-width: 440px) { .q-trk__manage { grid-template-columns: 1fr; } }
.q-cancel__keep { display: block; margin: 10px auto 0; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--dp-muted); cursor: pointer; }
.q-cancel--wide, .q-cancel[open] { grid-column: 1 / -1; }
.q-cancel > summary { list-style: none; cursor: pointer; }
.q-cancel > summary::-webkit-details-marker { display: none; }
.q-cancel[open] > summary { display: none; }
.q-cancel__form { margin: 0; padding: 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--dp-line); }
.q-cancel__reasons { display: grid; gap: 6px; margin: 4px 0 10px; }
.q-reason { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--dp-line); border-radius: 14px; cursor: pointer; font-size: 15px; font-weight: 600; }
.q-reason:has(input:checked) { border-color: var(--dp-ink); }
.q-reason input { margin: 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--dp-ink); }
.q-btn--danger { background: #fdeceb; color: #b3271e; }
.q-trk .q-btn--danger { color: #b3271e; }
.q-trk__relay .q-btn--ghost { margin-top: 8px; }
.q-max-ico { display: block; width: 30px; height: 30px; border-radius: 9px; }
/* Кнопки MAX со значком: значок слева от текста */
.q-btn--max { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.q-btn--max.q-btn--wide { display: flex; }
.q-btn--max[hidden] { display: none; }
.q-max-ico--btn { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; }

/* ===================== ЭТАП 231: «Изменить время или адрес» ===================== */
.q-change { margin: 0; }
.q-change > summary { list-style: none; cursor: pointer; }
.q-change > summary::-webkit-details-marker { display: none; }
.q-change[open] > summary { display: none; }
.q-change__form { margin: 0; padding: 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--dp-line); }
.q-change__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-change__f { display: block; min-width: 0; }
.q-change__f .q-label { display: block; margin: 0 0 4px; }
.q-trk .q-change__f .q-inp { margin-bottom: 8px; min-height: 48px; }
.q-change__days { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.q-change__day { padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--dp-line); background: #fff; font: inherit;
  font-size: 14px; font-weight: 700; color: var(--dp-ink); cursor: pointer; }
.q-change__day.is-on { border-color: var(--dp-ink); background: var(--dp-ink); color: #fff; }
.q-change__more { margin: 0 0 10px; }
.q-change__addr { margin: 0 0 6px; }
.q-change__addr[hidden] { display: none; }
.q-change__sug { margin: 0 0 2px; }
.q-change__state { margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; }
.q-change__state[hidden] { display: none; }
.q-change__state p { margin: 0; }
.q-change__state p + p { margin-top: 6px; }
.q-change__state.is-ok { background: #E9F6EC; color: #145C33; }

/* ---------- Этап 236: маршрут в «Изменить» — как в начале заявки ---------- */
.q-chg-route { margin: 0 0 12px; }
.q-chg-route > .q-label { display: block; margin: 0 0 6px; }
.q-chg-pt { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 6px; padding: 12px 14px;
  border: 1.5px solid var(--dp-edge); border-radius: 14px; background: #fff; font: inherit; color: var(--dp-ink);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.q-chg-pt.is-changed { border-color: var(--dp-ink); }
.q-chg-pt__dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 999px; background: var(--dp-ink); }
.q-chg-pt--to .q-chg-pt__dot { background: var(--dp-red); }
.q-chg-pt__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.q-chg-pt__cap { font-size: 12px; font-weight: 700; color: var(--dp-muted); }
.q-chg-pt__val { font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.q-chg-pt__edit { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--dp-muted); }
.q-chg-pt__more { margin: 0 0 10px; padding: 10px 12px 2px; border-radius: 14px; background: var(--dp-bg); }
.q-chg-pt__more[hidden], .q-chg-pt__more [hidden] { display: none; }
.q-chg-pt__more .q-check { margin: 0 0 10px; }

/* Выбор точки: поиск и карта на весь экран */
html.q-pick-open, html.q-pick-open body { overflow: hidden; }
.q-pick { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #fff;
  font-family: Manrope, Helvetica, Arial, sans-serif; }
.q-pick[hidden] { display: none; }
.q-pick__top { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; padding-top: calc(8px + env(safe-area-inset-top)); }
.q-pick__back { width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--dp-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.q-pick__title { font-size: 19px; font-weight: 800; }
.q-pick__search { position: relative; padding: 4px 16px 10px; }
.q-pick__search .q-inp { width: 100%; box-sizing: border-box; margin: 0; }
.q-pick__list { position: absolute; left: 16px; right: 16px; top: calc(100% - 4px); z-index: 5; max-height: min(55vh, 420px);
  overflow: hidden auto; background: #fff; border: 1px solid var(--dp-line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(20, 23, 26, 0.16); }
.q-pick__list[hidden] { display: none; }
.q-pick__item { display: flex; align-items: center; gap: 12px; }
.q-pick__ico { flex: 0 0 28px; height: 28px; border-radius: 999px; background: var(--dp-bg); color: var(--dp-ink);
  display: flex; align-items: center; justify-content: center; }
.q-pick__item--hosp .q-pick__ico { background: var(--dp-red); color: #fff; }
.q-pick__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.q-pick__txt b { font-weight: 700; font-size: 15px; line-height: 1.3; }
.q-pick__txt small { font-size: 12.5px; color: var(--dp-muted); }
.q-pick__note { margin: 0; padding: 12px 15px; font-size: 14px; color: var(--dp-muted); }
.q-pick__map { position: relative; flex: 1 1 auto; min-height: 0; background: #EEF0F3; }
.q-pick__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.q-pick__hint { margin: 0; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  font-size: 13px; line-height: 1.4; color: var(--dp-muted); border-top: 1px solid var(--dp-line); }
@media (min-width: 900px) {
  .q-pick { inset: 4vh auto 4vh 50%; width: 560px; margin-left: -280px; border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(20, 23, 26, 0.35); }
}
.q-change__state.is-no { background: #FDECEB; color: #8F1F18; }
.q-change__state.is-wait, .q-change__state.is-info { background: var(--dp-bg); color: var(--dp-muted); }
.q-change__price { font-weight: 700; }
.q-change__next { margin-top: 10px; padding: 9px 14px; border: 0; border-radius: 12px; background: #fff; color: var(--dp-ink); font: inherit;
  font-weight: 800; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(20,23,26,.15); }
.q-change__form .js-ch-relay { margin-top: 8px; }
.q-change__form .js-ch-relay[hidden] { display: none; }
.q-btn:disabled { opacity: .45; cursor: default; }
.q-chg-wait .q-btn { margin-top: 6px; }
.q-chg-answer .q-btn { margin-top: 8px; }
@media (max-width: 380px) { .q-change__row { grid-template-columns: 1fr; } }

/* Этап 231: «Ваши места» из кабинета — на телефоне шаг «Маршрут» без кнопок
   «Рядом» (этап 219), но пока поле «Откуда»/«Куда» пустое и в фокусе, под
   ним — сохранённые больницы и адреса */
.q-quick__btn--mine { border-color: rgba(249,79,73,.35); }
@media (max-width: 1023.98px) {
  .form2-page.is-route-step:has(.js-pt-input:focus:placeholder-shown) .js-pt-near:has(.q-quick__group--mine) { display: block; }
  .form2-page.is-route-step .js-pt-near .q-quick__group:not(.q-quick__group--mine) { display: none; }
  .form2-page.is-route-step:has(.js-pt-list:not([hidden])) .js-pt-near { display: none; }
}

/* Этап 239.3: поля новой точки в «Изменить» — этаж и отделения кнопками, как в форме */
.q-chg-pt__more > div > .q-label { display: block; margin: 0 0 6px; }
.q-chg-pt__more .chips { margin: 0 0 12px; }
.q-chg-pt__more .q-chg-depts .chip span { min-height: 38px; padding: 7px 12px; font-size: 14px; }
.q-chg-pt__more .js-ch-dept { margin: 0 0 12px; }
.q-chg-pt__more .q-chg-ward .q-inp { margin-bottom: 10px; }

/* ---------- Этап 243: приложение заказчика на экране заявки ----------
   Круглая кнопка «Следить в приложении» — в ряду с «Поделиться» и MAX. Пять
   кнопок в ряд на узком телефоне — значки чуть меньше, подписи мельче. */
.q-trk__act-icon--app { color: var(--dp-red); }
.q-trk__acts--5 { gap: 2px; padding-left: 4px; padding-right: 4px; }
@media (max-width: 420px) {
  .q-trk__acts--5 .q-trk__act-icon { width: 46px; height: 46px; }
  .q-trk__acts--5 .q-trk__act-text { font-size: 11px; }
}

/* Окно снизу — один раз (assets/app-promo.js). Вид — как окно «Исполнитель
   отменил заявку» в кабинете: на телефоне лист снизу, на компьютере карточка */
.q-apps { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 23, 26, .45); animation: q-apps-fade .2s ease-out; }
.q-apps[hidden] { display: none; }
.q-apps.is-out { opacity: 0; transition: opacity .2s; }
.q-apps__box { width: 100%; max-width: 420px; background: #fff; border-radius: 24px; padding: 24px 20px 12px; text-align: center;
  box-shadow: 0 30px 80px rgba(20, 23, 26, .35); animation: q-apps-up .24s ease-out; }
.q-apps__ico { position: relative; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: #FFF1F0; color: var(--dp-red); }
.q-apps__bell { position: absolute; top: 12px; right: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--dp-red);
  box-shadow: 0 0 0 3px #FFF1F0; }
.q-apps__title { font-size: 21px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.2; }
.q-apps__text { margin: 0 0 16px; font-size: 15px; color: var(--dp-muted); line-height: 1.45; }
.q-apps__qr { display: flex; align-items: center; gap: 14px; text-align: left; margin: 0 0 16px; padding: 10px; border-radius: 16px; background: var(--dp-bg); }
.q-apps__qr svg { flex: none; border-radius: 10px; }
.q-apps__qr p { margin: 0; font-size: 13px; color: var(--dp-muted); line-height: 1.4; }
.q-apps__later { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--dp-muted); cursor: pointer; }
html.q-apps-open, html.q-apps-open body { overflow: hidden; }
@keyframes q-apps-fade { from { opacity: 0; } }
@keyframes q-apps-up { from { transform: translateY(24px); opacity: .6; } }
@media (max-width: 719.98px) {
  .q-apps { align-items: flex-end; padding: 0; }
  .q-apps__box { max-width: none; border-radius: 24px 24px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .q-apps__qr { display: none; }
}
@media (prefers-reduced-motion: reduce) { .q-apps, .q-apps__box { animation: none; } }

/* Этап 243: «Показать частные» — на карте шага «Маршрут» (раньше кнопка была
   только на прежнем шаге «Больница», и частных было не найти иначе как поиском) */
.q-map__paid { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 9px; border: 0; border-radius: 999px;
  background: #fff; box-shadow: 0 4px 14px rgba(20, 23, 26, .18); font: inherit; font-size: 14px; font-weight: 700; color: var(--dp-ink); cursor: pointer; }
.q-map__paid[hidden] { display: none; }
.q-map__paid .q-paid__mark { width: 24px; height: 24px; }
.q-map__paid.is-on { background: #F3EEFC; box-shadow: 0 4px 14px rgba(20, 23, 26, .18), inset 0 0 0 1.5px #7B4FD6; }
@media (min-width: 720px) and (max-width: 1023.98px) { .q-map__paid { left: 66px; } }
@media (min-width: 1024px) { .q-map__paid { top: 14px; } }
.form2-page.is-map-min .q-map__paid { display: none; }
.q-apps__box:focus { outline: none; }

/* Этап 243: форма сайта во встроенном окне приложения заказчика — без меню
   сайта и «На главную» (у приложения свои); выбор города остаётся */
.form2-page.in-app .q-top__nav,
.form2-page.in-app .q-top__menu,
.form2-page.in-app .q-top__drop,
.form2-page.in-app .q-map__btn--back,
.form2-page.in-app .q-promo,
.form2-page.in-app .q-more { display: none !important; }
.form2-page.in-app .q-top__logo { pointer-events: none; }

/* Этап 245: у сиделки, гигиены и проката на «Маршруте» одна строка —
   «Куда» спрятана атрибутом hidden (у .q-route__pt свой display) */
.q-route__pt[hidden] { display: none; }