/* ── Booking-раздвоен поглед: лево листа, десно мапа (27.08.2026) ────────────
   Андреј, врз слика од нашата мапа и слика од booking.com:
     „nemam skroll opcija i nemam opcija kako na booking"

   Мерено ПРЕД да се пишува (Halkidiki · 15.09.2026 · chromium 1440×900, живо):
   мапата беше MUI Dialog 1296×810 врз 1440×900 екран, `body{overflow:hidden}`
   додека е отворена, и пинови со празен текст. Значи трите работи што кај
   booking се обратни: листата не се гледа, скролот е заклучен, пинот не носи цена.

   Позицијата НЕ живее во билдот. `wl_bundle_patch.py` (S1…S8) само го вади
   Dialog-от и лепи класи; сето распоредување е овде, за да преживее нивни ребилд
   со друг emotion-хеш. Ако овој фајл го нема, страницата е точна но не е
   раздвоена — мапата паѓа во текот на страницата, не е скршена.

   Врати назад: тргни ги двата `mapsplit.*` реда од sub_filter во
   `whitelabel-klaudija.nginx.conf`, `nginx -s reload`, и
   `python3 scripts/wl_bundle_patch.py --revert` за билдот.

   ─────────────────────────────────────────────────────────────────────────
   06.09.2026 · ПАКЕТИТЕ НЕ БЕА ВО РАЗДВОЕНИОТ ПОГЛЕД

   Мерено на лабот (`pred_mapsplit.py`, chromium 1440×900, Египет · 07.09.2026 ·
   6 ноќи · „Пронајдени 98 хотели", мапата отворена):

       листа   x=144  w=1152  right=1296
       панел   x=806  w= 634  right=1440
       ПРЕКЛОП 490px = 42,5% од ширината на листата
       .sv-list-col на страницата: НЕ ПОСТОИ
       .sv-hotel-grid на страницата: НЕ ПОСТОИ

   Причината не е во распоредувањето туку во КОТВАТА: `markListCol()` во
   `mapsplit.js` бараше САМО `.sv-hotel-grid` (класа од закрпата L1, ја има
   само списокот ХОТЕЛИ). Списокот ПАКЕТИ билдот го цртaше како безимен
   `Box{display:flex, flexDirection:column, gap:2}` — нема за што да се фати,
   па колоната никогаш не добиваше `.sv-list-col`, значи ни `padding-right`.
   Мапата легнуваше врз десните 490px од секој ред — таму каде што стои цената.

   Затоа решетката на пакетите добива класа `sv-pkg-grid` во билдот
   (`wl_bundle_patch.py`, N15), точно по образецот на `sv-hotel-grid` (L1) и
   `sv-results-bar` (N13/N14). Овој фајл од таму натаму ги третира двата
   списоци со ЕДНО правило.

   Второ мерено на истото место: `padding-right: calc(--sv-map-px + 24px)` ја
   стеснува листата за ШИРИНАТА на панелот, а не до неговиот ЛЕВ РАБ. На 1440
   панелот е широк 634 но почнува на 806, додека десниот раб на контејнерот е на
   1320 — значи 120px од стеснувањето се празен ваздух. Сега `mapsplit.js` мери
   до левиот раб (`--sv-list-pad`); старата формула останува како резерва ако
   мерењето не помине низ гардовите.                                          */

:root {
  --sv-map-top: 0px;     /* дното на хедерот, се мери живо во mapsplit.js */
  --sv-map-px: 0px;      /* вистинската ширина на панелот во пиксели */
  /* --sv-list-pad НЕ се дефинира тука намерно: ако mapsplit.js не успее да
     измери сигурно, `var()` паѓа на старата формула подолу. Дефинирана празна
     вредност би ја убила резервата. */
}

/* ═══ 1 · Панелот со мапата ═══════════════════════════════════════════════
   Телефон прво: мапата зазема сè, како кај booking на мал екран.
   06.09: `left:0; right:0; width:auto` наместо `width:100vw` — 100vw ја брои и
   лентата за скролање, па на екран со видлив скролбар панелот излегуваше
   неколку пиксели надвор и раѓаше водорамен скрол. */
