/**
 * Лендинг раздела «Поставщики и покупатели», вариант 'shortlist' (public/suppliers/index.php, $supVariant).
 * Разметка — на классах Bootstrap/Silicon; здесь только то, чего в них нет:
 * форма-фраза, стопка карточек, схема карты с номерами, цепочка «откуда список», липкий заголовок.
 */

/* Форма-фраза: слова-значения — кнопки с пунктирным подчёркиванием */
.sup-phrase { line-height: 1.7; max-width: 26ch; text-wrap: pretty; }
.sup-fld { font: inherit; color: var(--si-primary); padding: 0 .1em; border: 0; border-radius: 0; border-bottom: 2px dashed currentColor;
  line-height: 1.2; vertical-align: baseline; white-space: nowrap; display: inline-flex; align-items: center; gap: .3em; }
.sup-fld:hover, .sup-fld:focus-visible, .sup-fld.show { color: var(--si-primary); background: rgba(99, 102, 241, .08); border-bottom-style: solid; }
.sup-fld .bi { font-size: .5em; opacity: .7; }
.sup-fld-empty { opacity: .75; }
.sup-fld [data-sup-phrase-dest] { display: inline-flex; align-items: center; gap: .35em; }
.sup-fld [data-sup-phrase-dest] img { width: .8em; height: .8em; }
/* Меню внутри крупной фразы — обычный размер и шрифт страницы */
.sup-phrase .dropdown-menu { font-family: var(--si-body-font-family); font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: normal; word-spacing: normal; }
.sup-phrase.is-invalid .sup-fld-empty { color: var(--si-danger); }
@media (max-width: 575.98px) {
  .sup-phrase { font-size: 1.375rem; }
  .sup-find { flex: 1 1 100%; }
}

