/* ============================================================
   ROSIE'S — drawers.css
   Шторки: панель товара, корзина, чекаут.
   Порядок: tokens → base → components → sections → blocks → drawers.
   Все значения берутся из css/tokens.css. Хардкод запрещён.
   ============================================================ */


/* ============================================================
   ШТОРКИ (ОБЩЕЕ)
   Базовые правила .drawer, .drawer--open, .drawer__head,
   .drawer__body, .drawer__foot — в components.css.
   Позиционирование .drawer__panel и .drawer--open .drawer__panel — в blocks.css
   (там же полная логика: fixed, transform, visibility, десктоп).
   Здесь только дополнительные правила для тела шторки.
   ============================================================ */

/* Прокручиваемое тело внутри панели — дополняет компонент из components.css */
.drawer__panel .drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ============================================================
   КАРТОЧКА ТОВАРА В ШТОРКЕ (.sheet__*)
   Создаётся в catalog.js → renderProductSheet()
   ============================================================ */

/* Обёртка галереи сверху шторки: лента кадров + точки + подсказка.
   Раньше здесь жила ровно одна картинка, и сам блок был квадратом
   с overflow: hidden. Теперь квадрат задаёт кадр внутри ленты,
   а обёртка ничего не режет — иначе точки и подсказка под лентой
   оказались бы за её границей. Стили ленты — .gallery__* в blocks.css. */
.sheet__media {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: var(--s-5);
}

/*
   Плейсхолдер внутри .sheet__media — для позиций без фото.
   Внешность берёт у .card__media-placeholder (components.css), но там он
   растянут absolute по карточке; здесь растягивать не по чему, поэтому
   возвращаем его в поток и сами задаём квадрат.
*/
.sheet__media-placeholder {
  position: relative;
  inset: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Заголовочная область */
.sheet__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.sheet__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.sheet__subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
  line-height: var(--lh-snug);
}

/* ≈ N шт в 1 кг */
.sheet__pieces {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: var(--s-2) 0 0;
  line-height: var(--lh-snug);
}

/* Описание товара */
.sheet__description {
  font-size: var(--fs-base);
  color: var(--ink-2);
  line-height: var(--lh-loose);
  margin: 0 0 var(--s-5);
}

/* Секция «Состав» / «КБЖУ» / «Как готовить» */
.sheet__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.sheet__section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
  line-height: var(--lh-snug);
}

/* Строка состава */
.sheet__ingredients {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-normal);
  margin: 0;
}

/*
   КБЖУ — таблица: 4 строки (ккал / белки / жиры / углеводы).
   Подложка --surface-warm, цифра крупно, подпись мелко и приглушённо.
*/
.sheet__nutrition {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: var(--surface-warm);
  border-radius: var(--r-md);
  overflow: hidden;
}

.sheet__nutrition th,
.sheet__nutrition td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.sheet__nutrition tr:last-child th,
.sheet__nutrition tr:last-child td {
  border-bottom: none;
}

/* Подпись (название показателя) */
.sheet__nutrition th {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  width: 50%;
}

/* Значение (цифра крупнее) */
.sheet__nutrition td {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}

/* Нумерованный список шагов приготовления */
.sheet__cooking {
  margin: 0;
  padding-left: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.sheet__cooking li {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-loose);
  padding-left: var(--s-2);
}

/*
   Фасовки в шторке товара.
   Крупнее, чем кнопки-пачки в карточке каталога.
   Каждая .sheet__pack — строка с информацией и кнопкой/степпером.
*/
.sheet__packs {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.sheet__pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background-color: var(--surface-warm);
  border: 1px solid var(--line);
}

/* Информация о фасовке: название + цена */
.sheet__pack-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.sheet__pack-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
}

.sheet__pack-price {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--rose);
  line-height: 1;
}

/* Плашка «Товар временно недоступен» */
.sheet__unavailable-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background-color: var(--warn-bg);
  color: var(--warn);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0;
}

.sheet__unavailable-note::before {
  content: '⚠️';
  font-size: var(--fs-base);
  flex-shrink: 0;
  line-height: 1;
}


/* ============================================================
   ФОРМА ЧЕКАУТА (.checkout-form и дочерние)
   Генерируется в checkout.js → renderCheckoutDrawer()
   ============================================================ */

