/* ============================================================
   Select2 v4 — глобальный фикс ширины контейнера.

   Проблема:
   Select2 при width:'100%' иногда отдаёт контейнер шириной
   самого длинного <option>'а (например пакомат
   "RĪGA, Paku Skapis TC Jugla (JUGLAS KRASTMALA 2, 1024)" = 400+px),
   а не шириной родительской карточки/колонки.

   Причины:
   1) родитель <select> бывает <span> с display:inline → 100% не от чего считать;
   2) .select2-selection__rendered теряет display:block → white-space:nowrap
      на inline-элементе раздувает родителя по контенту;
   3) flex-предки имеют min-width:auto → дети не сжимаются меньше contents.

   Решение: подключаем этот файл один раз в header.twig — действует
   на всех страницах со Select2 (checkout0..2, checkout1_*, registration,
   account, etc.).

   Безопасность: НЕ форсим width на сам контейнер — пусть Select2
   слушается переданного init-параметра (`width: '100%'` или 'resolve').
   Только убираем то, что МЕШАЕТ корректной работе 100%.
   ============================================================ */

/* Внутренний rendered span: обязательно block, чтобы nowrap
   работал в пределах ширины родителя, а не растягивал его. */
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Multi-select rendered: тоже не должен распирать родителя */
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Сам контейнер и selection-блок: max-width 100%, min-width 0 —
   защита от flex-blowout. width НЕ ставим (пусть init решает). */
.select2-container,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Распространённая разметка в наших шаблонах:
   <span class="pd-fs-13px"><select>…</select></span>
   <span> по умолчанию display:inline → лочит ширину Select2.
   Принудительно делаем block. */
span.pd-fs-13px:has(> select),
span.pd-fs-13px:has(> .select2-container),
span.pd-fs-13px:has(> .select2) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Fallback для браузеров без :has() — большинство наших span.pd-fs-13px
   используются как обёртка для select'а, поэтому делаем их block повсеместно
   там, где они являются прямыми детьми карточек/форм. */
.card-holder > span.pd-fs-13px,
.card-holder span.pd-fs-13px,
form > span.pd-fs-13px {
    min-width: 0;
}

/* min-width:0 на типовые flex-контейнеры с карточками, чтобы Select2
   мог сжиматься меньше длины своего самого длинного option'а. */
.main-cards-holder,
.main-cards-holder > div,
.main-cards-holder form,
.main-cards-holder .card-holder,
.card-holder,
.card-holder * {
    min-width: 0;
}

/* Исходные <select>'ы пакомат-выбора — не должны распирать родителя
   (нативный <select> по умолчанию шириной самого длинного option'а). */
select[name="to_select"],
select[name="from_select"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* === Стрелка дропдауна — центрирование по вертикали ===
   Стандартный Select2 v4 позиционирует внутренний <b> абсолютно
   через `top: 50%; margin-top: -2px;` — каретка визуально получается
   ниже центра, особенно если высота контейнера-стрелки не совпадает
   с высотой selection (бывает на кастомных темах с border 1-2px).
   Заменяем на flex-центрирование: контейнер стрелки = flex, внутренний
   <b> = static. Работает на любой высоте selection без подгонок. */
.select2-container .select2-selection--single .select2-selection__arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}

/* === КРИТИЧНО: Select2 не должен распирать родительский flex-контейнер ===
   Корень проблемы:
   После init Select2 v4 вставляет <span class="select2 select2-container">
   с .select2-selection__rendered внутри (текст со white-space:nowrap).
   Если выбрано длинное имя (пакомат "RIGA, Paku Skapis TC Jugla
   (JUGLAS KRASTMALA 2, 1024)" ≈ 400px), его intrinsic min-content тянет
   за собой ВСЮ цепочку flex-предков с дефолтным `min-width: auto`
   (= min-content), распирая её даже за пределы viewport.

   `min-width: 0` на самом контейнере НЕ помогает — браузер всё равно
   считает его min-content по содержимому.

   Решение: CSS-containment.
   `contain: inline-size` сообщает движку, что inline-размер (ширина) этого
   элемента «содержится» — его внутренний contents НЕ влияют на intrinsic
   size, который виден родителю. Иначе говоря, для расчёта min-content
   родителя этот элемент = 0 ширины. Сам элемент потом получает реальную
   ширину от родителя через layout (например, `width: 100%`).

   Поддерживается во всех современных браузерах (Chrome 105+, Safari 16+,
   Firefox 110+). Для совсем старых браузеров деградирует — старое поведение
   (распирание родителя), но layout не ломается. */
