/* =====================================================================
   custom.css — правки главной + ЕДИНАЯ шапка (2026-07-07, ред. 8)
   Задача 07: шапка ОДИНАКОВА на всех страницах (решение оператора) —
   селекторы шапки перескоуплены с .header--home на .header; внутренние
   страницы получают тёмный фон #16181d и белые тексты (у главной
   .md-bg-transparent/.md-white-header имеют больший вес и работают как раньше).
   Единицы vw (макет 1920px). Брейкпоинт шапки/hero = 768px.
   .wrapper = 81.77vw по центру → левый край ≈ 9.1vw от края экрана.
   ===================================================================== */

/* ---------- Глобально ---------- */

/* Скрим-градиент на фото первого экрана — БАЗА (::after). Применяется к тёмным
   hero (.first.md-dark-bg) — это допустимое общее улучшение читаемости.
   Сам градиент задаётся ниже: десктоп — горизонтальный, мобильный — вертикальный. */
.first.md-dark-bg .first__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Спаны графика в шапке */
.hdr-time-title { display: block; font-weight: 700; }
.hdr-time-schedule { display: block; font-weight: 400; opacity: 0.85; }

/* ===== Задача 07: единая ТЁМНАЯ шапка на всех страницах =====
   На главной .header.md-bg-transparent (0-2-0) перебивает фон,
   а .md-white-header — цвета: там всё остаётся как было. */
