/* ==========================================================================
   Top Rent Moto — карточка мотоцикла. Вариант A «светлый travel».
   Структура файла:
     1. Токены          — цвета, типографика, отступы, тени
     2. База            — сброс, типографика, контейнеры
     3. Атомы           — кнопки, поля, звёзды, иконки
     4. Шапка / подвал  — общие для всех шаблонов сайта
     5. Блоки страницы  — герой, галерея, панель заявки, секции
     6. Модалки, лайтбокс, мобильная панель
     7. Анимации
     8. Адаптив         — 1180 / 900 / 620 / 400
   ========================================================================== */

/* ============================ 1. ТОКЕНЫ ================================== */
:root {
  /* Палитра */
  --sand:        #f8f6f2;
  --sand-deep:   #efeae2;
  --surface:     #ffffff;
  --ink:         #15171c;
  --ink-2:       #3f444d;
  --muted:       #767b85;
  --line:        #e4ded4;
  --line-soft:   #efeae3;

  --accent:      #d9552b;   /* терракота — основной CTA */
  --accent-dark: #b8431f;
  --accent-soft: #fdf0ea;
  --green:       #1f6b4f;   /* «включено в аренду», подтверждения */
  --green-soft:  #e9f4ef;
  --gold:        #e0a615;   /* звёзды рейтинга */

  /* Типографика */
  --font-display: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1:    clamp(1.85rem, 1.15rem + 2.6vw, 3.25rem);
  --fs-h2:    clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem);
  --fs-h3:    clamp(1.05rem, .95rem + .4vw, 1.25rem);
  --fs-lead:  clamp(1.02rem, .96rem + .35vw, 1.2rem);
  --fs-body:  1rem;
  --fs-sm:    .9rem;
  --fs-xs:    .8rem;

  /* Ритм */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(21, 23, 28, .05), 0 2px 8px rgba(21, 23, 28, .04);
  --shadow-md: 0 4px 12px rgba(21, 23, 28, .07), 0 12px 32px rgba(21, 23, 28, .06);
  --shadow-lg: 0 12px 28px rgba(21, 23, 28, .10), 0 32px 64px rgba(21, 23, 28, .08);

  --container: 1280px;
  --header-h: 128px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .32s;
}

/* ============================ 2. БАЗА ==================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden обязан побеждать display у классов: правила автора
   иначе перекрывают браузерное [hidden]{display:none} и скрытые
   отзывы/модели продолжают занимать место. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Текст берём из --sand (цвет фона страницы), а не из жёсткого #fff.
   В тёмных оформлениях --ink это цвет СВЕТЛОГО текста, поэтому пара
   «фон --ink + белый текст» давала белое по белому. Пара ink/sand
   гарантированно контрастна в обе стороны. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink); color: var(--sand);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--sp-8); }
.section__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-6);
}
.section__title::after {
  content: "";
  display: block;
  width: 52px; height: 3px;
  margin-top: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent);
}

.icon { width: 20px; height: 20px; flex: none; }

/* ============================ 3. АТОМЫ =================================== */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary { box-shadow: 0 6px 18px rgba(217, 85, 43, .28); }
.btn--primary:hover { --btn-bg: var(--accent-dark); }

.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --btn-bg: var(--surface); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: #fff; }

.btn--sm    { padding: 10px 18px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn--wide  { display: flex; margin: var(--sp-6) auto 0; min-width: 260px; }
.btn--icon  { padding: 12px; }
.btn__icon  { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn__count {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .09);
  font-size: var(--fs-xs);
}
.btn.is-done .btn__count { display: none; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .01em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; }

/* Поля даты и времени в мобильном Safari.
   iOS рисует их своим движком: значение прижимается вправо и упирается
   в край, высота задаётся системой, а пустое поле не показывает ничего.
   Снимаем нативную отрисовку и возвращаем поведение обычного поля. */
.field input[type="date"],
.field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 46px;
  line-height: 1.2;
}
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="time"]::-webkit-datetime-edit { padding: 0; }
/* Иконка календаря у Chrome — в цвет текста, а не всегда чёрная */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.field--full { grid-column: 1 / -1; }

/* Имя выбранного файла — вспомогательное поле, тише основного. */
.field__filename { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }

.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.star { width: 16px; height: 16px; }
.star.is-off { color: var(--line); }
.stars--sm .star { width: 14px; height: 14px; }

/* ============================ 4. ШАПКА =================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--sand);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header.is-stuck .site-header__utility { display: none; }

.site-header__utility {
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.site-header__utility-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 42px;
}
.contacts { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
/* Минимальный размер цели касания — 24×24 (WCAG 2.5.8). */
.contacts__item {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding-block: 3px;
  transition: color var(--dur) var(--ease);
}
.contacts__item--msg { min-width: 24px; justify-content: center; }