.sv-pane-map {
  position: fixed;
  top: var(--sv-map-top);
  left: 0;
  right: 0;
  width: auto;
  height: calc(100vh - var(--sv-map-top));
  height: calc(100dvh - var(--sv-map-top));
  z-index: 1250;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* скролот во мапата да не се прелева на страницата под неа. Ова НЕ е
     `body{overflow:hidden}` — страницата останува подвижна штом мапата ќе се
     затвори, а токму заклучениот скрол беше првичната поплака. */
  overscroll-behavior: contain;
  border-left: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
  box-shadow: -14px 0 40px rgba(0, 0, 0, .28);
}

/* Внатрешниот Box на мапата мора да ја земе целата висина на панелот —
   нивниот код се потпираше на `height:90vh` од Dialog-от, кој го нема веќе. */
.sv-pane-map > * { flex: 1 1 auto; min-height: 0; }
.sv-pane-map .leaflet-container { height: 100%; }

/* Телефон: мапата е преку цел екран (мерено 390×844 → панел 390×782 на y=62).
   Тесна колона со мапа на телефон не е мапа, туку лента — затоа под 901px
   листата НЕ се стеснува воопшто. */
@media (max-width: 900px) {
  /* на екран со засек копчето ✕ би завршило под него */
  .sv-pane-map { top: max(var(--sv-map-top), env(safe-area-inset-top, 0px)); }
  /* Нивното ✕ е 40×40; правилото на куќата е ≥44×44 (mobile-first, 22.04.2026). */
  .sv-pane-map .sv-map-close,
  .sv-pane-spot .sv-spot-close { width: 44px !important; height: 44px !important; }
}

@media (min-width: 901px) {
  .sv-pane-map { left: auto; width: clamp(400px, 44vw, 760px); }

  /* Листата се стеснува ТОЧНО до левиот раб на панелот, мерено во js —
     инаку последната картичка секогаш стои под мапата и изгледа исечена.
     `--sv-list-pad` е точната мерка (десен раб на колоната → лев раб на
     панелот + 24px јаз); ако гардовите во js не поминат, се враќа старата
     формула по ширина на панелот.

     `!important`: Emotion ги пишува своите <style> ПО нашиот <link>, па при
     иста специфичност победува неговиот (истата причина е запишана и во
     `resultsbar.css`, мерено 26.08.2026). */
  body.sv-map-split .sv-list-col {
    padding-right: var(--sv-list-pad, calc(var(--sv-map-px) + 24px)) !important;
  }
}

/* ═══ 2 · Пин со цена ═════════════════════════════════════════════════════
   Јазолот е точка (iconSize [0,0]) зашто Leaflet сам му пишува
   `transform: translate3d(...)`; наша трансформација врз него би ја пребришала
   позицијата. Затоа етикетата внатре се центрира сама. */
.sv-pin { width: 0 !important; height: 0 !important; background: none; border: 0; }

.sv-pin .sv-pin-l {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, -100%);
  /* 30.08: 62 хотели во кадар → етикетите се газеа (скриншот Toulouse).
     Покомпактен пин (11px, потесен padding) + заокружена цена од S8c
     ја вадат ~1/3 од ширината; hover подолу го крева гажениот над сите. */
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font: 700 11px/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #fff;
  color: #1f2937;
  border: 1.5px solid rgba(0, 0, 0, .16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

/* врвчето надолу, за да се знае на која точка седи цената */
.sv-pin .sv-pin-l::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 1.5px solid rgba(0, 0, 0, .16);
  border-bottom: 1.5px solid rgba(0, 0, 0, .16);
}

/* пин под глувче излегува над купот — газените стануваат читливи без клик */
.sv-pin:hover { z-index: 900 !important; }
.sv-pin:hover .sv-pin-l { transform: translate(-50%, -100%) scale(1.06); }

