/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 3. */
/* 04.09.2026 (Ivan: «по-моему в моб. версии старая версия всплывашки с выбором города»).

   Так и было: новый список городов (.city-pop) живёт внутри .tb-city-wrap — блока верхней
   панели, а она на телефоне скрыта (new-catalog.css:4579). Поэтому 02.09 кнопке мобильной
   шапки (.nd-mh-city) намеренно оставили старое модальное окно «Выберите свой город»
   (.cities-list в подвале, две колонки и кнопка «Поиск»).

   Теперь на телефоне открывается тот же новый список: скрипт (js/main.js) переносит .city-pop
   в конец body и вешает класс на html. Здесь — вид листа снизу и затемнение под ним.
   На компьютере ничего не меняется: правила действуют только при ширине до 1099 px и только
   когда у .city-pop есть класс is-mobile. */

@media (max-width: 1099px) {
  /* затемнение */
  .ndcm-back {
    position: fixed; inset: 0; z-index: 10001; background: rgba(14, 14, 18, .55);
    opacity: 0; transition: opacity .2s;
  }
  html.ndcm-open .ndcm-back { opacity: 1; }
  .ndcm-back[hidden] { display: none !important; }

  html.ndcm-open, html.ndcm-open body { overflow: hidden; }

  /* сам список: лист снизу на всю ширину */
  .city-pop.is-mobile {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important; transform: translateY(100%); width: auto !important; max-width: none !important;
    max-height: 86vh; overflow-y: auto; z-index: 10002 !important;
    margin: 0 !important; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    background: var(--bg-card, #FFFFFF); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(14, 14, 18, .22);
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    display: block !important; transition: transform .24s ease;
  }
  html.ndcm-open .city-pop.is-mobile { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .city-pop.is-mobile, .ndcm-back { transition: none; }
  }

  /* полоска-ручка сверху, как у листов в приложениях */
  .city-pop.is-mobile::before {
    content: ''; display: block; width: 38px; height: 4px; border-radius: 999px;
    background: #E3E5EA; margin: -6px auto 12px;
  }

  .city-pop.is-mobile .cp-head { font-size: 17px; font-weight: 800; margin-bottom: 12px; padding-right: 40px; }
  .city-pop.is-mobile .cp-search { position: sticky; top: 0; background: var(--bg-card, #FFFFFF); z-index: 2; padding-bottom: 8px; }
  .city-pop.is-mobile .cp-search input { min-height: 46px; font-size: 16px; }  /* 16px — iOS иначе зумит страницу */
  .city-pop.is-mobile .cp-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .city-pop.is-mobile .cp-city { min-height: 46px; }
  .city-pop.is-mobile .cp-section { margin-top: 14px; }

  /* крестик: у выпадающего списка на компьютере его нет — он закрывается кликом мимо */
  .ndcm-x {
    position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: #F1F2F5; color: var(--muted, #6E6E76); cursor: pointer; z-index: 3;
  }
}

/* Кнопка связи и её пузырь сидят на z-index 999999 — выше листа; пока список открыт, прячем
   (то же самое сделано для окна квиза, css/pages/nd-quiz.css). */
html.ndcm-open #enc-fab-callback,
html.ndcm-open #enc-fab-greet,
html.ndcm-open #enc-fab-msgs { display: none !important; }