/* ── Пребарувачот останува ГОРЕ цело време (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); }
}

/* ── „Повеќе ▾" во самата форма (13.09.2026, само LAB) ──────────────────────
   Андреј 13.09: „valuta e nepotrebno da zima tolku prostor vo prebaruvac isto
   kako i odjavuvanje, dosta e so broj na nokji" + „ime na hotel da e opcija vo
   prebaruvanje kako booking" + „kategorija i ime na hotel se vo dopolnitelni
   filtri kako poveke isto da se otvara toa".

   Главниот ред: Земја · Место · Датум на пријавување · Број ноќи, па
   гости · Повеќе ▾ · Пребарување. Хотел, Категорија и „Цена до" се НИВНИ
   React полиња — тука само им се менува редот (`order`) и приказот; React
   состојбата и валидацијата се недопрени. Ознаките ги пишува searchbar.js
   како data-атрибути, не класи: React му пишува `className` на Box-от кога
   emotion-класата се менува (кутијата „гости" при отворање на менито), а
   атрибут што не е негов prop го остава на мира.

   Овој фајл е LAB-надминување на searchbar.css (install.sh го зема `lab/`
   за лабовскиот корен) — живиот корен останува со коренскиот фајл. */
.sv-searchform [data-sv-cell="more"] { order: 20; }
.sv-searchform:not(.sv-more-open) [data-sv-cell="more"] { display: none !important; }
/* „Цена до" (EM10-сирак во бандлот) — вон формата на збор на Андреј 03:19 */
.sv-searchform [data-sv-cell="gone"] { display: none !important; }

/* MUI md = 900px: четири главни полиња во еден ред, копчето „Пребарување"
   ги зема двете десни ќелии за да нема дупка меѓу „Повеќе" и него. */
@media (min-width: 900px) {
  .sv-searchform [data-sv-grid="fields"],
  .sv-searchform [data-sv-grid="actions"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .sv-searchform [data-sv-cell="search"] { grid-column: 3 / 5 !important; }
}

/* 17.09.2026 — Пријавување · Ноќи · Одјавување во ист ред (EM8 повлечена, „Одјавување“ пак е во
   формата). Десктоп: пет полиња во еден ред, ноќите тесни. Телефон: пријавувањето цело, а ноќите и
   одјавувањето едно до друго, така трите поврзани полиња се читаат заедно. Само кога „Одјавување“
   постои (:has), за стариот билд без него редот да остане ист. */
@media (min-width: 900px) {
  .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .62fr) minmax(0, 1fr) !important;
  }
}
/* 17.09.2026 (Андреј, слика „za popravka"): редот со копчињата ги има ИСТИТЕ пет колони како
   полињата, за да се поклопуваат рабовите — „1 соба · 2 гости" под Земја, „Повеќе" под Место,
   „Пребарување" од Пријавување до крај. Со 4 еднакви колони „Пребарување" почнуваше 42px
   десно од „Оброци"/„Пријавување" над него. */
