/* ── Пребарувачот останува ГОРЕ цело време (26.08.2026) ────────────────────
   Андреј: „a gore da si bide prebaruvac celo vreme?"

   Мерено пред да се пишува ова, врз ЖИВ резултат (Greece · Pieria ·
   15.09.2026, chromium 1280×900): страницата со понуди е 2.161px висока,
   формата е `position: relative` на 243px, хедерот `position: static` — на
   scrollY=600 копчето „Пребарување" веќе НЕ Е во видното поле
   (`searchVisible=false`). Значи човек што листа понуди нема ниту еден пат
   назад до пребарувањето освен скрол до врвот.

   ЗОШТО СОПСТВЕН ФАЈЛ, а не додаток на overlay.css: на 26.08 во 13:38 друга
   сесија ги препиша `overlay.{js,css}` (блокот `sv-rec`) и еден мој додаток
   веќе се изгуби така. Одвоен фајл значи дека двете работи не се газат —
   nginx ги лепи и двата.

   Врати назад: тргни ги двата `searchbar.*` реда од sub_filter во
   `whitelabel-klaudija.nginx.conf` и `nginx -s reload`. */

/* `!important` не е лакомост туку редослед: Emotion ги внесува своите
   <style> ознаки ПО нашиот <link>, па при иста специфичност победува неговиот
   `position: relative` на хедер-лентата. Мерено — со инјекција по вчитување
   тестот минуваше, а живо (link во head) хедерот сепак пропаѓаше:
   headerTop=-11597. Истата замка е веќе запишана во overlay.js за
   `--brand-text`. */
.sv-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  /* z-index и background ИСТО одат со !important — мерено 26.08 на Касандра
     (27.328px страница): `position` се фати, но `z-index` остана 1 зашто
     Emotion пишува по нашиот <link>. Со z-index 1 хедерот е залепен, но сè
     што доаѓа подоцна во DOM-от се црта ВРЗ него — на скриновите „Пронајдени
     140 хотели" и лентата со филтри седеа врз логото и менито. Проѕирна
     позадина би дала иста слика: содржината се гледа низ хедерот. */
  z-index: 1250 !important;
  background: #fff !important;
  transition: box-shadow .2s ease;
}
.sv-header.sv-header-shadow {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
}

/* Местодржачот ја држи висината на формата за да не скока страницата — И Е
   МЕРАЧОТ по кој се одлучува лепењето. Затоа СЕКОГАШ е во текот, само со
   висина 0 кога формата е на своето место. Со `display: none` (првата
   верзија на 26.08) `getBoundingClientRect()` враќа нули, 0 < висината на
   хедерот е секогаш вистина, и лентата се лепеше веднаш при вчитување —
   па се одлепуваше, па пак, во бесконечно треперење.

   `pointer-events: none` затоа што местодржачот е празен правоаголник висок
   колку формата: без тоа тој ги пресретнува кликовите врз сѐ што се затекнало
   под него (мерено — playwright пријави „sv-formspace intercepts pointer
   events" врз копчето „Пребарување"). */
.sv-formspace { display: block; height: 0; pointer-events: none; }

.sv-searchform.sv-stuck {
  position: fixed;
  top: var(--sv-header-h, 84px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--sv-form-w, 1152px);
  z-index: 1240;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
  overflow: visible;
  /* Paper-от носи свој отстап од 21px: во полн приказ тој е точно она што
     треба, но во компактен режим го турка редот надолу и лентата не седи на
     работ (мерено: `.sv-mini` на 21px наместо 0). Отстапот сега го носи
     самата лента. */
  padding: 0 !important;
}
.sv-searchform.sv-stuck.sv-open { padding: 0 0 12px !important; }

/* во компактен режим полињата се кријат — но ОСТАНУВААТ во DOM-от, значи
   React состојбата (земја, датуми, соби) е недопрена.
   12.09.2026 (Андреј 06.09: „bug pri drawer search otvoranje i ne od gore
   nadole"): при отворање НЕ им се допира `display`. Дотогаш стоеше
   `.sv-open > * { display:block }` што го газеше нивниот grid — формата од
   3×3 полиња (321px) станува 9 едно под друго (704px), фиокaта прелива,
   станува скрол-контејнер, а менито на „Област" (MUI Popper на body) не се
   сече со неа: еден потег со прст и листата лебди среде екранот врз
   картичките, полето го нема. Мерено: anchorTop −58, popTop 2, orphan.
   Со `:not(.sv-open)` затворената состојба е иста, отворената е нивна. */
.sv-searchform.sv-stuck:not(.sv-open) > *:not(.sv-mini) { display: none; }
.sv-searchform.sv-stuck .sv-mini { display: flex; }
.sv-searchform.sv-stuck.sv-open {
  max-height: calc(100vh - var(--sv-header-h, 84px) - 16px);
  overflow-y: auto;
}
/* На телефон формата е една колона и пак прелива, па скролот останува.
   MUI Popper го обележува менито чиј anchor излегол од видното поле
   (`data-popper-reference-hidden`) — нивниот CSS не го користи. Скриено
   мени без поле е точното однесување; мени што лебди без поле е дефектот. */
.MuiPopper-root[data-popper-reference-hidden] {
  visibility: hidden;
  pointer-events: none;
}
/* Кога формата е отворена таа скрола внатре — лентата останува залепена на
   нејзиниот врв, значи патот назад е секогаш под палец. */
.sv-searchform.sv-stuck.sv-open .sv-mini {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #eceff3;
  border-radius: 0;
}

/* лентата: mobile-first — еден ред, тап-таргети 44px, нула хоризонтален скрол */
.sv-mini {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 56px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0 0 14px 14px;
}
.sv-mini-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: 500 14px/1.25 Montserrat, system-ui, sans-serif;
  color: #1f2430;
  text-align: left;
  overflow: hidden;
}
.sv-mini-text:hover { border-color: #ff7300; }
.sv-mini-text:focus-visible { outline: 2px solid #ff7300; outline-offset: 1px; }
.sv-mini-where {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;          /* местото се крати ПОСЛЕДНО, не прво */
  min-width: 0;
}
.sv-when-full { display: none; }
.sv-mini-when {
  color: #5b6472;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.sv-mini-caret { margin-left: auto; flex: 0 0 auto; color: #8a93a1; }
.sv-mini-go {
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #ff7300;
  color: #fff;
  font: 700 14px/1 Montserrat, system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sv-mini-go:hover { background: #e56800; }
.sv-mini-go:focus-visible { outline: 2px solid #1f2430; outline-offset: 2px; }
.sv-mini-golabel { display: none; }

@media (min-width: 641px) {
  .sv-mini { gap: 12px; padding: 10px 14px; }
  .sv-mini-text { font-size: 15px; }
  .sv-mini-when { font-size: 14px; }
  .sv-when-short { display: none; }
  .sv-when-full { display: inline; }
  .sv-mini-golabel { display: inline; }
}

/* ── Телефон: хедерот НЕ се лепи, лентата се лепи на самиот врв ────────────
   Мерено на 390×844: хедерот е 219px (лого, мени и иконки во три реда).
   Залепен, тој со лентата зема 275px од 844 = 33% од екранот пред да се
   види прва понуда. Затоа на телефон горе останува само пребарувачот —
   она што Андреј го побара — а логото се враќа со скрол нагоре. */
@media (max-width: 640px) {
  .sv-header { position: static !important; }
  .sv-searchform.sv-stuck { top: 0; }
  .sv-searchform.sv-stuck.sv-open { max-height: calc(100vh - 16px); }
}