/**
 * Заказы покупателя. Одна колонка: список заказов и диалоги действий.
 *
 * Файл десктопный, но страница — узкая колонка с max-width, поэтому
 * читается и на телефоне. Медиа-запросов по ширине нет (правило проекта).
 *
 * Главная задача оформления: на доставленном заказе покупатель должен
 * увидеть срок автоподтверждения раньше всего остального. Если он
 * промолчит, деньги уйдут магазину сами — это надо сказать заранее,
 * а не после.
 */

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--fs-sm);
  -webkit-font-smoothing: antialiased;
}


/* ══ Шапка ══════════════════════════════════════════════════════
   Своей шапки у страницы больше нет: .mo-header, .mo-nav и локальные
   .logo/.logo-mark удалены. Они дублировали общую шапку из base.css
   почти теми же правилами, но выглядели иначе — при переходе с витрины
   в заказы менялся весь верх страницы. Эти файлы грузятся ПОСЛЕ
   base.css, поэтому оставленные копии перебивали бы общий слой. */

/* ══ Заголовок и фильтры ════════════════════════════════════════ */
.mo-main { max-width: 820px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-6); }
.mo-head { margin-bottom: var(--s-4); }
.mo-ttl { margin: 0 0 4px; font-size: var(--fs-xl); }
.mo-sub {
  margin: 0;
  max-width: 58ch;
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.55;
}

.mo-filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.mo-chip {
  min-height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  background: var(--c-card);
  color: inherit;
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
}
.mo-chip.is-on { border-color: var(--c-accent); background: var(--c-accent-fill); color: #fff; }

/* ══ Кнопки ═════════════════════════════════════════════════════ */
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ══ Карточка заказа ════════════════════════════════════════════
   min-width: 0 на элементах сетки обязателен. По умолчанию grid item
   имеет min-width: auto, то есть не сжимается меньше своего содержимого:
   полоса из шести этапов и длинные названия деталей раздували карточку
   до 551px при экране 375, и вся страница уезжала вправо.
   Это не косметика — на телефоне половина заказа оказывалась за краем. */
.mo-list { display: grid; gap: var(--s-4); }
.mo-list > * { min-width: 0; }
.mo-order {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
/* Доставленный заказ выделяем: там ждут действия покупателя, и срок идёт */
.mo-order[data-status="delivered"] { border: 2px solid var(--c-warn); padding: calc(var(--s-4) - 1px); }
.mo-order[data-status="disputed"] { border-left: 4px solid var(--c-err); }
.mo-order[data-status="cancelled"] { opacity: .72; }

.mo-order-hd {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  min-width: 0;
  margin-bottom: var(--s-3);
}
.mo-order-no { font-weight: 700; font-variant-numeric: tabular-nums; }
.mo-order-seller { color: var(--c-muted-fg); font-size: var(--fs-xs); }
.mo-status {
  margin-left: auto;
  /* Без max-width длинная подпись «доставлен — подтвердите получение»
     занимала 247px и не переносилась, растягивая карточку за край экрана */
  max-width: 100%;
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-muted);
  color: var(--c-muted-fg);
  font-size: 11px; font-weight: 700;
}
.mo-status.is-authorized, .mo-status.is-confirmed { background: var(--c-warn-bg); color: var(--c-warn); }
.mo-status.is-shipped { background: color-mix(in srgb, var(--c-accent) 14%, var(--c-card)); color: var(--c-accent); }
.mo-status.is-delivered { background: var(--c-warn); color: #fff; }
.mo-status.is-completed { background: var(--c-ok-bg); color: var(--c-ok); }
.mo-status.is-disputed { background: var(--c-err-bg); color: var(--c-err); }

/* ══ Полоса этапов ══════════════════════════════════════════════
   Горизонтальная прокрутка внутри с max-width: без него шесть этапов
   растягивают страницу вместо того, чтобы скроллиться сами. */
.mo-steps {
  display: flex;
  max-width: 100%;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.mo-steps::-webkit-scrollbar { display: none; }
.mo-step {
  flex: none;
  display: flex; align-items: center; gap: 5px;
  padding-right: var(--s-2);
  color: var(--c-border-strong);
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
}
.mo-step i {
  width: 8px; height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.mo-step.is-done { color: var(--c-ok); }
.mo-step.is-done i { background: var(--c-ok); border-color: var(--c-ok); }
.mo-step.is-now { color: var(--c-fg); font-weight: 700; }
.mo-step.is-now i { background: var(--c-warn); border-color: var(--c-warn); }

/* ══ Позиции заказа ═════════════════════════════════════════════ */
.mo-items {
  display: grid; gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border);
}
.mo-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-3);
  align-items: baseline;
  min-width: 0;
}
/* Длинное название детали обязано переноситься, а не расширять карточку:
   «Ремень ГРМ, комплект с роликами» в одну строку не влезает на телефон */
.mo-item-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mo-item-art { grid-column: 1; color: var(--c-muted-fg); font-size: 11px; min-width: 0; overflow-wrap: anywhere; }
.mo-item-sum { grid-row: 1 / 3; grid-column: 2; font-weight: 600; white-space: nowrap; }

.mo-money {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  min-width: 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted-fg);
  font-size: 11px;
}
.mo-money b { color: var(--c-fg); font-size: var(--fs-sm); }
.mo-total { margin-left: auto; }
.mo-total b { font-size: var(--fs-md); font-weight: 700; }