/* Общий вертикальный стек полей формы */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* chip-group — универсальный flex-контейнер чипов-переключателей в чекауте */
.chip-group {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.chip-group .chip {
  min-height: 44px;
}

/*
   Список способов оплаты в форме.
   Генерируется как .payment-methods > .payment-method.
*/
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Отдельный метод оплаты — кнопка-строка */
.payment-method {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--surface);
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color     var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.payment-method:hover {
  background-color: var(--pink-050);
  border-color: var(--rose-soft);
}

.payment-method:active {
  transform: scale(0.98);
}

.payment-method__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-snug);
}

.payment-method__hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: var(--lh-snug);
}

/* Выбранный способ оплаты */
.payment-method--active {
  border-color: var(--rose);
  background-color: var(--pink-050);
}

.payment-method--active .payment-method__title {
  color: var(--rose-deep);
}

/*
   «Рубли на карту Т-Банка» — ключевой оффер для аудитории без тайского счёта.
   Выделяется сильнее: рамка плотнее, подложка насыщеннее, иконка-метка.
*/
/*
   Итоги заказа в чекауте.
   Подложка --surface-warm, скругление --r-lg.
   Строки «Товары / Доставка / Итого», итог крупный и жирный.
   order-summary: генерируется через buildOrderSummary() в checkout.js
*/
.order-summary {
  background-color: var(--surface-warm);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.order-summary__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

/* Список товаров в итогах */
.order-summary__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.order-summary__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.order-summary__name {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: var(--lh-snug);
  flex: 1;
  min-width: 0;
}

.order-summary__price {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Разделитель */
.order-summary__divider {
  height: 1px;
  background-color: var(--line-strong);
  margin: var(--s-1) 0;
}

/* Строки подытог / доставка / итого */
.order-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Итоговая строка — крупнее и жирнее */
.order-summary__row--total {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  margin-top: var(--s-2);
}

.order-summary__row--total strong {
  font-size: var(--fs-lg);
  color: var(--rose);
}

/* «Стоимость доставки уточним» */
.order-summary__delivery-tbd {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-style: italic;
}

/* Зелёная отметка «бесплатно» */
.order-summary__free {
  color: var(--ok);
  font-weight: 700;
}

/* Сноска «+ доставка» рядом с итогом */
.order-summary__total-note {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-3);
}


/* ============================================================
   БЛОК ИНФОРМАЦИИ О РЕЙСЕ В БАНГКОК
   Генерируется в checkout.js → buildBangkokDateInfo()
   ============================================================ */

.bangkok-trip-info {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5) var(--s-5);
  border-radius: var(--r-lg);
  background-color: var(--pink-050);
  border: 1.5px solid var(--pink-200);
  position: relative;
  overflow: hidden;
}

/* Левая розовая полоска-акцент */
.bangkok-trip-info::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--rose);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.bangkok-trip-info__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: var(--s-1);
}

.bangkok-trip-info__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.bangkok-trip-info__heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rose);
  margin: 0;
  line-height: 1;
}

.bangkok-trip-info__date {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Строка с датой отсечки приёма заказов */
.bangkok-trip-info__cutoff {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Срочно: отсечка сегодня или завтра */
.bangkok-trip-info__cutoff--urgent {
  color: var(--warn);
  font-weight: 700;
}

.bangkok-trip-info__note {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: var(--lh-normal);
  margin: 0;
}


/* ============================================================
   КОРЗИНА (.cart-*)
   Генерируется в checkout.js → renderCartDrawer()
   ============================================================ */

/* Пустое состояние корзины */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-12) var(--s-6);
  text-align: center;
}

.cart-empty__icon {
  font-size: 3rem;
  line-height: 1;
  opacity: 0.5;
}

.cart-empty__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.cart-empty__hint {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 28ch;
}

/* Список позиций корзины */
.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Строка позиции корзины */
.cart-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.cart-line:last-child {
  border-bottom: none;
}

/* Медиа (квадрат 56px) */
.cart-line__media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--pink-100);
}

.cart-line__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Информация о позиции */
.cart-line__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.cart-line__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-snug);
  margin: 0;
  /* Раньше был nowrap + ellipsis. После добавления подзаголовка обрезалась
     ровно та часть, которая отличает позиции: «Пельмени, кур…» вместо
     «Пельмени, курица». Разрешаем две строки. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cart-line__pack {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin: 0;
  line-height: 1;
}

.cart-line__price {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin: 0;
  line-height: 1;
}

/* Сумма строки */
.cart-line__sum {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 4ch;
  text-align: right;
}

