/* ============================================================
   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;
}