@media (min-width: 900px) {
  .sv-searchform:has([data-sv-grid="fields"] > [data-sv-date="out"]) [data-sv-grid="actions"] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .62fr) minmax(0, 1fr) !important;
  }
  .sv-searchform:has([data-sv-grid="fields"] > [data-sv-date="out"]) [data-sv-cell="search"] { grid-column: 3 / -1 !important; }
}
@media (max-width: 899.98px) {
  .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) {
    grid-template-columns: 100px minmax(0, 1fr) !important;
  }
  .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > * { grid-column: 1 / -1 !important; }
  .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > [data-sv-date="nights"] { grid-column: 1 !important; }
  .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > [data-sv-date="out"] { grid-column: 2 !important; }
}
/* 17.09.2026 (D1, втор круг): петте колони се бираат по ширината на САМАТА форма, не на прозорецот.
   Мерено со истиот фајл што се служи: на 1024 со панелот со филтри (body добива padding-left) решетката
   е 630px — „Број ноќи" 31px (7-ката не се гледа), датумите „20.(", а „Оброци" (сега во истиот ред)
   115px со „С…". Без панел истото на 900–1099 (решетка 802–926px, „Сите оброци" 68/93px од 108).
   Под 1000px решетка: шест колони — Земја · Место (по 3) · Пријавување · Ноќи · Одјавување (по 2,
   пак заедно во еден ред) · Хотел · Категорија (по 3) · Оброци · Цена (по 3, filterrail.js);
   копчињата три еднакви, рабовите им се поклопуваат со датумите. Нема празна ќелија во ниеден ред.
   Paper-от е flex-дете со stretch (ширината е однадвор) и веќе има backdrop-filter + overflow:hidden,
   па inline-size containment не менува ништо друго. Само формата за сместување (решетката ја означува
   wireMore кога има „Хотел") — `.sv-searchform` паѓа и на /packages и /transfers, таму не се допира.
   Прелистувач без @container/:has го задржува распоредот погоре. Под 900px (телефон, 768) — непроменето. */
