/* ============================================================
   Авто ЮНА-Лайф — дизайн-токены
   Единственное место, где заданы цвета, шрифты, отступы и радиусы.
   Подключается первым, до site.css и custom.css.
   ============================================================ */

:root {
  /* --- Фирменный цвет ---------------------------------------
     Этап 02: переведён на #0B67C9 из дизайн-предложения. Прежний #0191ff
     на тёмной подложке шапки и на белом фоне давал недостаточный контраст
     для текста на кнопках. */
  --aj-brand: #0B67C9;
  --aj-brand-strong: #08528F;
  --aj-brand-tint: #e1eefb;
  --aj-on-brand: #ffffff;

  /* --- Смысловые цвета: наличие, срок, ошибка --------------- */
  --aj-ok: #0f7554;
  --aj-ok-tint: #daf0e7;
  --aj-wait: #9c5c08;
  --aj-wait-tint: #faebd3;
  --aj-danger: #a82a20;
  --aj-danger-tint: #fae4e1;

  /* --- Нейтральные: холодный графит, не чёрный -------------- */
  --aj-ink: #0f1a24;
  --aj-ink-2: #3d4c59;
  --aj-muted: #6c7c8a;
  --aj-line: #d2dae3;
  --aj-line-soft: #e5ebf1;
  --aj-surface: #ffffff;
  --aj-surface-2: #f5f8fb;
  --aj-paper: #eaeff4;

  /* --- Шрифты ----------------------------------------------
     Пока системные. На этапе 02 сюда подставляются локальные
     Golos Text / Oswald / JetBrains Mono из wwwroot/fonts. */
  --aj-font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --aj-font-display: 'Segoe UI Semibold', 'Segoe UI', system-ui, Arial, sans-serif;
  --aj-font-mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* --- Шкала отступов, шаг 8 px ----------------------------- */
  --aj-space-1: 4px;
  --aj-space-2: 8px;
  --aj-space-3: 16px;
  --aj-space-4: 24px;
  --aj-space-5: 32px;
  --aj-space-6: 48px;

  /* --- Радиусы и тени --------------------------------------- */
  --aj-radius-s: 4px;
  --aj-radius-m: 8px;
  --aj-shadow-1: 0 1px 2px rgba(15, 26, 36, .05), 0 2px 10px rgba(15, 26, 36, .05);
}

/* ============================================================
   Подвал сайта
   ============================================================ */

.aj-footer {
  margin-top: var(--aj-space-6);
  background: var(--aj-surface-2);
  border-top: 1px solid var(--aj-line);
  color: var(--aj-ink-2);
  font-size: .875rem;
  line-height: 1.6;
}

.aj-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--aj-space-4);
  padding: var(--aj-space-5) 0 var(--aj-space-4);
}

.aj-footer__title {
  font-family: var(--aj-font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--aj-muted);
  margin-bottom: var(--aj-space-2);
}

.aj-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aj-footer__list li {
  padding: 2px 0;
}

