/* ============= Theme/Layout Vars ============= */
:root{
  --bg:#0f1216;
  --card:#151922;
  --text:#e9edf1;
  --muted:#aab3bd;
  --brand:#77d1c2;
  --white:#ffffff;
  --accent:#c89105;

  --header-h: 15vh;
  --footer-h: 5vh;

  --action-size: 52px;
  --icon-size: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }

/* ============= Header ============= */
.site-header.transparent{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-top:1.5vh; padding-bottom:.3vh;
  padding-left:min(3vw,28px); padding-right:min(3vw,28px);
  background:transparent; border:0; box-shadow:none;
  pointer-events:none; z-index:20;
}
.site-header .header-col{ pointer-events:auto; }
.header-col.left{ justify-self:start;  display:flex; align-items:center; gap:10px; }
.header-col.center{ justify-self:center; display:flex; align-items:center; }
.header-col.right{ justify-self:end;   display:flex; align-items:center; gap:10px; }

.brand-logo{ height:var(--action-size); width:auto; object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); user-select:none; pointer-events:none; }

/* ============= Buttons ============= */
.action-group{ display:flex; gap:10px; }

.ui-btn{
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; outline:none;
  border:1px solid rgba(255,255,255,.9); color:var(--white);
  background:rgba(255,255,255,.12); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.ui-btn:hover{ transform:translateY(-1px) scale(1.02); background:rgba(255,255,255,.18); }
.ui-btn:active{ transform:translateY(0) scale(.98); }

.ui-btn.circle{ width:var(--action-size); height:var(--action-size); border-radius:9999px; }
.ui-btn.box-nav{ width:var(--action-size); height:var(--action-size); border-radius:0; margin-left:6px; }

.grid-icon{ display:grid; grid-template-columns:repeat(2, 9px); grid-template-rows:repeat(2, 9px); gap:6px; }
.grid-icon i{ width:9px; height:9px; border-radius:2px; background:rgba(255,255,255,.95); }

/* Icon buttons (with label reveal) */
.ui-btn.icon-btn{ position: relative; overflow: visible; }
.ui-btn.icon-btn .icon{
  width: var(--icon-size); height: var(--icon-size);
  background-image: var(--icon-url); background-size: contain; background-repeat: no-repeat; background-position: center;
  pointer-events: none;
}
.ui-btn.icon-btn .label{
  position:absolute; left:50%; top: calc(100% + 6px); transform: translate(-50%, 8px);
  color:var(--white); font-size:.78rem; font-weight:700; letter-spacing:.2px; line-height:1;
  padding:0; background:none; border:0; box-shadow:none; opacity:0; pointer-events:none; white-space:nowrap;
  transition: opacity .22s ease, transform .22s ease;
}
.ui-btn.icon-btn:hover .label,
.ui-btn.icon-btn:focus-visible .label{ opacity:1; transform: translate(-50%, 0); }

/* Map header action icons */
#btnRoom   { --icon-url: url("../images/icons/ActionButtons/room.png"); }
#btnHome   { --icon-url: url("../images/icons/ActionButtons/home.png"); }
#btnContact{ --icon-url: url("../images/icons/ActionButtons/contact.png"); }

/* ============= Toggle ============= */
.toggle-switch{ display:inline-flex; align-items:center; justify-content:center; height:24px; }
.toggle-switch input{
  position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.toggle-switch .track{
  position:relative; width:44px; height:24px;
  border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.12);
  border-radius:9999px; display:inline-flex; align-items:center; padding:0 4px;
  transition:background-color .2s ease, border-color .2s ease;
}
.toggle-switch .thumb{
  width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.95);
  box-shadow:0 1px 2px rgba(0,0,0,.25); transform:translateX(0); transition:transform .2s ease;
}
.toggle-switch input:checked + .track{ background:rgba(255,255,255,.22); }
.toggle-switch input:checked + .track .thumb{ transform:translateX(18px); }

/* ============= Main / Pano ============= */
.site-main{ height:100vh; }
.pano{ width:100%; height:100%; cursor:grab; touch-action:none; }
.pano.dragging{ cursor:grabbing; }
.pnlm-about-msg{ display:none !important; }
.pnlm-hotspot, .pnlm-hotspot:hover{ background:transparent !important; }