/* Кнопка удаления из корзины */
.cart-line__remove {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: none;
  background-color: transparent;
  color: var(--ink-3);
  font-size: var(--fs-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--t-fast) var(--ease-out),
    color            var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.cart-line__remove:hover {
  background-color: var(--danger-bg);
  color: var(--danger);
}

/* Блок подытога в корзине */
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line);
}

/* Строка подытога */
.cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.cart-summary__label {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.cart-summary__value {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}

/* Предупреждение о минимальном заказе */
.cart-min-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background-color: var(--warn-bg);
  border: 1px solid var(--warn);
}

.cart-min-warn__icon {
  font-size: var(--fs-base);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}

.cart-min-warn__text {
  font-size: var(--fs-xs);
  color: var(--warn);
  line-height: var(--lh-normal);
  font-weight: 600;
}

/* Плейсхолдер изображения товара в корзине */
.product-placeholder {
  width: var(--ph-size, 56px);
  height: var(--ph-size, 56px);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--pink-100) 0%, var(--pink-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-placeholder__mark {
  font-size: 1.25rem;
  opacity: 0.5;
  line-height: 1;
  user-select: none;
}


/* ============================================================
   ЭКРАНЫ РЕЗУЛЬТАТА ЗАКАЗА
   ============================================================ */

/* Успешная отправка */
.order-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-4);
  text-align: center;
}

.order-success__icon {
  font-size: 3rem;
  line-height: 1;
}

.order-success__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-tight);
}

.order-success__number {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
  font-family: var(--font-ui);
}

.order-success__text {
  font-size: var(--fs-base);
  color: var(--ink-2);
  line-height: var(--lh-loose);
  margin: 0;
  max-width: 34ch;
}

/* Баннер ошибки отправки */
.order-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background-color: var(--danger-bg);
  border: 1px solid var(--danger);
  margin-bottom: var(--s-5);
}

.order-error__icon {
  font-size: var(--fs-base);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.order-error__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--danger);
  line-height: var(--lh-snug);
}

.order-error__text p {
  margin: 0;
}


/* ============================================================
   МЕЛОЧЬ
   ============================================================ */

/*
   .btn--disabled — заблокированная кнопка.
   components.css уже обрабатывает :disabled / [aria-disabled="true"],
   но JS-код в checkout.js навешивает класс .btn--disabled явно,
   поэтому дублируем стиль по классу.
*/
.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Дополнительная защита от hover-эффектов */
.btn--disabled:hover,
.btn--disabled:focus {
  transform: none;
  box-shadow: none;
}

/*
   .field__required — метка обязательности, генерируется в checkout.js.
   Выделяем цветом --rose, отступ слева.
*/
.field__required {
  color: var(--rose);
  font-weight: 600;
  margin-left: var(--s-1);
}


/* ============================================================
   АДАПТАЦИЯ: @media
   ============================================================ */

/* Мобильные правки для чекаута */
@media (max-width: 479px) {
  .sheet__title {
    font-size: var(--fs-h3);
  }

  .sheet__pack {
    padding: var(--s-3);
  }

  .sheet__pack-price {
    font-size: var(--fs-base);
  }

  .checkout-form {
    gap: var(--s-4);
  }
}

/* Десктоп: больше простора */
@media (min-width: 900px) {
  .sheet__media-placeholder {
    border-radius: var(--r-xl);
  }

  .order-summary {
    padding: var(--s-6);
  }
}


/* ============================================================
   УВАЖАЕМ @media (prefers-reduced-motion: reduce)
   Токены уже обнуляются в tokens.css, но дополнительно
   убираем transform-анимации на шторках, если они заданы здесь.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .payment-method,
  .sheet__pack,
  .cart-line__remove {
    transition: none;
  }
}


/* Галочки согласия в конце формы заказа (.consent) */
.consent {
  display: grid;
  gap: var(--s-1);
  padding-top: var(--s-2);
}

/* Вся строка — метка чекбокса: нажимать можно и по тексту, тач-зона не меньше 44 px */
.consent__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 44px;
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.consent__box {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--rose);
  cursor: pointer;
}

.consent__text a {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field--error .consent__box:not(:checked) {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}