.aj-footer a,
.aj-footer__link {
  color: var(--aj-ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.aj-footer a:hover,
.aj-footer__link:hover {
  color: var(--aj-brand);
  text-decoration: underline;
}

/* Реквизиты приходят из базы с переносами строк — сохраняем их */
.aj-footer__req {
  color: var(--aj-muted);
  font-size: .8rem;
  white-space: pre-line;
}

.aj-footer__bottom {
  border-top: 1px solid var(--aj-line-soft);
  padding: var(--aj-space-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--aj-space-3);
  align-items: center;
  color: var(--aj-muted);
  font-size: .8rem;
}

/* ============================================================
   Плавающие кнопки: WhatsApp и «Связаться с нами»
   ============================================================
   Стопка в правом нижнем углу: сверху круглая кнопка WhatsApp офиса
   в Дубае, под ней «Contact us» (ведёт на /contacts, на самой странице
   контактов её нет). Стоят над нижними панелями (навигация на телефоне,
   панель корзины в поиске), но под модальными окнами и уведомлениями.
   Глобальные, а не в MainLayout.razor.css: правило про панель корзины
   смотрит на разметку страницы поиска. */

.aj-fabs {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.aj-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 18px;
  border-radius: 26px;
  background: var(--aj-brand);
  color: var(--aj-on-brand);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(11, 103, 201, .35);
  transition: background-color .15s ease, transform .15s ease;
}

.aj-fab:hover,
.aj-fab:focus-visible {
  background: var(--aj-brand-strong);
  color: var(--aj-on-brand);
  transform: translateY(-1px);
}

.aj-fab__ic {
  width: 22px;
  height: 22px;
  flex: none;
}

/* WhatsApp — круг фирменного зелёного цвета со значком */
.aj-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
  transition: background-color .15s ease, transform .15s ease;
}

.aj-wa:hover,
.aj-wa:focus-visible {
  background: #1ebe5b;
  color: #fff;
  transform: translateY(-1px);
}

/* Панель корзины в поиске прижата к низу во всю ширину — кнопки встают над ней */
.page:has(.basketbar) .aj-fabs {
  bottom: calc(84px + env(safe-area-inset-bottom));
}

/* Последняя строка подвала прокручивается выше стопки кнопок, а не остаётся под ней */
.page:has(.aj-fabs) .aj-footer__bottom {
  padding-bottom: calc(var(--aj-space-3) + 140px);
}

/* С панелью корзины кнопки выше — и подвалу нужно больше места */
.page:has(.basketbar) .aj-footer__bottom {
  padding-bottom: calc(var(--aj-space-3) + 200px);
}

@media (max-width: 767.98px) {
  /* На телефоне — круглые значки над нижней навигацией
     (её высота 51px плюс «домашняя полоска»). */
  .aj-fabs {
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(67px + env(safe-area-inset-bottom));
  }

  .aj-fab {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .aj-wa {
    width: 56px;
    height: 56px;
  }

  .aj-fab__ic {
    width: 26px;
    height: 26px;
  }

  /* Подпись остаётся в aria-label ссылки */
  .aj-fab__t {
    display: none;
  }

  /* Панель корзины здесь в две строки (111px) и сама стоит над навигацией */
  .page:has(.basketbar) .aj-fabs {
    bottom: calc(178px + env(safe-area-inset-bottom));
  }

  .page:has(.aj-fabs) .aj-footer__bottom {
    padding-bottom: calc(var(--aj-space-3) + 136px);
  }

  .page:has(.basketbar) .aj-footer__bottom {
    padding-bottom: calc(var(--aj-space-3) + 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aj-fab,
  .aj-wa {
    transition: none;
  }

  .aj-fab:hover,
  .aj-fab:focus-visible,
  .aj-wa:hover,
  .aj-wa:focus-visible {
    transform: none;
  }
}

@media print {
  .aj-fabs {
    display: none;
  }
}

/* ============================================================
   Серая подложка страницы (главная, поиск запчастей)
   ============================================================
   По макету под шапкой белая полоса (герой или строка поиска),
   ниже серая подложка до самого подвала. .content и подвал живут
   в MainLayout, поэтому правило глобальное: страница ставит своему
   корневому элементу класс aj-grey. */

.page:has(.aj-grey) .content {
  background: var(--aj-surface-2);
}

.page:has(.aj-grey) .aj-footer {
  margin-top: 0;
}

/* ============================================================
   Выпадающий список в стиле полей макета
   ============================================================ */

.aj-select {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--aj-line);
  border-radius: 6px;
  background: var(--aj-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7c8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: .95rem;
  color: var(--aj-ink);
  text-overflow: ellipsis;
  cursor: pointer;
}

.aj-select:hover {
  border-color: #b6c1cc;
}

.aj-select:focus-visible {
  outline: none;
  border-radius: 6px;
  border-color: var(--aj-brand);
  box-shadow: 0 0 0 3px var(--aj-brand-tint);
}

/* Текст про приём карт: раньше был набран инлайновым font-size: 11px */
.aj-paynote {
  font-size: .78rem;
  color: var(--aj-muted);
  line-height: 1.55;
}

/* ============================================================
   Доступность: видимый фокус с клавиатуры
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--aj-brand);
  outline-offset: 2px;
  border-radius: var(--aj-radius-s);
}

/* Мышиный клик не должен рисовать рамку, клавиатура — должна */
:focus:not(:focus-visible) {
  outline: none;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--aj-brand);
  outline-offset: 1px;
  box-shadow: none;
}

/* ============================================================
   БЕЗОПАСНЫЕ ЗОНЫ iPhone
   ============================================================
   viewport-fit=cover в мете растягивает страницу под вырез и
   «домашнюю полоску», поэтому отступы у краёв экрана считаются
   через env(). На всех остальных устройствах env() равен нулю,
   и вёрстка там не меняется.

   Здесь только горизонталь: она нужна в альбомной ориентации,
   где вырез уходит вбок. Нижний отступ задаётся отдельно у каждой
   прижатой к низу панели — .tabbar, .basketbar, .toasts.

   Прижатые панели используют position: fixed и отсчитываются от
   окна, а не от body, поэтому padding у body до них не доходит —
   у каждой свои отступы.
   ============================================================ */

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}