/* Разбор выдачи: номера-метки, схема карты, всплывающие панели */
.sup-pin { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--si-primary); color: #fff; font-weight: 700; font-size: .8125rem; }
.sup-pin-abs { position: absolute; top: -10px; left: -10px; z-index: 2; box-shadow: 0 0 0 3px var(--si-light, #fff); }
.sup-pin-sm { width: 20px; height: 20px; font-size: .6875rem; }
.sup-flagstack img { border: 2px solid var(--si-light, #fff); margin-left: -6px; }
.sup-flagstack img:first-child { margin-left: 0; }
.sup-map { position: relative; height: 150px; overflow: hidden;
  background-image: radial-gradient(rgba(147, 151, 173, .45) 1.2px, transparent 1.3px); background-size: 12px 12px; }
.sup-map img { position: absolute; translate: -50% -50%; box-shadow: 0 0 0 3px var(--si-light, #fff); }
.sup-map .sup-map-lead { box-shadow: 0 0 0 3px var(--si-light, #fff), 0 0 0 9px rgba(99, 102, 241, .25); }
@media (min-width: 992px) {
  /* Панели 4–5 «выпадают» за правый край карточки, как всплывающие окна выдачи */
  .sup-res { margin-right: 28px; }
  .sup-pops { position: absolute; right: -28px; bottom: -36px; width: 240px; margin: 0 !important; display: grid; gap: 12px; }
  .sup-pops > div { width: 100%; padding: 0; }
  .sup-res .card-body { padding-bottom: 5.5rem !important; }
}

/* Кому пригодится: заголовок держится при прокрутке строк справа */
@media (min-width: 992px) { .sup-sticky { position: sticky; top: 110px; } }

/* Откуда список: звенья на общей линии (lg) / вертикальная линия (ниже) */
.sup-chain-link { position: relative; }
.sup-chain-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--si-primary);
  box-shadow: 0 0 0 5px rgba(99, 102, 241, .15); margin-bottom: 1.25rem; }
@media (min-width: 992px) {
  .sup-chain-link::before { content: ""; position: absolute; left: calc(var(--si-gutter-x) * .5 + 14px); right: 0; top: 6px;
    height: 2px; background: rgba(99, 102, 241, .3); }
  .sup-chain-link:last-child::before { display: none; }
}
@media (max-width: 991.98px) {
  .sup-chain-link { padding-left: calc(var(--si-gutter-x) * .5 + 34px); }
  .sup-chain-dot { position: absolute; left: calc(var(--si-gutter-x) * .5); top: 4px; }
  .sup-chain-link::before { content: ""; position: absolute; left: calc(var(--si-gutter-x) * .5 + 6px); top: 26px; bottom: calc(-1 * var(--si-gutter-y, 1.5rem) + 4px);
    width: 2px; background: rgba(99, 102, 241, .3); }
  .sup-chain-link:last-child::before { display: none; }
}

/* Вопросы: разделители аккордеона на цветном фоне */
.sup-faq .accordion-item { border-color: rgba(147, 151, 173, .3); }
.sup-faq .accordion-button { color: var(--si-heading-color, inherit); }

/* Тёмная тема Silicon */
.dark-mode .sup-pin-abs, .dark-mode .sup-map img, .dark-mode .sup-flagstack img { box-shadow: 0 0 0 3px #0b0f19; border-color: #0b0f19; }
.dark-mode .sup-map .sup-map-lead { box-shadow: 0 0 0 3px #0b0f19, 0 0 0 9px rgba(99, 102, 241, .35); }

/* Фильтры выдачи в полоске раздела: без результатов не занимают места; ниже lg — второй строкой */
#supFilterDock:has(#supFilterIsland:empty) { display: none; }
@media (max-width: 991.98px) {
  #supSubnavRow { flex-wrap: wrap; row-gap: 0 !important; }
  #supFilterDock { order: 3; width: 100%; padding-bottom: .35rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #supFilterDock .toolbar-inner { flex-wrap: nowrap; }
}

/* Нет выдачи — секция результатов не занимает места */
.sup-results-sec:has(#supResults:empty) { display: none; }
/* Обрезка длинных названий компаний в flex-строках (утилиты min-width:0 в Bootstrap нет) */
#supLanding .min-w-0 { min-width: 0; }
/* Карточки стопки и всплывающие панели лежат друг на друге — фон сплошной (в тёмной теме карточки Silicon полупрозрачные) */
.sup-res .sup-pop.card { background-color: #fff; }
.dark-mode .sup-res .sup-pop.card { background-color: #161b29; }

/* AOS (js/suppliers-landing.js ставит data-aos только при загруженном AOS и разрешённой анимации).
   Поворот/сдвиг карточек и флажков — отдельными свойствами rotate/translate: AOS управляет transform и их не сбивает.
   Цепочка «откуда список»: линия к следующему звену прорисовывается после появления звена. */
.sup-chain-link[data-aos]::before { transition: transform .7s ease .35s; }
@media (min-width: 992px) {
  .sup-chain-link[data-aos]::before { transform: scaleX(0); transform-origin: left center; }
  .sup-chain-link[data-aos].aos-animate::before { transform: scaleX(1); }
}
@media (max-width: 991.98px) {
  .sup-chain-link[data-aos]::before { transform: scaleY(0); transform-origin: center top; }
  .sup-chain-link[data-aos].aos-animate::before { transform: scaleY(1); }
}
/* Пульс ведущей страны на схеме карты, когда флажок появился */
@media (prefers-reduced-motion: no-preference) {
  .sup-map .sup-map-lead.aos-animate { animation: sup-pulse 2.4s ease-out 1.2s 2; }
  @keyframes sup-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--sup-ring), 0 0 0 9px rgba(99, 102, 241, .25); }
    50% { box-shadow: 0 0 0 3px var(--sup-ring), 0 0 0 16px rgba(99, 102, 241, 0); } }
}
.sup-map { --sup-ring: #fff; }
.dark-mode .sup-map { --sup-ring: #0b0f19; }
[data-sup-count] { font-variant-numeric: tabular-nums; }
/* AOS оставляет transform на анимированных блоках — каждый становится отдельным слоем, и следующий
   (кнопки «Собрать список») перекрывал открытое меню фразы. Фраза — слой выше соседей первого экрана. */
.sup-phrase { position: relative; z-index: 5; }
/* Меню кодов во фразе шире (подсказка в поле не обрезается), но не шире экрана */
.sup-phrase .dropdown-menu { min-width: min(420px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px); }
/* До анимации AOS держит карточки и панели сдвинутыми (fade-left, zoom-in-left) — за правый край экрана.
   clip, а не hidden: не создаёт контейнер прокрутки, липкий заголовок «Кому пригодится» работает. */
.sup-hero, #supLanding > section { overflow-x: clip; }

/* Карта маршрутов первого экрана (js/suppliers-landing.js).
   lg+: справа во всю высоту ряда с левой колонкой и до правого края экрана; левый край растворяется под текстом.
   Ниже lg карта скрыта (d-none d-lg-block в hero-shortlist.php). */
.sup-hero-map { position: relative; height: 360px; flex: 0 0 auto; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; padding: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(#0000, #000 12%, #000 88%, #0000); mask-image: linear-gradient(#0000, #000 12%, #000 88%, #0000); }
@media (min-width: 992px) {
  .sup-hero-map { position: absolute; top: 0; bottom: 0; left: 46%; right: calc((100% - 100vw) / 2); width: auto; height: auto; margin: 0;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 18%), linear-gradient(#0000, #000 8%, #000 92%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 18%), linear-gradient(#0000, #000 8%, #000 92%, #0000);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
.sup-hero-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sup-hero-map .m-dot { fill: rgba(99, 102, 241, .16); }
.dark-mode .sup-hero-map .m-dot { fill: rgba(255, 255, 255, .12); }
.sup-hero-map .m-arc { fill: none; stroke: var(--si-primary, #6366f1); stroke-linecap: round; opacity: .7; }
.sup-hero-map .m-box { fill: var(--si-primary, #6366f1); }
.sup-hero-map .m-pin, .sup-hero-map .m-spot, .sup-hero-map .m-chip, .sup-hero-map .m-edge, .sup-hero-map .m-count { position: absolute; }
.sup-hero-map .m-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(11, 15, 25, .2);
  transition: opacity .5s, scale .5s cubic-bezier(.2, .9, .3, 1.4); }
.sup-hero-map .m-pin.lead { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.sup-hero-map .m-ring { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--si-primary, #6366f1); opacity: 0; }
.sup-hero-map.is-run .m-ring { animation: sup-ring 2.6s ease-out infinite; }
@keyframes sup-ring { 0% { scale: .7; opacity: .9; } 100% { scale: 2.8; opacity: 0; } }
.sup-hero-map .m-spot { border-radius: 50%; background: rgba(99, 102, 241, .18); border: 1.5px solid rgba(99, 102, 241, .55); translate: -50% -50%;
  transition: scale .9s cubic-bezier(.2, .9, .3, 1.2), opacity .6s; }
.sup-hero-map .m-chip, .sup-hero-map .m-edge, .sup-hero-map .m-count { background: #fff; border: 1px solid rgba(147, 151, 173, .25); box-shadow: 0 .5rem 1.5rem -.5rem rgba(11, 15, 25, .25);
  border-radius: 999px; white-space: nowrap; transition: opacity .5s, translate .5s; }
.sup-hero-map .m-chip { display: flex; align-items: center; gap: .5rem; padding: .3rem .9rem .3rem .3rem; font-weight: 700; color: var(--si-heading-color, #0b0f19); font-size: .875rem; line-height: 1.15; }
.sup-hero-map .m-chip small { display: block; font-size: .6875rem; font-weight: 600; color: var(--si-secondary-color, #9397ad); }
.sup-hero-map .m-edge { display: flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .25rem; font-size: .75rem; font-weight: 700; color: var(--si-heading-color, #0b0f19); translate: 0 -50%; }
.sup-hero-map .m-count { right: 1.5rem; bottom: 1.5rem; border-radius: 1.25rem; padding: .75rem 1.1rem; white-space: normal; max-width: 260px; }
.sup-hero-map .m-count b { display: block; font-family: "Ubuntu", sans-serif; font-size: 2.25rem; font-weight: 700; line-height: 1.05; margin: .15rem 0; color: var(--si-heading-color, #0b0f19); font-variant-numeric: tabular-nums; }
.sup-hero-map .m-count span { display: block; font-size: .75rem; font-weight: 700; color: var(--si-secondary-color, #9397ad); }
.sup-hero-map .m-count small { display: block; font-size: .6875rem; color: var(--si-secondary-color, #9397ad); margin-top: .35rem; line-height: 1.3; }
.sup-hero-map .m-hide { opacity: 0; }
.sup-hero-map .m-pin.m-hide { scale: .2; }
.sup-hero-map .m-spot.m-hide { scale: 0; }
.sup-hero-map .m-chip.m-hide, .sup-hero-map .m-count.m-hide { translate: 0 8px; }
.sup-hero-map .m-edge.m-hide { translate: 8px -50%; }
.dark-mode .sup-hero-map .m-chip, .dark-mode .sup-hero-map .m-edge, .dark-mode .sup-hero-map .m-count { background: #161b29; border-color: rgba(255, 255, 255, .12); color: #fff; }
.dark-mode .sup-hero-map .m-count b { color: #fff; }
.dark-mode .sup-hero-map .m-pin { box-shadow: 0 0 0 3px #0b0f19, 0 2px 8px rgba(0, 0, 0, .4); }
@media (max-width: 991.98px) {
  .sup-hero-map .m-count { right: 1rem; bottom: 1.25rem; padding: .5rem .85rem; border-radius: 1rem; }
  .sup-hero-map .m-count b { font-size: 1.5rem; }
  .sup-hero-map .m-count small { display: none; }
}

/* Полоска раздела под шапкой: полупрозрачная с размытием фона, во всю ширину */
.sup-subnav { z-index: 1020; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.dark-mode .sup-subnav { background: rgba(11, 15, 25, .94); }

/* Первый экран целиком в окно ноутбука (1280×720, 1440×780…): на lg+ размеры заголовка, подводки,
   фразы и отступов зависят от высоты окна (vh); на высоких экранах упираются в прежние размеры. */
@media (min-width: 992px) {
  .sup-hero { padding-top: clamp(1rem, 3.6vh, 3rem) !important; padding-bottom: clamp(1rem, 3.6vh, 3rem) !important; }
  .sup-hero > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* Высота первого экрана = окно минус шапка с полоской; содержимое по центру — поровну воздуха сверху и снизу */
  .sup-hero { min-height: calc(100vh - var(--sup-stick, 112px) + 8px); display: flex; align-items: center; }
  .sup-hero > .container { width: 100%; }
  .sup-hero h1 { font-size: clamp(2.25rem, 6.6vh, 5rem); max-width: 19ch !important; margin-bottom: clamp(.6rem, 2.2vh, 1.5rem) !important; }
  .sup-hero h1 + p { font-size: clamp(.95rem, 2.2vh, 1.25rem); line-height: 1.5; margin-bottom: clamp(.6rem, 2.6vh, 2rem) !important; padding-bottom: 0 !important; }
  .sup-phrase { font-size: clamp(1.2rem, 3.3vh, 2rem); line-height: 1.6; margin-bottom: clamp(.9rem, 3vh, 3rem) !important; }
}
/* Узкие ноутбуки (992–1199): колонка уже, длинные языки (kk, de) дают заголовок в 4 строки — чуть мельче */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sup-hero h1 { font-size: clamp(2rem, 5.8vh, 4rem); }
  .sup-phrase { font-size: clamp(1.15rem, 3.1vh, 1.75rem); }
}