.select2-container {
    contain: inline-size !important;
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-container .select2-selection__rendered {
    contain: inline-size !important;
}

/* === Полная стилизация Select2 на пакомат-селектах =====================
   Раньше в checkout0.twig JS ставил inline-style на каждый элемент Select2
   через .css(): wrapper-span, оригинальный <select>, Select2-контейнер,
   selection, rendered. Это плохо разделено: стили в JS, не переиспользуемо.

   Теперь вся стилистика здесь — JS только инициализирует Select2.
   Применяется автоматически ко ВСЕМ страницам где используется паттерн:
       <span class="pd-fs-13px">
           <select name="to_select"|"from_select"> ... </select>
       </span>
   ====================================================================== */

/* 1. Wrapper-span: должен быть block + 100%, иначе Select2 (display:inline-block
   по умолчанию) получит inline-родителя и ширина рассчитается по контенту. */
span.pd-fs-13px:has(> select[name="to_select"]),
span.pd-fs-13px:has(> select[name="from_select"]),
span.pd-fs-13px:has(> .select2-container) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Сам исходный <select> (Select2 его прячет, но до init он виден) */
select[name="to_select"],
select[name="from_select"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* 3. Select2-контейнер и его внутренние spans внутри wrapper'а */
.pd-fs-13px > .select2-container,
.pd-fs-13px > .select2-container .select2-selection--single,
.pd-fs-13px > .select2-container .select2-selection--multiple,
.pd-fs-13px > .select2-container .select2-selection__rendered {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* 4. Rendered text — обрезаем длинные пакомат-имена ellipsis'ом */
.pd-fs-13px > .select2-container .select2-selection__rendered {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ============================================================
   Pakomat parcel-locker dropdown (checkout1_*): позиционирование,
   высота списка и слой над карточками.

   Проблема (видно на checkout page1):
   При фильтре по городу список локеров большой. У результатов
   НЕ срабатывал max-height (дефолтный select2.css вешает его на
   `.select2-container--default .select2-results__options`, а тут
   тема/версия не совпала), поэтому дропдаун растягивался на весь
   экран и уходил за футер. Карточки ниже (Description / Back-Continue)
   перекрывали его середину — наружу торчали только нижние пункты.

   Этот файл НЕ кэшируется Twig (в отличие от inline-CSS внутри
   checkout1_*.twig), поэтому фикс применяется гарантированно.
   ============================================================ */

/* 1. Контейнер локера — точка отсчёта для абсолютного дропдауна. */
.psr-pakomat-block { position: relative; }

/* 2. Открытый локер поднимаем над следующими карточками.
      Только активный (через :has), чтобы два локера (drop-off / pickup)
      не конфликтовали друг с другом. */
.psr-pakomat-block:has(.select2-container--open) { z-index: 9999; }

/* 3. Сам дропдаун и его контейнер — поверх всего. */
.psr-pakomat-block .select2-container--open,
.psr-pakomat-block .select2-dropdown { z-index: 99999 !important; }

/* 3a. КРИТИЧНО про :hover. Пакомат-блок лежит внутри карточки .form.shadow123,
      у которой `:hover { transform: translateY(-2px) }`. CSS-transform создаёт
      НОВЫЙ stacking-контекст → z-index дропдаула «запирается» внутри карточки
      на её уровне, и панель Back/Continue (отдельная карточка ниже по DOM)
      рисуется поверх списка. Видно так: убираешь курсор — список сверху,
      наводишь на блок/список — карточка с кнопками перекрывает.

      Чиним: поднимаем саму карточку с открытым дропдауном выше остальных
      карточек (через :has). Тогда её stacking-контекст (хоть с transform, хоть
      без) сидит на z-9999 глобально, и список всегда поверх кнопок. */
.form.shadow123:has(.select2-container--open) {
    position: relative !important;
    z-index: 9999 !important;
}

/* 5. Выбранный текст в пакомат-селекте — вертикальное центрирование.
      В twig задан `line-height: 42px`, но на rendered-спане выше стоит
      `contain: inline-size` (защита ширины), из-за чего line-height иногда
      не центрирует текст и он прижимается к верху / подрезается.
      Flex-центрирование height-агностично и не зависит от line-height.
      Специфичность (.select2-container.select2-container--default …)
      выше, чем у twig-правила, поэтому переопределяет. Стрелка дропдаула
      позиционируется absolute — из flex-потока выпадает, не мешает. */
.psr-pakomat-block .select2-container.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
}
.psr-pakomat-block .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    contain: none !important;
    line-height: 1.3 !important;
    color: #0f1115 !important;
    width: 100% !important;
}

/* 4. ГЛАВНОЕ: ограничиваем высоту списка результатов со скроллом —
      тема-агностично (не зависит от класса select2-container--default).
      Теперь дропдаун = поиск + список ~240px, а не во весь экран. */
.select2-results > .select2-results__options,
.select2-results__options {
    max-height: 240px !important;
    overflow-y: auto !important;
}