/* ══ Срок автоподтверждения ═════════════════════════════════════
   Самое важное на доставленном заказе: если покупатель промолчит,
   деньги уйдут магазину сами. Это надо сказать до, а не после. */
.mo-deadline {
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border-left: 3px solid var(--c-warn);
  border-radius: var(--r-md);
  background: var(--c-warn-bg);
  color: var(--c-warn);
  font-size: var(--fs-xs); line-height: 1.55;
}
.mo-deadline.is-hot { border-left-color: var(--c-err); background: var(--c-err-bg); color: var(--c-err); }
.mo-deadline b { font-variant-numeric: tabular-nums; }

/* Код выдачи при самовывозе — крупно: его называют вслух в магазине */
.mo-code {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-muted);
  font-size: 11px;
}
.mo-code i { color: var(--c-muted-fg); font-style: normal; font-weight: 600; }
.mo-code b {
  font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.mo-code span { color: var(--c-muted-fg); }

.mo-note {
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-muted);
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.55;
}
.mo-note.is-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.mo-note.is-warn { background: var(--c-warn-bg); color: var(--c-warn); }

.mo-acts {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.mo-privacy-link {
  /* Одна ссылка в шапке вместо кнопки на каждой карточке: объяснение
     приватности одинаково для всех заказов, а карточек бывает несколько
     десятков — повторённая 46 раз ссылка забивала полезные действия. */
  /* 24px — норма WCAG 2.5.8 для цели нажатия; было 19px по высоте текста.
     inline-block, чтобы кнопка осталась внутри предложения. */
  display: inline-block;
  min-height: 24px;
  margin-left: var(--s-1);
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--c-primary);
  font: inherit; font-size: inherit; font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* Второстепенное действие внутри текста, а не кнопкой рядом с главными.
   «Деталь не подошла?» на завершённом заказе — именно такой случай:
   возможность нужна, но предлагать её кнопкой значит сеять сомнение
   там, где всё прошло хорошо. */
.mo-inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit; font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ══ Пусто ══════════════════════════════════════════════════════ */
.mo-empty {
  padding: var(--s-6) var(--s-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-card);
  text-align: center;
}
.mo-empty[hidden] { display: none; }
.mo-empty h2 { margin: 0 0 var(--s-2); font-size: var(--fs-base); }
.mo-empty p {
  max-width: 44ch;
  margin: 0 auto var(--s-4);
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.6;
}

/* ══ Диалоги ════════════════════════════════════════════════════ */
.mo-modal-back {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: var(--s-4);
  background: rgba(15, 23, 42, .5);
}
.mo-modal-back[hidden] { display: none; }
.mo-modal {
  width: min(100%, 460px);
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.mo-modal.is-wide { width: min(100%, 620px); }
.mo-modal-ttl { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.mo-modal-txt {
  margin: 0 0 var(--s-4);
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.6;
}

.mo-modal-sum { margin: 0 0 var(--s-3); display: grid; }
.mo-modal-sum > div {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
}
.mo-modal-sum dt { margin: 0; color: var(--c-muted-fg); }
.mo-modal-sum dd { margin: 0; font-weight: 600; }

/* Предупреждение в диалоге подтверждения: после нажатия отменить нельзя,
   и альтернатива (спор) должна быть видна до, а не после */
.mo-modal-warn {
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  border-left: 3px solid var(--c-warn);
  border-radius: var(--r-md);
  background: var(--c-warn-bg);
  color: var(--c-warn);
  font-size: 11px; line-height: 1.55;
}
.mo-modal-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.mo-reasons { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }
.mo-reasons label {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.mo-reasons label:hover { background: var(--c-muted); }
.mo-reasons input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }

.mo-field {
  display: grid; gap: 5px;
  margin-bottom: var(--s-4);
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); font-weight: 600;
}
.mo-opt { color: var(--c-border-strong); font-weight: 500; }
.mo-field textarea {
  width: 100%; min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-card);
  color: var(--c-fg);
  font: inherit; font-weight: 500;
  resize: vertical;
}

/* ══ Сравнение «у вас / видит магазин» ══════════════════════════
   Две колонки рядом: обещание «номер скрыт» проверяется глазами,
   а не принимается на слово. */
.mo-privacy { margin-bottom: var(--s-4); }
.mo-pr-row {
  display: grid;
  grid-template-columns: minmax(0, 100px) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.mo-pr-row.is-head {
  color: var(--c-muted-fg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom-width: 2px;
}
.mo-pr-label { color: var(--c-muted-fg); font-weight: 600; }
.mo-pr-mine { font-weight: 500; }
.mo-pr-their { color: var(--c-muted-fg); }
/* Зелёным то, что до магазина НЕ доходит или доходит обрезанным */
.mo-pr-their.is-good { color: var(--c-ok); font-weight: 600; }
.mo-pr-note {
  margin: var(--s-3) 0 0;
  color: var(--c-muted-fg);
  font-size: 11px; line-height: 1.6;
}

/* ══ Оценка звёздами ════════════════════════════════════════════
   Крупные звёзды: попасть пальцем в мелкую — лотерея, а ошибочная
   оценка портит рейтинг магазину. Подпись рядом обязательна: «3 звезды»
   разные люди понимают по-разному, «нормально с оговорками» — однозначно. */
.mo-stars {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-bottom: var(--s-4);
}
.mo-star {
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-border-strong);
  font-size: 30px; line-height: 1;
  cursor: pointer;
}
.mo-star.is-on { color: #F59E0B; }
.mo-star:hover { background: var(--c-muted); }
.mo-star-label {
  margin-left: var(--s-2);
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); font-weight: 600;
}

.mo-hint {
  margin: calc(var(--s-4) * -1 + 4px) 0 var(--s-4);
  color: var(--c-muted-fg);
  font-size: 11px; line-height: 1.55;
}

/* ══ Свой отзыв в карточке заказа ═══════════════════════════════
   Чтобы покупатель не гадал, оценивал он этот магазин или нет. */
.mo-myreview {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-muted);
}
.mo-myreview-stars { color: #F59E0B; font-size: var(--fs-base); letter-spacing: 1px; }
.mo-star-off { color: var(--c-border-strong); }
.mo-myreview-label { color: var(--c-muted-fg); font-size: 11px; }
.mo-myreview-text {
  flex-basis: 100%;
  margin: var(--s-1) 0 0;
  font-size: var(--fs-xs); line-height: 1.55;
}

/* ══ Всплывающее сообщение ══════════════════════════════════════ */
.mo-toast {
  position: fixed; z-index: 50;
  left: 50%; bottom: var(--s-5);
  transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: #1F2937;
  color: #fff;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}
.mo-toast.is-ok { background: var(--c-ok); }
.mo-toast.is-err { background: var(--c-err); }
.mo-toast[hidden] { display: none; }

/* ══ API не запущен ═════════════════════════════════════════════ */
.mo-offline {
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  border-left: 3px solid var(--c-warn);
  border-radius: var(--r-md);
  background: var(--c-warn-bg);
  color: var(--c-warn);
  font-size: var(--fs-xs); line-height: 1.55;
}
.mo-offline[hidden] { display: none; }
.mo-offline code {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .08);
  font-family: ui-monospace, monospace;
}

/* Живой этап курьера под полосой этапов: «в пути», «подъезжает». */
.mo-courier {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--c-primary-bg, #EEF2F7);
  color: var(--c-fg);
  font-size: var(--fs-sm);
}
.mo-courier-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent-fill);
  animation: mo-pulse 1.4s ease-in-out infinite;
}
.mo-courier.is-done .mo-courier-dot { background: var(--c-ok); animation: none; }
@keyframes mo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .mo-courier-dot { animation: none !important; }
}

