/**
 * Гараж покупателя. Одна колонка по центру: список автомобилей и форма.
 *
 * Файл десктопный, но страница — узкая колонка с ограничением по
 * 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;
}


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

/* ══ Заголовок ══════════════════════════════════════════════════ */
.gr-main { max-width: 780px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-6); }

.gr-head {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: var(--s-4); row-gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.gr-ttl { margin: 0 0 4px; font-size: var(--fs-xl); }
.gr-sub {
  margin: 0;
  max-width: 56ch;
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.55;
}
.gr-head .btn { margin-left: auto; flex: none; }

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

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

   min-width: 0 на элементах сетки обязателен. По умолчанию grid item
   не сжимается меньше содержимого, и длинное название вроде
   «Toyota Land Cruiser Prado» растянуло бы карточку за край экрана.
   В my-orders.css это уже случилось: карточка стала 551px при экране 375. */
.gr-cars { display: grid; gap: var(--s-3); }
.gr-cars > * { min-width: 0; }
.gr-car {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.gr-car.is-active { border: 2px solid var(--c-primary); padding: calc(var(--s-4) - 1px); }

.gr-car-ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-muted);
  color: var(--c-muted-fg);
}
.gr-car.is-active .gr-car-ico { background: var(--c-accent-fill); color: #fff; }

.gr-car-body { min-width: 0; }
.gr-car-name {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 2px;
  font-size: var(--fs-base);
}
.gr-car-badge {
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-ok-bg);
  color: var(--c-ok);
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
}
.gr-car-spec { margin: 0 0 var(--s-2); color: var(--c-muted-fg); font-size: var(--fs-xs); }

.gr-car-vin {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-muted);
  font-size: 11px;
}
.gr-car-vin i { color: var(--c-muted-fg); font-style: normal; font-weight: 600; }
.gr-car-addvin {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-primary);
  font: inherit; font-size: 11px; font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.gr-car-note { margin: var(--s-2) 0 0; color: var(--c-warn); font-size: 11px; line-height: 1.45; }

.gr-car-acts {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--s-2);
}
.gr-car-del {
  min-height: 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--c-muted-fg);
  font: inherit; font-size: 11px;
  cursor: pointer;
}
.gr-car-del:hover { color: var(--c-err); background: var(--c-err-bg); }

/* ══ Пустой гараж ═══════════════════════════════════════════════ */
.gr-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;
}
.gr-empty[hidden] { display: none; }
.gr-empty-ico {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  background: var(--c-muted);
  color: var(--c-muted-fg);
}
.gr-empty h2 { margin: 0 0 var(--s-2); font-size: var(--fs-base); }
.gr-empty p {
  max-width: 46ch;
  margin: 0 auto var(--s-4);
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.6;
}

/* ══ Форма ══════════════════════════════════════════════════════ */
.gr-form {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.gr-form[hidden] { display: none; }
.gr-form-ttl { margin: 0 0 4px; font-size: var(--fs-base); }
.gr-form-sub {
  margin: 0 0 var(--s-4);
  max-width: 56ch;
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.55;
}

.gr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.gr-field { display: grid; gap: 5px; margin-bottom: var(--s-3); min-width: 0; }
.gr-field label { color: var(--c-muted-fg); font-size: var(--fs-xs); font-weight: 600; }
.gr-opt { color: var(--c-border-strong); font-weight: 500; }
.gr-field select, .gr-field input {
  width: 100%; min-width: 0;
  height: 46px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-card);
  color: inherit;
  font: inherit; font-weight: 500;
}
/* Незаполненный список гасим: видно, что сначала нужен предыдущий шаг */
.gr-field select:disabled { background: var(--c-muted); color: var(--c-muted-fg); }
.gr-field select:focus-visible, .gr-field input:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
  border-color: var(--c-accent);
}
#f-vin { font-variant-numeric: tabular-nums; letter-spacing: .06em; text-transform: uppercase; }
.gr-hint { margin: 0; color: var(--c-muted-fg); font-size: 11px; line-height: 1.5; }
/* Подсказка про выбранную машину: своя строка под сеткой, а не ячейка
   внутри неё. В ячейке «Двигатель» она растягивала ряд и заодно тянула
   пустую ячейку «Год выпуска» — сетка выравнивает ячейки по высоте. */
.gr-gen {
  margin: -4px 0 var(--s-3);
  padding: 8px 10px;
  border-left: 2px solid var(--c-border-strong);
  background: var(--c-muted);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.gr-gen[hidden] { display: none; }

/* ══ Блок VIN ═══════════════════════════════════════════════════
   Отделён рамкой: это необязательная часть, и покупатель должен
   видеть, что её можно пропустить. */
.gr-vin {
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-muted);
}
.gr-vin .gr-field { margin-bottom: 0; }

.gr-vin-out {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  font-size: 11px; line-height: 1.6;
}
.gr-vin-out[hidden] { display: none; }
.gr-vin-out.is-wait { background: var(--c-muted); color: var(--c-muted-fg); }
.gr-vin-out.is-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.gr-vin-out.is-bad { background: var(--c-err-bg); color: var(--c-err); }
/* Неоднозначность года — предупреждение, а не мелкий шрифт:
   угадывать за покупателя запрещено (ТЗ 4.6) */
.gr-vin-warn { display: block; margin-top: 2px; color: var(--c-warn); font-weight: 600; }
.gr-vin-note { display: block; margin-top: var(--s-2); opacity: .85; }

.gr-acts {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}

/* ══ Ошибки и служебное ═════════════════════════════════════════ */
.gr-error {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-err-bg);
  color: var(--c-err);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
}
.gr-error[hidden], .gr-offline[hidden] { display: none; }

.gr-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;
}
.gr-offline code {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .08);
  font-family: ui-monospace, monospace;
}

/* Расход платных запросов виден покупателю: лимит существует,
   и лучше объяснить его заранее, чем упереться молча */
.gr-vin-stats {
  margin: var(--s-4) 0 0;
  color: var(--c-muted-fg);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.gr-vin-stats[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ══ Узкий экран ════════════════════════════════════════════════
   Гараж — общий экран для десктопа и телефона, поэтому здесь
   медиазапрос уместен (в отличие от desktop.css и mobile.css,
   которые разделены физически именно чтобы обойтись без него).

   Две колонки на 375 пикселях дают по 149 на селект. Технически
   текст не обрезается, но «Mercedes-Benz» и «Выберите двигатель»
   занимают строку целиком, без воздуха, а список моделей вроде
   «Land Cruiser Prado» уже не читается на ходу. Одна колонка
   решает это без компромиссов: вертикального места на телефоне
   не жалко, прокрутка дешевле, чем нечитаемая подпись. */
@media (max-width: 560px) {
  .gr-grid { grid-template-columns: 1fr; }
}