/* ============================================================
   modals.css — тематический слой попапов/модалок (наш редизайн)
   Заменяет удалённые legacy modal.css + jquery.fancybox.min.css.
   Стилизует раскладку, которую строит fancybox-JS, на наших токенах.
   ============================================================ */

/* ---- Оверлей fancybox: fixed на весь экран ---- */
.fancybox-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
}
.fancybox-container * { box-sizing: border-box; }

/* ---- Затемнённый фон ---- */
.fancybox-bg {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fancybox-is-open .fancybox-bg { opacity: 1; }

/* ---- Слои раскладки ---- */
.fancybox-outer,
.fancybox-inner,
.fancybox-stage { position: absolute; inset: 0; }
.fancybox-inner { overflow: visible; }

/* ---- Слайд: центрирует контент ---- */
.fancybox-slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px 16px;
  white-space: normal;
}
/* ВАЖНО: показываем ТОЛЬКО текущий слайд. Соседние (--next/--previous) fancybox
   держит рядом для анимации, но в нашей упрощённой раскладке они позиционируются
   в ту же точку (inset:0) и НАКЛАДЫВАЛИСЬ поверх текущего — из-за этого в галерее
   был виден не тот кадр (соседний перекрывал нужный). Прячем всё, кроме --current. */
.fancybox-slide { display: none; }
.fancybox-slide--current { display: flex; }

/* ---- Карточка контента ---- */
.fancybox-content {
  position: relative;
  margin: auto;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #1f2937);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: visible;
}
.fancybox-slide > * { vertical-align: middle; }

/* Попап с картинкой/галереей — прозрачная подложка */
/* НЕ ставим здесь display:flex — иначе НЕ-текущий image-слайд оставался видимым
   и перекрывал текущий (виден не тот кадр). Центрирование — да, показ — только --current. */