/* ============= Footer ============= */
.site-footer.transparent{
  position:fixed; left:0; right:0; bottom:0; height:var(--footer-h); background:transparent;
  display:flex; align-items:center; justify-content:flex-end; padding: 0 min(3vw,28px) 12px;
  pointer-events:none; z-index:20;
}
.site-footer .footer-inner{ display:flex; gap:6px; pointer-events:auto; }
.social-btn.ui-btn{ border:none !important; background:transparent !important; backdrop-filter:none !important;
  box-shadow:none !important; width:38px; height:38px; padding:0; }
.social-btn.ui-btn.circle{ border-radius:9999px; }
.social-btn.ui-btn img.social-icon{ width:20px; height:20px; display:block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.social-btn.ui-btn:hover{ transform:translateY(-1px) scale(1.06); }
.social-btn.ui-btn:active{ transform:translateY(0) scale(.96); }

/* ============= Scene blurb ============= */
.scene-info{
  position:fixed; left:min(3vw,28px); bottom:calc(var(--footer-h) + 12px);
  max-width:min(560px,48vw); z-index:21; pointer-events:none;
}
.scene-info *{ pointer-events:auto; }
.scene-title{ margin:0 0 6px 0; font-size:clamp(1.4rem, 2.4vw, 2.2rem); font-weight:800; letter-spacing:.3px; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.scene-desc{ font-size:clamp(.92rem, 1.2vw, 1.05rem); line-height:1.5; color:var(--text); text-shadow:0 2px 10px rgba(0,0,0,.45); max-width:60ch;
  transition:max-height .25s ease, opacity .2s ease; }
.scene-readmore{ display:none; background:none; border:none; color:var(--white); text-decoration:underline; padding:0; font-size:.95rem; cursor:pointer; }

/* ============= Bottom vignette ============= */
.vignette-bottom{
  position:fixed; left:0; right:0; bottom:0; height:32vh; pointer-events:none; z-index:18;
  background:linear-gradient(to top, rgba(0,0,0,.44) 0%, rgba(15,18,22,.28) 35%, rgba(15,18,22,.12) 60%, rgba(15,18,22,0) 100%);
}

/* ============= Hotspots with icon support ============= */
/* Hotspots with icon support */
/* Base (your current desktop-perfect size) */
.metta-hotspot{
  --hotspot-size: clamp(50px, 6vh, 88px);
  --r: calc(var(--hotspot-size)/2);
  --hotspot-bg: var(--accent);
  --icon-url: none;
  position:absolute; transform:translate(-50%,-50%);
  width:var(--hotspot-size); height:var(--hotspot-size); cursor:pointer; will-change:transform;
}

/* Touch devices (phones & most tablets): smaller icons */
@media (hover: none), (pointer: coarse){
  .metta-hotspot{
    /* roughly your previous mobile size */
    --hotspot-size: clamp(38px, 5vh, 56px);
  }
}



/* Dot (interactive circle) */
.metta-hotspot::before{
  content:""; position:absolute; left:50%; top:50%;
  width:var(--hotspot-size); height:var(--hotspot-size); transform:translate(-50%,-50%);
  border-radius:50%; background:var(--hotspot-bg); box-shadow:0 2px 10px rgba(0,0,0,.25); z-index:2;
}

/* Icon overlay inside the circle (centered) */
.metta-hotspot::after{
  content:""; position:absolute; left:50%; top:50%;
  width:60%; height:60%; transform:translate(-50%,-50%);
  background-image: var(--icon-url); background-size: contain; background-repeat: no-repeat; background-position:center;
  z-index:3; pointer-events:none;
}

/* Pill (text) — non-interactive until open */
.metta-hotspot .hotspot-pill{
  position:absolute; top:50%; left:50%; transform:translateY(-50%);
  height:var(--hotspot-size); border-radius:0 var(--hotspot-size) var(--hotspot-size) 0;
  background:#fff; color:#0f1216; display:inline-flex; align-items:center; white-space:nowrap; user-select:none; overflow:hidden;
  padding-left: calc(var(--r) + 10px); padding-right: 14px; width:max-content; max-width:min(70vw, 640px);
  z-index:1;

  opacity:0; pointer-events:none;
  -webkit-mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
          mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
  transition: opacity .18s ease-in, -webkit-mask-size .35s cubic-bezier(.4,0,.2,1), mask-size .35s cubic-bezier(.4,0,.2,1);
}
.metta-hotspot.is-open .hotspot-pill{
  opacity:1; pointer-events:auto; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

@supports not ((-webkit-mask:linear-gradient(#000 0 0)) or (mask:linear-gradient(#000 0 0))){
  .metta-hotspot .hotspot-pill{
    -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);
    transition: opacity .18s ease-in, clip-path .35s cubic-bezier(.4,0,.2,1);
  }
  .metta-hotspot.is-open .hotspot-pill{ -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}

/* Keep Pannellum hotspot layer above pano */
.pnlm-hotspot{ z-index:30; }

/* Back button */
.back-fab{ position: fixed; right: min(3vw, 28px); top: 50%; transform: translateY(-3%); z-index: 22; pointer-events: auto; }
.back-fab.is-hidden{ display: none; }

/* Responsive */
@media (max-width:900px){
  .action-group{ display:none; }
  .scene-info{ max-width:88vw; }
  .scene-readmore{ display:inline-block; margin-bottom:6px; }
  .scene-desc{ max-height:0; opacity:0; overflow:hidden; }
  .scene-info.open .scene-desc{ max-height:50vh; opacity:1; }
  .vignette-bottom{ height:40vh; }
}
@media (max-width:520px){
  .ui-btn.icon-btn .label{ font-size:.72rem; top: calc(100% + 4px); }
}

/* dev-only perf mode */
body.devtools-open .ui-btn{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important;
}
body.devtools-open .vignette-bottom{ display:none !important; }

.toggle-switch.is-hidden{ display:none !important; }
/* Mobile logo shrink */
@media (max-width: 520px){
  .brand-logo { height: 36px; }  /* was 52px via --action-size */
}

/* Optionally also trim header height on phones */
@media (max-width: 520px){
  :root{ --header-h: 12vh; }
}



/* Mobile-only visibility for the grid button */
.ui-btn.box-nav.mobile-only { display: none; }
@media (max-width: 900px){
  .ui-btn.box-nav.mobile-only { display: inline-flex; }
  .action-group { display: none; } /* you already hide this at 900px; safe duplicate */
}

/* Drawer */
.drawer-scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  z-index: 49;
}
.drawer-scrim.show{ opacity: 1; pointer-events: auto; }

.app-drawer{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: clamp(280px, 84vw, 360px);
  background: rgba(21,25,34, .92); /* var(--card) with more opacity */
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
  z-index: 50;
  display: flex; flex-direction: column;
}
.app-drawer.open{ transform: translateX(0); }
body.drawer-open{ overflow: hidden; }

.drawer-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer-logo{ height: 34px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }

.drawer-nav{
  display: grid; gap: 8px; padding: 14px 12px;
}
.drawer-item{
  display: grid; grid-template-columns: 28px 1fr; align-items: center;
  gap: 12px; width: 100%;
  background: rgba(255, 254, 254, 0.1);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--white);
  border-radius: 12px; padding: 12px 14px; text-align: left;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, border-color .18s ease;
}
.drawer-item:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }
.drawer-item:active{ transform: translateY(0); }
.drawer-item .nav-icon{ width: 22px; height: 22px; display: block; }

@media (min-width: 901px){
  /* Hide the scrim/drawer entirely on desktop */
  .drawer-scrim, .app-drawer{ display: none; }
}
.app-drawer{ left:0; right:auto; transform: translateX(-100%); }
.app-drawer.open{ transform: translateX(0); }


/* the pano container itself paints the preview so there's never black */
.pano{
  background: #000 center / cover no-repeat;  /* <— important */
}

/* make sure Pannellum canvas doesn't re-apply a black bg over ours */
.pnlm-render-container{ background: transparent !important; }