/* «Задать вопрос» — единственный вход в форму запроса звонка. */
.contacts__ask {
  min-height: 24px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contacts__ask:hover { color: var(--accent); border-color: var(--accent); }
.contacts__item:hover { color: var(--accent); }
.contacts__item .icon { width: 15px; height: 15px; }
.contacts__item--msg .icon { width: 20px; height: 20px; }

.lang-switch { display: flex; gap: 2px; }
.lang {
  min-height: 24px;
  padding: 5px 10px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  font-size: var(--fs-xs); cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lang:hover { color: var(--ink); background: var(--sand-deep); }
.lang.is-active { background: var(--ink); color: #fff; }

.site-header__main-inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 72px;
}
.logo__img { width: 190px; height: auto; }
.logo__img--light { display: none; }   /* показывается только в тёмных оформлениях */

.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--sp-5); }
.nav__list a {
  position: relative;
  font-size: var(--fs-sm); font-weight: 500;
  padding-block: 6px;
  transition: color var(--dur) var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__list a:hover { color: var(--accent); }
.nav__list a:hover::after { transform: scaleX(1); }

.burger {
  display: none;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}

/* ============================ 5. БЛОКИ =================================== */
.breadcrumbs { padding-block: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--sp-2); opacity: .5; }
.breadcrumbs a:hover { color: var(--accent); }

/* --- Герой --- */
.hero { padding-bottom: var(--sp-7); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: var(--sp-7);
  align-items: start;
}
.hero__head { margin-bottom: var(--sp-5); }
.hero__brand { width: 84px; margin-bottom: var(--sp-3); }
.hero__title { font-size: var(--fs-h1); }
.hero__city { color: var(--accent); display: block; }

.hero__rating {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero__rating:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hero__rating strong { font-family: var(--font-display); font-size: 1.05rem; }
.hero__rating-meta { color: var(--muted); }

/* --- Галерея --- */
.gallery { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.gallery__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.gallery__track {
  display: flex; height: 100%;
  transition: transform .5s var(--ease);
}
.gallery__slide { flex: 0 0 100%; height: 100%; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__slide.is-active img { animation: kenburns 14s ease-out both; }

.gallery__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.gallery:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; }
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: var(--sp-4); rotate: 180deg; }
.gallery__nav--next { right: var(--sp-4); }

.gallery__counter {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(21, 23, 28, .62); color: #fff;
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.gallery__zoom {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: rgba(21, 23, 28, .62); color: #fff;
  cursor: pointer; rotate: -45deg;
  transition: background-color var(--dur) var(--ease);
}
.gallery__zoom:hover { background: var(--accent); }

.gallery__thumbs {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: thin;
}
.gallery__thumb {
  flex: 0 0 96px;
  padding: 0; border: 2px solid transparent; border-radius: var(--r-sm);
  background: none; cursor: pointer; overflow: hidden;
  opacity: .55;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gallery__thumb img { aspect-ratio: 16/10; object-fit: cover; }
.gallery__thumb:hover { opacity: .85; }
.gallery__thumb.is-active { opacity: 1; border-color: var(--accent); }

/* --- Характеристики --- */
.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.spec {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.spec:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.spec__icon { width: 22px; height: 22px; color: var(--accent); }
.spec__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.spec__unit { font-size: .75rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.spec__label { font-size: var(--fs-xs); color: var(--muted); }

/* --- Панель заявки --- */
.booking { position: sticky; top: calc(var(--sp-6) + 72px); }
.booking__inner {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.booking__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--sp-4); }
.booking__from { font-size: var(--fs-sm); color: var(--muted); }
.booking__amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
  line-height: 1;
}
.booking__per { font-size: var(--fs-sm); color: var(--muted); }

.booking__dates, .booking__places {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.booking__total {
  display: block;
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--sand);
  font-size: var(--fs-sm);
  min-height: 58px;
}
.booking__hint { color: var(--muted); }
.booking__calc { display: flex; flex-direction: column; gap: 6px; }
.booking__calc-row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.booking__calc-row--total {
  padding-top: 8px; margin-top: 2px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
}
.booking__calc-row--total span:last-child { color: var(--accent); }

.booking__call {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--muted);
  text-align: center;
}
.booking__phone {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.booking__phone:hover { color: var(--accent); }

.booking__terms {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.booking__terms li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-xs); color: var(--muted); }
.booking__terms strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.booking__termicon { width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.booking__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }

/* --- Что входит --- */
.section--includes { background: var(--surface); }
.includes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-3);
}
.include {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--sand);
  font-size: var(--fs-sm); font-weight: 500;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.include:hover { transform: translateY(-3px); border-color: var(--green); background: var(--green-soft); }
.include__icon { width: 24px; height: 24px; color: var(--green); }

