/* Start:/local/templates/darmed/css/_cart-page.css?178876137424900*/
/*
 * Страница оформления заказа /cart/ (US-IT-07-7). Построена на токенах
 * _tokens.css и примитивах _primitives.css (.darmed-*), legacy-классы лендинга
 * (.services-page, .modal__row) не переиспользует.
 *
 * Подключается САМОЙ страницей (src/cart/index.php), а не header.php: других
 * потребителей у этих стилей нет, а общий шаблон грузится везде.
 *
 * Mobile-first: одна колонка, кнопка достаётся большим пальцем, горизонтальной
 * прокрутки нет ни при какой длине названия анализа. Пиксельно мокап заказчика
 * не повторяем — у него свой визуальный язык (Manrope, своя палитра), и копия
 * завела бы на сайте третий язык рядом с лендингом и кабинетами.
 */

.cart-page__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-primary);
  font-size: var(--font-size-h3);
  line-height: var(--lh-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.cart-page__subtitle {
  margin: 0 0 var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--font-size-h6);
  line-height: var(--lh-h6);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Каркас. Телефон — одна колонка. Десктоп — форма слева, счёт справа.
 *
 * Ширину не режем: страница занимает контейнер целиком. Потолок в 1180 пикселей
 * оставлял на широком мониторе полтора экрана пустоты справа — это читается как
 * недоделанная вёрстка, а не как поле страницы. Читаемость держим не общим
 * потолком, а точечно: у поля ИИН и у текстовых абзацев.
 *
 * Пустое состояние остаётся узким: класть во вторую колонку там нечего, а
 * растянутый на всю ширину абзац читается хуже.
 * ───────────────────────────────────────────────────────────────────────── */
.cart-empty {
  max-width: 640px;
}

.cart-checkout__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cart-checkout__grid {
  display: grid;
  gap: var(--space-3);
}

.cart-checkout__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Ряды полей: на широком экране ФИО встаёт в строку, на узком разъезжается в
   столбец. auto-fit вместо медиазапроса — порог задаёт сам контент, поэтому
   ряды одинаково работают и в левой колонке, и во всю ширину. */
.cart-checkout__row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.cart-checkout__row--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.cart-checkout__form[hidden],
.cart-empty[hidden],
.cart-checkout__fields[hidden],
.cart-identity[hidden],
.cart-checkout__iin-warning[hidden],
.cart-checkout__iin-other[hidden] {
  display: none;
}

/* Поле, значение которого пришло не из формы (учётка или ИИН). Не «сломанное»
   и не «отключённое» — просто нередактируемое, поэтому приглушаем фон, а не
   текст: значение должно читаться.

   Видимое поле даты рисует flatpickr, и readonly на нём стоит ВСЕГДА (ввод с
   клавиатуры там запрещён, дату выбирают календарём) — приглушать его по
   readonly нельзя, иначе открытая для правки дата выглядит закрытой. Признак
   замка там — disabled (см. setDateLocked в js/_cart-checkout.js).

   Отключённому полю браузер гасит текст сам, и на WebKit одного color для
   этого мало — нужен -webkit-text-fill-color. */
.cart-checkout .darmed-input[readonly]:not(.darmed-date-input),
.cart-checkout .darmed-date-input:disabled,
.cart-checkout .darmed-select:disabled {
  background: var(--bg-neutral);
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  opacity: 1;
  cursor: default;
}

/* Заметка о закрытых полях. Не подсказка под полем, а замечание к паре: полосой
   слева она видимо привязывается к обоим полям сразу и не путается с
   подсказками, которые относятся каждая к своему. Форма та же, что у
   предупреждения по ИИН, но нейтральная — сообщать тут не о чем, только
   объяснить замок. */
.cart-checkout__derived-note {
  margin: calc(-1 * var(--space-1)) 0 0;
  padding: var(--space-1) var(--space-1-5);
  border-left: 3px solid var(--grey-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-neutral);
  font-family: var(--font-primary);
  font-size: var(--font-size-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}

.cart-checkout__derived-note[hidden] {
  display: none;
}

/* Звёздочка обязательного поля. Цветом, а не только знаком: на плотной форме
   один символ теряется. */
.cart-required {
  color: var(--error-main);
  font-weight: var(--font-weight-bold);
}

.cart-checkout__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cart-checkout__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────
 * «На кого заказ» — свёрнутая замена шести полям у авторизованного пациента.
 * Он их уже заполнял: показывать форму заново значит просить работу без
 * результата. Разворачивается «Изменить данные» или чекбоксом заказа на
 * другого человека.
 * ───────────────────────────────────────────────────────────────────────── */
.cart-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2);
  border-radius: var(--radius-base);
  background: var(--bg-neutral);
}

.cart-identity__name {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-subtitle1);
  line-height: var(--lh-subtitle1);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cart-identity__meta {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-body2);
  line-height: var(--lh-body2);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.cart-identity__edit {
  align-self: flex-start;
  margin-top: var(--space-0-5);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--font-size-body2);
  line-height: var(--lh-body2);
  color: var(--primary-main);
  cursor: pointer;
  text-decoration: underline;
}

