/* css/vr-tours.css */

/* ==========================================================================
   🎥 VIRTUÁLNE PREHLIADKY - celoobrazovkový takeover (galéria vzorových
   bytov, Vzorovy_byt="Ano"). Rovnaký crossfade princíp ako #okolie-overlay
   (css/okolie.css) - #main-configurator-view.mcv-hidden (css/layout.css)
   sa stará o zoom/fade/blur hlavného pohľadu, tento overlay robí presne
   opačný priebeh. js/vr-tours.js.

   Karta (.vr-tours-card) zdieľa ROVNAKÚ 4-zónovú štruktúru/rozmery ako
   .poi-window-card (css/okolie.css) - šípka / textový panel 34% / fotka
   66% / šípka - JEDNA spoločná vizuálna forma pre všetky 3 lightboxy
   appky (POI/VR/GALÉRIA), obe vždy vycentrované na stred celej obrazovky
   (#vr-tours-overlay nižšie / #poi-window-overlay, css/okolie.css).
   ========================================================================== */
#vr-tours-overlay {
    position: absolute;
    inset: 0;
    /* Vyšší z-index než #okolie-overlay (6) - keď sa Virtuálne prehliadky
       spustia Z POI módu, mapa OSTÁVA viditeľná pod touto kartou (js/
       vr-tours.js), táto vrstva preto musí byť nad ňou. */
    z-index: 7;
    overflow: hidden;
    /* Centruje JEDINÉ dieťa - .vr-tours-foreground nižšie (vnútorný stĺpec
       nav-bar+karta je TERAZ na tomto wrapperi, nie tu priamo). */
    display: flex;
    align-items: center;
    justify-content: center;
    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);
}

/* Vlastný pozaďový obrázok (predtým natvrdo JUH) bol ODSTRÁNENÝ (sekcia
   zadania "VR/Galéria nesmú meniť pozaďový pohľad svetovej strany") - tento
   overlay teraz nemá VLASTNÉ pozadie vôbec, presvitá cez neho to, čo je
   skutočne pod ním (fasádna scéna alebo mapa OKOLIE, index.html). */

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

/* Popredie (tlačidlá ID bytov + karta) - SAMOSTATNÝ animovateľný wrapper
   v rámci #vr-tours-overlay (ten už nemá vlastné pozadie, vyššie). Pri
   PLNOM otvorení/zatvorení celého lightboxu (otvorVrTours/zatvorVrTours,
   js/vr-tours.js) sa animuje CELÝ #vr-tours-overlay - keďže nemá vlastné
   pozadie, ide fakticky o animáciu samotného lightboxu (karta+nav bar) nad
   nedotknutou scénou pod ním (fasáda alebo mapa OKOLIE). Pri PREPNUTÍ
   VR<->GALÉRIA v RÁMCI už otvoreného lightboxu (rovnaká scéna, mení sa iba
   obsah) sa animuje IBA tento wrapper (.vr-tours-foreground-hidden,
   prepniVrToursTypSCrossfade) - scéna pod ním ostáva úplne bez zmeny počas
   prepnutia (sekcia zadania "použi presne tento istý efekt, ale nemeň
   pozadie"). */
