/* ============================================================
   Мобильный режим «Навигатор» для toplivomap.ru
   Подключать ПОСЛЕ основного toplivomap-new.css, чтобы переопределял.
   Активируется на экранах <= 768px. На десктопе ничего не меняет.
   ============================================================ */

/* --- 1. Фиксация ширины: убираем горизонтальную прокрутку и «расползание» --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

/* Ничто не должно вылезать за ширину экрана */
img, svg, video, canvas, iframe, table { max-width: 100%; }

@media (max-width: 768px) {

  /* Запрет масштабирования жестами/двойным тапом (навигатор-режим).
     Дополняет user-scalable=no в meta viewport. */
  html, body {
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
  }

  /* Базовая блокировка ширины на мобильном */
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }

  /* --- 2. Прячем всё «лишнее» — остаётся навигатор --- */
  header .topnav,                 /* меню Карта/Статистика/АЗС/... */
  header .auth-pill,              /* кнопка Войти (по желанию можно вернуть) */
  #scrollProgress,
  .seo-hero,                      /* H1, интро, summary-strip */
  .details-panel,                 /* aside со сводкой АЗС найдено/есть/очередь */
  #summaryStrip,                  /* сама плашка сводки (на всякий случай) */
  #stations,                      /* список станций отдельной секцией */
  #landing-links,                 /* посадочные ссылки */
  #stats,                         /* блок статистики */
  #faq,                           /* FAQ */
  footer,
  .section-card {                 /* любые прочие карточки-секции */
    display: none !important;
  }

  /* --- 3. Хедер компактный: логотип + поиск в одну строку --- */
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #101215;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
  header .wrap.nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  header .logo img { height: 34px !important; }
  .header-city { flex: 1 1 auto; min-width: 0; }
  .header-city__row { display: flex; gap: 6px; }
  #citySearchInput {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    font-size: 16px;          /* >=16px, чтобы iOS не зумил при фокусе */
  }
  #citySearchBtn { flex: 0 0 auto; white-space: nowrap; }
  /* выпадающие подсказки города поверх карты */
  #citySuggest { position: absolute; left: 10px; right: 10px; z-index: 1200; }

  /* --- 4. Карта на весь экран (как в навигаторе) --- */
  main#top { margin: 0; padding: 0; }
  .map-stage { margin: 0 !important; padding: 0 !important; }
  .map-stage .wrap { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  .map-card {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* Высота карты = экран минус хедер (~52px) и панель фильтров (~52px) */
  #map, #yandexMap, .yandex-map, #mapFallback {
    width: 100% !important;
    height: calc(100vh - 104px) !important;
    height: calc(100dvh - 104px) !important;  /* dvh — корректно с адресной строкой */
    min-height: 320px;
    border-radius: 0 !important;
  }
  /* Карте оставляем ВСЕ жесты: запрет зума страницы не должен ломать щипок по карте */
  #map, #yandexMap, .yandex-map, #mapFallback,
  #map * , #yandexMap * {
    touch-action: auto;
  }

  /* --- 5. Панель управления навигатора: фильтры одной строкой, со скроллом --- */
  .map-control-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #14171b;
    border-bottom: 1px solid #24272d;
  }
  .map-control-line::-webkit-scrollbar { display: none; }
  .map-control-line > * { flex: 0 0 auto; }         /* элементы не сжимаются, а скроллятся */
  #geoBtnMap { white-space: nowrap; }
  #fuelFilter { max-width: 44vw; }
  .chips.map-status { display: flex; gap: 6px; flex-wrap: nowrap; }
  .chips.map-status .chip { white-space: nowrap; }

  /* --- 6. Кнопка «наверх» не нужна в полноэкранной карте --- */
  #toTopBtn { display: none !important; }

  /* Модалки/тосты поверх карты остаются как есть, но не шире экрана */
  #modalCard, .toast, #mapTooltip { max-width: calc(100vw - 24px); }

  /* --- 7. Карточка АЗС (модалка): не выше экрана, крестик виден, есть скролл --- */
  .modal-overlay {
    align-items: flex-end;        /* карточка «выезжает» снизу, как в навигаторах */
    padding: 0;
  }
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh;             /* не на весь экран — видно, что под ней карта */
    max-height: 85dvh;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;   /* скруглить только верх */
    display: flex;
    flex-direction: column;
    overflow: hidden;             /* скролл будет внутри контента, а не всей карточки */
    padding: 0 !important;
  }
  /* Крестик закреплён в правом верхнем углу и всегда виден поверх контента */
  .modal-close {
    position: sticky;
    top: 0;
    align-self: flex-end;
    z-index: 5;
    margin: 8px 8px -8px 0;
    background: rgba(20,23,27,.9);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }
  /* Контент карточки прокручивается внутри */
  #modalContent {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 20px;
    flex: 1 1 auto;
    min-height: 0;                /* критично для скролла во flex-контейнере */
  }
}

/* Совсем узкие телефоны */
@media (max-width: 380px) {
  header .logo img { height: 28px !important; }
  #citySearchBtn { padding-left: 10px; padding-right: 10px; }
  #fuelFilter { max-width: 40vw; }
}