/* ===============================================================
   GEDEELDE STYLING voor alle 360°-tours (Kinderopvang Huizen)
   Gebruikt door index.html, koelemoes.html, toethoorn.html — pas hier
   één keer aan i.p.v. in elk bestand apart.
   =============================================================== */

:root {
  --accent: #29b6f6;
  --accent-dark: #0277bd;
  --modal-bg: rgba(10, 14, 20, 0.92);
  --menu-accent: #f088b6; /* eigen accentkleur voor het Overzicht-menu (i.p.v. het blauwe --accent) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100dvh; /* dynamische viewport-hoogte: voorkomt dat iOS Safari's adresbalk content/knoppen buiten beeld duwt */
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #000;
  overflow: hidden;
}

#panorama {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* ===== Titelbalk ===== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 14px 22px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color: #fff;
  pointer-events: none;
}
.topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.topbar .scene-name {
  font-size: 13px;
  opacity: 0.8;
}

/* Pannellum's eigen zoom/fullscreen-knoppen staan standaard linksboven
   (overlapt de titelbalk) — verplaatst naar linksonder. safe-area-inset
   houdt rekening met de iOS-home-indicator zodat de knoppen niet
   daarachter/daaronder wegvallen. */
.pnlm-controls-container {
  top: auto !important;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
  left: max(20px, calc(env(safe-area-inset-left, 0px) + 14px)) !important;
  right: auto !important;
}

/* ===========================================================
   CUSTOM HOTSPOTS
   =========================================================== */

/* Pannellum's eigen hotspot-element niet aanraken qua positie/transform —
   al onze styling zit in de binnenste .hs wrapper. */
.custom-hotspot { cursor: pointer; }

/* Gemeenschappelijke wrapper (binnenin het Pannellum-element) */
.hs {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}
.hs:hover { transform: translate(-50%, -50%) scale(1.18); }

.hs .hs-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 22, 32, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hs:hover .hs-icon {
  background: var(--accent);
  border-color: #fff;
  box-shadow: 0 0 0 6px rgba(41, 182, 246, 0.25), 0 4px 16px rgba(0,0,0,0.5);
}
.hs .hs-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pulserende ring voor extra zichtbaarheid */
.hs::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: hs-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes hs-pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { opacity: 0; }
}