.vr-tours-foreground {
    /* width:100% je KRITICKÉ, nie kozmetické - .vr-tours-card nižšie má
       width: calc(50% + 600px), percento sa počíta voči NAJBLIŽŠIEMU
       rodičovi (teraz je to tento wrapper, predtým priamo #vr-tours-
       overlay). Bez explicitnej šírky by mal tento flex item iba
       "shrink-to-fit" (nedefinovanú) šírku - percento z NEDEFINOVANEJ
       šírky rodiča sa podľa CSS špecifikácie prakticky nedá vypočítať
       zmysluplne (výsledok je oveľa užší, než má byť - bug, opravené).
       Výška ostáva auto (hug-content) - vertikálne centrovanie riadi
       #vr-tours-overlay (align-items:center) úplne rovnako ako predtým. */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Zdieľaná vizuálna "receptúra" (scale/opacity/blur, 0.65s) - ROVNAKÁ
   trieda .vr-tours-foreground-hidden aplikovaná AJ na #poi-window-overlay
   (css/okolie.css, js/okolie.js zobrazPoiListu/skryPoiListu) A na
   .poi-window-card (js/okolie.js otvorPoiOkno/zatvorPoiOkno) - sekcia
   zadania "Zjednotenie delay/efektu pre všetky prechody medzi hornými
   lištami" + "...aj pri zatváraní POI lightboxu klikom mimo". Znovupoužitá
   IDENTICKÁ animácia pri prechode POI<->VR/Galéria (js/vr-tours.js,
   otvorVrTours/zatvorVrTours), pri VR<->Galéria prepnutí
   (prepniVrToursTypSCrossfade) A pri obyčajnom otvorení/zatvorení POI
   karty v RÁMCI POI módu (lišta sa pritom vôbec nemení/nehýbe) - žiadna
   duplicitná/nová animácia. Iba VIZUÁLNE vlastnosti sú tu zdieľané -
   rozmery/layout #poi-window-overlay/.poi-window-card si ponechávajú
   vlastné (css/okolie.css, vyššia špecificita ID/vlastných pravidiel ich
   aj tak neprepíše). */
.vr-tours-foreground,
#poi-window-overlay,
.poi-window-card {
    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);
}

.vr-tours-foreground.vr-tours-foreground-hidden,
#poi-window-overlay.vr-tours-foreground-hidden,
.poi-window-card.vr-tours-foreground-hidden {
    transform: scale(0.85);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
}

/* Biely rámik - rovnaké rozmery/jazyk ako .poi-window-card. */
.vr-tours-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    width: calc(50% + 600px);
    max-width: 1600px;
    /* Výška +17.5% (600px→705px, 82cqh→96.35cqh) oproti pôvodnej - dáva
       pôdorysu (úzky text panel, predošlé zadanie) aj hlavnej fotke viac
       vertikálneho priestoru, aby si zachovali prirodzený pomer strán
       namiesto stláčania/naťahovania na šírku. Šírka vyššie ZOSTÁVA
       nezmenená (sekcia zadania "Zvýšiť CELKOVÚ VÝŠKU... šírka OSTÁVA
       bezo zmeny"). Rovnaké +17.5% aplikované aj na .poi-window-card
       (css/okolie.css) a mobilný strop (css/responsive.css), aby oba typy
       lightboxu mali konzistentnú výšku.
       -59px: #vr-tours-overlay je teraz stĺpec [#vr-tours-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) - tam je riadok o niečo
       nižší (39px), preto tam ostane iba o pár px väčšia medzera nad
       kartou, nikdy nie pretečenie. */
    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);
    /* Karta je swipe-ovateľná (js/vr-tours.js) - rovnaký dôvod ako
       .poi-window-card (css/okolie.css). */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.vr-tours-close {
    position: absolute;
    /* Vycentrované v NOVOM (zväčšenom, 46px) hornom gape - (46-34)/2 = 6px -
       sedí čisto v gape, bez zásahu do vrchného okraja panelov pod ním. */
    top: 6px;
    right: 14px;
    z-index: 2;
    width: calc(34px * var(--ui-scale-kompenzacia, 1));
    height: calc(34px * var(--ui-scale-kompenzacia, 1));
    border-radius: 50%;
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

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

.vr-tours-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 X tlačidlom a spodným okrajom karty - rovnaký
   princíp ako .poi-window-content (css/okolie.css): text/fotka ako 2
   SAMOSTATNÉ karty (vlastný rámik + gap medzi nimi), oddelené paddingom od
   vonkajšieho rámika (.vr-tours-card). Šípky výberu bytu AJ jeho počítadlo
   už NIE SÚ jeho priami súrodenci (predtým mimo tohto wrapperu) - sú
   súčasťou .vr-tours-text (pri jeho okrajoch/dolu), nižšie. */
.vr-tours-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 16px;
    /* Horný aj spodný gap SÚ ROVNAKÉ (46px) - pôvodne mal horný iba 16px,
       čo pôsobilo nekonzistentne oproti spodnému (pôvodne vyhradenému pre
       počítadlo pod oboma kartami spolu, teraz už iba zachovaná proporcia). */
    padding: 46px 16px 46px 16px;
}