/* ══ Мобильная навигация ════════════════════════════════════════
   my-orders.html — одна страница на десктоп и телефон. На широком экране
   работает общая верхняя шапка .top, на телефоне она прячется, а снизу
   появляется та же панель, что на витрине и в корзине. Панель по умолчанию
   скрыта и включается только на узком экране. */
.bottom-nav { display: none; }

@media (max-width: 640px) {
  /* Прячем ОБЩУЮ шапку (.top), а не бывшую .mo-header: на телефоне
     работает нижняя панель, и две навигации разом не нужны. */
  .top { display: none; }
  .mo-main { padding-top: var(--s-4); padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  .bottom-nav {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2);
    min-height: 70px;
    padding: 6px var(--s-2) calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-border);
    background: var(--c-card);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, .08);
  }
  .bottom-item {
    min-width: 0; min-height: 56px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 2px; border: 0; border-radius: var(--r-md);
    background: transparent; color: var(--c-muted-fg); font-size: 10px;
    text-decoration: none;
  }
  .bottom-item.is-active { background: var(--c-muted); color: var(--c-accent); font-weight: 700; }
  .cart-count {
    position: absolute; top: 1px; left: calc(50% + 7px);
    min-width: 18px; height: 18px; display: grid; place-items: center;
    padding: 0 4px; border-radius: 9px; background: var(--c-accent-fill); color: #fff; font-size: 10px;
  }
}