/* Rûnte — viewerstijl */

/* hidden-attribuut moet altijd winnen van display-regels (o.a. .scene-nav) */
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; background: #000; }
.viewer-body { font: 14px/1.5 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; }

#panorama { position: fixed; inset: 0; }

/* Navigatie onderin: titel boven de balk; de balk klapt in tot streepjes */
.nav-wrap {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 92vw;
}

/* Projectnaam — midden bovenaan de pagina */
.project-title-viewer {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

/* Scènetitel — boven de navigatiebalk; schuift mee (alleen transform,
   dus vloeiend) als de balk in- en uitklapt */
.scene-title {
    background: rgba(0, 0, 0, .55);
    color: #fff;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
    transition: transform .25s ease;
    will-change: transform;
}
.nav-wrap.klein .scene-title { transform: translateY(var(--navdelta, 46px)); }

/* De thumbnails en streepjes staan gestapeld; alleen opacity/transform
   animeren — geen hoogte-animatie, dus geen haperingen */
.nav-stack { position: relative; }

/* Scènenavigatie: thumbnails van de standpunten */
.scene-nav {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, .45);
    padding: 8px;
    border-radius: 9px;
    backdrop-filter: blur(8px);
    max-width: 92vw;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    opacity: 1;
    transition: opacity .22s ease, transform .22s ease;
    will-change: opacity, transform;
}
/* Ingeklapt: thumbnails vervagen weg, streepjes vervagen in */
.nav-wrap.klein .scene-nav {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* Ingeklapte balk: één streepje per scène, over de onderkant van de stack */
.scene-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, .45);
    padding: 9px 13px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
    will-change: opacity, transform;
}
.nav-wrap.klein .scene-dots {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.scene-dots button {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .15s;
}
.scene-dots button:hover { background: #fff; }
.scene-dots button.active { background: var(--accent, #fbbc43); }
.scene-nav button {
    position: relative;
    width: 104px;
    aspect-ratio: 2 / 1;
    flex-shrink: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s, border-color .15s, transform .15s;
}
.scene-nav button:hover { opacity: 1; transform: translateY(-2px); }
.scene-nav button.active { border-color: var(--accent, #fbbc43); opacity: 1; }
.scene-nav img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scene-nav .nav-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 8px 6px 3px;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
@media (max-width: 600px) {
    .scene-nav button { width: 80px; }
}

/* Vlakke scène: stilstaande foto met markers */
.flat-stage {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #000;
    display: grid;
    place-items: center;
    overflow: hidden; /* de foto zoomt in demomodus iets in en mag dan niet uitsteken */
}

/* Demomodus: klikpunten hebben geen functie op een tv-scherm en blijven
   verborgen — zowel in panorama's (Pannellum) als op vlakke foto's. */
body.demo .pnlm-hotspot,
body.demo .flat-hotspot { display: none !important; }
.flat-wrap { position: relative; max-width: 100%; max-height: 100%; }
.flat-wrap img {
    display: block;
    max-width: 100vw;
    max-height: 100vh;
    user-select: none;
}
/* Beeldvullend ("cover"): foto schaalt tot het scherm vol is (bijsnijden,
   niet uitrekken); hotspot-posities worden in JS omgerekend. De wrapper
   vult via absolute positionering exact het scherm — anders groeit hij in
   de grid-cel mee met de fotohoogte, waardoor de foto vanaf de bovenkant
   werd bijgesneden in plaats van vanuit het midden. */
.flat-wrap.cover {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}
.flat-wrap.cover img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}
.flat-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: var(--hs-d, 34px);
    height: var(--hs-d, 34px);
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--hs-f, 15px);
    line-height: 1;
    user-select: none;
    transition: transform .15s, border-color .15s;
}
.flat-hotspot:hover { border-color: var(--accent, #fbbc43); transform: translate(-50%, -50%) scale(1.12); }
.flat-hotspot .fh-label {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.flat-hotspot:hover .fh-label { opacity: 1; }

/* Informatiepaneel (voor info-hotspots) */
.info-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .5);
}
.info-panel {
    background: #1c1f27;
    color: #e8e2d8;
    border: 1px solid #2e3340;
    border-radius: 7px;
    padding: 22px 24px;
    width: min(440px, 88vw);
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.info-panel h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.info-panel p { margin: 0 0 14px; white-space: pre-wrap; }
.info-panel button {
    background: var(--accent, #fbbc43);
    color: #111;
    border: 0;
    border-radius: 5px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.info-panel button:hover { filter: brightness(1.12); }

/* Demomodus: schone weergave zonder knoppen */
.demo .pnlm-controls-container,
.demo .scene-dots,
.demo .scene-nav { display: none !important; }
.demo .scene-title { font-size: 16px; }

/* In demomodus een subtiele fullscreenknop die verdwijnt na inactiviteit */
.demo-fullscreen {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 25;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: opacity .4s;
}
.demo-fullscreen.faded { opacity: 0; pointer-events: none; }

/* ═══ v1.11 — huisstijl, logo en eigen bedieningsknoppen ═══ */

/* Logo van het project, in de gekozen hoek en het gekozen formaat */
.viewer-logo {
    --logo-h: 64px; /* Normaal */
    position: fixed;
    z-index: 20;
    /* Vaste hoogte: het gekozen formaat geldt ook voor kleine logo's.
       Erg brede logo's worden door max-width + object-fit netjes
       passend gehouden zonder te vervormen. */
    height: var(--logo-h);
    width: auto;
    max-width: calc(var(--logo-h) * 3.2);
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
}
.logo-maat-s  { --logo-h: 44px; }
.logo-maat-l  { --logo-h: 96px; }
.logo-maat-xl { --logo-h: 136px; }
.logo-lt { top: 14px; left: 14px; }
.logo-rt { top: 14px; right: 14px; }
.logo-lb { bottom: 14px; left: 14px; }
.logo-rb { bottom: 14px; right: 14px; }

/* Zoom- en fullscreenknoppen — zelfde stijl als de navigatiebalk */
.viewer-controls {
    position: fixed;
    bottom: 14px;
    right: 14px;
    z-index: 21;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, .45);
    padding: 4px 6px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.viewer-controls button {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 17px;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    /* Aanrakingen direct afhandelen (geen dubbeltik-zoom van de browser) */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.viewer-controls button:hover,
.viewer-controls button:active {
    background: rgba(255, 255, 255, .14);
    color: var(--accent, #fbbc43);
}
/* Bij een vlakke foto is zoomen niet van toepassing */
.viewer-controls.vlak .zoom-knop { display: none; }

/* Logo niet over de fullscreenknop van de demomodus heen */
.demo .logo-rb { bottom: 60px; }

/* ---- Aanraakschermen: grotere doelen, geen hover nodig ---- */
@media (pointer: coarse) {
    .scene-dots { padding: 12px 15px; }
    .scene-dots button { width: 26px; height: 7px; }
    .viewer-controls button { width: 42px; height: 42px; font-size: 20px; }
    .scene-nav button { width: 96px; }
    /* Op kleine schermen het logo iets terugschalen (verhoudingen blijven) */
    .viewer-logo { height: calc(var(--logo-h) * 0.72); max-width: calc(var(--logo-h) * 2.2); }
}

/* ═══ v1.12 — klikpunten: één stijl voor panorama en vlakke foto ═══ */

/* Grootte via variabelen; "Groot" zet ze hoger */
body { --hs-d: 34px; --hs-f: 15px; --hs-dot: 9px; }
body.hs-maat-l { --hs-d: 48px; --hs-f: 21px; --hs-dot: 13px; }

/* Klikpunt in het panorama: zelfde donkere rondje met witte rand als op
   vlakke foto's. Het Pannellum-element zelf blijft 26px (daar rekent de
   positionering mee); het zichtbare rondje is een gecentreerde ::before. */
.rn-hs { cursor: pointer; }
.rn-hs::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--hs-d);
    height: var(--hs-d);
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    border: 2px solid #fff;
    box-sizing: border-box;
    transition: transform .15s, border-color .15s;
}
.rn-hs::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: var(--hs-f);
    line-height: 1;
    pointer-events: none;
}
.rn-scene::after { content: '➜'; }
.rn-info::after  { content: 'ℹ'; }
.rn-hs:hover::before {
    border-color: var(--accent, #fbbc43);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Stijl "rondje": een witte stip in plaats van een pijltje/i'tje */
body.hs-stijl-rond .rn-hs::after,
body.hs-stijl-rond .flat-hotspot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--hs-dot);
    height: var(--hs-dot);
    border-radius: 50%;
    background: #fff;
}

/* ═══ v1.12.1 — klein spinnertje i.p.v. laadvlak met MB's ═══ */

/* Pannellums laadvak: tekst, balk en MB-teller verbergen; het vak zelf
   wordt een rond spinnertje in de accentkleur */
.pnlm-load-box {
    width: 48px !important;
    height: 48px !important;
    margin: -24px 0 0 -24px !important;
    background: transparent !important;
}
.pnlm-load-box p,
.pnlm-lbar,
.pnlm-lmsg { display: none !important; }
.pnlm-load-box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -23px 0 0 -23px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--accent, #fbbc43);
    border-radius: 50%;
    animation: rn-spin .8s linear infinite;
}
@keyframes rn-spin {
    to { transform: rotate(360deg); }
}