/* Počítadlo bytu je teraz dieťaťom .vr-tours-text (position:relative
   nižšie), NIE .vr-tours-card - centruje sa preto na ŠÍRKU TEXTOVÉHO
   PANELU (základné .gallery-lightbox-counter left:50%/translateX(-50%)
   z css/detail.css), rovnaký princíp ako .vr-tours-media-counter na
   fotke - dve NEZÁVISLÉ počítadlá, každé na svojom vlastnom paneli. Hore
   (rovnaká vertikálna pozícia ako .vr-tours-media-counter na fotke), NIE
   dole ako predtým. */
.vr-tours-counter {
    top: 24px;
    bottom: auto;
    z-index: 2;
}

/* Textový panel - teraz AJ hostiteľ šípok výberu bytu (#vr-tours-prev/next,
   .vr-tours-byt-nav nižšie) - position:relative, aby sa dali umiestniť
   absolútne pri jeho okrajoch, rovnako ako vnútorná navigácia médií na
   fotke. Horizontálny padding je NULOVÝ tu - ten teraz nesie
   .vr-tours-text-inner (musí byť väčší, aby text nekolidoval so šípkami
   prekrytými navrchu). */
.vr-tours-text {
    position: relative;
    /* Pomer zón: textový panel 34% / fotka 66% zo šírky .vr-tours-content
       (rodičovský flex kontajner). flex-shrink:0 - obe zóny majú presne
       tento pomer VŽDY, nezávisle od dĺžky textu/veľkosti fotky. -8px
       kompenzuje polovicu 16px gapu medzi zónami (.vr-tours-content gap),
       aby súčet (34%-8px)+(66%-8px)+16px gap = presne 100% bez pretečenia. */
    flex: 0 0 calc(34% - 8px);
    min-width: 0;
    display: flex;
    /* stretch (nie center) - JEDINÉ dieťa je .vr-tours-text-inner, preto
       bez vedľajších účinkov na iný prvok - stretch ho roztiahne na CELÚ
       výšku panelu, .vr-tours-text-info vnútri sa potom centruje cez
       vlastný justify-content (nižšie), nie cez centrovanie TOHTO obalu
       zvonka - matematicky rovnaký výsledok, ale umožňuje #vr-tours-counter
       (position:relative dieťa .vr-tours-text) zostať vo VLASTNOM prvom
       riadku nad textom bez zásahu do jeho centrovania. */
    align-items: stretch;
    padding: 28px 0;
    border: 1px solid rgb(var(--hairline-rgb) / 0.35);
    border-radius: 10px;
}

/* Obsahuje VÝHRADNE .vr-tours-text-info (text: názov+parametre) - žiadny
   pôdorys, nikde, na žiadnom zariadení (sekcia zadania "Univerzálne
   odstránenie pôdorysu z text panelov lightboxov" - predošlý dvojstĺpcový
   koncept s voliteľným .vr-tours-text-podorys bol úplne zrušený). Textový
   panel obsahuje VÝHRADNE názov+parametre, žiadny iný obsah (bývalý
   doplnkový obrázok z 2. fotky galérie bol odstránený skôr, sekcia zadania
   "Odstrániť zvyškový thumbnail z textového panelu"). Horizontálny padding
   (72px) necháva miesto pre šípky .vr-tours-byt-prev/next prekryté navrchu
   (24px okraj + 36px šírka šípky + malá medzera). */
.vr-tours-text-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 72px;
}