/* --- Описание --- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-2);
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent);
}
.prose { color: var(--ink-2); }
.prose p + p { margin-top: 1em; }

/* --- Условия --- */
.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.term {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.term:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.term__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
}
.term__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.term__text { font-size: var(--fs-sm); color: var(--muted); }

/* --- Отзывы --- */
.rating {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rating__score { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rating__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: 3rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rating__meta { font-size: var(--fs-xs); color: var(--muted); }

.dist { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dist__row { display: grid; grid-template-columns: 12px 1fr 28px; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.dist__bar { height: 6px; border-radius: var(--r-pill); background: var(--sand-deep); overflow: hidden; }
.dist__fill {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: var(--gold);
  transition: width 1s var(--ease);
}
.is-revealed .dist__fill, .dist.is-revealed .dist__fill { width: var(--pct); }
.dist__count { text-align: right; font-variant-numeric: tabular-nums; }

.reviews { display: grid; gap: var(--sp-4); }
.review {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.review__avatar {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%; object-fit: cover;
}
.review__avatar--initials {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.review__body { min-width: 0; }
.review__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.review__name { font-family: var(--font-display); font-weight: 600; }
.review__date { font-size: var(--fs-xs); color: var(--muted); }
.review__model {
  display: inline-block; margin: 4px 0 6px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--accent);
}
.review__model:hover { text-decoration: underline; }
.review__text { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* --- Города --- */
.cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.city {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm); font-weight: 500;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.city:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.city__arrow { opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.city__arrow .icon { width: 16px; height: 16px; }
.city:hover .city__arrow { opacity: 1; transform: translateX(3px); }

/* --- Модели --- */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.model__link { display: block; }
.model__media {
  display: block; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.model__media img { aspect-ratio: 290 / 197; object-fit: contain; padding: var(--sp-3); }
.model__link:hover .model__media { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.model__name {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  text-align: center;
  transition: color var(--dur) var(--ease);
}
.model__link:hover .model__name { color: var(--accent); }
.models--brand { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ============================ ПОДВАЛ ==================================== */
.site-footer { margin-top: var(--sp-8); background: var(--ink); color: #cfd2d8; }
.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-7);
  padding-block: var(--sp-8);
}
.site-footer__logo { width: 190px; margin-bottom: var(--sp-4); opacity: .9; }
.site-footer__title { font-size: var(--fs-h3); color: #fff; margin-bottom: var(--sp-4); }
.site-footer__text { font-size: var(--fs-sm); line-height: 1.7; }
.site-footer__contacts { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--fs-sm); }
.site-footer__contacts a { display: inline-flex; align-items: center; gap: var(--sp-2); transition: color var(--dur) var(--ease); }
.site-footer__contacts a:hover { color: var(--accent); }
.site-footer__phone { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; }
.site-footer__msg { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.site-footer__msg .icon { width: 22px; height: 22px; }

.site-footer__cities { columns: 2; column-gap: var(--sp-4); font-size: var(--fs-sm); }
.site-footer__cities li, .site-footer__links li { margin-bottom: 8px; break-inside: avoid; }
.site-footer__cities a:hover, .site-footer__links a:hover { color: var(--accent); }
.site-footer__links { font-size: var(--fs-sm); }

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-xs); color: #8c9099; }
.site-footer__bottom-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-5);
}
.site-footer__bottom a { text-decoration: underline; }

/* ==================== 6. МОДАЛКИ / ЛАЙТБОКС / МОБ. ПАНЕЛЬ ================ */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--sp-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(21, 23, 28, .55); backdrop-filter: blur(3px); animation: fade .25s var(--ease) both; }
.modal__window {
  position: relative;
  width: min(760px, 100%);
  max-height: 90dvh; overflow-y: auto;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: pop .3s var(--ease) both;
}
.modal__window--narrow { width: min(520px, 100%); }
.modal__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--sand); cursor: pointer;
  transition: background-color var(--dur) var(--ease), rotate var(--dur) var(--ease);
}
.modal__close:hover { background: var(--sand-deep); rotate: 90deg; }
.modal__title { font-size: var(--fs-h2); margin-bottom: var(--sp-2); padding-right: var(--sp-6); }
.modal__sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-5); }

.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form__summary:not(:empty) {
  display: block; margin-top: var(--sp-4);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--green-soft); color: var(--green);
  font-size: var(--fs-sm); font-weight: 500;
}
.form__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }
.form__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.form__ok {
  display: grid; place-items: center; gap: var(--sp-3);
  padding: var(--sp-7) 0; text-align: center;
}
.form__ok .icon { width: 48px; height: 48px; color: var(--green); }

.lightbox {
  position: fixed; inset: 0; z-index: 140;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: rgba(10, 11, 14, .94);
  animation: fade .25s var(--ease) both;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 88dvh; margin-inline: auto; border-radius: var(--r-md); }
