/* css/okolie.css */

/* ==========================================================================
   🗺️ MAPA tlačidlo (ľavý dolný roh) - vlastná pozícia/vzhľad v
   css/layout.css (#okolie-trigger). Tu iba :disabled stav počas prechodu
   do/z OKOLIE (js/okolie.js) - zabraňuje pretrhnutiu/zaseknutiu animácie
   pri rýchlom opakovanom kliknutí, aj súbežnému otvoreniu VIRTUÁLNYCH
   PREHLIADOK (#vr-tours-trigger, js/vr-tours.js, vlastné :disabled tam).
   ========================================================================== */
#okolie-trigger:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ==========================================================================
   🗺️ OKOLIE - ALTERNATÍVNY CELOOBRAZOVKOVÝ POHĽAD NA MAPU S BODMI ZÁUJMU.
   Z-Index (6) je ZÁMERNE nižší ako #app-logo (15, css/layout.css) - logo
   tak zostáva viditeľné "na rovnakom mieste/štýle ako vždy" bez potreby
   duplikovania, jednoducho sa vykreslí nad týmto overlayom. Vyšší ako
   #main-configurator-view (css/layout.css, bez vlastného z-indexu) - počas
   prechodu aj v pokoji tak OKOLIE prekrýva hlavný konfigurátor.
   Transform/opacity/filter (namiesto predošlého display:none) umožňujú
   plynulý prechod do/z tohto pohľadu (js/okolie.js pridáva/odoberá
   .okolie-hidden) - PRESNE opačný priebeh ako #main-configurator-view. */
#okolie-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    transform-origin: center center;
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

#okolie-overlay.okolie-hidden {
    transform: scale(0.85);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
}