/* Sekcia zadania "Univerzálne odstránenie pôdorysu z text panelov
   lightboxov, centrovanie textu na všetkých zariadeniach" - pôdorys
   (media.podorys) sa v tomto paneli už NIKDY nevytvára v DOM (js/vr-
   tours.js) - .vr-tours-text-info je preto VŽDY jediné dieťa .vr-tours-
   text-inner, na VŠETKÝCH zariadeniach (predtým to platilo iba na
   dotykových, kým na PC bol voliteľný druhý stĺpec .vr-tours-text-podorys
   vedľa neho - táto trieda aj jej "S pôdorysom" špeciálny prípad boli
   odstránené, sú teraz mŕtvy kód). flex-grow:1 preto vždy roztiahne text
   na CELÚ šírku panelu, align-items:center + text-align:center centrujú
   KAŽDÝ riadok (názov, každý parameter) horizontálne v rámci tejto plnej
   šírky (druhé dorieši prípad, že by sa niektorý riadok predsa len
   zalomil na 2), justify-content:center vertikálne - univerzálne, žiadny
   touch-gate. min-width:max-content už nemá pôdorys, ktorému by "chránil"
   priestor pred - ponechané ako neškodná tvrdá spodná hranica šírky
   (text sa nikdy nezalomí kvôli nedostatku miesta). Tlačidlo "POZRIEŤ
   BYT" (.vr-tours-pozriet-btn vyššie) je od tohto NEZÁVISLÉ - je
   position:absolute mimo tohto flow. */
.vr-tours-text-info {
    flex: 1 1 auto;
    min-width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

.vr-tours-byt-id {
    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). */
    color: var(--btn-secondary-text-active);
    letter-spacing: 0.2px;
}

/* Parametre bytu (Podlažie/Počet izieb/Rozloha/voliteľné Balkón-Terasa-
   Záhrada) - rovnaké zdroje dát ako detail bytu (js/detail.js,
   existujeHodnota), každý na vlastnom riadku pod názvom bytu. Rovnaký
   vizuálny jazyk ako .poi-window-distance (css/okolie.css) - drobný,
   tlmenejší text. */
.vr-tours-byt-param {
    font-size: 0.9rem;
    color: var(--text-body);
}

/* "POZRIEŤ BYT" (sekcia zadania "Button 'POZRIEŤ BYT' vo VR/Galéria
   lightboxoch", vertikálne zladenie doplnené sekciou zadania "Odstrániť
   pôdorys z text panela... zladiť vertikálnu pozíciu 'POZRIEŤ BYT' so
   'SPUSTIŤ VR'") - Secondary štýl (navigačná akcia, nie hlavná CTA ako
   .vr-tours-spustit-btn vyššie, ktorý ostáva Primary).

   position:absolute + presne rovnaký left/bottom/transform vzorec ako
   .vr-tours-spustit-btn na fotke - VYNÁTA tlačidlo z normálneho flow
   .vr-tours-text-info (predtým "pod textom" vo flex-column), NEZÁVISLE od
   výšky obsahu nad ním (počet parametrov sa líši byt od bytu). Containing
   block je najbližší position:relative predok, .vr-tours-text (NIE
   .vr-tours-text-info/-inner, oba sú position:static) - .vr-tours-text a
   .vr-tours-photo sú SÚRODENCI v .vr-tours-content (align-items:stretch,
   ROVNAKÁ výška, ROVNAKÁ hrúbka 1px rámika) - identický "bottom: 28px"
   preto dáva na OBOCH paneloch PRESNE rovnakú absolútnu Y súradnicu na
   obrazovke, nech je akokoľvek dlhý text/parametre nad ním. Platí
   UNIVERZÁLNE na všetkých zariadeniach (zadanie, bod 3) - aj v Galérii
   (kde .vr-tours-spustit-btn vôbec nie je v DOM) zostáva táto ISTÁ
   súradnica, appka tak pôsobí konzistentne pri prepínaní VR<->Galéria. */