.fancybox-slide--image { align-items: center; justify-content: center; }
.fancybox-slide--image .fancybox-content {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: auto;
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  border-radius: 0;
}
/* #31/#27 фото и письма вписываем в экран (без скролла), по центру, без сдвига */
.fancybox-image,
.fancybox-spaceball {
  border-radius: 12px;
  max-width: 96vw !important;
  max-height: 92vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* ---- Убираем в toolbar Fancybox всё лишнее — оставляем только Close.
   Раньше скрывали только 3 (zoom/play/thumbs), но vendor добавляет ещё
   fsenter/fsexit/share/download/pause — приходили как «два квадратика»
   рядом с ×. Скрываем целиком любые кнопки в тулбаре, кроме close. */
.fancybox-toolbar .fancybox-button:not(.fancybox-button--close) { display: none; }

/* ---- Кнопка закрытия ---- */
.fancybox-button--close,
.fancybox-close-small {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ds-surface-alt, #f3f4f6);
  color: var(--ds-text, #1f2937);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 10;
  transition: background 0.15s ease, color 0.15s ease;
}
.fancybox-button--close:hover,
.fancybox-close-small:hover {
  background: var(--ds-brand, #ef4444);
  color: #fff;
}
/* fancybox сам вставляет SVG-крестик внутрь кнопки — центрируем и размерим его.
   НЕ добавляем свой ::after "×": он создавал 2-ю grid-ячейку и сдвигал SVG вверх,
   из-за чего видимый крестик не совпадал с круглой зоной наведения/клика. */
.fancybox-button--close svg,
.fancybox-close-small svg {
  width: 18px;
  height: 18px;
  margin: 0;
  /* У самой <svg> и <path> fancybox не задаёт fill, поэтому браузер рендерит
     дефолтный чёрный — в тёмной теме на тёмном фоне кнопки крест не виден.
     Наследуем от currentColor (у кнопки задан `color: var(--ds-text)`, светлый
     в dark, тёмный в light) — крестик читается в обеих темах. */
  fill: currentColor;
}
.fancybox-button--close svg path,
.fancybox-close-small svg path { fill: currentColor; }

/* Кнопка close на слайде с картинкой — поверх, светлая */
.fancybox-slide--image .fancybox-close-small {
  top: -44px;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Стрелки навигации галереи.
   ВАЖНО: .fancybox-stage (с фото) идёт в DOM ПОСЛЕ навигации, поэтому без
   z-index фото перекрывает стрелки и клик по стрелке не проходит. Поднимаем
   навигацию над сценой; контейнер кликов не ловит (pointer-events:none),
   ловят только сами кнопки. */
.fancybox-navigation { position: absolute; inset: 0; z-index: 99; pointer-events: none; }
.fancybox-navigation .fancybox-button {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  /* Иконка стрелки — всегда тёмная. Раньше `var(--ds-text)` в тёмной теме
     резолвился в почти-белый → на белом фоне кнопки стрелка становилась
     невидимой. Фон кнопки хардкод-белый, поэтому цвет иконки фиксирован. */
  color: #1f2937;
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
  z-index: 99;
}
.fancybox-button--arrow_left { left: 16px; }
.fancybox-button--arrow_right { right: 16px; }
/* Сама стрелка (svg) без размера была 0px → круги видны, а направления нет. */
.fancybox-navigation .fancybox-button > div { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fancybox-navigation .fancybox-button svg { width: 26px; height: 26px; }
.fancybox-navigation .fancybox-button svg path { fill: currentColor; stroke: currentColor; }

/* Служебные панели fancybox — над сценой, чтобы крестик кликался */
.fancybox-infobar,
.fancybox-toolbar { position: absolute; top: 0; z-index: 99; }
.fancybox-infobar { left: 0; color: #fff; }
.fancybox-toolbar { right: 0; }

/* #29 Стрелки навигации — ТОЛЬКО для галерей (>1 фото). На одиночных попапах
   (формы «Заказать звонок» и т.п.) fancybox помечает их disabled — прячем,
   иначе ← → перекрывают поле телефона с флагом. */
.fancybox-navigation .fancybox-button[disabled] { display: none !important; }
/* На инлайн-попапах (формы) большой крестик в тулбаре не нужен — есть малый.
   Тулбар — сосед слайдов (в .fancybox-inner), поэтому целимся через контейнер:
   прячем тулбар, инфобар и caption, когда в лайтбоксе НЕТ фото-слайда
   (значит это форма — «1 / 1», пустой caption и дубль заголовка не нужны). */
.fancybox-container:not(:has(.fancybox-slide--image)) .fancybox-toolbar,
.fancybox-container:not(:has(.fancybox-slide--image)) .fancybox-infobar,
.fancybox-container:not(:has(.fancybox-slide--image)) .fancybox-caption { display: none; }

/* #27 Мобилка: фото в лайтбоксе на весь экран (85vh) и центрируется через
   flex — тогда центр фото = центр viewport, стрелки навигации (top:50%)
   попадают ровно в середину картинки, а не в пустое пространство под ней. */
@media (max-width: 640px) {
  .fancybox-slide { padding: 0 8px; }
  .fancybox-content { padding: 24px 18px; max-width: 100%; }
  .fancybox-slide--image { display: flex; align-items: center; justify-content: center; }
  .fancybox-slide--image .fancybox-content { padding: 0; }
  .fancybox-image, .fancybox-spaceball { max-width: 100%; max-height: 90vh; height: auto; }
  .fancybox-navigation .fancybox-button { width: 40px; height: 40px; margin-top: -20px; }
  .fancybox-button--arrow_left { left: 6px; }
  .fancybox-button--arrow_right { right: 6px; }
  .fancybox-content { font-size: 15px; }
}

/* ---- Пиксельные .modal (поиск и т.п.) — центрированный оверлей ---- */
.modal.in,
.modal.show,
.modal[style*="display: block"],
.modal[style*="display:block"] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, 0.72);
}
.modal.in .widget,
.modal.show .widget,
.modal .fw-messages-wrap {
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #1f2937);
  padding: 32px;
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.modal .close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  background: transparent;
  color: var(--ds-text, #1f2937);
  cursor: pointer;
}


/* ============================================================
   МОДАЛЬНЫЕ ОКНА (fancybox: «Заказать звонок», «Скидка 15%»,
   «Оставьте заявку», «Связаться с директором» и т.д.).
   Общий шаблон .content-card — единый стиль под дизайн-систему.
   Работает в светлой и тёмной темах (на токенах).
   Галереи фото не затрагиваются (у них нет .content-card).
   ============================================================ */
/* Затемнение-подложка */
.fancybox-bg { background: #020617; }
.fancybox-container.fancybox-is-open .fancybox-bg { opacity: .72; }

/* Карточка модалки */
.fancybox-content:has(.ajax_form) {
  background: var(--ds-surface);
  color: var(--ds-text);
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-r-block, 28px);
  box-shadow: var(--ds-shadow-card);
  padding: 40px;
  max-width: 460px; width: 100%; box-sizing: border-box;
}
/* Заголовок модалки — h5 (34px), как у эталонного «Не знаете какая именно
   услуга вам нужна?» в модалке «Помощь специалиста». Все модалки
   (#order_car / #order_call / #vacancies_add / #order_request и т.д.)
   единого размера. */
.fancybox-content:has(.ajax_form) .h4,
.fancybox-content:has(.ajax_form) h3,
.fancybox-content:has(.ajax_form) .section_header {
  font: var(--ds-fw-medium) var(--ds-h5) / var(--ds-h5-lh) var(--ds-font);
  color: var(--ds-text); letter-spacing: -.01em;
  margin: 0 0 16px; text-transform: none;
}
/* honeypot-поле «ФИО» скрываем */
.fancybox-content:has(.ajax_form) .fio-group { display: none !important; }
/* Иконки-глифы (легаси flaticon снят) — убираем */
.fancybox-content:has(.ajax_form) .input-group i[class*="flaticon"] { display: none !important; }

/* Поля — компонент .ds-field; .form-group ритм — компонент. */
.fancybox-content:has(.ajax_form) .input-group { display: flex; width: 100%; }

/* Согласие на обработку данных */
/* Строка согласия — компонент .ds-check-label; здесь только перенос и отступы. */
.fancybox-content:has(.ajax_form) .small { margin: 8px 0 20px; }
.fancybox-content:has(.ajax_form) .small .required { color: var(--ds-brand); }
.fancybox-content:has(.ajax_form) [class^="error_"] {
  flex: 1 1 100%; width: 100%; margin: 4px 0 0;
  font: var(--ds-fw-regular) var(--ds-body-s) / 1.3 var(--ds-font); color: var(--ds-danger);
}

/* Кнопка «Отправить» — компонент .ds-btn; здесь только раскладка (full-width + фикс. высота) */
.fancybox-content:has(.ajax_form) .theme_button,
.fancybox-content:has(.ajax_form) button[type="submit"] {
  width: 100%; height: 54px; display: flex;
}

/* Кнопка закрытия */
.fancybox-content:has(.ajax_form) .fancybox-close-small,
.fancybox-slide .fancybox-close-small { color: var(--ds-text-2); opacity: 1; }
/* На hover фон уже красится в брендовый (правило выше, base-стили). Крестик
   должен читаться на этом фоне — оставляем `#fff`. Раньше здесь стояло
   `color: var(--ds-brand)` — и крест-SVG получал currentColor = brand,
   сливаясь с брендовым фоном (иконка исчезала при наведении). */
.fancybox-content:has(.ajax_form) .fancybox-close-small:hover { color: #fff; }

/* Прикрепление файла в модалке (если есть) — как в основной форме */
/* .custom-file-upload — компонент; в модалке full-width + внизу отступ */
.fancybox-content:has(.ajax_form) .custom-file-upload { width: 100%; padding: 14px 18px; margin-bottom: 14px; }
/* :hover — компонент .custom-file-upload:hover в design-system.css. */


/* ============================================================
   Модалка «Помощь специалиста» (#help_specialist / #ajaxForm-mainHelp)
   — приводим к общему стилю: заголовок, тексты, компактный логотип.
   ============================================================ */
.fancybox-content:has(#ajaxForm-mainHelp) .help_specialist_title {
  font: var(--ds-fw-medium) var(--ds-h5) / var(--ds-h5-lh) var(--ds-font);
  color: var(--ds-text); letter-spacing: -.01em; margin: 0 0 10px;
}
.fancybox-content:has(#ajaxForm-mainHelp) .help_specialist_subtitle,
.fancybox-content:has(#ajaxForm-mainHelp) .help_specialist_subsubtitle {
  font: var(--ds-fw-regular) var(--ds-body-m) / var(--ds-body-m-lh) var(--ds-font);
  color: var(--ds-text-2); margin: 0 0 8px;
}
.fancybox-content:has(#ajaxForm-mainHelp) .help_specialist_subsubtitle:last-of-type { margin-bottom: 16px; }
/* Логотип — компактный, по центру (был 512×210 в натуре) */
.fancybox-content:has(#ajaxForm-mainHelp) .help_specialist_block_logo {
  text-align: center; margin: 16px 0 0; padding: 0;
}
.fancybox-content:has(#ajaxForm-mainHelp) .help_specialist_block_logo img,
.fancybox-content:has(#ajaxForm-mainHelp) .logo_img {
  width: auto !important; max-width: 132px !important; height: auto !important; margin: 0 auto; display: inline-block;
}

/* Помощь специалиста — больше воздуха между телефоном и кнопкой */
.fancybox-content:has(#ajaxForm-mainHelp) .theme_button,
.fancybox-content:has(#ajaxForm-mainHelp) button[type="submit"] { margin-top: 18px; }

/* Согласие лежит внутри .input-group рядом с полем «Телефон» — сам flex-контейнер
   не даёт вертикальных отступов. Дистанцируем блок согласия от строки телефона. */
.fancybox-content:has(#ajaxForm-mainHelp) .input-group > .form-group:has(#af_help-legal) { margin-top: 14px; }

/* «Помощь специалиста» — шире (больше текста влезает); лого в модалке
   отдаём из <img src="/verstka/img/logo.png"> напрямую, без CSS-подмены
   через content:url() (иначе рисуется старый SVG). */
.fancybox-content:has(#ajaxForm-mainHelp) { max-width: 540px !important; }
.fancybox-content:has(#ajaxForm-mainHelp) .help_specialist_block_logo img,
.fancybox-content:has(#ajaxForm-mainHelp) .logo_img {
  max-width: 140px !important;
}

/* Блок «Оставьте заявку» (форма + девушка-менеджер) — на весь экран по высоте */
@media (min-width: 761px) {
  .bl.section_padding_100:has(picture) {
    min-height: 100vh; box-sizing: border-box; display: flex; align-items: center;
    padding-top: 40px; padding-bottom: 40px;
  }
  .bl.section_padding_100:has(picture) > .container { width: 100%; }
}

/* ============================================================
   Тост-уведомления (jGrowl, справа сверху) — в стиле дизайн-системы.
   background-color (не background) — чтобы иконки-варианты сохранились.
   ============================================================ */
/* #19 jgrowl.css не грузится → контейнер был position:static и уведомление
   падало вниз страницы. Позиционируем его fixed справа-сверху. */
.jGrowl {
  position: fixed !important; top: 16px; right: 16px; left: auto; bottom: auto;
  z-index: 100000 !important; width: 320px; max-width: calc(100vw - 32px);
}
.jGrowl-notification { position: relative; margin-bottom: 12px; }
/* #30 jGrowl держит ПУСТОЙ шаблон-плашку (<div class="jGrowl-notification"></div>),
   который обычно прячет jgrowl.css. Без него всплывали ДВЕ плашки (пустая + реальная).
   Прячем пустые (без содержимого). */
.jGrowl-notification:empty,
.jGrowl-notification.default { display: none !important; }
.jGrowl-notification,
.jGrowl .jGrowl-notification {
  background-color: var(--ds-surface);
  color: var(--ds-text);
  border: 1px solid var(--ds-border-soft);
  border-left: 4px solid var(--ds-brand);
  border-radius: var(--ds-r-md, 16px);
  box-shadow: var(--ds-shadow-card);
  padding: 15px 18px;
  font-family: var(--ds-font); font-size: 15px; line-height: 1.4;
  font-weight: var(--ds-fw-regular);
  opacity: 1; text-shadow: none;
}
.jGrowl-notification .jGrowl-message,
.jGrowl .jGrowl-notification .jGrowl-message { color: var(--ds-text); font: inherit; }
/* Крестик закрытия — аккуратный кружок в правом-верхнем углу плашки */
.jGrowl-notification { padding-right: 40px; }
.jGrowl-notification .jGrowl-close,
.jGrowl .jGrowl-notification .jGrowl-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; font-weight: 400;
  color: var(--ds-text-3); background: transparent; cursor: pointer; opacity: 1;
  transition: background .15s ease, color .15s ease;
}
.jGrowl-notification .jGrowl-close:hover,
.jGrowl .jGrowl-notification .jGrowl-close:hover {
  background: var(--ds-surface-alt); color: var(--ds-text);
}

/* ==========================================================================
   «Спасибо за обращение» — экран благодарности в DS: страница /thanks (tpl19)
   и окно .gpm-thanks-modal там, где страницы нет (головной сайт, main.js, 2026-10-16).
   ========================================================================== */
.thanks-page {
  max-width: 720px; margin: 0 auto; padding: 64px 0 96px; text-align: center;
}
.thanks-page__icon {
  width: 88px; height: 88px; margin: 0 auto 26px; border-radius: 50%;
  background: rgba(var(--ds-brand-rgb),.08);
  display: flex; align-items: center; justify-content: center;
}
.thanks-page__icon::after {
  content: ""; width: 34px; height: 18px;
  border-left: 5px solid var(--ds-brand); border-bottom: 5px solid var(--ds-brand);
  transform: rotate(-45deg) translate(2px, -4px);
}
.thanks-page h2 {
  font: var(--ds-fw-semibold) var(--ds-h3, 34px)/1.2 var(--ds-font);
  color: var(--ds-text); margin: 0 0 10px;
}
.thanks-page p.sub,
.thanks-page h2.sub {
  font: var(--ds-fw-regular, 400) var(--ds-body-m)/1.6 var(--ds-font);
  color: var(--ds-text-2); margin: 0 0 30px;
}
/* Кнопка — компонент .ds-btn (класс стоит в разметке tpl19), своих стилей не нужно */
.gpm-thanks-modal { max-width: 560px; width: calc(100vw - 32px); }
.gpm-thanks-modal .thanks-page { padding: 16px 0 8px; }