.cart-identity__edit:hover,
.cart-identity__edit:focus-visible {
  color: var(--primary-dark);
}

/* Счёт отделён от полей не рамкой, а фоном: это не ещё одна секция формы, а
   то, ради чего форму заполняют.
 *
 * ⚠️ Селектор удвоен намеренно. Страничный CSS Bitrix печатает в `<head>` ДО
 * шаблонного бандла (проверено на стенде: `page_*.css`, затем `template_*.css`),
 * поэтому при равной специфичности побеждает примитив: одиночный
 * `.cart-checkout__summary` проигрывал `.darmed-card` и фон оставался белым.
 * Всё, что здесь перебивает `.darmed-*`, обязано быть на класс «тяжелее». */
.cart-checkout .cart-checkout__summary {
  background: var(--bg-neutral);
  border-color: transparent;
}

.cart-checkout .cart-checkout__summary .cart-page__subtitle {
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--primary-accent);
}

.cart-checkout__summary-note {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Состав заказа. Название тянется, цена не переносится: строка «ОАК + СОЭ ...
 * 2 325 ₸» должна читаться слева направо на любом экране.
 * ───────────────────────────────────────────────────────────────────────── */
.cart-order__list {
  display: flex;
  flex-direction: column;
}

/* Выравнивание по центру, а не по базовой линии. Базовая линия хорошо держала
   цену, но не кнопку: у inline-flex без текста базовая линия — нижний край, и
   32-пиксельная кнопка вылезала над первой строкой названия. Центр решает это
   и для длинных названий: у «СОЭ (скорость оседания эритроцитов)» в две строки
   цена с крестиком встают против всего блока, а не липнут к его верху. */
.cart-order__row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) 0;
  border-bottom: 1px solid var(--divider-light);
  font-family: var(--font-primary);
  font-size: var(--font-size-body2);
  line-height: var(--lh-body2);
  color: var(--text-primary);
}

.cart-order__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cart-order__price {
  flex: 0 0 auto;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.cart-order__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32px — минимальная цель для пальца; иконка внутри мельче. */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-disabled);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.cart-order__remove:hover,
.cart-order__remove:focus-visible {
  color: var(--error-main);
  background: var(--action-hover);
}

/* Цена — брендовым зелёным: в счёте это главное число строки, и серым оно
   тонет среди названий. */
.cart-order__price {
  color: var(--primary-main);
}

.cart-order__row--fee .cart-order__name {
  color: var(--text-secondary);
}

.cart-order__row--fee .cart-order__price {
  color: var(--text-secondary);
}

/* Итог — не строка таблицы, а результат: плашка брендового цвета. */
.cart-order__row--total {
  margin-top: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border-bottom: 0;
  border-radius: var(--radius-base);
  background: var(--primary-lighter);
  color: var(--primary-darker);
  font-size: var(--font-size-subtitle1);
  line-height: var(--lh-subtitle1);
  font-weight: var(--font-weight-bold);
  justify-content: space-between;
}

.cart-order__row--total .cart-order__price,
.cart-order__row--total > span:last-child {
  color: var(--primary-darker);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Плашки над формой: отказ и предупреждение о пересчёте.
 * ───────────────────────────────────────────────────────────────────────── */
.cart-checkout__alert {
  margin: 0;
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-base);
  font-family: var(--font-primary);
  font-size: var(--font-size-body2);
  line-height: var(--lh-body2);
}

.cart-checkout__alert--error {
  background: var(--error-lighter);
  color: var(--error-darker);
}

.cart-checkout__alert--warning {
  background: var(--warning-lighter);
  color: var(--warning-darker);
}

/* ─────────────────────────────────────────────────────────────────────────
 * ИИН: подпись с датой и полом, предупреждение о контрольной сумме, строка про
 * чужой кабинет. Все три приходят с сервера — правила живут только там.
 * ───────────────────────────────────────────────────────────────────────── */
/* Поле ИИН и три его подписи — одна колонка с собственным шагом. Отрицательного
   отступа здесь больше нет: он подтягивал к полю ВСЕ три подписи разом, и жёлтая
   плашка (у неё есть фон и padding) наезжала на строку с датой и полом. */
.cart-checkout__iin {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* Двенадцать цифр не просят поля во всю колонку; подписи держим той же
     ширины, чтобы они читались как часть поля, а не как отдельный блок. */
  max-width: 420px;
}

.cart-checkout__iin-warning,
.cart-checkout__iin-other {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-caption);
  line-height: var(--lh-caption);
}

/* Предупреждение о контрольной сумме — заметка, а не запрет: оно ничего не
   блокирует. Поэтому не заливка целиком, а полоса слева на мягком фоне —
   сплошной жёлтый прямоугольник читался как ошибка формы. */
.cart-checkout__iin-warning {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1-5);
  border-left: 3px solid var(--warning-main);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warning-lighter);
  color: var(--warning-darker);
}

