/* ===============================================================
   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;
}
.modal-body p {
  margin: 0;
  color: #5b5b5b;
  font-size: 17px;
  line-height: 1.55;
  white-space: pre-line;
}

.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); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  overflow-y: auto;
  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 {
  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);
}