.okolie-background-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   🧭 LIGHTBOX NAV BAR - vodorovný riadok tlačidiel NAD lightboxom, zdieľaný
   koncept pre VŠETKY 3 lightboxy appky (POI kategórie - #poi-nav-bar nižšie;
   VR/GALÉRIA ID bytov - #vr-tours-nav-bar, css/vr-tours.css). Nahrádza
   bývalý samostatný ľavý panel "ČO JE NABLÍZKU?" (.okolie-panel/.okolie-poi-
   list/.okolie-poi-row, zrušené).

   Celý riadok je JEDEN spoločný "dark glass" kontajner (rovnaký princíp ako
   Secondary farebná skupina) - samostatné transparentné buttons priamo nad
   fotografickým podkladom mapy strácali kontrast (mení sa podľa toho, čo je
   práve pod textom), tento kontajner drží kontrast VŽDY stabilný nezávisle
   od podkladu. Je flex dieťaťom #poi-window-overlay/#vr-tours-overlay
   (position:absolute stĺpec, css/okolie.css/vr-tours.css nižšie) - vlastnú
   výšku/medzeru pod ním (do karty) si tie kontajnery REZERVUJÚ vo výške
   karty (calc() vo výškových vzorcoch kariet, zmerané cez skutočnú
   vykreslenú výšku tohto pásu), aby sa riadok+karta spolu vždy zmestili do
   rovnakého priestoru ako predtým samotná karta. */
.lightbox-nav-bar {
    /* position:relative je KRITICKÉ, nie kozmetické - bez neho je tento
       riadok "nepozicovaný" súrodenec prvkov s position:absolute
       (.poi-window-backdrop / .vr-tours-background-img, obe VŽDY vypĺňajú
       celý overlay cez inset:0) - podľa CSS pravidiel vykresľovania sa
       VŽDY pozicované prvky maľujú NAD nepozicovanými súrodencami, BEZ
       OHĽADU na poradie v DOM (aj keď tento riadok je v DOM AŽ ZA nimi).
       Dôsledok BEZ tohto pravidla: pri POI (priehľadný backdrop) sú
       tlačidlá VIDITEĽNÉ, ale klik prepadne cez ne na backdrop pod nimi a
       zatvorí celý lightbox namiesto zmeny kategórie (bug - lightbox
       "mizne" pri kliku na inú kategóriu). Pri VR/GALÉRII (nepriehľadná
       fotka pozadia) sú tlačidlá NAVYŠE aj vizuálne prekryté fotkou -
       vyzerá to, akoby sa vôbec nevykreslili (bug - "chýbajú buttons mimo
       MAPA módu"). position:relative zaradí tento riadok do TEJ ISTEJ
       "pozicovanej" vrstvy ako backdrop/pozadie aj karta (tá už má
       position:relative/z-index, preto tento problém nikdy nemala) - v
       rámci nej už DOM poradie rozhoduje správne (riadok je za
       backdropom/pozadím, teda nad ním). */
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-self: center;
    /* Skupinový kontajner (zadanie "Finálny farebný štýl", bod 3) - rovnaký
       vizuálny jazyk ako lišta svetových strán/VR+GALÉRIE/tab-selector. */
    background: var(--group-container-bg);
    border: 1px solid var(--group-container-border);
    /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na zaoblených
       rohoch na ďalšie miesta appky" - identická štruktúra/artefakt ako
       ostatné border+border-radius kombinácie (commit 6743e54). */
    border-radius: 12px;
    padding: calc(3px * var(--ui-scale-kompenzacia, 1));
    gap: 6px;
}

.lightbox-nav-btn {
    flex: 0 0 auto;
    /* Kontajner (.lightbox-nav-bar) je content-hug (inline-flex bez pevnej
       šírky) - na rozdiel od lišty svetových strán/VR+GALÉRIE (tie majú
       pevnú šírku riadku, takže vnútorné buttons môžu byť flex:1 rovnako
       veľké) tu POČET aj DĹŽKA textu tlačidiel kolíšu (4 POI kategórie s
       veľmi rozdielnou dĺžkou textu / N bytov s krátkym ID) - min-width
       namiesto pevnej width preto dáva tlačidlám VIZUÁLNE jednotný
       "chip" vzhľad bez rizika orezania dlhšieho názvu kategórie. */
    min-width: calc(96px * var(--ui-scale-kompenzacia, 1));
    padding: calc(9px * var(--ui-scale-kompenzacia, 1)) calc(16px * var(--ui-scale-kompenzacia, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-secondary-bg-nested);
    border: 1px solid var(--btn-secondary-border);
    /* 6px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
       zaoblených rohoch na ďalšie miesta appky" - viď .lightbox-nav-bar
       vyššie. */
    border-radius: 12px;
    color: var(--btn-secondary-text);
    font-family: inherit;
    /* Raw px (nie rem) - jediná výnimka z takmer univerzálne rem-based
       font-size v appke (audit pri tejto sekcii zadania), preto potrebuje
       VLASTNÝ calc() namiesto automatického dedenia z koreňového
       font-size (css/base.css). */
    font-size: calc(13px * var(--ui-scale-kompenzacia, 1));
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.lightbox-nav-btn:hover,
.lightbox-nav-btn:focus-visible {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

/* Aktívna položka (kategória POI PRÁVE otvorená / byt PRÁVE zobrazený) -
   trieda sa pridáva/odoberá v js/okolie.js (otvorPoiOkno/zatvorPoiOkno) a
   js/vr-tours.js (vykresliVrToursObrazok). Rovnaký teplý zlatý akcent ako
   ostatné "zvolené" stavy appky (zadanie, bod 3). */
.lightbox-nav-btn.active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

/* ==========================================================================
   🗔 OKNO KONKRÉTNEHO BODU ZÁUJMU - vrstva NAD OKOLIE obrazovkou (tá ostáva
   plne viditeľná/nestlmená v pozadí). Od zrušenia ľavého panela kategórií
   (.okolie-panel) je táto vrstva VŽDY vycentrovaná na celú šírku obrazovky
   (inset:0), rovnaký princíp ako #vr-tours-overlay (css/vr-tours.css) -
   žiadny left posun navyše. flex-direction:column + gap: #poi-nav-bar
   (tlačidlá kategórií, .lightbox-nav-bar vyššie) a .poi-window-card sú
   TERAZ 2 flex položky v stĺpci namiesto jedinej centrovanej karty - výška
   karty nižšie si preto rezervuje presne tento gap + výšku riadka vo
   svojom výškovom vzorci (calc()), aby sa dvojica spolu zmestila do
   rovnakého priestoru ako predtým samotná karta (žiadna zmena celkového
   footprintu, žiadne nové riziko pretečenia cez 16:9 rámec appky).
   .poi-window-backdrop nižšie je position:absolute - flexbox layout ho
   ignoruje, stále prekrýva CELÚ plochu vrstvy (klik mimo zatvára).
   ========================================================================== */
#poi-window-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Bez vizuálneho stlmovania OKOLIE obrazovky v pozadí (zadanie) - backdrop
   ostáva iba ako neviditeľný klikací cieľ pre "klik mimo rámika zatvára",
   žiadne pozadie/farba. Aktivitu (pointer-events) prepína JS (js/okolie.js,
   otvorPoiOkno/zatvorPoiOkno) - keď je karta zatvorená, niet čo chrániť. */
.poi-window-backdrop {
    position: absolute;
    inset: 0;
}

/* Biely rámik s 2 vnútornými panelmi vedľa seba (.poi-window-content
   nižšie: text 34% / fotka 66%) - IDENTICKÁ štruktúra/rozmiestnenie ako
   .vr-tours-card (css/vr-tours.css, "Zjednotenie navigačnej mechaniky POI
   s Galériou"): šípky/počítadlo KAŽDEJ úrovne (výber POI aj výber média)
   sú TERAZ vnútri svojho panelu (pri jeho okrajoch), NIE mimo celej karty
   ako predtým. Väčšie medzery navôkol než klasický fullscreen lightbox
   (informačný charakter, nie immersive prehliadač) - nikdy nie celá
   obrazovka.

   ŠÍRKA: na širších kontajneroch (kde predošlý pevný strop ~1200px nechával
   viditeľnú medzeru zo strán) je teraz width: calc(50% + 600px) - percento
   sa počíta voči #poi-window-overlay (rodičovský flex box, css/okolie.css
   vyššie), 600px = polovica pôvodného 1200px stropu. Matematicky to PRESNE
   prepolí bočnú medzeru pri AKEJKOĽVEK šírke kontajnera (dôkaz: ak
   boxWidth=W, staré okno malo šírku 1200px a medzeru (W-1200)/2 z každej
   strany; nové okno boxWidth-newWidth = W - (W/2+600) = (W-1200)/2 presne
   polovica). Na užších kontajneroch/mobile (kde okno bolo AJ PREDTÝM z boxu
   vytlačené flex-shrinkom na celú šírku bez medzery) ostáva rovnaké
   správanie - okno vyplní box celý, žiadna regresia.

   Biely rámik (border/border-radius) je PRESNE ten istý ako vonkajší
   iframe appky (.configurator-frame-wrapper, host-demo.html) - zámerne
   rovnaké hodnoty, žiadny nový štýl. */
.poi-window-card {
    position: relative;
    display: flex;
    align-items: stretch;
    width: calc(50% + 600px);
    max-width: 1600px;
    /* +17.5% oproti pôvodnej výške (600px→705px, 82cqh→96.35cqh) - rovnaká
       zmena ako .vr-tours-card (css/vr-tours.css), aby oba typy lightboxu
       (POI aj VIRTUÁLNE PREHLIADKY/GALÉRIA) mali konzistentnú výšku aj
       keď POI nemá pôdorys problém, ktorý túto zmenu pôvodne motivoval.
       Šírka vyššie ZOSTÁVA nezmenená.
       -59px: #poi-window-overlay je teraz stĺpec [#poi-nav-bar, karta]
       (vyššie) - karta si rezervuje odmeranú výšku riadka (47px na
       desktope) + medzeru (12px) medzi nimi, aby dvojica spolu zaberala
       TEN ISTÝ celkový priestor ako predtým samotná karta (žiadne nové
       riziko pretečenia). Rovnaká hodnota kryje aj tenšie tablet pásmo
       (451-900px výšky appky, css/responsive.css). */
    height: min(646px, calc(96.35cqh - 59px));
    background: rgb(var(--surface-card-rgb) / 0.94);
    border: 2px solid var(--text-strong);
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    /* Karta je swipe-ovateľná (js/okolie.js) - bez tohto sa pri ťahaní myšou
       cez text/fotku dá omylom označiť obsah (viditeľné sivé zvýraznenie). */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Rovnaké rozmery/štýl ako .okolie-close (css/okolie.css vyššie) - iba iné
   umiestnenie (voči karte, nie voči celej obrazovke). */
.poi-window-close {
    position: absolute;
    /* Vycentrované v NOVOM (zväčšenom, 46px) hornom gape - (46-36)/2 = 5px -
       sedí čisto v gape, bez zásahu do vrchného okraja panelov pod ním. */
    top: 5px;
    right: 16px;
    z-index: 1;
    width: calc(36px * var(--ui-scale-kompenzacia, 1));
    height: calc(36px * var(--ui-scale-kompenzacia, 1));
    border-radius: 50%;
    border: 1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.poi-window-close:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.poi-window-close:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

/* Vnútorný wrapper medzi text a foto panelom - drží ich ako 2 SAMOSTATNÉ
   karty (vlastný rámik + gap medzi nimi), oddelené paddingom od vonkajšieho
   rámika (.poi-window-card). Rovnaké hodnoty ako .vr-tours-content (css/
   vr-tours.css) - zjednotená navigačná mechanika/rozmiestnenie oboch
   lightboxov (sekcia zadania). */
.poi-window-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 46px 16px 46px 16px;
}

/* Textový panel - hostiteľ šípok VÝBERU POI (#poi-window-prev/next,
   .vr-tours-byt-nav zdieľaná trieda, index.html) AJ jeho počítadla
   (.vr-tours-counter) - position:relative, aby sa dali umiestniť absolútne
   pri jeho okrajoch, presne rovnaký princíp/triedy ako výber BYTU vo
   VR/Galérii (css/vr-tours.css, "Zjednotenie navigačnej mechaniky POI s
   Galériou"). Samotný obsah (názov/popis/vzdialenosti) nesie
   .poi-window-text-inner nižšie. */
.poi-window-text {
    /* 34% zo šírky .poi-window-content (rodičovský flex kontajner) - rovnaký
       pomer/výpočet ako .vr-tours-text (css/vr-tours.css, "Zjednotenie s
       VR/Galéria: rovnaký pomer foto 66%/text panel 34%"). -8px kompenzuje
       polovicu 16px gapu medzi zónami (.poi-window-content gap), aby súčet
       (34%-8px)+(66%-8px)+16px gap = presne 100%. */
    flex: 0 0 calc(34% - 8px);
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    padding: 28px 0;
    border: 1px solid rgb(var(--hairline-rgb) / 0.35);
    border-radius: 10px;
}

/* Horizontálny padding (72px) necháva miesto pre šípky .vr-tours-byt-prev/
   next prekryté navrchu (24px okraj + 36px šírka šípky + malá medzera) -
   rovnaká hodnota ako .vr-tours-text-inner (css/vr-tours.css). */
/* Sekcia zadania "Univerzálne odstránenie pôdorysu z text panelov
   lightboxov, centrovanie textu na všetkých zariadeniach" - PRESNÁ OBDOBA
   .vr-tours-text-info (css/vr-tours.css) - POI nemá samostatný "-info"
   vnorený obal ako VR (žiadny pôdorys/2-stĺpcový layout nikdy neexistoval
   pre POI, iba jednoduchý zoznam názov+popis+vzdialenosť), takže cieľový
   element je PRIAMO .poi-window-text-inner. align-items:center centruje
   KAŽDÝ riadok (.poi-window-name/-desc/-distance) horizontálne v rámci
   plnej šírky panelu, text-align:center dorieši prípad, že by sa niektorý
   riadok predsa len zalomil na 2 (dlhší názov POI). justify-content:center
   rieši vertikálne centrovanie. Predchádzajúca úloha ("Centrovať text panel
   v POI lightboxe") toto viazala iba na dotykové zariadenia (rovnaký gate
   ako VR malo vtedy) - táto úloha oboje zovšeobecňuje na univerzálne, PC
   aj touch table rovnako. */
.poi-window-text-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 0 72px;
}

.poi-window-name {
    font-size: 1.5rem;
    font-weight: 700;
    /* Sekcia zadania "Zmena farby titulu (ID_bytu/názov POI) na zlatožltú" -
       rovnaká premenná/farba (#E3C58C) ako aktívny stav buttonov (napr.
       aktívny tab ZÁKLADNÝ/ROZŠÍRENÝ MÓD, aktívna svetová strana), nie
       natvrdo zapísaný hex - jeden zdroj pravdy (css/base.css). Presná
       zhoda s .vr-tours-byt-id (css/vr-tours.css). */
    color: var(--btn-secondary-text-active);
    letter-spacing: 0.2px;
}

.poi-window-desc {
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.4;
}

.poi-window-distance {
    font-size: 1rem;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Fotka - 66% zo šírky .poi-window-content, výška 100% (rovnaký princíp ako
   .vr-tours-photo, css/vr-tours.css) - už NIE 1:1 aspect-ratio odvodený od
   výšky karty (pôvodné správanie), "Zjednotenie s VR/Galéria" zo zadania.
   Padding + box-sizing:border-box dáva fotke malý vnútorný okraj zo
   všetkých strán (tmavé pozadie karty presvitá cez tento okraj). */
.poi-window-photo {
    position: relative;
    flex: 0 0 calc(66% - 8px);
    height: 100%;
    box-sizing: border-box;
    padding: 16px;
    /* Sekcia zadania "Zmena pozadia foto panelov (vizuálne zmiernenie)" -
       neutrálne tmavosivé (--media-frame-rgb, css/base.css), NIE
       --surface-card-rgb (takmer čierne) - viď zdôvodnenie pri tokene.
       Presná kópia .vr-tours-photo (css/vr-tours.css). */
    background: rgb(var(--media-frame-rgb));
    border: 1px solid rgb(var(--hairline-rgb) / 0.35);
    border-radius: 10px;
}

.poi-window-photo img {
    width: 100%;
    height: 100%;
    /* contain (NIE cover) - obrázok si zachováva prirodzený pomer strán,
       rovnaké správanie ako .vr-tours-photo img (css/vr-tours.css),
       sekcia zadania "Zjednotenie navigačnej mechaniky POI s Galériou". */
    object-fit: contain;
    display: block;
    border-radius: 8px;
    /* Rovnaké pozadie ako rodičovský rámik vyššie (sekcia zadania "Zmena
       pozadia foto panelov") - kryje medzeru pod object-fit:contain vlastnou
       farbou, nespolieha sa iba na presvitajúce pozadie rodiča. */
    background: rgb(var(--media-frame-rgb));
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Sekcia zadania "Diagnostika - obrázky sa nezobrazujú v pravom foto paneli
   POI lightboxu" - CHÝBAJÚCE pravidlo, KOREŇ BUGU. Bez neho fotka po
   úspešnom načítaní (src reálne nastavený, naturalWidth/Height platné)
   ostávala TRVALO na opacity:0 vyššie - nič ju nikdy nevrátilo na viditeľnú
   (predošlá JS logika, ktorá to riešila cez poiImg.style.opacity='1' na
   'load' evente, bola v sekcii zadania "Definitívne odstránenie čierneho/
   prázdneho preblikávania..." odstránená s NESPRÁVNYM predpokladom, že CSS
   fade-in (rovnaký princíp ako .vr-tours-photo img nižšie) už existuje aj
   tu - v skutočnosti nikdy nebol pridaný). Presná kópia .vr-tours-photo
   img[src]:not([src=""]) (css/vr-tours.css) - rovnaký mechanizmus pre oba
   lightboxy, teraz naozaj zjednotený. */
.poi-window-photo img[src]:not([src=""]) {
    opacity: 1;
}