/* ETL_GESTURES_0906 — оформление под жесты на сенсорных экранах.
   Подключается только по (pointer: coarse) — на мыши ничего не меняется. */

@media (pointer: coarse) {

  /* Панель, которую можно смахнуть. Полоска-«ручка» сверху — единственный
     способ показать пальцем управляемому человеку, что блок тянется:
     без неё жест приходится угадывать. */
  .etl-swipeable {
    position: relative;
    will-change: transform;
  }

  /* Ось жеста и ось прокрутки не должны совпадать, иначе палец двигает и
     страницу, и панель одновременно. Уведомление уезжает вбок — страницу
     по-прежнему можно листать; карточку снизу тянут вниз — на время
     касания именно по ней прокрутка страницы уступает жесту. */
  .etl-swipeable[data-etl-swipe="right"],
  .etl-swipeable[data-etl-swipe="left"] {
    touch-action: pan-y;
  }

  .etl-swipeable[data-etl-swipe="bottom"],
  .etl-swipeable[data-etl-swipe="top"] {
    touch-action: pan-x;
  }

  .etl-swipe-handle {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    /* .28 читалось как случайная засветка на краю карточки. Полоска должна
       быть заметна с первого взгляда — иначе о жесте никто не догадается и
       остаётся один крестик. */
    opacity: .5;
    pointer-events: none;
  }

  /* Ручке нужна своя полоса сверху, иначе она ложится на заголовок или на
     кромку карточки и теряется. Отступ даём самой панели — так он работает
     и когда внутри лежит единственный блок со своими полями. */
  .etl-swipeable:has(> .etl-swipe-handle) {
    padding-top: 18px;
  }

  /* Крестики закрытия: единый размер и зона касания.
     Раньше они были от 20 до 48 px и стояли в разных углах — палец
     промахивался по мелким. Внешний вид не трогаем, растягиваем только
     область нажатия: сам значок остаётся прежнего размера. */
  .etl-lead-popup__close,
  .etl-cab-popup__close,
  .etl-sticky-cta__close,
  .etl-holiday-banner__close,
  .etl-chat-teaser__close,
  .etl-toast__close,
  .etl-site-search__close,
  .etl-calc-overlay__close,
  .etl-news__x,
  .etl-xbar__close {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Прокрутку внутри таблиц оставляем системе: свайп там уже занят. */
  .price-table-wrap,
  [data-etl-scroll-x] {
    touch-action: pan-x pan-y;
  }
}