:root {
  --bg: #0f1115;
  --secondary-bg: #171a21;
  --text: #f2f3f5;
  --hint: #8b93a1;
  --link: #4fa3ff;
  --button: #2ea6ff;
  --button-text: #ffffff;
  --price-color: #ff5a5f;
}

* { box-sizing: border-box; }

/* ---------- Cloudflare Turnstile gate ---------- */
.turnstile-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
/* Выше по специфичности, чем просто .turnstile-gate — иначе элемент.hidden=true в JS не
   перебивает безусловный display:flex выше (встроенное браузерное правило [hidden]{display:none}
   как обычный author/UA-стиль проигрывает более специфичному классу без этого правила). */
.turnstile-gate[hidden] {
  display: none;
}
.turnstile-gate__box {
  text-align: center;
  padding: 24px;
}
.turnstile-gate__box p {
  color: var(--text);
  margin-bottom: 16px;
}
.turnstile-gate__error {
  color: var(--price-color);
  margin-top: 12px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 24px;
}

/* ---------- Header ---------- */
.app-header {
  padding: 10px 12px 4px;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.flag-emoji {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
}
.brand { text-align: center; }
.brand h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  max-height: 48px;
  line-height: 24px;
}
.subtitle { margin: 2px 0 0; color: var(--hint); font-size: 12px; }

.lang-select {
  display: block;
  margin: 6px auto 0;
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
}

/* ---------- Hero / ship animation ---------- */
.hero { padding: 8px 12px 0; }
.hero-banner { width: 100%; height: auto; border-radius: 14px; display: block; overflow: hidden; }

@keyframes ship-sail {
  0%   { transform: translateX(480px); opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(-160px); opacity: 0; }
}
.hero-ship {
  animation: ship-sail 16s linear infinite;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .hero-ship { animation: none; opacity: 1; transform: translateX(0); }
}

.hero-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0 2px;
  font-size: 12px;
  color: var(--hint);
}
.hero-feature { display: flex; align-items: center; gap: 4px; }

/* ---------- Search + filters ---------- */
.search-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px 0;
}
.search-input {
  flex: 1;
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.reset-filters-btn {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 16px;
}
/* Активна и заметна, только когда есть что сбрасывать (по прямому запросу пользователя
   2026-08-09: раньше это была шестерёнка без функции — теперь это "Сбросить фильтры",
   и её состояние само сигнализирует, есть ли активные фильтры). */
.reset-filters-btn:not(:disabled) { background: var(--button); color: var(--button-text); border-color: transparent; }
.reset-filters-btn:disabled { opacity: 0.35; }
.reset-filters-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.filters-panel {
  margin: 8px 12px 0;
  padding: 10px;
  background: var(--secondary-bg);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--hint); }
.filter select,
.filter input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
}
.range-inputs { display: flex; align-items: center; gap: 6px; }
.range-inputs input { width: 0; flex: 1; }

/* ---------- Новинки ---------- */
.new-arrivals { padding: 14px 12px 0; }
.new-arrivals h2, .catalog-title {
  font-size: 16px;
  margin: 0 0 8px;
}
.new-arrivals-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.new-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
  background: var(--secondary-bg);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.new-card .car-photo { height: 96px; }
.new-card-body { padding: 6px 8px 8px; font-size: 12px; }
.new-badge {
  display: inline-block;
  background: var(--button);
  color: var(--button-text);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  margin-bottom: 4px;
}

/* ---------- Catalog grid ---------- */
.catalog-title { padding: 0 12px; }
.car-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  padding: 0 12px;
}
.car-card {
  background: var(--secondary-bg);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.car-photo {
  height: 120px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
}
.car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-photo.large { height: 220px; }
.car-photo span { display: block; font-size: 11px; color: var(--hint); }

.car-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.car-body h3 { margin: 0; font-size: 14px; }
.car-body .trim { margin: 0; font-size: 11px; color: var(--hint); }
.car-body .meta { margin: 2px 0; font-size: 11px; color: var(--hint); }
.price { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--price-color); }
.price.big { font-size: 22px; }
.price-note { margin: 0; font-size: 10px; color: var(--price-color); opacity: 0.85; }

.card-actions { display: flex; gap: 6px; margin-top: 6px; }
.card-actions button {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  background: var(--button);
  color: var(--button-text);
}
.details-btn { background: rgba(255, 255, 255, 0.1) !important; color: var(--text) !important; }

.no-results, .loading { padding: 24px 12px; color: var(--hint); text-align: center; grid-column: 1 / -1; }

.show-more-btn {
  display: block;
  margin: 14px auto 0;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font-size: 14px;
}

.no-more-results {
  margin: 14px auto 0;
  padding: 10px 16px;
  max-width: 320px;
  border-radius: 10px;
  background: var(--secondary-bg);
  color: var(--hint);
  font-size: 13px;
  text-align: center;
}

/* ---------- Gallery modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}
/* Кнопка "Назад" в серой зоне поверх шторки (не внутри неё) — крупная, контрастная,
   в дополнение к нативной tg.BackButton (см. app.js openModal) на случай, если хост не
   поддерживает нативную кнопку или пользователь на десктопе/в браузере вне Telegram. */
.modal-back-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  z-index: 51;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px 9px 12px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 14px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
}
.modal h2 { margin: 10px 0 2px; font-size: 17px; }

.gallery {
  overflow: hidden;
  /* Отдаём горизонтальную ось под свой pointer-based свайп (app.js), не системному скроллу —
     без этого WebView/браузер может перехватить жест как страничный скролл раньше, чем JS. */
  touch-action: pan-y;
}
/* .gallery .gallery-img (2 класса), а не просто .gallery-img — иначе проигрывает по
   специфичности общему правилу ".car-photo img { display: block }" выше, и слайды-невидимки
   на самом деле никогда не скрываются (баг, найденный живым тестом 2026-08-08). */
.gallery .gallery-img { display: none; width: 100%; height: 100%; object-fit: cover; }
.gallery-img.active { display: block; }
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
}
.gallery-nav.prev { left: 8px; }
.gallery-nav.next { right: 8px; }
.gallery-counter {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
}

.calc-btn, .submit-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font-size: 14px;
  font-weight: 600;
}
.calc-result { margin-top: 10px; font-size: 13px; }
.calc-result p { display: flex; justify-content: space-between; margin: 4px 0; }
.calc-result .calc-total { font-weight: 700; font-size: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 6px; }
.calc-note { color: var(--hint); font-size: 10px; margin-top: 8px; }
.form-status { min-height: 18px; font-size: 12px; margin-top: 6px; }
.form-status.error { color: var(--price-color); }

.guest-form { display: flex; flex-direction: column; gap: 8px; }
.guest-form input {
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.guest-form input:disabled { opacity: 0.6; }

hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 12px 0; }

.scroll-top-btn {
  position: fixed;
  right: 16px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 40;
}