.lightbox__nav, .lightbox__close {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255, 255, 255, .25); }
.lightbox__nav--prev { rotate: 180deg; }
.lightbox__close { position: absolute; top: var(--sp-5); right: var(--sp-5); }

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(21, 23, 28, .1);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar__price { display: flex; align-items: baseline; gap: 4px; margin-right: auto; }
.mobile-bar__price strong { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.mobile-bar__from, .mobile-bar__per { font-size: var(--fs-xs); color: var(--muted); }

/* ============================ 7. АНИМАЦИИ ================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

.reviews .review, .includes .include, .models .model, .cities li, .terms .term, .specs .spec {
  --stagger: 0ms;
}
.is-revealed .include, .is-revealed .model, .is-revealed li, .is-revealed .term, .is-revealed .spec {
  animation: rise .5s var(--ease) both;
  animation-delay: var(--stagger);
}

@keyframes rise    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop     { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kenburns{ from { transform: scale(1); } to { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .gallery__slide.is-active img { animation: none; }
}

/* ============================ 8. АДАПТИВ ================================= */
@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); }
  .nav__list { gap: var(--sp-4); }
  .nav__list a { font-size: var(--fs-xs); }
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); }
}

@media (max-width: 980px) {
  /* Панель заявки перестаёт быть липкой и уходит под галерею.
     На мобиле её роль берёт на себя .mobile-bar. */
  .hero__inner { grid-template-columns: 1fr; }
  .booking { position: static; order: 3; }
  .booking__inner { box-shadow: var(--shadow-sm); }

  .nav {
    position: fixed; inset: 0 0 0 auto;
    z-index: 100;
    width: min(340px, 86vw);
    padding: calc(var(--sp-8) + var(--sp-4)) var(--sp-5) var(--sp-5);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--line-soft); }
  .nav__list a { display: block; padding: var(--sp-4) 0; font-size: 1rem; }
  .nav__list a::after { display: none; }

  .burger { display: grid; margin-left: auto; }
  .site-header__cta { display: none; }
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(21, 23, 28, .45);
    backdrop-filter: blur(2px);
    animation: fade .25s var(--ease) both;
  }

  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }

  .rating { grid-template-columns: auto 1fr; gap: var(--sp-5); }
  .rating > .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 720px) {
  .section { padding-block: var(--sp-7); }
  .container { padding-inline: var(--sp-4); }

  .site-header__utility-inner { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--sp-2); }
  .contacts { justify-content: center; gap: var(--sp-3); font-size: 11px; }
  .contacts__item--mail span { display: none; }
  .lang-switch { justify-content: center; padding-bottom: 4px; }
  .logo img { width: 150px; }

  /* Галерея во всю ширину экрана — на телефоне это главный «продающий» элемент */
  .gallery { border-radius: 0; margin-inline: calc(var(--sp-4) * -1); }
  .gallery__stage { aspect-ratio: 4 / 3; }
  .gallery__nav { display: none; }
  .gallery__thumb { flex-basis: 72px; }

  .specs { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.2rem); }

  .booking__dates, .booking__places { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .modal__window { padding: var(--sp-5); }

  .rating { grid-template-columns: 1fr; text-align: center; padding: var(--sp-5); }
  .rating__score { flex-direction: row; justify-content: center; align-items: baseline; gap: var(--sp-3); }
  .dist { display: none; }  /* распределение по звёздам на телефоне избыточно */

  .review { flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
  .review__avatar { width: 44px; height: 44px; }

  /* Модели уезжают в горизонтальную ленту: 50 карточек в столбик
     превращали страницу в бесконечный свиток. */
  .models {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--sp-4) * -1);
    padding: 0 var(--sp-4) var(--sp-3);
  }
  .models::-webkit-scrollbar { display: none; }
  .model { flex: 0 0 148px; scroll-snap-align: start; }
  .cities { grid-template-columns: repeat(2, 1fr); }
  .terms { grid-template-columns: 1fr; }
  .includes { grid-template-columns: 1fr 1fr; }
  .include { flex-direction: column; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-xs); }

  .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-7); }
  .site-footer__bottom-inner { flex-direction: column; }
  .lead { padding-left: var(--sp-4); }
}

@media (max-width: 360px) {
  .includes { grid-template-columns: 1fr; }
  .models { grid-template-columns: 1fr; }
  .mobile-bar__price strong { font-size: 1.15rem; }
}

/* Печать: убираем интерактив, оставляем содержание */
@media print {
  .site-header, .mobile-bar, .booking__form, .gallery__nav, .gallery__zoom,
  .btn, .lang-switch, .burger { display: none !important; }
  body { background: #fff; }
  .review[hidden], .model[hidden] { display: block !important; }
}