/* css/base.css */

/* Kompletný reset predvolených štýlov prehliadača */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Koreňový font-size - JEDINÝ centrálny bod "podlahy" veľkosti pre text na
   mobile/tablete (sekcia zadania "Minimálna 'podlaha' veľkosti pre text/UI
   prvky na mobile/tablete, nezávisle od celkového scale" + "Doplnenie").
   --ui-scale-kompenzacia (js/scale.js, K) je na PC/touch-table VŽDY presne
   1 -> calc(16px * 1) = 16px, teda TOTOŽNÉ s dnešným (neupraveným)
   predvoleným font-size, appka tam zostáva pixel-identická. Na mobile/
   tablete pri nízkom celkovom scale K > 1 -> koreňový font-size narastie,
   a s ním VŠETKY rem hodnoty naprieč appkou (takmer všetok font-size v css/
   je už rem-based) aj VŠETKY em hodnoty (padding/min-width/min-height
   komponentov nižšie prevedené na em presne z tohto dôvodu) - jedno
   miesto, žiadne duplicitné opravy po komponentoch. */
html {
    font-size: calc(16px * var(--ui-scale-kompenzacia, 1));
}

/* ==========================================================================
   🎨 FINÁLNY FAREBNÝ ŠTÝL - jeden zdroj pravdy pre PRIMARY/SECONDARY
   tlačidlá a skupinové kontajnery (lišta svetových strán, VR+GALÉRIE,
   tab-selector, POI kategórie, VR/Galéria ID-byt lišta) naprieč celou
   appkou. Konkrétne rozmery/layout (výška, border-radius, padding) si
   jednotlivé komponenty ponechávajú vlastné - tu sú zdieľané VÝHRADNE
   farby, aby appka mala jeden konzistentný farebný jazyk.
   ========================================================================== */
:root {
    /* PRIMARY (hlavná CTA akcia) - "VYBRAŤ BYT", "Spustiť virtuálnu
       prehliadku", "Kontaktovať predajcu"/"Odoslať" (.detail-action-primary)
       - všetky 3 už predtým zdieľali IDENTICKÚ plochú farbu (#F4B860/
       #FFC978/#D99A45), preto teraz spoločne dostávajú aj nový gradient. */
    --btn-primary-bg: linear-gradient(180deg, #E3C58C, #D3AD6C);
    --btn-primary-bg-hover: linear-gradient(180deg, #EDD5A0, #DFBC7E);
    --btn-primary-bg-active: linear-gradient(180deg, #BE9A5C, #A9884E);
    --btn-primary-text: #1A2530;
    --btn-primary-shadow-hover: 0 0 12px rgba(227, 197, 140, 0.4);

    /* SECONDARY - dve varianty pozadia podľa vnorenia (zadanie): "default"
       pre samostatné tlačidlá priamo na tmavej karte/paneli (X, šípky,
       lupa, Vyčistiť filtre), "nested" pre tlačidlá VNÚTRI skupinového
       kontajnera (bod 3) A pre MAPA/FULLSCREEN (bod 4, zámerná výnimka -
       tie sú síce samostatné, ale zdieľajú vzhľad s "nested" variantou). */
    --btn-secondary-bg: rgba(19, 28, 38, 0.75);
    --btn-secondary-bg-nested: rgba(255, 255, 255, 0.03);
    /* Sekcia zadania "Zvýšiť čitateľnosť textu a viditeľnosť borderu na
       tlačidlách spodného riadku" -> "Zvážiť globálnu zmenu tokenu" -
       zmenené GLOBÁLNE z rgba(255,255,255,0.1)/#B8C4CC (potvrdené, pozri
       project.config.js komentár pri colors.secondary - skutočný zdroj
       pravdy, tento fallback je s ním zámerne synchronizovaný). */
    --btn-secondary-border: rgba(255, 255, 255, 0.28);
    --btn-secondary-text: #ffffff;

    --btn-secondary-bg-hover: rgba(30, 41, 53, 0.85);
    --btn-secondary-border-hover: rgba(255, 255, 255, 0.16);
    --btn-secondary-text-hover: #D8E0E6;

    /* Active/zvolené - CSS :active (stlačenie) AJ trvalý .active (zvolená
       kategória/byt/mód/pohľad) zdieľajú rovnaké teplé zlaté hodnoty. */
    --btn-secondary-bg-active: rgba(30, 25, 17, 0.85);
    --btn-secondary-border-active: rgba(217, 181, 113, 0.6);
    --btn-secondary-text-active: #E3C58C;

    /* Zjednotená DISABLED farba naprieč CELOU appkou (nahrádza pôvodné
       rôzne #71808C/rgba(255,255,255,.06) hodnoty). */
    --btn-disabled-bg: rgba(255, 255, 255, 0.05);
    --btn-disabled-border: rgba(255, 255, 255, 0.05);
    --btn-disabled-text: #5a6570;

    /* Vonkajší kontajner skupinových prepínačov (bod 3). */
    --group-container-bg: rgba(19, 28, 38, 0.75);
    --group-container-border: rgba(255, 255, 255, 0.08);

    /* ==================================================================
       PLOŠNÉ/ZNAČKOVÉ TOKENY (sekcia zadania "Audit a refaktoring appky na
       univerzálny template", krok 3.4) - nahrádzajú ~200 natvrdo zapísaných
       hex/rgba hodnôt roztrúsených po css/. Skutočné hodnoty prichádzajú z
       PROJECT_CONFIG.colors.surface (zapisuje js/config-apply.js); hodnoty
       nižšie sú FALLBACK pre prípad, že by config chýbal.

       Rodiny s viacerými priehľadnosťami sú RGB TROJICE, skladajú sa cez
       rgb(var(--token) / alfa) - prebrandovanie = zmena JEDNEJ hodnoty,
       nie siedmich samostatných rgba() zápisov.
       ================================================================== */
    --accent-rgb: 212 175 143;          /* značkový zlatý odtieň */
    --accent-strong-rgb: 227 197 140;
    --accent-light: #E8C9A8;
    --accent-pale: #F0E4D8;
    --accent-cream: #F5F0E6;
    --accent-deep: #241D1A;

    --hairline-rgb: 255 255 255;        /* vlasové linky a jemné výplne */

    --surface-panel-rgb: 13 17 23;      /* ľavý/pravý panel */
    --surface-card-rgb: 17 21 27;       /* karty (detail, kontakt) */
    --surface-deep-rgb: 4 5 8;          /* najtmavší prekryv (galéria) */
    --surface-backdrop-rgb: 6 8 11;     /* backdrop zdieľania/kontaktu */
    --surface-void-rgb: 5 6 10;         /* pozadie brány/oznámení */
    --surface-pressed: rgba(12, 19, 25, 0.9);
    --app-background: #0d0f12;
    /* Sekcia zadania "Zmena pozadia foto panelov (vizuálne zmiernenie)" -
       ZÁMERNE svetlejšia/neutrálnejšia ako ostatné --surface-*-rgb tokeny
       vyššie (tie sú všetky takmer čierne). Foto/video rámik vo VR/Galéria/
       POI lightboxoch (.vr-tours-photo, .poi-window-photo, .vr-tours-video)
       ňou nahrádza čiernu/takmer-čiernu - ak sa prejaví Chromium rendering
       glitch (krátky výpadok frame-u pri swipe), toto pozadie presvitá ako
       súčasť dizajnu, nie ako "appka spadla". */
    --media-frame-rgb: 42 42 46;        /* neutrálne tmavosivé foto/video rámiky */

    --text-strong: #ffffff;
    --text-body: #cbd5e1;
    --text-muted: #8f94a0;
    /* Sekcia zadania "Zvýšiť čitateľnosť textu v Porovnaní" - zosvetlené z
       pôvodného #94a3b8 (5.65-6.67:1 kontrast voči efektívnemu pozadiu
       .porovnanie-frame-label, JUŽ spĺňalo WCAG AA 4.5:1, ale klient chcel
       výraznejšiu čitateľnosť) na hodnotu zhodnú s --text-body (9.76-11.51:1).
       Premenná je zdieľaná AJ mimo Porovnania (.card-chevron, css/
       apartments.css; .warning-text span, css/responsive.css) - zámerne
       zmenená globálne (potvrdené), nie scoped override iba pre Porovnanie. */
    --text-dim: #cbd5e1;
    --text-soft: #9aa0aa;
    --text-faint: #aab5bf;
    --text-bright: #F5F7F8;
    --text-slate: #64748b;

    --status-danger-light: #f87171;
    --status-warning-light: #f1c40f;
    --status-danger-strong: #c0392b;

    /* Tiene (rgba(0,0,0,x)) ZÁMERNE nie sú tokenizované - sú štrukturálna
       hĺbka, nie súčasť značky projektu. */
}

/* ==========================================================================
   🚫 GLOBÁLNE ZAKÁZANIE VÝBERU TEXTU/OBSAHU (sekcia zadania "Globálne
   zakázanie výberu textu/obsahu v celej aplikácii") - appka je uzavretý
   konfigurátor (embedded iframe), nie textový dokument; označovanie textu
   myšou/podržaním prsta pôsobí neprofesionálne. Platí VŠADE (filter,
   lightboxy, POI/VR/Galéria lišty, bottom row, mapa) - dovtedy sa
   user-select:none pridávalo LOKÁLNE iba na jednotlivé komponenty
   (.vr-tours-card, .poi-window-card a pod., viaceré teraz už redundantné,
   ale ponechané - neškodia, vyššia špecificita rovnakej hodnoty).
   ========================================================================== */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* VÝNIMKA: textové input polia MUSIA zostať bežne editovateľné/
   vyberateľné - opačne by sa nedal opraviť preklep výberom textu ani
   skopírovať zadaná hodnota. POZOR: zadanie predpokladalo, že appka
   "aktuálne nemá žiadne textové input polia" - v skutočnosti kontaktný
   formulár (js/detail.js, .contact-form-input - meno/email/telefón) ich
   obsahuje, táto výnimka je preto NUTNÁ HNEĎ TERAZ, nie iba poznámka pre
   budúcnosť (ak pribudne napr. vyhľadávacie pole, zdedí ju automaticky -
   selektor cieli na VŠETKY input/textarea, nie na konkrétnu triedu). */
input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Zákaz ťahania obrázkov (drag-ghost pri kliku+ťahaní myšou) - dopĺňa
   draggable="false" atribút (viaceré <img> ho už majú priamo v HTML/JS,
   toto je globálny fallback pre prípad, že by niektorému chýbal).
   Kontextové menu (dlhé podržanie na mobile - "Uložiť obrázok"/"Kopírovať
   obrázok") rieší document-level listener v js/main.js (contextmenu,
   scopovaný IBA na <img>, nie globálne - klik pravým mimo obrázkov ostáva
   funkčný, napr. pre vývojárske nástroje).

   KRITICKÁ REGRESIA (opravené) - toto pravidlo PREDTÝM obsahovalo aj
   explicitné "pointer-events: auto;". Obrázky sú aj bez neho bežne
   klikateľné (to je predvolená/zdedená hodnota prehliadača) - explicitný
   "auto" priamo na <img> je ale SILNEJŠÍ než zdedená hodnota z rodiča
   (priame pravidlo na prvku vždy vyhráva nad dedením, bez ohľadu na
   špecifickosť pravidla rodiča), takže PREBIL zámerné
   "pointer-events: none" nastavené na skrytých/zatvorených overlayoch
   (napr. #vr-tours-overlay.vr-tours-hidden, css/vr-tours.css;
   .poi-window-card.vr-tours-foreground-hidden, css/vr-tours.css) -
   konkrétne .vr-tours-background-img (celoplošný <img>, inset:0) ostal
   klikateľný AJ KEĎ mal byť Virtuálne prehliadky/Galéria lightbox úplne
   zatvorený/neinteraktívny, a tak (vo vyššom z-indexe, 7 > #okolie-overlay
   6) zachytával VŠETKY kliky nad POI lightboxom namiesto neho - kategórie
   ani klik mimo (na .poi-window-backdrop) sa vôbec nedostali k svojim
   vlastným click listenerom (sekcia zadania "Kritická regresia – ID-byt/
   POI buttons zatvárajú lightbox namiesto prepnutia obsahu, click-outside
   prestal fungovať"). */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

html, body {
    /* Rozmer podľa skutočného kontajnera (iframe), nie vw/vh viewport
       jednotiek - sekcia 92-94, 112-113. Keďže je toto koreňový dokument
       samotného iframe, 100% sa tu prirodzene rovná reálnej ploche, ktorú
       hostiteľská stránka iframu pridelila. */
    width: 100%;
    height: 100%;
    overflow: hidden; /* Zákaz posúvania celej materskej stránky */
    /* PRIEHĽADNÉ pozadie (sekcia zadania "Appka sa škáluje podľa
       kontajnera... priehľadné okolie") - appka je teraz vykresľovaná na
       PEVNÚ 1920×1080 veľkosť a "contain-fit" zmenšená/zväčšená do
       kontajnera (js/scale.js, #app-scale-wrapper nižšie) - priestor OKOLO
       nej (prázdne pásy, keď sa pomer strán kontajnera nezhoduje s 16:9)
       NESMIE byť appkou vykreslený vôbec, musí ním presvitať pozadie
       hostiteľskej WP stránky pod iframom. Samotný #app (16:9 javisko)
       si SVOJE VLASTNÉ tmavé pozadie ponecháva bezo zmeny (súčasť dizajnu
       appky, nie "prázdny priestor okolo nej"). */
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #ffffff;
}

/* .app = celý priestor pridelený iframu - TERAZ priehľadný (viď html,body
   vyššie), CENTRUJE #app-scale-wrapper (css/scale.css, pevná 1920×1080
   veľkosť) pomocou flexboxu namiesto container-query/aspect-ratio fluid
   výpočtu (ten teraz robí #app-scale-wrapper + JS scale namiesto tohto
   elementu). */
#configurator-wrapper.app {
    width: 100%;
    height: 100%;
    position: relative;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bez vlastného paddingu - .configurator-ratio nižšie musí dostať PRESNE
   celú plochu iframu do svojho cqw/cqh výpočtu, inak pri presne 16:9
   hostiteľskom ráme (host-demo.html) vznikne medzera medzi bielym rámikom
   a fasádnym obrázkom (výška by sa musela zmenšiť, aby sedel presný
   pomer 16:9 voči zúženej šírke). "Obsah nenalepený na okraj" (požiadavka
   klienta) riešia namiesto toho vlastné 16px+ odsadenia jednotlivých
   plávajúcich panelov (#app-logo, #configurator-filters,
   #right-panel-stack, #facade-view-switcher v css/layout.css) - tie sú
   nezávislé od tohto kontajnera. */
.app-padding {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* Query kontajner pre .configurator-ratio - počíta cqw/cqh voči
       celej ploche iframu (žiadny padding sa neodčítava). */
    container-type: size;
    container-name: app-stage;
}

/* ==========================================================================
   ⏳ ZDIEĽANÝ CSS-ONLY LOADING SPINNER (sekcia zadania "Definitívne
   odstránenie čierneho/prázdneho preblikávania - zmena architektúry
   zobrazovania obrázkov") - JEDEN spoločný vizuál pre VŠETKY tri lightboxy
   s fotkami (POI - css/okolie.css, VR/Galéria + jeho fullscreen zoom -
   css/vr-tours.css, Galéria bytu v detaile - css/detail.css), namiesto
   trojitej duplicity. Zobrazuje sa IBA pri skutočne DLHOM čakaní (~280ms,
   js/media.js zobrazObrazokBezBliknutia) - na rýchlom pripojení/z cache sa
   nikdy nestihne ukázať.

   Čisto CSS animácia (@keyframes, NIE JS requestAnimationFrame slučka) -
   zámerne nízka záťaž hlavného vlákna na zariadeniach strednej triedy
   (sekcia zadania "výkonovo nenáročné"). Rodičovský kontajner MUSÍ mať
   position:relative/absolute (všetky tri už majú, viď príslušné CSS
   súbory) - spinner sa naň centruje absolútnou pozíciou, nezávisle od
   veľkosti/object-fit samotného <img>. */
.media-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgb(var(--accent-rgb) / 0.2);
    border-top-color: rgb(var(--accent-rgb));
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
    animation: media-spin 0.8s linear infinite;
    /* Krátky prechod IBA na opacity - spinner sa neobjaví/nezmizne "trhane",
       ale samotná rotácia (animation vyššie) ostáva plynulá, nezávislá
       transition vlastnosť. */
    transition: opacity 120ms ease;
}

.media-loading-spinner.media-loading-visible {
    opacity: 1;
    visibility: visible;
}

@keyframes media-spin {
    to {
        transform: rotate(360deg);
    }
}