.vr-tours-pozriet-btn {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 1;
    padding: calc(8px * var(--ui-scale-kompenzacia, 1)) calc(16px * var(--ui-scale-kompenzacia, 1));
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
       zaoblených rohoch na ďalšie miesta appky" (nadväzuje na commit
       6743e54). */
    border-radius: 12px;
    color: var(--btn-secondary-text);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.vr-tours-pozriet-btn:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.vr-tours-pozriet-btn:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: rgb(var(--accent-strong-rgb));
}

/* Fotka - presne 1:1, rovnaký princíp ako .poi-window-photo (padding +
   box-sizing:border-box dáva malý vnútorný okraj zo všetkých strán). */
.vr-tours-photo {
    position: relative;
    /* Rovnaký 66/34 pomer ako .vr-tours-text vyššie (druhá zo zón) - už NIE
       1:1 aspect-ratio odvodený z výšky karty (pôvodné správanie), RÁMIK
       má teraz VŽDY presne 66% šírky .vr-tours-content, výška zostáva
       100% - toto ostáva bezo zmeny. Samotný OBRÁZOK vnútri (.vr-tours-
       photo img nižšie) používa object-fit:contain (NIE cover) - zachováva
       si prirodzený pomer strán, prípadná medzera okolo neho v rámci
       tohto rámika je OČAKÁVANÁ (sekcia zadania "Zachovať prirodzený
       aspect ratio hlavnej fotky"). */
    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. */
    background: rgb(var(--media-frame-rgb));
    border: 1px solid rgb(var(--hairline-rgb) / 0.35);
    border-radius: 10px;
}

.vr-tours-photo img {
    width: 100%;
    height: 100%;
    /* contain (NIE cover) - obrázok si zachováva prirodzený pomer strán,
       nikdy sa neorezáva ani nenaťahuje. Viditeľná medzera/pozadie okolo
       neho v rámci rámika (ak sa pomer fotky nezhoduje s rámikom) je
       OČAKÁVANÁ (sekcia zadania). Platí pre OBA typy (VR aj GALÉRIA) -
       zdieľaný element #vr-tours-image. */
    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;
}

.vr-tours-photo img[src]:not([src=""]) {
    opacity: 1;
}

/* Video (GALÉRIA typ, vždy posledné médium bytu) - PRIAMO v tom istom 1:1
   rámiku ako fotky (js/vr-tours.js ho vytvorí/odstráni dynamicky namiesto
   <img>, nikdy oba naraz). object-fit:contain (nie cover ako fotky) - video
   nemusí mať 1:1 pomer strán, contain ho celé zobrazí bez orezania. */
.vr-tours-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    /* Sekcia zadania "Zmena pozadia foto panelov" - pôvodne čisté #000000;
       zjednotené s .vr-tours-photo/.vr-tours-photo img vyššie (rovnaký
       rámik, iba iný typ média vnútri) - čierny obdĺžnik uprostred inak
       zošedeného rámika by pôsobil rušivo/nezámerne. */
    background: rgb(var(--media-frame-rgb));
}

/* CSS fallback pre skrytie fullscreen ikonky z natívnych video controls -
   controlsList="nofullscreen" (js/vr-tours.js, aktualizujMediumVZone) nie
   je štandardizované vo všetkých prehliadačoch rovnako spoľahlivo, toto
   selektor-based riešenie funguje priamo v Chrome/Edge (primárny cieľ
   appky). Platí pre OBE zóny (malá fotka aj fullscreen zoom - .vr-tours-
   zoom-video nižšie). PiP ikonku rieši samotný disablePictureInPicture
   atribút (žiadny CSS hack netreba). */
.vr-tours-video::-webkit-media-controls-fullscreen-button,
.vr-tours-zoom-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Vnútorná navigácia MÉDIÍ TOHO ISTÉHO bytu (GALÉRIA typ) - zdieľa základ
   s .gallery-lightbox-nav/-counter (fotogaléria bytu v detaile, css/
   detail.css), tu iba zmenšené a preklopené počítadlo na HORNÝ okraj
   (namiesto dolného - tam by kolidovalo s natívnym ovládaním videa).
   .vr-tours-byt-nav (šípky výberu BYTU, teraz v textovom paneli) zdieľa
   ROVNAKÚ veľkosť/okraj - jednotný vizuálny jazyk pre obe úrovne navigácie
   (24px okraj = viditeľný odstup od hrany fotky/panelu, predtým 12px). */