.sv-searchform:has(> [data-sv-grid="fields"] > [data-sv-date="out"]) { container: sv-form / inline-size; }
@media (min-width: 900px) {
  @container sv-form (max-width: 999.98px) {
    .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > * { grid-column: span 3 !important; }
    .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > [data-sv-date] { grid-column: span 2 !important; }
    .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > .svf-presets > .svf-preset-meals,
    .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > .svf-presets > .svf-preset-price { grid-column: span 3 !important; }
    .sv-searchform:has([data-sv-grid="fields"] > [data-sv-date="out"]) [data-sv-grid="actions"] {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .sv-searchform:has([data-sv-grid="fields"] > [data-sv-date="out"]) [data-sv-cell="search"] { grid-column: auto !important; }
  }
}
/* под 360px датумот „дд.мм.гггг“ со две икони не собира до ноќите — секое поле во свој ред */
@media (max-width: 359.98px) {
  .sv-searchform [data-sv-grid="fields"]:has(> [data-sv-date="out"]) > [data-sv-date] { grid-column: 1 / -1 !important; }
}

/* копчето: иста кутија како „1 соба · 2 гости" (мерено: 55px, 12px радиус,
   1px rgba(0,0,0,.12), Montserrat 14px) — тап-таргет ≥44px на телефон */
.sv-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 55px;
  box-sizing: border-box;
  padding: 0 16px;
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
  border-radius: 12px;
  color: var(--brand-text, #1a1a2e);
  font: 500 14px/1.3 Montserrat, system-ui, -apple-system, sans-serif;
  cursor: pointer;
  transition: border-color .2s;
}
.sv-more-btn:hover { border-color: var(--brand-border-hover, rgba(0, 0, 0, .25)); }
.sv-more-btn:focus-visible { outline: 2px solid var(--brand-accent, #ff7300); outline-offset: 1px; }
.sv-more-caret { flex: 0 0 auto; color: var(--brand-icon, rgba(0, 0, 0, .35)); transition: transform .2s; }
.sv-searchform.sv-more-open .sv-more-btn { border-color: var(--brand-accent, #ff7300); }
.sv-searchform.sv-more-open .sv-more-caret { transform: rotate(180deg); }
/* колку од собраните полиња носат вредност — се гледа и кога е затворено */
.sv-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--brand-accent, #ff7300);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.sv-more-count[hidden] { display: none; }

/* Наше поле „Категорија" — само кога React не го црта нивното (EM4, `!1&&`).
   Мерено 13.09 врз „Број ноќи": кутија 56px, радиус 12px, раб 1px
   rgba(0,0,0,.12), Montserrat 16px; етикета 800 12px #ff7300 на (14px,−9px)
   со засек во работ; иконата на нивната Категорија е ѕвезда #f5b400. */
.sv-more-kat { position: relative; }
.sv-more-kat-label {
  position: absolute;
  top: -9px;
  left: 10px;
  z-index: 1;
  padding: 0 4px;
  background: var(--brand-surface, #fff);
  font: 800 12px/1.4 Montserrat, system-ui, -apple-system, sans-serif;
  letter-spacing: .04em;
  color: var(--brand-accent, #ff7300);
  pointer-events: none;
}
.sv-more-kat-select {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 0 40px 0 44px;
  margin: 0;
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
  border-radius: 12px;
  background: var(--brand-surface, #fff);
  color: var(--brand-text, #1a1a2e);
  font: 16px/23px Montserrat, system-ui, -apple-system, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s;
}
.sv-more-kat-select:hover { border-color: var(--brand-border-hover, rgba(0, 0, 0, .25)); }
.sv-more-kat-select:focus { outline: none; border-color: var(--brand-accent, #ff7300); box-shadow: 0 0 0 1px var(--brand-accent, #ff7300); }
.sv-more-kat-ico, .sv-more-kat-caret {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.sv-more-kat-ico { left: 14px; color: #f5b400; }
/* 17.09.2026: стрелката е иста како кај MUI полињата во истиот ред (Хотел, и
   „Оброци" од filterrail) — мерено на „Земја": 20px, 14px од десно, rgba(0,0,0,.35). */
.sv-more-kat-caret { right: 14px; width: 20px; height: 20px; color: var(--brand-icon, rgba(0, 0, 0, .35)); }

/* Hotel form labels describe fields; reserve the brand accent for primary actions. */
.sv-searchform .MuiInputLabel-root,
.sv-searchform .MuiFormLabel-root,
.sv-searchform .sv-more-kat-label { color: #475569 !important; }
.sv-searchform select option { color: #1f2937; background: #fff; }

/* Native search state covers geography lookup, streaming, empty and error results. */
[data-sv-hotel-search-state]:not([data-sv-hotel-search-state="idle"]) .sv-lp,
[data-sv-hotel-search-state]:not([data-sv-hotel-search-state="idle"]) .sv-promo-cards,
[data-sv-hotel-search-state]:not([data-sv-hotel-search-state="idle"]) .sv-w-sec { display:none !important; }
.sv-hotel-loading { margin:24px 0; padding:20px; border:1px solid #e4e7ec; border-radius:14px; background:#fff; color:#14213b; }
.sv-hotel-loading .sv-hotel-loading-title { font:700 18px/1.5 Montserrat,system-ui,sans-serif; margin:0 0 6px; }
.sv-hotel-loading .sv-hotel-loading-copy { font:400 13px/1.6 Montserrat,system-ui,sans-serif; margin:0 0 18px; color:#526174; }
.sv-hotel-loading-row { display:grid; grid-template-columns:130px 1fr 100px; gap:18px; align-items:center; padding:14px 0; border-top:1px solid #eef0f3; }
.sv-hotel-loading-row span { display:block; min-width:0; height:14px; border-radius:8px; background:#edf0f4; animation:sv-search-pulse 1.5s ease-in-out infinite; }
.sv-hotel-loading-row span:first-child { height:86px; }
.sv-hotel-loading-row span:last-child { height:38px; }
@keyframes sv-search-pulse { 50% { opacity:.45; } }
@media(max-width:640px) { .sv-hotel-loading { padding:14px; margin:16px 0; } .sv-hotel-loading-row { grid-template-columns:76px 1fr; gap:12px; } .sv-hotel-loading-row span:first-child { height:64px; } .sv-hotel-loading-row span:last-child { display:none; } }
@media(prefers-reduced-motion:reduce) { .sv-hotel-loading-row span { animation:none; } }

/* Two-column forms keep the primary action on a complete row. */
@media(max-width:899.98px){.sv-searchform [data-sv-cell="search"]{grid-column:1/-1!important}}