/* PAMJE 360° player — the chrome stays quiet so the photo does the selling. */
:root {
  color-scheme: dark;
  --accent: #0f7a72;
  --accent-ink: #ffffff;
  --glass: rgba(14, 20, 19, 0.56);
  --glass-strong: rgba(14, 20, 19, 0.78);
  --glass-line: rgba(255, 255, 255, 0.14);
  --text: #f7f8f6;
  --text-soft: rgba(247, 248, 246, 0.74);
  --gap: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d1211; overflow: hidden; }
body { font: 14px/1.35 var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pm { position: fixed; inset: 0; overflow: hidden; background: #0d1211; user-select: none; -webkit-user-select: none; }
.pm-view { position: absolute; inset: 0; z-index: 0; }

/* Little planet intro: drawn above the viewer, fades out when it lands on the start view */
.pm-intro { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; transition: opacity .4s ease; }
.pm-intro.is-done { opacity: 0; pointer-events: none; }
.pm-top, .pm-bar, .pm-credit { transition: opacity .5s ease; }
.pm.is-intro .pm-top, .pm.is-intro .pm-bar, .pm.is-intro .pm-strip, .pm.is-intro .pm-credit, .pm.is-intro .pm-hint { opacity: 0 !important; pointer-events: none; }
.pm .pnlm-container { touch-action: none; } /* one finger looks around in every direction */

/* Pannellum's own chrome is replaced by ours */
.pm .pnlm-load-box, .pm .pnlm-about-msg, .pm .pnlm-panorama-info, .pm .pnlm-load-button { display: none !important; }
.pm .pnlm-container { background: #0d1211; font-family: var(--font); }
.pm .pnlm-ui { cursor: grab; }
.pm .pnlm-grabbing .pnlm-ui { cursor: grabbing; }
.pm .pnlm-interaction-msg { background: var(--glass-strong); border-radius: 12px; font: 14px/1.35 var(--font); width: auto; max-width: 80%; padding: 4px 14px; }
.pm .pnlm-error-msg { display: none !important; }

/* Glass surfaces */
.pm-glass { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-line); }

/* Top: who and where */
.pm-top { position: absolute; top: var(--gap); left: var(--gap); right: var(--gap); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; z-index: 3; }
.pm-top > * { pointer-events: auto; }
.pm-title { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: min(70%, 420px); padding: 7px 14px 7px 7px; border-radius: 14px; }
.pm-title.no-logo { padding-left: 14px; }
.pm-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; padding: 3px; flex: none; }
.pm-title-text { min-width: 0; display: grid; }
.pm-title strong { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-title span { color: var(--text-soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s; }
.pm-tools { display: flex; gap: 8px; }
.pm-icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.pm-icon-btn svg { width: 20px; height: 20px; }
.pm-icon-btn[aria-pressed="true"] { background: var(--text); color: #111; }

/* Bottom bar */
.pm-bar { position: absolute; left: var(--gap); right: var(--gap); bottom: var(--gap); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; z-index: 3; pointer-events: none; }
.pm-bar > * { pointer-events: auto; }
.pm-btn { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-weight: 600; }
.pm-btn svg { width: 18px; height: 18px; flex: none; }
.pm-spaces .pm-count { color: var(--text-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
.pm-spaces[aria-expanded="true"] { background: var(--text); color: #111; }
.pm-spaces[aria-expanded="true"] .pm-count { color: rgba(0,0,0,.55); }
.pm-actions { display: flex; gap: 8px; margin-left: auto; }
.pm-cta { background: var(--accent); color: var(--accent-ink); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 24px rgba(0,0,0,.28); }
.pm-cta:hover { filter: brightness(1.08); }
.pm-wa { width: 44px; padding: 0; justify-content: center; }
.pm-wa svg { width: 21px; height: 21px; }

/* Scene strip */
.pm-strip { position: absolute; left: 0; right: 0; bottom: calc(var(--gap) + 54px); z-index: 2; display: flex; gap: 10px; overflow-x: auto; padding: 4px var(--gap) 8px; scroll-snap-type: x proximity; scrollbar-width: none; transition: opacity .2s, transform .2s; }
.pm-strip::-webkit-scrollbar { display: none; }
.pm-strip[hidden] { display: flex; opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.pm-scene { flex: none; width: 132px; padding: 0; border: 0; background: none; text-align: left; scroll-snap-align: start; }
.pm-scene-img { display: block; width: 132px; height: 88px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.22); box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: border-color .15s, transform .15s; }
.pm-scene span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-scene:hover .pm-scene-img { transform: translateY(-2px); }
.pm-scene[aria-current="true"] .pm-scene-img { border-color: #fff; }
.pm-scene[aria-current="true"] span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; margin-right: 6px; vertical-align: 1px; }

/* Credit */
.pm-credit { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; z-index: 2; font-size: 11px; color: rgba(255,255,255,.6); text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.8); white-space: nowrap; }
.pm-credit:hover { color: #fff; }

/* First-run hint */
.pm-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; font-weight: 600; pointer-events: none; transition: opacity .5s; }
.pm-hint svg { width: 22px; height: 22px; animation: pm-sway 2.4s ease-in-out infinite; }
.pm-hint.is-gone { opacity: 0; }
@keyframes pm-sway { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }

/* Loading */
.pm-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: #0d1211; transition: opacity .6s; }
.pm-loading-bg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(24px) brightness(.7); transform: scale(1.1); }
.pm-loading-inner { position: relative; display: grid; justify-items: center; gap: 12px; color: var(--text); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.pm-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: pm-spin .9s linear infinite; }
.pm-loading.is-done { opacity: 0; pointer-events: none; }
.pm-mini-load { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 2; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: pm-spin .9s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pm.is-switching .pm-mini-load { opacity: 1; }
@keyframes pm-spin { to { transform: rotate(360deg); } }

.pm-error { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; padding: 24px; background: rgba(13,18,17,.9); }
.pm-error p { max-width: 32ch; margin: 0 0 14px; }
.pm-error button { background: #fff; color: #111; border: 0; }

/* Hotspots */
.pm-hs { width: 48px; height: 48px; cursor: pointer; }
.pm-hs:focus-visible { outline: none; }
.pm-hs:focus-visible .pm-hs-mark { outline: 2px solid #fff; outline-offset: 3px; }
.pm-hs-mark { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(14,20,19,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 4px 18px rgba(0,0,0,.35); transition: transform .18s, background .18s; }
.pm-hs-mark svg { width: 24px; height: 24px; }
.pm-hs:hover .pm-hs-mark { transform: scale(1.1); background: var(--accent); }
.pm-hs-door .pm-hs-mark::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); animation: pm-pulse 2.6s ease-out infinite; }
@keyframes pm-pulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.pm-hs-label { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: rgba(14,20,19,.68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.pm-hs-info, .pm-hs-link { width: 36px; height: 36px; }
.pm-hs-info .pm-hs-mark svg, .pm-hs-link .pm-hs-mark svg { width: 18px; height: 18px; }
.pm-hs-card { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); width: max-content; max-width: 260px; padding: 12px 14px; border-radius: 12px; background: rgba(14,20,19,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--glass-line); text-align: left; opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; pointer-events: none; white-space: normal; }
.pm-hs-card strong { display: block; font-size: 14px; margin-bottom: 2px; }
.pm-hs-card p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.45; }
.pm-hs:hover .pm-hs-card, .pm-hs:focus .pm-hs-card, .pm-hs.is-open .pm-hs-card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Compact embeds (small iframes, phones) */
@media (max-width: 560px) {
  :root { --gap: 10px; }
  .pm-title { max-width: calc(100% - 104px); padding: 5px 12px 5px 5px; }
  .pm-logo { width: 30px; height: 30px; }
  .pm-title strong { font-size: 14px; }
  .pm-btn { height: 40px; padding: 0 14px; }
  .pm-wa { width: 40px; }
  .pm-icon-btn { width: 38px; height: 38px; }
  .pm-spaces .pm-label { display: none; }
  .pm-scene, .pm-scene-img { width: 108px; }
  .pm-scene-img { height: 72px; }
  .pm-strip { bottom: calc(var(--gap) + 48px); }
}
@media (max-height: 330px) {
  .pm-strip { display: none !important; }
  .pm-title span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-hs-door .pm-hs-mark::after, .pm-hint svg { animation: none; }
  .pm-spinner, .pm-mini-load { animation-duration: 2s; }
}

/* Automatic tour: a finger shows how the tour is used, with a short tip at the top */
.pm-touch { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s; }
.pm-touch.is-on { opacity: 1; }
.pm-touch-dot, .pm-touch-ring { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%; }
.pm-touch-dot { background: rgba(255,255,255,.4); border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.12), 0 4px 18px rgba(0,0,0,.35); transition: transform .16s ease-out, background-color .16s; }
.pm-touch.is-down .pm-touch-dot { transform: scale(.78); background: rgba(255,255,255,.72); }
.pm-touch-ring { border: 2px solid #fff; opacity: 0; }
.pm-touch.is-tap .pm-touch-ring { animation: pm-tap .65s ease-out; }
@keyframes pm-tap { from { transform: scale(.7); opacity: .95; } to { transform: scale(2.3); opacity: 0; } }
.pm-tip { position: absolute; left: 50%; top: calc(var(--gap) + 62px); z-index: 3; max-width: calc(100% - 2 * var(--gap)); padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translate(-50%, -6px); transition: opacity .35s, transform .35s; }
.pm-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
.pm.is-auto .pnlm-ui { cursor: default; }
@media (max-height: 330px) { .pm-tip { top: auto; bottom: calc(var(--gap) + 56px); } }

/* Unavailable / paused page */
.pm-off { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 90% at 50% 0%, #1b2826 0%, #0d1211 70%); text-align: center; }
.pm-off svg { width: 40px; height: 40px; opacity: .7; margin-bottom: 10px; }
.pm-off h1 { font-size: 18px; font-weight: 650; margin: 0 0 6px; }
.pm-off p { margin: 0; color: var(--text-soft); max-width: 34ch; }