/* Tooltip-label */
.hs .hs-label {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(15, 22, 32, 0.92);
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.hs:hover .hs-label { opacity: 1; }

/* Navigatie-hotspot: pijl-icoon roteert subtiel bij hover (oude/ongebruikte
   fallback-stijl — huidige navigatie gebruikt .hs-floor hieronder) */
.hs-nav:hover .hs-icon svg { transform: translateY(-1px); }

/* Info-hotspot: custom marker-afbeelding i.p.v. cirkel-icoon */
.hs-info { width: auto; height: auto; }
.hs-info::before { display: none; } /* geen pulsering rond de marker */
.hs-marker {
  display: block;
  height: 128px;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.hs-info:hover .hs-marker {
  filter: drop-shadow(0 0 10px rgba(233, 30, 140, 0.65))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.hs-info .hs-label { bottom: calc(100% + 6px); }

/* ===========================================================
   MODAL
   =========================================================== */
.modal-overlay {
  position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.35);
display: none;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity 0.25s ease;
}
.modal-overlay.open {
  display: flex;
  opacity: 1;
}

.modal {
  position: relative;
  display: flex;
  width: min(1040px, 94vw);
  max-height: 86vh;
  max-height: 86dvh;
  background: #f4f3fa;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.25s ease;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

/* Vaste grootte i.p.v. procentueel/uitrekkend — de foto blijft altijd
   even groot, ongeacht hoeveel tekst ernaast staat. */
.modal-img {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 50%;
  height: 320px;
  background: #dcdce4 center / cover no-repeat;
}

/* Logo-badge linksboven over de foto (Kinderopvang Huizen) */
.modal-logo-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 74px;
  height: 74px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.modal-logo-badge img { width: 78%; height: auto; display: block; }

.modal-body {
  flex: 1 1 auto;
  min-height: 0; /* laat overflow-y:auto écht werken binnen de begrensde modal-hoogte */
  padding: 44px 42px 40px;
  overflow-y: auto;
  font-family: "Open Sans", "Segoe UI", Roboto, sans-serif;
}
.modal-body h2 {
  margin: 0 0 18px;
  color: #371979;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}
/* De tekst komt als HTML uit het CMS (alinea's als <p>); #modalText is een div. */
.modal-body #modalText,
.modal-body p {
  margin: 0;
  color: #5b5b5b;
  font-size: 17px;
  line-height: 1.55;
}
.modal-body p + p { margin-top: 12px; }
.modal-body #modalText ul,
.modal-body #modalText ol { margin: 12px 0 0 20px; padding: 0; }
.modal-body #modalText a { color: #371979; }

.modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #7B6DA3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.18s ease, transform 0.18s ease;
}
.modal-close svg { width: 16px; height: 16px; }
.modal-close:hover {
  background: #4a2596;
  transform: rotate(90deg);
}

@media (max-width: 700px) {
  .modal { flex-direction: column; max-height: 90vh; max-height: 90dvh; }
  .modal-img { width: 100%; height: 200px; align-self: stretch; }
  .modal-body { padding: 28px 24px 30px; }
}

/* ===========================================================
   OVERZICHT-MENU (springt direct naar elke panorama)
   =========================================================== */
.menu-btn {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 22, 32, 0.62);
  color: #fff;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: background 0.18s ease, transform 0.18s ease;
}
.menu-btn:hover { background: var(--menu-accent); transform: translateY(-1px); }
.menu-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

/* Op mobiel alleen het icoon (ruimtegebrek naast de titel) */
@media (max-width: 768px) {
  .menu-btn { padding: 10px; gap: 0; }
  .menu-btn-label { display: none; }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 11, 16, 0.78);
  backdrop-filter: blur(4px);
  display: none;
  flex-direction: column;
  padding: 30px clamp(16px, 5vw, 60px) 40px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.menu-overlay.open { display: flex; opacity: 1; }

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 22px;
}
.menu-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.menu-close {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.menu-close:hover { background: var(--menu-accent); transform: rotate(90deg); }

/* ===== Locatieschakelaar boven het scèneraster ===== */
.locaties { flex: 0 0 auto; margin-bottom: 22px; }
.locaties-label {
  display: block;
  color: #fff;
  opacity: .62;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
/* Afbreken i.p.v. horizontaal scrollen: zo blijft de locatie waar je nu
   bent altijd zichtbaar, ook op een smal scherm, en is er geen scrollbalk. */
/* Begrensde hoogte met eigen scroll: de lijst groeit mee naar tientallen
   locaties zonder het scèneraster van het scherm te duwen. */
.locatie-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 31vh;
  overflow-y: auto;
  padding-right: 4px;
}
.locatie-kaart {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 13px 6px 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.locatie-kaart img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}
.locatie-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.locatie-naam { font-size: 14px; font-weight: 600; white-space: nowrap; }
.locatie-type { font-size: 11.5px; opacity: .6; white-space: nowrap; }
a.locatie-kaart:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--menu-accent);
  transform: translateY(-2px);
}
a.locatie-kaart:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; }
/* De locatie waar je nu bent: gemarkeerd en niet klikbaar */
.locatie-kaart.huidig {
  border-color: var(--menu-accent);
  background: rgba(240, 136, 182, 0.16);
  cursor: default;
}
.locatie-kaart.huidig .locatie-naam { color: var(--menu-accent); }

.menu-subkop {
  flex: 0 0 auto;
  margin: 0 0 11px;
  color: #fff;
  opacity: .62;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  overflow-y: auto;
  min-height: 0; /* laat overflow-y écht werken nu er meer boven het raster staat */
  /* Nodig naast min-height:0. Dat laatste laat het raster krimpen tot onder
     zijn inhoud, en dan perst de grid de rijen plat (kaarten van 20px met een
     foto van 150px erin) in plaats van te gaan scrollen. Met max-content
     houden de rijen hun eigen hoogte en scrollt het raster wél. */
  grid-auto-rows: max-content;
  padding-right: 6px;
}
.menu-card {
  position: relative;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #1a222e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.menu-card:hover { transform: translateY(-3px); border-color: var(--menu-accent); }
.menu-card.active { border-color: var(--menu-accent); }
.menu-card img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  filter: brightness(0.62); /* foto bewust getemperd, tekst moet domineren */
  transition: filter 0.16s ease;
}
.menu-card:hover img,
.menu-card.active img { filter: brightness(0.76); }
/* Onderschrift overlayt de foto (donker verloop i.p.v. losse balk eronder) */
.menu-card .menu-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 9px;
  color: #fff;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 100%);
}
.menu-card .menu-num {
  flex: 0 0 auto;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--menu-accent);
  color: #04222e;
  font-weight: 700;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.menu-card.active .menu-caption { color: var(--menu-accent); }