.sv-pin-on { z-index: 1000 !important; }
.sv-pin-on .sv-pin-l {
  background: var(--brand-accent, #f0801a);
  color: #fff;
  border-color: transparent;
  transform: translate(-50%, -100%) scale(1.08);
}
.sv-pin-on .sv-pin-l::after { border-color: transparent; }

/* Controls share the existing white/orange visual language. */
.sv-pane-map .sv-map-tools {
  position: absolute; top: 12px; left: 54px; right: 62px; z-index: 1100;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 4px 8px 4px 12px; box-sizing: border-box;
  background: #fff; color: #334155; border: 1px solid #e2e8f0;
  border-radius: 12px; box-shadow: 0 2px 12px #0002; font: 600 12px/1.35 system-ui;
}
.sv-map-tools button, .sv-map-popup button {
  min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: #fff3e5; color: #9a4c0a; font: 700 12px/1.3 system-ui; cursor: pointer;
}
.sv-map-tools button { flex-shrink: 0; }
.sv-pane-map:has(.sv-map-tools) .sv-map-native-count { display: none !important; }
.sv-pane-map .sv-map-close, .sv-pane-spot .sv-spot-close {
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important;
}
.sv-map-popup { display: grid; gap: 8px; min-width: 150px; font: 14px/1.4 system-ui; }
.sv-map-popup strong { overflow-wrap: anywhere; }
.sv-map-popup > span { font-weight: 700; }
.sv-pane-map .sv-map-announcement {
  position: absolute; top: 76px; left: 54px; right: 62px; z-index: 1100;
  background: #fff; color: #334155; padding: 10px 12px; border-radius: 10px;
  box-shadow: 0 2px 12px #0002; font: 13px/1.4 system-ui;
}
.sv-own-selected .sv-pin-on:not(.sv-pin-own) .sv-pin-l {
  background: #fff; color: #1f2937; border-color: #0003; transform: translate(-50%, -100%);
}
.sv-pin:focus-visible .sv-pin-l, .sv-map-tools button:focus-visible,
.sv-map-popup button:focus-visible, [data-sv-mini]:focus-visible {
  outline: 3px solid #1d4ed8; outline-offset: 3px;
}
@media (max-width: 900px) {
  .sv-pin .sv-pin-l { min-height: 44px; min-width: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
  .sv-pane-map .sv-map-tools { gap: 4px; padding-left: 8px; font-size: 11px; }
  .sv-map-tools button { max-width: 90px; padding: 8px; }
  .sv-pane-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
  .sv-pane-map .leaflet-popup-close-button { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .sv-map-rail { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-pin .sv-pin-l, .sv-map-rail { transition: none !important; scroll-behavior: auto !important; }
}

/* ═══ 3 · Активната картичка лево ═════════════════════════════════════════ */
.sv-hotel-card { scroll-margin-top: calc(var(--sv-map-top) + 16px); }
.sv-hotel-card.sv-card-on {
  outline: 2px solid var(--brand-accent, #f0801a);
  outline-offset: 2px;
}
@media (min-width: 901px) {
  body.sv-map-split .sv-hotel-card { cursor: pointer; }
}

/* Редовите на ПАКЕТИТЕ немаат своја класа (билдот ги цртa како MuiPaper деца на
   решетката), па отстапката одозгора им се дава преку решетката. Без ова, кога
   некој ред се доведува во кадар, го покрива залепената лента `.sv-results-bar`. */
.sv-pkg-grid > * { scroll-margin-top: calc(var(--sv-map-top) + 16px); }

/* ═══ 4 · Мапата на ЕДЕН хотел ════════════════════════════════════════════
   Внатре во деталите таа е преглед во текот (како кај booking во картичката на
   објектот), не втор модал врз модал — токму тоа беше „немам скрол": Dialog врз
   Dialog го заклучува `body` и деталите под него не се движат. */
.sv-details-dialog .sv-pane-spot {
  position: relative;
  display: block;
  width: 100%;
  /* Висината ја носи НИВНИОТ внатрешен Box (300px на телефон, 400 на широко).
     Фиксни 320px тука ја сечеа мапата — измерено: контејнер 320, Leaflet 400. */
  height: auto;
  margin: 12px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
}
.sv-details-dialog .sv-pane-spot .leaflet-container { height: 100%; }

/* Истата компонента се вика и од списокот пакети, каде НЕ е внатре во детали —
   таму останува панел десно, како големата мапа. */
.sv-pane-spot:not(.sv-details-dialog .sv-pane-spot) {
  position: fixed;
  top: var(--sv-map-top);
  left: 0;
  right: 0;
  width: auto;
  height: calc(100vh - var(--sv-map-top));
  height: calc(100dvh - var(--sv-map-top));
  z-index: 1250;
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow: -14px 0 40px rgba(0, 0, 0, .28);
}
@media (min-width: 901px) {
  .sv-pane-spot:not(.sv-details-dialog .sv-pane-spot) {
    left: auto;
    width: clamp(400px, 44vw, 760px);
  }
}