.cart-checkout__iin-warning::before {
  content: "!";
  flex: 0 0 auto;
  font-weight: var(--font-weight-bold);
}

.cart-checkout__iin-other {
  color: var(--info-dark);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Итог и кнопка. На телефоне это последний экран формы, поэтому сумма стоит
 * прямо над кнопкой: решение «платить столько» принимается здесь.
 * ───────────────────────────────────────────────────────────────────────── */
/* Подвал формы: слева сумма, справа действие. На широком экране колонка формы
   почти в тысячу пикселей, и кнопка во всю её ширину читалась не как кнопка, а
   как полоса — размер обещал важность, которой у неё нет. Полосой здесь работает
   сама плашка, кнопка внутри неё размером с кнопку. */
.cart-checkout__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-base);
  background: var(--bg-neutral);
}

.cart-checkout__submit-total {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  font-family: var(--font-primary);
  font-size: var(--font-size-subtitle1);
  line-height: var(--lh-subtitle1);
  color: var(--text-primary);
}

.cart-checkout__submit-total span {
  font-size: var(--font-size-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}

.cart-checkout__submit-total strong {
  font-size: var(--font-size-h5);
  line-height: var(--lh-h5);
  color: var(--primary-darker);
}

/* Кнопке нужен пол, а не потолок: «Оформить заказ» коротко, и по одному тексту
   она вышла бы мельче своей роли рядом с суммой. */
.cart-checkout__submit .darmed-button {
  min-width: 240px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Пустые состояния и экран подтверждения.
 * ───────────────────────────────────────────────────────────────────────── */
.cart-empty,
.cart-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.cart-done {
  max-width: 1180px;
}

/* «Что вы заказали» и «Куда приходить» — равноправные ответы на два разных
   вопроса, поэтому рядом, а не друг под другом. */
.cart-done__cards {
  align-self: stretch;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.cart-empty__lead,
.cart-done__lead {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-body1);
  line-height: var(--lh-body1);
  color: var(--text-secondary);
}

.cart-done__number {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-h2);
  line-height: var(--lh-h2);
  color: var(--primary-main);
}

.cart-done__card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cart-done__address,
.cart-done__hours,
.cart-done__expires,
.cart-done__pay {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-body2);
  line-height: var(--lh-body2);
  color: var(--text-secondary);
}

.cart-done__address {
  font-size: var(--font-size-subtitle1);
  line-height: var(--lh-subtitle1);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Десктоп: две колонки.
 *
 * Порог 1025, а не круглая 1024, — он повторяет собственную границу сайта: на
 * `max-width: 1024px` в _responsive.css переключается `--width-multiplier` на
 * мобильную шкалу (`100vmin / 375`), и padding `.container` вырастает с 50 до
 * ~106 пикселей. Внутри той шкалы на вторую колонку места уже нет: форма
 * ужимается до 430 пикселей и поля начинают ломаться.
 *
 * Счёт лежит в разметке ПЕРВЫМ (на телефоне он и должен быть первым экраном), а
 * в правую колонку его переставляет сетка — порядок в DOM ради этого не
 * выворачиваем, иначе на телефоне «Оформить заказ» оказался бы до полей.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .cart-checkout__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
  }

  .cart-checkout__main {
    grid-column: 1;
    grid-row: 1;
  }

  /* Счёт НЕ липкий (решение 06.09): состав короткий, а прилипшая карта на
     длинной форме больше мешает, чем помогает. Вместе со sticky ушла и
     внутренняя прокрутка списка — она существовала только ради того, чтобы
     «Итого» оставалось видно у прилипшей карты. */
  .cart-checkout__aside {
    grid-column: 2;
    grid-row: 1;
  }

  /* Пункты забора в две колонки: их четыре с адресом и часами, в один столбец
     они растягивают страницу на пустом месте.
     Селектор удвоен по той же причине, что у счёта: `.darmed-stack` приезжает
     из шаблонного бандла ПОСЛЕ страничного и при равной специфичности возвращал
     свой `display: flex`. */
  .cart-checkout .cart-checkout__pickup {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1-5);
  }
}

@media (max-width: 767px) {
  .cart-page__title {
    font-size: var(--font-size-h4);
    line-height: var(--lh-h4);
  }

  .cart-done__number {
    font-size: var(--font-size-h3);
    line-height: var(--lh-h3);
  }

  /* Кнопка на всю ширину — её жмут большим пальцем одной рукой. Подвал формы
     здесь тоже разворачивается в колонку: сумма и кнопка рядом в одну строку
     на узком экране обе выходят тесными. */
  .cart-empty > .darmed-button,
  .cart-done > .darmed-button,
  .cart-checkout__submit .darmed-button {
    width: 100%;
    justify-content: center;
  }

  .cart-checkout__submit {
    flex-direction: column;
    align-items: stretch;
  }
}

/* End */
/* /local/templates/darmed/css/_cart-page.css?178876137424900 */