/* ===========================================================
   VLOER-PIJL (navigatie) + BEWERKMODUS
   =========================================================== */
.hs-floor { position:absolute; top:0; left:0; width:0; height:0; transform:translate(-50%,-50%); }
/* Open wit chevron, plat op de vloer (perspective+rotateX), met een
   zachte ademende puls. Schermgebonden billboard (--dir zet de richting) —
   bewust simpeler dan wereldvast; de puls maakt het meebewegen minder
   opvallend tijdens het rondkijken. */
.hs-floor .floor-arrow {
  position:absolute; left:-40px; top:-40px; width:80px; height:80px;
  transform: perspective(230px) rotateX(60deg) rotate(var(--dir,0deg));
  transform-origin:50% 50%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
  animation: floor-pulse 2s ease-in-out infinite;
  transition: filter .15s ease; cursor:pointer;
}
.hs-floor .floor-arrow path {
  fill: none; stroke:#fff; stroke-width:8.25; stroke-linecap:round; stroke-linejoin:round;
  transition: stroke .15s ease;
}
.hs-floor:hover .floor-arrow path { stroke:#f087b6; }
.hs-floor:hover .floor-arrow {
  filter: drop-shadow(0 0 10px rgba(240,135,182,.7)) drop-shadow(0 6px 10px rgba(0,0,0,.4));
  animation-play-state: paused;
}
@keyframes floor-pulse {
  0%, 100% { transform: perspective(230px) rotateX(60deg) rotate(var(--dir,0deg)) scale(1);   opacity: .85; }
  50%      { transform: perspective(230px) rotateX(60deg) rotate(var(--dir,0deg)) scale(1.14); opacity: 1;   }
}
.hs-floor .hs-label {
  position:absolute; left:50%; bottom:42px; transform:translateX(-50%);
  white-space:nowrap; background:rgba(15,22,32,.92); color:#fff; font-size:12px;
  padding:4px 9px; border-radius:6px; opacity:0; transition:opacity .15s; pointer-events:none;
}
.hs-floor:hover .hs-label { opacity:1; }

/* Op mobiel 50% kleiner (viewBox-SVG, dus lijndikte schaalt automatisch mee) */
@media (max-width: 768px) {
  .hs-floor .floor-arrow { left:-20px; top:-20px; width:40px; height:40px; }
}

/* Blur-tool: live sleep-rechthoek (schermgebonden, tijdens het slepen zelf) */
.blur-sleep-rect {
  position: fixed; z-index: 140; pointer-events: none;
  border: 2px dashed #fff; background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 2000px rgba(0,0,0,.25);
}
/* Blur-tool: marker voor een al geplaatst (nog niet gebakken) blur-gebied —
   Pannellum-hotspot, dus positie volgt automatisch mee bij pan/zoom. */
.hs-blur-marker {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  border: 2px dashed #fff;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

.edit-panel {
  position:fixed; right:16px; bottom:16px; z-index:120; width:300px; max-height:72vh; overflow:auto;
  background:rgba(20,26,34,.96); color:#fff; border-radius:12px; padding:14px 16px;
  font:13px/1.45 "Segoe UI",Roboto,sans-serif; box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.edit-panel h3 { margin:0 0 10px; font-size:14px; }
.edit-panel select { font:inherit; padding:3px 6px; border-radius:5px; max-width:150px; }
.edit-panel button { cursor:pointer; border:none; border-radius:6px; padding:6px 10px; background:var(--accent); color:#04222e; font:600 12px "Segoe UI",sans-serif; }
.edit-panel button.sec { background:rgba(255,255,255,.16); color:#fff; padding:4px 8px; }
.ep-row { display:flex; align-items:center; gap:6px; padding:7px 0; border-top:1px solid rgba(255,255,255,.12); }
.ep-row .doel { flex:1; font-size:12.5px; }
.ep-row input[type=range] { width:74px; }
.edit-panel .ep-newrow { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.edit-panel textarea { width:100%; height:120px; font:11px/1.3 monospace; margin-top:8px; border-radius:6px; }
.edit-banner {
  position:fixed; top:58px; left:50%; transform:translateX(-50%); z-index:130;
  background:#ffd54f; color:#222; padding:8px 18px; border-radius:999px; font:600 13px "Segoe UI",sans-serif;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}