.vr-tours-media-nav,
.vr-tours-byt-nav {
    width: calc(36px * var(--ui-scale-kompenzacia, 1));
    height: calc(36px * var(--ui-scale-kompenzacia, 1));
    font-size: 1.1rem;
    z-index: 2;
}

.vr-tours-media-prev,
.vr-tours-byt-prev {
    left: 24px;
}

.vr-tours-media-next,
.vr-tours-byt-next {
    right: 24px;
}

/* Posunuté nižšie od horného okraja (predtým 12px) - viditeľný odstup. */
.vr-tours-media-counter {
    top: 24px;
    bottom: auto;
    z-index: 2;
}

/* Fullscreen zoom - malá ikonka lupy, pravý horný roh fotky (mimo
   počítadla, ktoré je hore v strede, aj mimo šípok médií, ktoré sú
   bočne v strede výšky). IBA GALÉRIA typ (js/vr-tours.js ju vo VR type
   skrýva). Klik otvára #vr-tours-zoom-overlay (fullscreen zobrazenie
   aktuálneho média). */
.vr-tours-zoom-trigger {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: calc(32px * var(--ui-scale-kompenzacia, 1));
    height: calc(32px * 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;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.vr-tours-zoom-trigger svg {
    width: calc(16px * var(--ui-scale-kompenzacia, 1));
    height: calc(16px * var(--ui-scale-kompenzacia, 1));
}

.vr-tours-zoom-trigger:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.vr-tours-zoom-trigger:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

/* Tlačidlo "Spustiť virtuálnu prehliadku" PRIAMO na fotke - prekryv v
   spodnej časti, horizontálne centrované (nie samostatný panel pod
   fotkou, na rozdiel od predošlej verzie). PRIMARY (zadanie, bod 1). */
.vr-tours-spustit-btn {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 1;
    padding: calc(10px * var(--ui-scale-kompenzacia, 1)) calc(20px * var(--ui-scale-kompenzacia, 1));
    background: var(--btn-primary-bg);
    border: none;
    border-radius: 8px;
    color: var(--btn-primary-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    transition: background 200ms ease, box-shadow 200ms ease;
}

.vr-tours-spustit-btn:hover {
    background: var(--btn-primary-bg-hover);
    color: var(--btn-primary-text);
    box-shadow: var(--btn-primary-shadow-hover);
}

.vr-tours-spustit-btn:active {
    background: var(--btn-primary-bg-active);
    color: var(--btn-primary-text);
}

/* Skrátený text ("Pozrieť VR") - defaultne (PC/touch-table) skrytý, plný
   text ostáva. Predtým existoval aj rovnomenný pár pravidiel v css/
   responsive.css (@container configurator (max-height:...)), ktorý je ale
   TRVALO MŔTVY KÓD (#app má odteraz vždy presne 1920×1080, container
   query tam nikdy nesplní podmienku - viď hlavička css/responsive.css) -
   skutočný prepínač je NIŽŠIE (sekcia zadania "Skrátený text buttonu
   'SPUSTIŤ VIRTUÁLNU PREHLIADKU' na mobile/tablete"), rovnaký (hover:none)
   and (pointer:coarse) gate ako všade inde v appke (jeDotykoveZariadenie,
   js/gate.js). */
.vr-tours-spustit-short {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .vr-tours-spustit-full {
        display: none;
    }
    .vr-tours-spustit-short {
        display: inline;
    }
}

/* ==========================================================================
   🔍 FULLSCREEN ZOOM aktuálnej fotky/videa (GALÉRIA typ) - SÚRODENEC
   #vr-tours-overlay (index.html), rovnaký crossfade princíp, vyšší
   z-index (8 > 7) - vizuálne PREKRÝVA .vr-tours-card, nie je jeho
   potomkom. X tlačidlo/šípky/počítadlo zdieľajú triedy s
   .gallery-lightbox-* (fotogaléria bytu v detaile, css/detail.css) -
   žiadny duplicitný štýl, iba pozícia šípok (.gallery-lightbox-prev/next
   sú tam už definované). Obsah (img/video) synchronizuje js/vr-tours.js
   (aktualizujMediumVZone) vždy s vrToursMediaIndex - rovnaké médium ako
   v malej fotke, iba zväčšené.
   ========================================================================== */
#vr-tours-zoom-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--surface-deep-rgb) / 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    filter: blur(0);
    /* ZÁMERNE BEZ transform:scale() na tomto prvku (na rozdiel od iných
       crossfade prekryvov v appke) - #vr-tours-zoom-overlay je zároveň
       plocha, na ktorú sa registruje "klik mimo fotky zatvára" listener.
       Keby sa počas otváracej/zatváracej animácie zmenšoval cez scale(),
       jeho vizuálna (a teda aj klikacia, hit-testing) plocha by sa dočasne
       zmenšila SMEROM DOVNÚTRA od hrán obrazovky - klik do rohu appky tesne
       po otvorení by tak dopadol MIMO zmenšeného overlaya (na prvok pod
       ním) a nezaregistroval by sa vôbec, kým dokumentový listener kliky
       počas otvoreného zoomu zámerne ignoruje (necháva to na tento
       listener). Preto tu animujeme iba opacity/filter (fade+blur), nikdy
       nie geometriu overlaya - jeho klikacia plocha tak ostáva VŽDY presne
       na celej appke, bez ohľadu na fázu animácie. */
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Zoom je swipe-ovateľný (js/vr-tours.js) - rovnaký dôvod ako
       .vr-tours-card/.poi-window-card - bez tohto sa pri ťahaní myšou dá
       omylom označiť text/tlačidlá/obrázok (viditeľné modré zvýraznenie). */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#vr-tours-zoom-overlay.vr-tours-zoom-hidden {
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
}

/* Kým je fullscreen zoom otvorený, VŠETKY rohové ovládacie prvky appky
   (MAPA, VR/GALÉRIE/FULLSCREEN, "I") musia byť úplne skryté - majú vyšší
   z-index než #vr-tours-zoom-overlay (10/15 > 8), takže by inak ostali
   viditeľné/klikateľné NAD ním. Jediný prvok, ktorý ostáva viditeľný, je
   logo - zámerne vynechané. Trieda sa pridáva/odoberá na #app v
   js/vr-tours.js (otvorVrToursZoom/zatvorVrToursZoom(Okamzite)). */
#app.vr-tours-zoom-active #okolie-trigger,
#app.vr-tours-zoom-active .vr-gallery-corner,
#app.vr-tours-zoom-active #app-info-trigger {
    display: none;
}

/* Vlastný (väčší) gap než zdedené .gallery-lightbox-image (78% - zdieľané
   s fotogalériou bytu v detaile, tú NEMENÍME) - #ID selektor má vyššiu
   špecifickosť, prepíše max-width/height iba tu. 74% dáva zreteľne
   viditeľný, jednoznačne klikateľný gap navokol (rovnaký princíp ako
   .vr-tours-card v rámci #vr-tours-overlay). */
#vr-tours-zoom-image {
    display: block;
    max-width: 74%;
    max-height: 74%;
}

#vr-tours-zoom-image[src=""] {
    display: none;
}

/* Video v zoome (GALÉRIA typ, ak je aktuálne médium video) - rovnaký
   princíp ako .vr-tours-video (vyššie), iba viazané na rozmery
   #vr-tours-zoom-image namiesto 1:1 fotorámika. */
.vr-tours-zoom-video {
    max-width: 74%;
    max-height: 74%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}