/* The 360° tour page (tour.html): the Figma aerial skin (styles.css) over a live panorama. */
.pano { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0b0d0c; cursor: grab; }
.pano:active { cursor: grabbing; }
.pano-spots { position: absolute; inset: 0; pointer-events: none; }

/* Scene links: the round icon hotspot (Figma "Frame 277"). */
.spot { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.spot--link { width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 11px 9px; box-sizing: border-box; border-radius: 30px; background: var(--veil); display: block; }
.spot--link img { width: 42.2px; height: 38.2px; transition: transform 200ms var(--ease); }
.spot__label { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 6px 12px; border-radius: 30px; background: rgba(0, 0, 0, 0.65); font-family: var(--poppins); font-weight: 600; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 160ms, transform 160ms; pointer-events: none; }
/* Menu lists, exactly as Figma: villas "pop-up" (1734:383) 234 wide, text 19 px from the top and 25 px in,
   20 px between items, 31 px under the last; rooms "Group 29" (1813:2451) 391 × 194, its list scrolling inside
   from 19 px down to the bottom edge. Both: 50% black, 10 px corners, Poppins SemiBold 14 white, no blur. */
.bottom-menu button { color: #fff; }
.menu-pop { position: absolute; bottom: 116px; left: 50%; transform: translateX(-50%); z-index: 6; width: 234px; box-sizing: border-box; padding: 19px 0 24.68px 25px; border-radius: 10px; background: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.menu-pop.is-rooms { width: 391px; height: 194px; padding: 0 0 0 25px; border-top: 19px solid transparent; overflow-x: clip; overflow-y: auto; scrollbar-width: none; }
.menu-pop.is-rooms::-webkit-scrollbar { display: none; }
.menu-pop button { display: block; flex: none; padding: 0; text-align: left; font-family: var(--poppins); font-weight: 600; font-size: 14px; line-height: normal; color: #fff; white-space: nowrap; }
.menu-pop button:focus-visible { outline-offset: 2px; }
.menu-pop[hidden] { display: none; }

/* First load: the page stays dark until the first view is ready (no Figma frame for this, so nothing else is shown). */
.pano-load { position: absolute; inset: 0; z-index: 40; background: #0b0d0c; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.pano-load.is-done { opacity: 0; visibility: hidden; }

/* The full-screen floorplan hides the tour's own controls too (styles.css keeps .tour__bg; here the pano). */
.tour:has(.dh-panel.is-full:not([hidden])) > .pano { opacity: 1; pointer-events: none; }
.tour:has(.dh-panel:not([hidden])) .pano-spots { opacity: 0; pointer-events: none; }



/* The floorplan panel has no villa dropdown in the Figma (1734:601, 2137:2352). */
.tour .dh-villa { display: none; }

/* Top Right Elements (Figma 1734:247): buttons at 9 / 56.5 / 104 px, 10 px in. Active state = the same icon on a
   #AF5F4A circle; Variant2 "Fullscreen Mode" and Variant3 "Auto Rotate: ON" bubbles; Variant4 share list, the
   rail growing to 351 px. */
.tool-rail { display: block; padding: 0; transition: height 300ms var(--ease); }
.tool-rail > button { position: absolute; left: 10px; width: 41px; height: 41px; }
.tool-rail > button:nth-of-type(1) { top: 9px; }
.tool-rail > button:nth-of-type(2) { top: 56.53px; }
.tool-rail > button:nth-of-type(3) { top: 103.94px; }
.tool-rail .tr-on { display: none; }
.tool-rail [aria-pressed="true"] .tr-on, .tool-rail [aria-expanded="true"] .tr-on { display: block; }
.tool-rail [aria-pressed="true"] .tr-off, .tool-rail [aria-expanded="true"] .tr-off { display: none; }
.tool-rail.is-share { height: 351px; width: 60px; }
.tr-share { position: absolute; left: 10px; top: 151px; display: flex; flex-direction: column; gap: 6.97px; opacity: 0; visibility: hidden; transform: translateY(-156px); transition: opacity 300ms, visibility 300ms, transform 300ms var(--ease); } /* Figma Default keeps them 156 px up, hidden: a smart-animate slide */
.tool-rail.is-share .tr-share { opacity: 1; visibility: visible; transform: none; }
.tr-share a { position: relative; width: 41px; height: 41px; border-radius: 50px; display: block; }
.tr-share a img { position: absolute; }
.tr-share__fb { background: #4967aa; } .tr-share__fb img { left: 6px; top: 7px; width: 28px; height: 28px; }
.tr-share__ms { background: #1754dd; } .tr-share__ms img { left: 7px; top: 7px; width: 27px; height: 27px; }
.tr-share__gm { background: #fff; } .tr-share__gm img { left: 10px; top: 12px; width: 22px; height: 17px; }
.tr-share__wa { background: #60d669; } .tr-share__wa img { left: 7px; top: 6px; width: 28px; height: 28px; }
.tr-bubble { position: absolute; left: -143px; width: 147px; height: 31px; margin: 0; background: url("../assets/tr-bubble.svg") no-repeat 0 0 / 147px 31px; font-family: var(--poppins); font-weight: 600; font-size: 12px; line-height: normal; color: #000; display: none; }
.tr-bubble span { position: absolute; left: 20px; right: 27px; top: 7px; height: 18px; text-align: center; white-space: nowrap; }
.tool-rail[data-bubble="fullscreen"] .tr-bubble { display: block; top: 25px; }
.tool-rail[data-bubble="autorotate"] .tr-bubble { display: block; top: 75px; }
.tool-rail[data-bubble="autorotate"] .tr-bubble span { left: 22px; right: 28px; }

/* Information Elements / Variant2 (Figma 1734:410): 249 × 189.4 white card, 54 px under the 45 px button. */
.info-card { position: absolute; left: 111px; top: 200.1px; width: 249px; height: 189.4px; border-radius: 10px; background: #fff; color: #000; font-family: var(--sf); z-index: 7; }
.info-card[hidden] { display: none; }
.info-card__title { position: absolute; left: 20px; top: 16px; width: 211px; margin: 0; text-align: center; font-weight: 500; font-size: 14px; line-height: 16px; }
.info-card__text { position: absolute; left: 16px; top: 59.1px; width: 219px; margin: 0; text-align: center; font-weight: 300; font-size: 10px; line-height: 14px; }
.info-card__social { position: absolute; left: 63px; top: 134px; display: flex; gap: 8px; align-items: center; }
.info-card__social > img { width: 33px; height: 33px; }
.info-card__fb { position: relative; width: 35px; height: 35px; border-radius: 50px; background: #4967aa; }
.info-card__fb img { position: absolute; left: 5.12px; top: 5.97px; width: 23.885px; height: 23.885px; }

/* Setting Elements (Figma 1734:431): Variant2 opens upward into a 56 × 146 pill holding VR and speed. */
.settings-stack { position: absolute; right: 122px; bottom: 82px; width: 41px; height: 41px; }
.settings-stack .round-btn--settings { right: 0; bottom: 0; }
.settings-stack__bg { position: absolute; left: -7px; top: -105px; width: 56px; height: 146px; border-radius: 50px; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 200ms; }
.settings-stack__items { position: absolute; left: 0; top: -92px; display: flex; flex-direction: column; gap: 5px; opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 200ms; }
.settings-stack__items button { position: relative; width: 41px; height: 41px; border-radius: 50px; background: rgba(0, 0, 0, 0.5); }
.settings-stack__vr img { position: absolute; left: 8px; top: 10px; width: 26px; height: 21px; }
.settings-stack__speed img { position: absolute; left: 9px; top: 7px; width: 24px; height: 24px; }
.settings-stack[data-open="true"] .settings-stack__bg { opacity: 1; }
.settings-stack[data-open="true"] .settings-stack__items { opacity: 1; visibility: visible; }
.settings-stack[data-open="true"] .round-btn--settings { background: none; }
.tour .dh-panel { z-index: 9; } /* the floorplan stays above the info card and lists */