.header {
  /* при тёмной теме head.php печатает .header{transparent} ПОСЛЕ custom.css —
     этот фон работает как фолбэк для светлой темы; тон = settings.backgorund */
  background-color: #12171a;
  color: #fff;
}
.header .header__logo a,
.header .header__contacts a { color: #fff; }
.header .header__contacts a:hover { color: var(--main-color); }

/* ---------- Десктоп/планшет (≥769px) ---------- */
@media (min-width: 769px) {

  /* Скрим под левый заголовок (горизонтальный + лёгкий низ) */
  .first.md-dark-bg .first__bg::after {
    background:
      linear-gradient(90deg,
        rgba(12,14,16,0.92) 0%,
        rgba(12,14,16,0.78) 30%,
        rgba(12,14,16,0.42) 58%,
        rgba(12,14,16,0.12) 100%),
      linear-gradient(180deg,
        rgba(12,14,16,0.30) 0%,
        rgba(12,14,16,0) 35%,
        rgba(12,14,16,0.55) 100%);
  }

  /* Две кнопки первого экрана (catalog-link существует только на главной) */
  .first__buttons { flex-wrap: wrap; row-gap: 1.1vw; }
  .first__catalog-link { flex: 0 0 100%; display: inline-flex; }
  .first__catalog-link .first__buttons-btn { margin-right: 0; }

  /* ===== ШАПКА — ЕДИНАЯ НА ВСЕХ СТРАНИЦАХ (задача 07) ===== */

  /* Белое меню на тёмной шапке (десктоп; мобильное меню-оверлей не трогаем —
     у него свои флипы цветов в теме). Подменю остаётся тёмным текстом
     на светлой панели (#F5F8F9). При sticky-меню (фон #F5F8F9) — тёмный текст. */
  .header .nav-wrap { border-bottom: 0.0520833333vw solid rgba(255,255,255,0.3); }  /* та же линия, что на главной */
  .header .nav-wrap .nav .nav-item a { color: #fff; }
  .header .nav-wrap .nav .nav-item a:hover { color: var(--main-color); }
  .header .nav-wrap .nav .nav-item.dropdown-item::after { border-color: #fff; }
  .header .nav-wrap .nav .nav-item.dropdown-item:hover::after { border-color: var(--main-color); }
  /* Ссылки подменю: var(--text-main-color) корректен в обеих темах
     (тёмная: #fff на тёмной панели из head.php; светлая: тёмный на #F5F8F9) */
  .header .nav-wrap .nav .nav-item.dropdown-item .nav-menu .nav-item a { color: var(--text-main-color); }
  .header .nav-wrap .nav .nav-item.dropdown-item .nav-menu .nav-item a:hover { color: var(--main-color); }
  /* Sticky-панель меню всегда светлая (#F5F8F9, main.css) → ЛИТЕРАЛЬНО тёмный текст:
     var(--text-main-color)=#fff при тёмной теме сделал бы её нечитаемой */
  .header .header__nav.fixed .nav-wrap .nav .nav-item a { color: #1C1C1C; }
  .header .header__nav.fixed .nav-wrap .nav .nav-item a:hover { color: var(--main-color); }
  .header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item::after { border-color: #1C1C1C; }
  .header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item:hover::after { border-color: var(--main-color); }

  /* Читаемость поиска: main.css:899 задаёт input{color:#000 !important} —
     перебиваем той же важностью с большей специфичностью (белый текст на тёмном поле) */
  .header .hdr-search input[type="text"] { color: #fff !important; }
  .header .hdr-search .form-input::placeholder { color: #fff !important; }
  .header .hdr-search .form-input::-webkit-input-placeholder { color: #fff !important; }
  .header .hdr-search .form-input::-moz-placeholder { color: #fff !important; }

  /* Логотип: левый верхний угол, без подложки */
  .header .header__logo {
    position: absolute;
    top: 2.4vw;
    left: 9.1vw;
    z-index: 5;
    margin: 0;
    padding: 0;
  }
  .header .header__logo a { background: none; border-radius: 0; padding: 0; height: auto; }
  .header .header__logo a img,
  .header .header__logo a svg { width: 9vw; height: auto; }

  /* Меню и строка поиска/контактов — правее логотипа */
  .header .header__nav .wrapper { padding-left: 12.5vw; }
  .header .header__top .wrapper {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 12.5vw;
  }

  /* Поиск: шире/ниже; display:flex закрывает шов 769px (иначе поиск пропадает) */
  .header .hdr-search {
    display: flex;
    margin-left: 1vw;
    margin-top: 1vw;
    border-radius: 0.6vw;
  }
  .header .hdr-search input[type="text"] {
    width: 28vw;
    height: 2.4vw;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 2.6vw;
    font-size: 0.72vw;
  }
  .header .hdr-search input[type="submit"] { top: 0.45vw; right: 0.6vw; }

  /* График — левая колонка правого кластера */
  .header .header__schedule {
    margin-left: auto;
    margin-right: 1.6vw;
    max-width: 13vw;
    padding-top: 1vw;
  }
  .header .header__schedule .hdr-time-title {
    position: relative;
    font-size: 0.75vw;
    line-height: 0.95vw;
    margin-bottom: 0.4vw;
  }
  .header .header__schedule .hdr-time-title::before {   /* красная точка перед «24/7» */
    content: "";
    position: absolute;
    width: 0.2vw;
    height: 0.2vw;
    border-radius: 50%;
    background-color: var(--main-color);
    left: -0.55vw;
    top: 0.35vw;
  }
  .header .header__schedule .hdr-time-schedule {
    font-size: 0.72vw;
    line-height: 1.05vw;
  }

  /* Контакты — правая колонка: телефон, почта, затем «Мы онлайн + мессенджеры» */
  .header .header__contacts {
    width: auto;
    min-width: 11vw;
    align-items: flex-start;
    text-align: left;
  }
  .header .header__contacts .header__social {
    width: auto;
    align-items: flex-start;
    text-align: left;
    padding-left: 0;
    padding-top: 0.7vw;
  }

  /* Задача 02: список услуг «Что мы можем» — крупнее для читаемости и баланса
     (было 0.9375vw ≈18px; заголовок 4.125vw, текст-параграф 1.302vw) */
  .about-company--home .about-company__text span {
    font-size: 1.25vw;
    line-height: 1.85vw;
  }

  /* ===== Задача 03: блок «Нужна прошивка на заказ» (главная) =====
     Фото (fon-1.jpg, пара BMW — из макета заказчика) на ВЕСЬ фон блока;
     слева заголовок, красная кнопка и «или напишите, мы онлайн». */
  .get-consultation--home { margin-top: 3.5vw; }   /* отступ от блока выше */
  .get-consultation--home .get-consultation__container {
    position: relative;
    overflow: hidden;
    min-height: 31vw;
    padding: 4.5vw 38vw 4.5vw 3.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-position: center 62%;   /* машины в кадре */
  }
  .get-consultation--home .get-consultation__container::before {  /* затемнение слева — читаемость текста */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(10,12,14,0.80) 0%,
      rgba(10,12,14,0.55) 40%,
      rgba(10,12,14,0.10) 72%);
  }
  .get-consultation--home .get-consultation__content {
    position: relative;
    z-index: 2;
  }
  .get-consultation--home .get-consultation__title { margin-bottom: 2vw; }
  .get-consultation--home .get-consultation__cta { margin-bottom: 2.2vw; }
  .get-consultation--home .get-consultation__cta .md-main-color-btn img { width: 1.15vw; }

  /* ===== Задача 04: FAQ — аккуратные кнопки мессенджеров (Telegram + MAX) ===== */
  .questions__messengers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2vw;
    margin-top: 2.2vw;
  }
  .questions__messenger {
    display: inline-flex;
    align-items: center;
    gap: 0.75vw;
    padding: 0.85vw 1.6vw;
    border-radius: var(--brad-regular);
    background: rgba(255,255,255,0.06);
    border: 0.052vw solid rgba(255,255,255,0.22);
    color: #fff;
    font-weight: 600;
    font-size: 0.95vw;
    line-height: 1;
    transition: 0.3s;
  }
  .questions__messenger img {
    width: 1.8vw;
    height: 1.8vw;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .questions__messenger:hover { transform: translateY(-0.15vw); }
  .questions__messenger--tg:hover  { background: rgba(42,171,238,0.20); border-color: #2AABEE; }
  .questions__messenger--max:hover { background: rgba(147,66,236,0.20); border-color: #9342EC; }

  /* ===== Задача 09: страница «Наши контакты» (contacts--v2) =====
     Карточки контактов + форма в стиле сайта (тёмные стеклянные поверхности). */
  .contacts--v2 .contacts__title { margin-bottom: 2.6vw; }
  .chub { display: flex; align-items: stretch; gap: 1.6vw; }
  .chub-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2vw;
  }
  .chub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    padding: 1.7vw 1.8vw;
    border-radius: var(--brad-regular);
    background: rgba(255,255,255,0.05);
    border: 0.052vw solid rgba(255,255,255,0.14);
    color: #fff;
    transition: 0.3s;
  }
  a.chub-card:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-0.2vw);
  }
  .chub-card__icon {
    width: 2.5vw;
    height: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--main-color);              /* svg fill=currentColor → акцент сайта */
    background: rgba(218,31,58,0.12);      /* rgba от --main-color #da1f3a */
    margin-bottom: 0.4vw;
  }
  .chub-card__icon svg { width: 1.15vw; height: 1.15vw; }
  .chub-card__label {
    font-size: 0.75vw;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.55;
  }
  .chub-card__value {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.3vw;
    line-height: 1.7vw;
    color: #fff;
  }
  .chub-card__hint { font-size: 0.78vw; line-height: 1.15vw; opacity: 0.65; }
  /* Мета прижата к низу карточки: превращает разницу высот с формой в осознанную композицию */
  .chub-card__hint, .chub-card__msgrs { margin-top: auto; }
  .chub-card__schedule { font-size: 0.85vw; line-height: 1.3vw; opacity: 0.85; }
  .chub-card__cta {
    font-weight: 700;
    font-size: 0.83vw;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--main-color);
    margin-top: 0.5vw;
  }
  a.chub-card:hover .chub-card__cta { text-decoration: underline; }
  a.chub-card:focus-visible, .chub .questions__messenger:focus-visible {  /* компенсация глобального outline:none */
    border-color: var(--main-color);
    background: rgba(255,255,255,0.09);
  }
  .chub-card__msgrs { display: flex; gap: 0.6vw; margin-top: auto; padding-top: 0.5vw; }
  .chub-card .questions__messenger { padding: 0.55vw 1vw; font-size: 0.82vw; gap: 0.55vw; }
  .chub-card .questions__messenger img { width: 1.4vw; height: 1.4vw; }
  .chub-form {
    flex: 0 0 26vw;
    width: 26vw;
    padding: 1.9vw 2vw;
    border-radius: var(--brad-regular);
    background: rgba(255,255,255,0.05);
    border: 0.052vw solid rgba(255,255,255,0.14);
  }
  .chub-form .form-title {
    font-size: 1.15vw;
    line-height: 1.5vw;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.2vw;
  }
  .chub-form .form-container { display: flex; flex-direction: column; }
  .chub-form .form-input { width: 100%; height: 3.4vw; margin: 0 0 0.8vw 0; padding: 0 1.4vw; }
  .chub-form .form-textarea { height: 7.5vw; margin-bottom: 0.9vw; padding: 1vw 1.4vw; }
  .chub-form .form-btn { width: 100%; height: 3.9vw; }  /* в ритме полей 3.4vw, а не гигантские 5.2vw */
  .chub-form .form-checkbox { margin-top: 0.9vw; }
}

/* ===== Задача 09: поля формы контактов — фикс тёмной темы (все экраны) =====
   На сайте --text-main-color=#fff (тёмная тема head.php), а main.css:899 красит
   в чёрный только input/select — textarea оставался белым-по-белому. Плюс
   автозаполнение Chrome красило текст в белый на белом поле. */
.chub-form .form-input,
.chub-form .form-textarea { background: #fff; }
.chub-form .form-textarea {
  color: #000;
  -webkit-user-select: text;
  user-select: text;             /* глобальный .page * { user-select:none } ломал выделение в textarea */
}
.chub-form .form-textarea::placeholder { color: rgba(0,0,0,0.6); }
.chub-form .form-textarea::-webkit-input-placeholder { color: rgba(0,0,0,0.6); }
.chub-form .form-textarea::-moz-placeholder { color: rgba(0,0,0,0.6); }
.chub-form input:-webkit-autofill,
.chub-form input:-webkit-autofill:hover,
.chub-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  caret-color: #000;
}

/* ---------- Мобильные (≤768px) ---------- */
@media (max-width: 768px) {

  /* Громоздкий блок графика в шапке главной скрываем (иначе переполняет фикс-шапку). */
  .header .header__schedule { display: none; }

  /* Контакты главной не должны переполнять фикс-шапку (17vw): ужимаем и убираем пустой call-back. */
  .header .header__contacts {
    width: auto;
    padding-top: 0;
    padding-left: 0;
  }
  .header .header__contacts a {
    line-height: 3.4vw;
    margin-bottom: 0.4vw;
  }
  .header .header__contacts .call-back { display: none; }

  /* Вертикальный скрим под центрированный мобильный заголовок */
  .first.md-dark-bg .first__bg::after {
    background: linear-gradient(180deg,
      rgba(12,14,16,0.72) 0%,
      rgba(12,14,16,0.32) 34%,
      rgba(12,14,16,0.22) 58%,
      rgba(12,14,16,0.66) 100%);
  }

  /* Задача 02: список услуг «Что мы можем» — крупнее на мобильном (было 2.5vw) */
  .about-company--home .about-company__text span {
    font-size: 3.4vw;
    line-height: 5.4vw;
  }

  /* ===== Задача 03: блок «Нужна прошивка на заказ» (главная, мобайл) =====
     Фото на весь фон; контент по центру сверху, снизу оставлено место,
     чтобы машины из фото были видны. */
  .get-consultation--home { margin-top: 9vw; }   /* отступ от блока выше */
  .get-consultation--home .get-consultation__container {
    position: relative;
    overflow: hidden;
    padding: 9vw 5vw 52vw 5vw;
    min-height: 0;
    background-position: 68% center;   /* машины правее центра кадра */
  }
  .get-consultation--home .get-consultation__container::before {  /* затемнение сверху под текст */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(10,12,14,0.78) 0%,
      rgba(10,12,14,0.45) 55%,
      rgba(10,12,14,0.08) 100%);
  }
  .get-consultation--home .get-consultation__content {
    position: relative;
    z-index: 2;
  }
  .get-consultation--home .get-consultation__title {
    text-align: center;
    margin-bottom: 6vw;
  }
  .get-consultation--home .get-consultation__cta {
    display: flex;
    justify-content: center;
    margin-bottom: 6.5vw;
  }

  /* ===== Задача 04: FAQ — кнопки мессенджеров (мобайл: в столбик, во всю ширину) ===== */
  .questions__messengers {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3.2vw;
    margin-top: 6.5vw;
    padding: 0 6.25vw;
  }
  .questions__messenger {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2.6vw;
    padding: 3.6vw 4vw;
    border-radius: var(--brad-regular);
    background: rgba(255,255,255,0.06);
    border: 0.26vw solid rgba(255,255,255,0.22);
    color: #fff;
    font-weight: 600;
    font-size: 3.9vw;
    line-height: 1;
    transition: 0.3s;
  }
  .questions__messenger img {
    width: 6.6vw;
    height: 6.6vw;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .questions__messenger--tg:active  { background: rgba(42,171,238,0.20); border-color: #2AABEE; }
  .questions__messenger--max:active { background: rgba(147,66,236,0.20); border-color: #9342EC; }

  /* ===== Задача 09: страница «Наши контакты» (мобайл) ===== */
  /* display:block обязателен: старый main.css:16675 прячет .contacts__title на мобильном */
  .contacts--v2 .contacts__title { display: block; margin-bottom: 6vw; }
  .chub { display: flex; flex-direction: column; gap: 4vw; }
  .chub-grid { display: grid; grid-template-columns: 1fr; gap: 3.2vw; }
  .chub-card {
    display: flex;
    flex-direction: column;
    gap: 1.4vw;
    padding: 5vw;
    border-radius: var(--brad-regular);
    background: rgba(255,255,255,0.05);
    border: 0.26vw solid rgba(255,255,255,0.14);
    color: #fff;
  }
  .chub-card__icon {
    width: 9.5vw;
    height: 9.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--main-color);
    background: rgba(218,31,58,0.12);
  }
  .chub-card__icon svg { width: 4.4vw; height: 4.4vw; }
  .chub-card__label {
    font-size: 2.8vw;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.55;
  }
  .chub-card__value {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 4.6vw;
    line-height: 6vw;
    color: #fff;
  }
  .chub-card__hint { font-size: 3.1vw; line-height: 4.6vw; opacity: 0.65; }
  .chub-card__schedule { font-size: 3.4vw; line-height: 5vw; opacity: 0.85; }
  .chub-card__cta {
    font-weight: 700;
    font-size: 3.4vw;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--main-color);
    margin-top: 0.8vw;
  }
  .chub-card__msgrs { display: flex; flex-direction: column; gap: 2.6vw; margin-top: 1vw; }
  .chub-form {
    width: 100%;
    padding: 5vw;
    border-radius: var(--brad-regular);
    background: rgba(255,255,255,0.05);
    border: 0.26vw solid rgba(255,255,255,0.14);
  }
  .chub-form .form-title { font-size: 4.4vw; line-height: 6vw; font-weight: 700; color: #fff; margin-bottom: 3.5vw; }
  .chub-form .form-container { display: flex; flex-direction: column; }
  .chub-form .form-input { width: 100%; height: 12vw; margin: 0 0 2.6vw 0; padding: 0 4vw; }
  /* width:100% обязателен: мобильный main.css:13576 сужает textarea до 63vw */
  .chub-form .form-textarea { width: 100%; height: 28vw; margin-bottom: 2.8vw; padding: 3vw 4vw; }
  .chub-form .form-btn { width: 100%; }
  .chub-form .form-checkbox { margin-top: 3vw; justify-content: flex-start; }
  .chub-form .form-checkbox p { font-size: 3vw; line-height: 4.4vw; }  /* было ~8px — нечитаемо */
}

/* =====================================================================
   Задача 02 (2026-09-11, ред.2): попап «Шаблон для заказа прошивки»
   ВАЖНО: .popup__block — БЕЛЫЙ фон, поэтому весь текст формы ТЁМНЫЙ.
   Раскладка: CSS grid 2 колонки с секциями-заголовками. Скоуп .md-fw-popup.
   Макет: десктоп 1920px, мобайл ≤768px.
   ===================================================================== */
@media (min-width: 769px) {
  .main-popup.md-fw-popup { width: 46.875vw; }
  .main-popup.md-fw-popup .main-popup__content { padding: 2.6041666667vw 2.6041666667vw; }
  .main-popup.md-fw-popup .main-popup__title { text-align: left; margin-bottom: 0.5208333333vw; }
  .main-popup.md-fw-popup .main-popup__text { text-align: left; margin-bottom: 1.3020833333vw; opacity: 0.7; }

  .main-popup.md-fw-popup .md-popup-form .form-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 1.0416666667vw; column-gap: 1.0416666667vw;
    row-gap: 0.7291666667vw;
    align-items: start;
  }
  .main-popup.md-fw-popup .md-popup-form .fw-full { grid-column: 1 / -1; }

  .main-popup.md-fw-popup .md-popup-form .form-input {
    width: 100%; height: 3.3854166667vw; margin: 0;
    padding: 0 1.3541666667vw;
    font-size: 0.8333333333vw; line-height: 1.1458333333vw;
    box-shadow: none; border: 0.0520833333vw solid #e2e5ea;
    background: #f7f8fa; box-sizing: border-box;
  }
  .main-popup.md-fw-popup .md-popup-form .form-input:focus {
    border-color: var(--main-color); background: #fff;
  }

  .md-fw-popup .fw-section {
    font-weight: 700; color: #16181d; opacity: 0.5;
    font-size: 0.7291666667vw; line-height: 1; letter-spacing: 0.08em;
    text-transform: uppercase; margin: 0.9375vw 0 0 0;
  }
  .md-fw-popup .form-container > .fw-section:first-child { margin-top: 0; }

  .md-fw-popup .fw-worktypes { margin: 0; }
  .md-fw-popup .fw-worktypes__legend { display: block; margin-bottom: 0.625vw; }
  .md-fw-popup .fw-worktypes__grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5208333333vw; }
  .md-fw-popup .fw-chk { position: relative; margin: 0; }
  .md-fw-popup .fw-chk input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .md-fw-popup .fw-chk span {
    display: block; padding: 0.5208333333vw 1.09375vw;
    background: #f1f2f4; border: 0.0520833333vw solid #d7dae0;
    border-radius: 2.0833333333vw; color: #1c1c1c;
    font-size: 0.7833333333vw; line-height: 1.0416666667vw; white-space: nowrap;
    cursor: pointer; -webkit-transition: 0.18s; transition: 0.18s;
  }
  .md-fw-popup .fw-chk:hover span { border-color: #b9bdc6; }
  .md-fw-popup .fw-chk input:checked + span { background: var(--main-color); border-color: var(--main-color); color: #fff; }

  .main-popup.md-fw-popup .md-popup-form .form-textarea {
    width: 100%; height: 6.25vw; margin: 0;
    padding: 0.9375vw 1.3541666667vw;
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.8333333333vw; line-height: 1.1458333333vw;
    border-radius: var(--brad-regular); border: 0.0520833333vw solid #e2e5ea;
    background: #f7f8fa; color: var(--text-main-color); resize: vertical; box-sizing: border-box;
  }
  .main-popup.md-fw-popup .md-popup-form .form-textarea:focus { border-color: var(--main-color); background: #fff; }

  .md-fw-popup .fw-file { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; gap: 0.4166666667vw; }
  .md-fw-popup .fw-file__label { color: #16181d; opacity: 0.5; font-weight: 700; font-size: 0.7291666667vw; letter-spacing: 0.08em; text-transform: uppercase; }
  .md-fw-popup .fw-file input[type="file"] { color: #1c1c1c; font-size: 0.7833333333vw; max-width: 100%; }
  .md-fw-popup .fw-file input[type="file"]::-webkit-file-upload-button,
  .md-fw-popup .fw-file input[type="file"]::file-selector-button {
    margin-right: 0.78125vw; padding: 0.5208333333vw 1.0416666667vw;
    border: none; border-radius: 0.5208333333vw; background: #16181d; color: #fff;
    font-size: 0.7291666667vw; cursor: pointer; -webkit-transition: 0.18s; transition: 0.18s;
  }
  .md-fw-popup .fw-file input[type="file"]::-webkit-file-upload-button:hover,
  .md-fw-popup .fw-file input[type="file"]::file-selector-button:hover { background: var(--main-color); }

  .main-popup.md-fw-popup .md-popup-form .form-btn { width: 100%; height: 3.6458333333vw; margin-top: 0.5208333333vw; }
  .main-popup.md-fw-popup .md-popup-form .form-checkbox { width: 100%; margin: 0.9375vw auto 0; -ms-flex-pack: start; justify-content: flex-start; }
  .main-popup.md-fw-popup .md-popup-form .form-checkbox p { font-size: 0.7291666667vw; line-height: 1.0416666667vw; opacity: 0.75; }
}
@media (max-width: 768px) {
  .main-popup.md-fw-popup { width: 90vw; }
  .main-popup.md-fw-popup .main-popup__content { padding: 8vw 5vw; }
  .main-popup.md-fw-popup .main-popup__title { text-align: left; margin-bottom: 2vw; }
  .main-popup.md-fw-popup .main-popup__text { text-align: left; margin-bottom: 5vw; opacity: 0.7; }
  .main-popup.md-fw-popup .md-popup-form .form-container { width: 100%; display: grid; grid-template-columns: 1fr; row-gap: 2.6vw; }
  .main-popup.md-fw-popup .md-popup-form .form-input,
  .main-popup.md-fw-popup .md-popup-form .form-textarea,
  .main-popup.md-fw-popup .md-popup-form .fw-full { width: 100%; box-sizing: border-box; }
  .main-popup.md-fw-popup .md-popup-form .form-input {
    height: 11.5vw; margin: 0; padding: 0 4vw; font-size: 3.75vw; line-height: 5vw;
    border: 0.3vw solid #e2e5ea; background: #f7f8fa; box-shadow: none;
  }
  .md-fw-popup .fw-section { font-weight: 700; color: #16181d; opacity: 0.5; font-size: 3.2vw; letter-spacing: 0.08em; text-transform: uppercase; margin: 3vw 0 0; }
  .md-fw-popup .form-container > .fw-section:first-child { margin-top: 0; }
  .md-fw-popup .fw-worktypes { margin: 0; }
  .md-fw-popup .fw-worktypes__legend { display: block; margin-bottom: 2.6vw; }
  .md-fw-popup .fw-worktypes__grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 2vw; }
  .md-fw-popup .fw-chk { position: relative; margin: 0; }
  .md-fw-popup .fw-chk input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; }
  .md-fw-popup .fw-chk span { display: block; padding: 2vw 3.6vw; background: #f1f2f4; border: 0.3vw solid #d7dae0; border-radius: 10vw; color: #1c1c1c; font-size: 3.4vw; line-height: 4.4vw; white-space: nowrap; }
  .md-fw-popup .fw-chk input:checked + span { background: var(--main-color); border-color: var(--main-color); color: #fff; }
  .main-popup.md-fw-popup .md-popup-form .form-textarea {
    height: 26vw; margin: 0; padding: 3vw 4vw; border-radius: var(--brad-regular);
    font-family: "Inter", Arial, sans-serif; font-size: 3.75vw; line-height: 5vw;
    border: 0.3vw solid #e2e5ea; background: #f7f8fa; color: var(--text-main-color); resize: vertical;
  }
  .md-fw-popup .fw-file { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; gap: 1.6vw; }
  .md-fw-popup .fw-file__label { color: #16181d; opacity: 0.5; font-weight: 700; font-size: 3.2vw; letter-spacing: 0.08em; text-transform: uppercase; }
  .md-fw-popup .fw-file input[type="file"] { color: #1c1c1c; font-size: 3.4vw; max-width: 100%; }
  .md-fw-popup .fw-file input[type="file"]::-webkit-file-upload-button,
  .md-fw-popup .fw-file input[type="file"]::file-selector-button { margin-right: 3vw; padding: 2vw 4vw; border: none; border-radius: 2vw; background: #16181d; color: #fff; font-size: 3.2vw; }
  .main-popup.md-fw-popup .md-popup-form .form-btn { width: 100%; margin-top: 2vw; }
  .main-popup.md-fw-popup .md-popup-form .form-checkbox { width: 100%; margin-top: 4vw; -ms-flex-pack: start; justify-content: flex-start; }
}