/* ── Fonts ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

@font-face { font-family: 'Poppins'; src: url('fonts/Poppins Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }

/* ── Kira Virtual Tour — Luxury Design System ──────────────────────────── */
/* Brand: sage botanical, obsidian wordmark, cream type on deep glass.     */

:root {
  --tw-navy: #2E3A33;          /* mid-tone forest (was Thera #3C4959) */
  --tw-navy-deep: #11181A;     /* deep near-black with subtle green undertone */
  --tw-cream: #F4EDE5;         /* warm off-white — primary text */
  --tw-gold: #BCCA91;          /* Kira sage (was Thera gold #948175) — var name kept so all downstream refs continue working */
  --tw-sage-soft: #D3D7B7;     /* soft sage from KiraAccent.png */
  --tw-serif: 'Parkinsans', sans-serif;
  --tw-sans: 'Poppins', sans-serif;
  --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── SPLASH ──────────────────────────────────────────────────────────────── */

#tw-splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fallback static splash: Kira botanical bg over deep navy-forest.
     When ../banner-video/Kira_3DVista.mp4 exists, the <video> overlays it. */
  background: var(--tw-navy-deep) url('./kira-bg.jpg') center/cover no-repeat;
  transition: opacity 1.0s var(--tw-ease);
  overflow: hidden;
}

#tw-splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* No blend mode — video plays in full natural colour. The botanical
     texture is layered above it as a separate element (.tw-splash-botanical)
     using screen blend so the leaf shapes appear as sage highlights. */
  transform: scale(1);
  opacity: 0;
  animation: tw-fade 2.2s 0.1s ease-out forwards;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Botanical texture layer — sits above the video, below the dark overlay.
   overlay blend: dark areas of kira-bg.jpg deepen the video (adds moodiness
   to the plain sky/building sections), lighter leaf/botanical shapes brighten
   and saturate those regions — the full design structure becomes legible.

   IMPORTANT: starts at opacity 0 and only fades in AFTER the video has
   finished its own fade-in (video: 2.2s duration + 0.1s delay = fully opaque
   at ~2.4s). This ensures overlay always blends against the stable video frame
   rather than the transitioning background, which caused the botanical to
   appear strong at first and then seem to "disappear" as the video loaded. */
.tw-splash-botanical {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('./kira-bg.jpg') center/cover no-repeat;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: tw-botanical-reveal 1.6s 2.5s ease-out forwards;
  pointer-events: none;
}

@keyframes tw-botanical-reveal {
  from { opacity: 0; }
  to   { opacity: 0.65; }
}

.tw-splash-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 26, 0.65);
  z-index: 2;
  transition: background 0.5s var(--tw-ease);
}

#tw-splash.tw-hiding {
  opacity: 0;
  pointer-events: none;
}

/* Cinematic exit: video slowly pushes in and overlay seals to black */
#tw-splash.tw-hiding #tw-splash-video {
  transform: scale(1.07);
}

#tw-splash.tw-hiding .tw-splash-overlay {
  background: rgba(17, 24, 26, 0.88);
}

#tw-splash.tw-gone {
  display: none;
}

.tw-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 36px;
  width: 100%;
  max-width: 720px;
  position: relative;
  z-index: 3;
}

.tw-splash-wordmark-img {
  width: clamp(180px, 18vw, 290px);
  height: auto;
  margin-bottom: clamp(14px, 1.4vw, 22px);
  opacity: 0;
  transform: translateY(24px);
  animation: tw-rise 1.5s 0.45s var(--tw-ease) forwards;
  user-select: none;
  pointer-events: none;
}

.tw-splash-sub {
  font-family: var(--tw-sans);
  font-size: clamp(16.5px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.78);
  margin-top: 15px;
  opacity: 0;
  animation: tw-fade 0.8s 0.45s var(--tw-ease) forwards;
}

.tw-splash-rule {
  width: clamp(72px, 7vw, 108px);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--tw-gold), transparent);
  margin: clamp(18px, 1.8vw, 28px) auto;
  opacity: 0;
  animation: tw-fade 1.1s 0.9s var(--tw-ease) forwards;
}

/* ── FLOATING MAP CARD ───────────────────────────────────────────────────── */

#tw-map-card {
  position: fixed;
  bottom: 42px;
  right: 36px;
  z-index: 100;
  width: 340px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(188, 202, 145, 0.2);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(188, 202, 145, 0.06) inset;
  background: rgba(17, 24, 26, 0.9);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition-delay: 0.3s;
}

/* Map card — button only on all screen sizes.
   Preview map + collapse controls are always hidden; clicking the header
   opens the fullscreen modal on both desktop and mobile. */
#tw-map-body        { display: none !important; }
#tw-map-expand      { display: none !important; }
.tw-map-chevron-btn { display: none !important; }
#tw-map-card        { width: auto; }

/* Map card header — acts as modal open button */
.tw-map-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16.5px 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s;
}

.tw-map-header:hover { background: rgba(255, 255, 255, 0.04); }
.tw-map-header:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; }

.tw-map-header-icon {
  color: var(--tw-gold);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tw-map-header-text {
  font-family: var(--tw-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.72);
  flex: 1;
  text-align: left;
}

.tw-map-chevron {
  color: rgba(244, 237, 229, 0.25);
  flex-shrink: 0;
  transition: transform 0.28s var(--tw-ease), color 0.18s;
}

.tw-map-header:hover .tw-map-chevron { color: rgba(244, 237, 229, 0.55); }

/* Collapsible map body */
#tw-map-body {
  max-height: 450px;
  overflow: hidden;
  transition: max-height 0.3s var(--tw-ease);
}

#tw-map-card.tw-map-collapsed #tw-map-body {
  max-height: 0;
}

#tw-map-card.tw-map-collapsed .tw-map-chevron {
  transform: rotate(180deg);
}

#tw-map {
  width: 100%;
  height: 218px;
  display: block;
  background: #0d1a26;
  border-top: 1px solid rgba(188, 202, 145, 0.08);
}

#tw-map .mapboxgl-canvas {
  filter: brightness(0.86) saturate(0.65);
}

/* Preview map — suppress all Mapbox attribution controls entirely.
   pointer-events:none on #tw-map-card (via .tw-ui-el) does NOT cascade to
   children in CSS, so Mapbox <a> links inside remain clickable even when the
   card is opacity:0 pre-reveal, causing accidental ghost clicks.
   Full attribution is shown in the expanded modal — ToS requirement met there. */
#tw-map .mapboxgl-ctrl-logo { display: none !important; }
#tw-map .mapboxgl-ctrl-attrib { display: none !important; }
#tw-map .mapboxgl-ctrl-attrib-button { display: none !important; }
#tw-map .mapboxgl-ctrl-attrib a,
#tw-map .mapboxgl-ctrl-attrib button {
  pointer-events: none !important;
  display: none !important;
}

/* Snap controls to corner — override Mapbox's default 10px margin */
#tw-map .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl {
  margin: 0 8px 8px 0 !important;
}

/* Zoom controls — branded dark glass */
#tw-map .mapboxgl-ctrl-group {
  background: rgba(17, 24, 26, 0.88) !important;
  border: 1px solid rgba(188, 202, 145, 0.28) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#tw-map .mapboxgl-ctrl-group button {
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(188, 202, 145, 0.18) !important;
}
#tw-map .mapboxgl-ctrl-group button:last-child {
  border-bottom: none !important;
}
#tw-map .mapboxgl-ctrl-group button:hover {
  background: rgba(188, 202, 145, 0.14) !important;
}
#tw-map .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
#tw-map .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Property pin — teardrop / drop-pin shape (CSS-drawn, no SVG dependency).
   Built as two layered shapes: a rotated rounded square (the body, gives
   the classic teardrop tip when rotated 45°) plus a circular inner dot. */
.tw-map-pin {
  position: relative;
  width: 22px;
  height: 28px;
  cursor: default;
  /* Soft sage halo for visibility on both light + satellite tiles */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.tw-map-pin::before {
  /* Teardrop body */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  background: var(--tw-gold);
  border: 2px solid rgba(244, 237, 229, 0.95);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  box-shadow: 0 0 0 5px rgba(188, 202, 145, 0.22);
}
.tw-map-pin::after {
  /* Inner dark dot — gives the pin a center "hole" / depth */
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--tw-navy-deep);
}
.tw-map-pin-large {
  /* Modal version — same shape, scaled up */
  width: 30px;
  height: 38px;
}
.tw-map-pin-large::before {
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-width: 2.5px;
  box-shadow: 0 0 0 7px rgba(188, 202, 145, 0.22);
}
.tw-map-pin-large::after {
  top: 8px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
}

/* Distance-ring labels — subtle text chips that sit inside a gap cut in the ring
   line. Semi-opaque cream background is wide enough to break the ring behind it;
   no border, no pill shape. --ring-color is set inline per-mode from JS. */
.tw-ring-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  border-radius: 5px;
  /* Near-opaque cream — breaks ring line cleanly, still feels "in the map" */
  background: rgba(252, 251, 248, 0.92);
  border: none;
  color: rgba(18, 24, 26, 0.78);
  font-family: var(--tw-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow:
    0 0 0 3px rgba(252, 251, 248, 0.92),   /* extends the cutout gap to match background */
    0 1px 5px rgba(0, 0, 0, 0.14);         /* gentle ground shadow */
  pointer-events: none;
  user-select: none;
}
.tw-ring-label svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--ring-color, var(--tw-gold));
}
/* Walk + drive variants share the same base style; classes kept for future hooks */
.tw-ring-label.tw-ring-walk,
.tw-ring-label.tw-ring-drive {
  /* no overrides needed */
}

.tw-splash-location {
  font-family: var(--tw-sans);
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.78);
  margin-top: 14px;
  opacity: 0;
  animation: tw-fade 1.0s 1.15s var(--tw-ease) forwards;
}

.tw-splash-enter {
  margin-top: clamp(24px, 2.4vw, 42px);
  font-family: var(--tw-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-cream);
  background: var(--tw-navy-deep);
  border: none;
  border-radius: 150px;
  padding: clamp(18px, 1.8vw, 24px) clamp(42px, 4vw, 66px);
  min-height: 72px;
  min-width: 66px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  touch-action: manipulation;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  transition: background 0.22s, box-shadow 0.22s, transform 0.18s var(--tw-ease);
  opacity: 0;
  animation: tw-rise 1.1s 1.4s var(--tw-ease) forwards;
}

.tw-splash-enter:hover {
  background: var(--tw-gold);
  color: var(--tw-navy-deep);
  box-shadow: 0 6px 32px rgba(188, 202, 145, 0.45);
  transform: translateY(-1.5px);
}

.tw-splash-enter:focus-visible {
  outline: 2px solid var(--tw-gold);
  outline-offset: 4px;
}

.tw-splash-arrow {
  width: 21px;
  height: 21px;
  transition: transform 0.18s var(--tw-ease);
}

.tw-splash-enter:hover .tw-splash-arrow {
  transform: translateX(4.5px);
}

/* Devon Properties — pinned to bottom of splash, with label */
.tw-splash-devon-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  opacity: 0;
  animation: tw-fade 1.0s 1.65s var(--tw-ease) forwards;
  white-space: nowrap;
}

.tw-splash-devon-label {
  font-family: var(--tw-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.42);
}

.tw-splash-devon-img {
  width: clamp(120px, 10vw, 168px);
  height: auto;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.45));
  user-select: none;
  pointer-events: none;
}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */

@keyframes tw-rise {
  from { opacity: 0; transform: translateY(21px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tw-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── VIGNETTES ───────────────────────────────────────────────────────────── */

#tw-vignette-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 195px;
  background: linear-gradient(to bottom,
    rgba(10, 16, 24, 0.45) 0%,
    rgba(10, 16, 24, 0.38) 20%,
    rgba(10, 16, 24, 0.24) 45%,
    rgba(10, 16, 24, 0.09) 72%,
    rgba(10, 16, 24, 0.02) 88%,
    transparent 100%
  );
  z-index: 98;
  pointer-events: none;
}

#tw-vignette-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 270px;
  background: linear-gradient(to top,
    rgba(10, 16, 24, 0.40) 0%,
    rgba(10, 16, 24, 0.33) 20%,
    rgba(10, 16, 24, 0.21) 45%,
    rgba(10, 16, 24, 0.08) 72%,
    rgba(10, 16, 24, 0.02) 88%,
    transparent 100%
  );
  z-index: 98;
  pointer-events: none;
}

/* Top-left vignette — kept very subtle so top darkness is consistent across
   the full width (the top linear vignette handles the primary coverage) */
#tw-vignette-tl {
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 280px;
  background: radial-gradient(ellipse at 0% 0%,
    rgba(10, 16, 24, 0.18) 0%,
    rgba(10, 16, 24, 0.12) 28%,
    rgba(10, 16, 24, 0.06) 48%,
    transparent 70%
  );
  z-index: 98;
  pointer-events: none;
}

/* Bottom-left vignette — behind the "Now Viewing" toast */
#tw-vignette-toast {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 800px;
  height: 620px;
  background: radial-gradient(ellipse at 0% 100%,
    rgba(10, 16, 24, 0.88) 0%,
    rgba(10, 16, 24, 0.68) 18%,
    rgba(10, 16, 24, 0.44) 36%,
    rgba(10, 16, 24, 0.20) 54%,
    rgba(10, 16, 24, 0.06) 65%,
    transparent 75%
  );
  z-index: 98;
  pointer-events: none;
}

/* ── UI FLOAT VISIBILITY ─────────────────────────────────────────────────── */

.tw-ui-el {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--tw-ease);
}

.tw-ui-el.tw-show {
  opacity: 1;
  pointer-events: all;
}

#tw-devon-logo-float { transition-delay: 0.04s; }
#tw-logo-float       { transition-delay: 0.08s; }
#tw-cta-btn          { transition-delay: 0.12s; }
#tw-menu-bar         { transition-delay: 0.22s; }

/* ── FLOATING LOGOS ────────────────────────────────────────────────────────── */

/* Devon Properties — top left (developer / brokerage mark) */
#tw-devon-logo-float {
  position: fixed;
  top: 30px;
  left: 36px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.tw-devon-leasing-label {
  font-family: var(--tw-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.40);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  user-select: none;
}

.tw-devon-logo-img {
  display: block;
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.55));
}

/* Kira logo — horizontally centred at top, shifted slightly below the top edge */
#tw-logo-float {
  position: fixed;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.tw-logo-svg {
  display: block;
  height: 72px;
  width: auto;
  filter: drop-shadow(0 2px 18px rgba(0,0,0,0.55));
}

/* ── FLOATING CTA ─────────────────────────────────────────────────────────── */

#tw-cta-btn {
  position: fixed;
  top: 27px;
  right: 30px;
  z-index: 100;
  font-family: var(--tw-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tw-navy-deep);
  background: var(--tw-gold);
  border-radius: 150px;
  padding: 0 33px;
  height: 66px;
  min-width: 66px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: opacity 0.55s var(--tw-ease), filter 0.2s;
  transition-delay: 0.12s, 0s;
}

#tw-cta-btn:hover  { filter: brightness(1.1); }
#tw-cta-btn:focus-visible { outline: 2px solid var(--tw-cream); outline-offset: 3px; }

/* ── BOTTOM MENU BAR ─────────────────────────────────────────────────────── */

#tw-menu-bar {
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.tw-menu-pill {
  display: flex;
  align-items: center;
  background: rgba(17, 24, 26, 0.84);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(188, 202, 145, 0.18);
  border-radius: 150px;
  padding: 0 9px;
  height: 78px;
  gap: 0;
  box-shadow: 0 12px 54px rgba(0, 0, 0, 0.4), 0 1.5px 0 rgba(188, 202, 145, 0.06) inset;
}

/* ── MENU TRIGGER BUTTONS ─────────────────────────────────────────────────── */

.tw-menu-group {
  position: relative;
}

.tw-menu-btn {
  display: flex;
  align-items: center;
  gap: 10.5px;
  font-family: var(--tw-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(244, 237, 229, 0.52);
  background: transparent;
  border: none;
  padding: 0 25.5px;
  height: 60px;
  border-radius: 150px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color 0.18s, background 0.18s;
}

.tw-menu-btn:hover {
  color: rgba(244, 237, 229, 0.88);
  background: rgba(255, 255, 255, 0.05);
}

.tw-menu-btn[aria-expanded="true"] {
  color: var(--tw-cream);
  background: rgba(255, 255, 255, 0.07);
}

.tw-menu-btn.tw-active {
  color: var(--tw-gold);
}

.tw-menu-btn:focus-visible {
  outline: 2px solid var(--tw-gold);
  outline-offset: -2px;
  border-radius: 150px;
}

.tw-menu-chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: transform 0.22s var(--tw-ease), opacity 0.18s;
}

.tw-menu-btn:hover .tw-menu-chevron { opacity: 0.65; }
.tw-menu-btn.tw-active .tw-menu-chevron { opacity: 0.65; }
.tw-menu-btn[aria-expanded="true"] .tw-menu-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* ── SEPARATOR ───────────────────────────────────────────────────────────── */

.tw-menu-sep {
  width: 1.5px;
  height: 27px;
  background: rgba(244, 237, 229, 0.1);
  flex-shrink: 0;
  margin: 0 3px;
}

/* ── DRONE / AERIAL BUTTON ───────────────────────────────────────────────── */

#tw-aerial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  width: 66px;
  height: 60px;
  border-radius: 150px;
  cursor: pointer;
  color: rgba(244, 237, 229, 0.52);
  touch-action: manipulation;
  transition: color 0.18s, background 0.18s;
  margin: 0 3px;
}

#tw-aerial:hover {
  color: rgba(244, 237, 229, 0.88);
  background: rgba(255, 255, 255, 0.05);
}

#tw-aerial.tw-active { color: var(--tw-gold); }

#tw-aerial svg {
  width: 24px;
  height: 24px;
}

#tw-aerial:focus-visible {
  outline: 2px solid var(--tw-gold);
  outline-offset: -2px;
  border-radius: 150px;
}

/* ── DROPDOWN CARDS ──────────────────────────────────────────────────────── */

.tw-dropdown {
  position: absolute;
  bottom: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 277.5px;
  background: rgba(12, 19, 28, 0.96);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(188, 202, 145, 0.2);
  border-radius: 24px;
  padding: 9px;
  box-shadow: 0 30px 84px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(188, 202, 145, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--tw-ease), transform 0.2s var(--tw-ease);
}

#tw-suites-dd {
  min-width: 290px;
  max-height: 62vh;
  overflow-y: auto;
}

.tw-dropdown.tw-open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.tw-dropdown-label {
  font-family: var(--tw-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.25);
  padding: 9px 21px 12px;
  display: block;
  border-bottom: 1px solid rgba(188, 202, 145, 0.1);
  margin-bottom: 6px;
}

/* Group header inside suite dropdown */
/* Empty state — shown in amenities dropdown until panos are added */
.tw-dropdown-empty {
  display: block;
  font-family: var(--tw-sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.28);
  padding: 14px 21px 18px;
  text-align: center;
}

.tw-dropdown-group-label {
  display: block;
  font-family: var(--tw-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(188, 202, 145, 0.65);
  padding: 14px 21px 5px;
}

.tw-dropdown-group-label:first-child { padding-top: 6px; }

.tw-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  font-family: var(--tw-sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(244, 237, 229, 0.55);
  background: transparent;
  border: none;
  padding: 11px 21px 11px 39px;
  border-radius: 15px;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  transition: color 0.15s, background 0.15s;
  position: relative;
}

/* Unit name — primary text in each suite item */
.tw-dd-unit-name {
  font-size: 17px;
  font-weight: 400;
  color: inherit;
  letter-spacing: 0.02em;
}

/* Metadata row: bed / bath / sqft */
.tw-dd-meta {
  display: flex;
  align-items: center;
  gap: 13px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.tw-dropdown-item:hover   .tw-dd-meta { opacity: 0.85; }
.tw-dropdown-item.tw-active .tw-dd-meta { opacity: 0.75; }

.tw-dd-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--tw-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.75);
}

.tw-dropdown-item::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--tw-gold);
  opacity: 0;
  transition: opacity 0.15s;
}

.tw-dropdown-item:hover {
  color: var(--tw-cream);
  background: rgba(255, 255, 255, 0.05);
}

.tw-dropdown-item.tw-active {
  color: var(--tw-cream);
  font-weight: 500;
}

.tw-dropdown-item.tw-active::before {
  opacity: 1;
}

.tw-dropdown-item:focus-visible {
  outline: 2px solid var(--tw-gold);
  outline-offset: -2px;
  border-radius: 15px;
}

/* ── ROOM NAME TOAST ─────────────────────────────────────────────────────── */

#tw-toast {
  position: fixed;
  bottom: 52px;
  left: 48px;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  max-width: 500px;
}

#tw-toast.tw-show {
  opacity: 1;
  transform: translateY(0);
}

.tw-toast-label {
  display: block;
  font-family: var(--tw-sans);
  font-size: clamp(22px, 1.6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-gold);
  margin-bottom: 12px;
  text-shadow: 0 1.5px 15px rgba(0,0,0,0.6);
}

.tw-toast-room {
  display: block;
  font-family: var(--tw-serif);
  font-size: clamp(54px, 4.2vw, 86px);
  font-weight: 300;
  color: var(--tw-cream);
  line-height: 1.05;
  text-shadow: 0 3px 30px rgba(0,0,0,0.55);
  letter-spacing: 0.01em;
}

.tw-toast-subtitle {
  display: block;
  font-family: var(--tw-sans);
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.52);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  margin-top: 3px;
}
.tw-toast-subtitle:empty { display: none; }

.tw-toast-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  font-family: var(--tw-sans);
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.78);
  text-shadow: 0 1.5px 12px rgba(0,0,0,0.6);
}

.tw-toast-meta-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
}

.tw-toast-meta-icon {
  color: var(--tw-gold);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-top: 0.1em; /* optically align icon with cap height of first text line */
}

.tw-toast-meta-icon svg {
  width: 30px;
  height: 30px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* Tablet — fires earlier (≤1199px) so mid-size laptops and iPads get
   a properly scaled layout before things start overlapping. */
@media (max-width: 1199px) and (min-width: 769px) {
  #tw-devon-logo-float { top: 22px; left: 26px; }
  .tw-devon-logo-img { height: 42px; }
  #tw-logo-float { top: 28px; }
  .tw-logo-svg { height: 64px; }
  #tw-cta-btn    { top: 22px; right: 22px; height: 56px; padding: 0 24px; font-size: 13.5px; }

  #tw-menu-bar   { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .tw-menu-pill  { height: 64px; padding: 0 6px; }
  .tw-menu-btn   { padding: 0 18px; height: 50px; font-size: 14px; gap: 8px; }
  .tw-menu-sep   { height: 24px; margin: 0 2px; }
  #tw-aerial     { width: 56px; height: 50px; margin: 0 2px; }

  #tw-toast      { bottom: calc(52px + env(safe-area-inset-bottom)); left: 24px; max-width: min(42vw, 420px); }
  .tw-toast-label { font-size: clamp(16px, 2vw, 20px); letter-spacing: 0.16em; margin-bottom: 9px; }
  .tw-toast-room  { font-size: clamp(36px, 5vw, 54px); }
  .tw-toast-meta  { gap: 16px; margin-top: 12px; font-size: clamp(13px, 1.4vw, 17px); }

  #tw-map-card   { bottom: calc(52px + env(safe-area-inset-bottom)); right: 22px; width: 280px; }
  #tw-map        { height: 200px; }
}

/* Mobile — all phones (portrait & landscape) and small tablets ≤768px.
   Radical layout: toast moves to top, map collapses to a circle FAB,
   menu pill goes full-width across the bottom.
   Minimum readable sizes enforced throughout — no text below 15px. */
@media (max-width: 768px) {
  /* Logos — Kira top-left (smaller), Devon hidden on mobile (shown in splash) */
  #tw-devon-logo-float { display: none; }
  #tw-logo-float { top: 16px; left: 18px; transform: none; }
  .tw-logo-svg { height: 40px; }

  /* CTA */
  #tw-cta-btn {
    top: 16px;
    right: 16px;
    height: 52px;
    min-width: 0;
    padding: 0 24px;
    font-size: 14px;
    letter-spacing: 0.12em;
  }

  /* Menu pill — full-width, generous touch targets, readable text */
  #tw-menu-bar   { bottom: calc(16px + env(safe-area-inset-bottom)); width: calc(100vw - 28px); display: flex; justify-content: center; left: 14px; right: 14px; transform: none; }
  .tw-menu-pill  { height: 66px; padding: 0 6px; max-width: 100%; }
  .tw-menu-btn   { padding: 0 18px; height: 54px; font-size: 15px; gap: 7px; letter-spacing: 0.04em; }
  .tw-menu-sep   { height: 24px; margin: 0 2px; }
  #tw-aerial     { width: 56px; height: 54px; margin: 0 2px; }
  .tw-menu-chevron { width: 12px; height: 12px; }
  .tw-menu-pill::-webkit-scrollbar { display: none; }

  /* Toast — top of screen, below the logo/CTA bar.
     Min sizes: label ≥16px, room name ≥38px, meta ≥15px. */
  #tw-toast       { bottom: auto; top: calc(100px + env(safe-area-inset-top)); left: 18px; right: 18px; max-width: none; transform: translateY(-10px); }
  #tw-toast.tw-show { transform: translateY(0); }
  .tw-toast-label { font-size: 16px; letter-spacing: 0.16em; margin-bottom: 10px; }
  .tw-toast-room  { font-size: clamp(38px, 10vw, 56px); line-height: 1.0; }
  .tw-toast-meta  { flex-direction: row; align-items: flex-start; gap: 20px; margin-top: 12px; font-size: 15px; letter-spacing: 0.08em; }
  .tw-toast-meta-item { gap: 8px; align-items: flex-start; }
  .tw-toast-meta-icon svg { width: 24px !important; height: 24px !important; }

  /* Map card → circle FAB — tap opens fullscreen modal.
     Positioned above the pill (66px tall + 16px base + 12px gap = 94px) */
  #tw-map-card {
    bottom: calc(94px + env(safe-area-inset-bottom));
    right: 18px;
    left: auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 0;
    overflow: hidden; /* clip any Mapbox overflow that could create ghost tap targets */
  }
  .tw-map-header-row { width: 100%; height: 100%; }
  .tw-map-header { width: 100%; height: 100%; padding: 0; gap: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .tw-map-header-text { display: none; }
  #tw-map-expand { display: none; }
  .tw-map-header-icon { display: flex; align-items: center; justify-content: center; }
  .tw-map-header-icon svg { width: 24px !important; height: 24px !important; stroke-width: 2.2 !important; }

  /* Hide inline map body — circle tap opens modal */
  #tw-map-body { display: none; }
  #tw-map-chevron-btn { display: none; }

  /* Kill all Mapbox ctrl elements inside the hidden preview map so they
     can't generate ghost tap targets that accidentally open Mapbox links */
  #tw-map .mapboxgl-ctrl-container,
  #tw-map .mapboxgl-ctrl-attrib,
  #tw-map .mapboxgl-ctrl-logo {
    display: none !important;
    pointer-events: none !important;
  }

  /* Splash — readable minimums: subtext ≥17px, enter button ≥17px */
  .tw-splash-inner { padding: 36px 30px; }
  .tw-splash-wordmark-img { width: clamp(170px, 46vw, 260px); margin-bottom: 14px; }
  .tw-splash-sub { font-size: 17px; letter-spacing: 0.16em; margin-top: 14px; }
  .tw-splash-location { font-size: 16px; letter-spacing: 0.12em; margin-top: 12px; }
  .tw-splash-enter {
    margin-top: 24px;
    font-size: 17px;
    padding: 20px 44px;
    min-height: 64px;
    gap: 18px;
  }
  .tw-splash-arrow { width: 22px; height: 22px; }
  .tw-splash-rule { margin: 16px auto; }
  .tw-splash-devon-wrap { bottom: 28px; gap: 9px; }
  .tw-splash-devon-img { width: clamp(100px, 28vw, 140px); }

  /* Vignettes — top vignette must cover full toast area (~280px).
     Holds opacity longer so the room name text stays readable
     even on bright white panorama backgrounds. Multi-stop for smooth falloff. */
  #tw-vignette-top {
    height: 320px;
    background: linear-gradient(to bottom,
      rgba(10, 16, 24, 0.80) 0%,
      rgba(10, 16, 24, 0.72) 18%,
      rgba(10, 16, 24, 0.54) 38%,
      rgba(10, 16, 24, 0.28) 60%,
      rgba(10, 16, 24, 0.08) 80%,
      rgba(10, 16, 24, 0.01) 92%,
      transparent 100%
    );
  }
  #tw-vignette-bottom {
    height: 200px;
    background: linear-gradient(to top,
      rgba(10, 16, 24, 0.40) 0%,
      rgba(10, 16, 24, 0.30) 22%,
      rgba(10, 16, 24, 0.16) 48%,
      rgba(10, 16, 24, 0.05) 74%,
      transparent 100%
    );
  }
  /* Toast is at the top on mobile — bottom-left vignette not needed */
  #tw-vignette-toast { display: none; }

  /* Dropdowns — .tw-menu-group is made position:static so the dropdown's
     nearest positioned ancestor becomes #tw-menu-bar (position:fixed).
     This escapes the backdrop-filter stacking/containing-block created by
     .tw-menu-pill, which was causing position:fixed children to be anchored
     to the pill instead of the viewport.
     Centred with left:50% + translateX(-50%) relative to the bar width,
     which spans the full mobile viewport (minus 14px margins each side).
     bottom: calc(100% + 14px) = pill-height + 14px gap above the bar. */
  .tw-menu-group { position: static; }
  .tw-dropdown {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 14px) !important;
    top: auto !important;
    width: auto;
    max-width: calc(100vw - 28px);
    min-width: 200px !important;
    z-index: 200 !important;
    transform: translateX(-50%) translateY(12px) !important;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px;
  }
  .tw-dropdown.tw-open {
    transform: translateX(-50%) translateY(0) !important;
  }
  .tw-dropdown-item { padding: 14px 18px 14px 30px; font-size: 16px; }
  .tw-dropdown-item::before { left: 10px; }
}

/* Compact layout for very short screens (iPhone landscape, small phones) */
@media (max-height: 680px) {
  .tw-splash-wordmark-img { width: clamp(120px, 18vw, 180px); margin-bottom: 16px; }
  .tw-splash-rule  { margin: 18px auto; }
  #tw-map          { height: 135px; }
  .tw-splash-enter { margin-top: 24px; font-size: 15px; min-height: 54px; padding: 16px 36px; }
  /* Tighten menu bar on short landscape screens but keep text readable */
  #tw-menu-bar     { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .tw-menu-pill    { height: 58px; }
  .tw-menu-btn     { height: 46px; font-size: 14px; }
  /* Reduce top vignette height in landscape so toast doesn't overlap panorama too much */
  #tw-vignette-top { height: 220px; }
}

/* ── HIDE NATIVE 3DVISTA LOAD BAR & PRELOADER ───────────────────────────── */
#viewer div[style*="height: 3px"][style*="z-index: 2"] { visibility: hidden !important; }
#preloadContainer { display: none !important; }

/* ── SUPPRESS 3DVISTA ACADEMIC WATERMARK ────────────────────────────────── */
/* The AcademicWatermark component inserts a 460×150px background-image div
   at z-index:1000 every 8s. Target it by its unique inline style combination
   so it's hidden before it can ever flash visible. */
#viewer div[style*="z-index: 1000"][style*="pointer-events: none"] {
  display: none !important;
}

/* ── BRANDED LOAD INDICATOR ─────────────────────────────────────────────── */

#tw-loader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--tw-ease);
}

#tw-loader.tw-loader-active { opacity: 1; }
#tw-loader.tw-loader-done   { opacity: 0; transition: opacity 0.3s var(--tw-ease) 0.15s; }

.tw-loader-fill {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(188,202,145,0), var(--tw-gold) 30%, var(--tw-cream) 70%, rgba(244,237,229,0));
  box-shadow: 0 0 12px rgba(188, 202, 145, 0.5);
}

/* ── MAP CARD — HEADER ROW WITH ICON BUTTONS ─────────────────────────────── */

.tw-map-header-row {
  display: flex;
  align-items: center;
}

.tw-map-header { flex: 1; }

.tw-map-iconbtn {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(244, 237, 229, 0.55);
  transition: color 0.18s, background 0.18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tw-map-iconbtn:hover       { color: var(--tw-gold); background: rgba(255, 255, 255, 0.04); }
.tw-map-iconbtn:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -4px; }

.tw-map-chevron-btn .tw-map-chevron { color: inherit; }

#tw-map-card.tw-map-collapsed .tw-map-chevron-btn .tw-map-chevron {
  transform: rotate(180deg);
}

/* ── FULLSCREEN MAP MODAL ────────────────────────────────────────────────── */

#tw-map-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s var(--tw-ease);
}

#tw-map-modal.tw-map-modal-hidden {
  opacity: 0;
  pointer-events: none;
}

.tw-map-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 26, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
}

.tw-map-modal-card {
  position: relative;
  width: 92vw;
  height: 88vh;
  max-width: 2100px;
  background: rgba(17, 24, 26, 0.95);
  border: 1px solid rgba(188, 202, 145, 0.2);
  border-radius: 24px;
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(188, 202, 145, 0.06) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(1);
  transition: transform 0.2s var(--tw-ease);
}

#tw-map-modal.tw-map-modal-hidden .tw-map-modal-card {
  transform: scale(0.96);
}

.tw-map-modal-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 21px 27px;
  border-bottom: 1px solid rgba(188, 202, 145, 0.12);
  background: rgba(17, 24, 26, 0.4);
}

.tw-map-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--tw-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.55);
  flex-shrink: 0;
}

.tw-map-modal-title .tw-map-header-icon { color: var(--tw-gold); }

.tw-map-filter {
  display: flex;
  gap: 3px;
  padding: 4.5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(188, 202, 145, 0.1);
  border-radius: 15px;
  flex: 1;
  max-width: 630px;
  overflow-x: auto;
}

.tw-map-filter-btn {
  flex: 1;
  padding: 9px 21px;
  background: transparent;
  border: none;
  border-radius: 10.5px;
  font-family: var(--tw-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.5);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.tw-map-filter-btn:hover { color: rgba(244, 237, 229, 0.85); }
.tw-map-filter-btn.tw-active {
  background: rgba(188, 202, 145, 0.16);
  color: var(--tw-gold);
}

.tw-map-modal-close {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(188, 202, 145, 0.30);
  border-radius: 15px;
  cursor: pointer;
  color: var(--tw-gold);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  flex-shrink: 0;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}

.tw-map-modal-close:hover {
  color: var(--tw-cream);
  background: rgba(188, 202, 145, 0.12);
  border-color: rgba(188, 202, 145, 0.55);
}

.tw-map-modal-body {
  position: relative;
  flex: 1;
  min-height: 0;
}

#tw-map-modal-canvas {
  position: absolute;
  inset: 0;
  background: #0d1a26;
}

#tw-map-modal-canvas .mapboxgl-ctrl-logo { opacity: 0.35; }
#tw-map-modal-canvas .mapboxgl-ctrl-attrib { font-size: 13.5px; opacity: 0.35; }

/* Modal map zoom controls — same branded dark glass as preview map */
#tw-map-modal-canvas .mapboxgl-ctrl-top-right > .mapboxgl-ctrl {
  margin: 8px 8px 0 0 !important;
}
#tw-map-modal-canvas .mapboxgl-ctrl-group {
  background: rgba(17, 24, 26, 0.88) !important;
  border: 1px solid rgba(188, 202, 145, 0.28) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#tw-map-modal-canvas .mapboxgl-ctrl-group button {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(188, 202, 145, 0.18) !important;
}
#tw-map-modal-canvas .mapboxgl-ctrl-group button:last-child {
  border-bottom: none !important;
}
#tw-map-modal-canvas .mapboxgl-ctrl-group button:hover {
  background: rgba(188, 202, 145, 0.14) !important;
}
#tw-map-modal-canvas .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
#tw-map-modal-canvas .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.tw-map-layer-toggle {
  position: absolute;
  bottom: 27px;
  left: 27px;
  z-index: 5;
  display: flex;
  gap: 3px;
  padding: 4.5px;
  background: rgba(17, 24, 26, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(188, 202, 145, 0.18);
  border-radius: 15px;
  box-shadow: 0 9px 36px rgba(0, 0, 0, 0.55);
}

.tw-map-layer-btn {
  padding: 9px 18px;
  background: transparent;
  border: none;
  border-radius: 10.5px;
  font-family: var(--tw-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.55);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s, color 0.18s;
}

.tw-map-layer-btn:hover        { color: rgba(244, 237, 229, 0.85); }
.tw-map-layer-btn.tw-active    { background: rgba(188, 202, 145, 0.16); color: var(--tw-gold); }

.tw-map-loading {
  position: absolute;
  top: 27px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 12px 24px;
  background: rgba(17, 24, 26, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(188, 202, 145, 0.2);
  border-radius: 1498.5px;
  font-family: var(--tw-sans);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--tw-ease);
}

.tw-map-loading.tw-show { opacity: 1; }

/* ── POI MARKERS + POPUP ─────────────────────────────────────────────────── */

.tw-map-poi-chip {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(17, 24, 26, 0.92);
  border: 1.5px solid rgba(188, 202, 145, 0.5);
  border-radius: 50%;
  color: var(--tw-cream);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 1.5px rgba(255, 255, 255, 0.10);
  transition: transform 0.15s var(--tw-ease), border-color 0.18s, color 0.18s, background 0.18s;
}

.tw-map-poi-chip:hover {
  transform: scale(1.18);
  border-color: var(--tw-gold);
  background: rgba(17, 24, 26, 0.98);
  color: var(--tw-gold);
}

/* Modal pin pulse — overlaid as an absolutely-positioned halo so it doesn't
   override the teardrop ::before pseudo-element. */
.tw-map-pin-large::before {
  animation: tw-pin-pulse 2.2s ease-in-out infinite;
}

/* Aerial (drone) pin — gold-filled square with drone icon + numeric badge */
.tw-map-aerial-pin {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--tw-gold);
  border: 1.5px solid rgba(17, 24, 26, 0.9);
  border-radius: 12px;
  color: var(--tw-navy-deep, #0b1520);
  cursor: pointer;
  box-shadow: 0 6px 21px rgba(0, 0, 0, 0.7), 0 0 0 4.5px rgba(188, 202, 145, 0.18);
  transition: transform 0.18s var(--tw-ease), box-shadow 0.18s;
}

.tw-map-aerial-pin:hover {
  transform: scale(1.12);
  box-shadow: 0 9px 27px rgba(0, 0, 0, 0.75), 0 0 0 7.5px rgba(188, 202, 145, 0.32);
}

.tw-map-aerial-num {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font: 700 15px/24px var(--tw-sans);
  color: var(--tw-gold);
  background: rgba(17, 24, 26, 0.96);
  border: 1px solid var(--tw-gold);
  border-radius: 15px;
  text-align: center;
  box-sizing: border-box;
}

@keyframes tw-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 9px rgba(188, 202, 145, 0.28), 0 6px 24px rgba(0, 0, 0, 0.65); }
  50%      { box-shadow: 0 0 0 21px rgba(188, 202, 145, 0.05), 0 6px 24px rgba(0, 0, 0, 0.65); }
}

.tw-map-popup-wrap .mapboxgl-popup-content {
  background: rgba(17, 24, 26, 0.96);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(188, 202, 145, 0.25);
  border-radius: 15px;
  padding: 15px 21px;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.6);
  color: var(--tw-cream);
}

.tw-map-popup-wrap .mapboxgl-popup-tip { display: none; }

.tw-map-poi-popup .tw-map-poi-cat {
  font-family: var(--tw-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-gold);
}

.tw-map-poi-popup .tw-map-poi-name {
  font-family: var(--tw-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--tw-cream);
  margin-top: 3px;
  line-height: 1.25;
  max-width: 330px;
}

.tw-map-poi-popup .tw-map-poi-dist {
  font-family: var(--tw-sans);
  font-size: 15px;
  color: rgba(244, 237, 229, 0.55);
  margin-top: 6px;
}

/* Prevent body scroll while modal is open */
body.tw-modal-open { overflow: hidden; }

/* ── RESPONSIVE — MODAL ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Map modal — full bleed */
  .tw-map-modal-card {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    border-radius: 0;
  }
  .tw-map-modal-topbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  }
  .tw-map-modal-title { order: 1; flex: 1; font-size: 12px; gap: 8px; min-width: 0; }
  .tw-map-modal-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tw-map-modal-close { order: 2; width: 44px; height: 44px; }
  .tw-map-filter { order: 3; flex-basis: 100%; max-width: none; }
  .tw-map-filter-btn { padding: 9px 14px; font-size: 12.5px; }
  .tw-map-layer-toggle { bottom: calc(18px + env(safe-area-inset-bottom)); left: 18px; padding: 4px; }
  .tw-map-layer-btn { padding: 8px 14px; font-size: 12.5px; }
  .tw-map-popup-wrap .mapboxgl-popup-content { max-width: calc(100vw - 60px); }
  .tw-map-poi-popup .tw-map-poi-name { font-size: 19px; max-width: 240px; }

}

/* ── PANO-ANCHORED HOTSPOT OVERLAY ───────────────────────────────────────── */

#tw-hotspot-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 120;
  overflow: hidden;
}

.tw-hotspot-pin {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
  cursor: default;
  opacity: 0;
  transition: opacity 0.18s var(--tw-ease);
  user-select: none;
  transform: translate(-14998.5px, -14998.5px);
}

.tw-hotspot-dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--tw-gold);
  border: 2px solid rgba(17, 24, 26, 0.92);
  box-shadow: 0 0 0 6px rgba(188, 202, 145, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.55);
  animation: tw-hotspot-pulse 2.6s ease-in-out infinite;
}

@keyframes tw-hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(188, 202, 145, 0.22), 0 6px 18px rgba(0, 0, 0, 0.55); }
  50%      { box-shadow: 0 0 0 12px rgba(188, 202, 145, 0.05), 0 6px 18px rgba(0, 0, 0, 0.55); }
}

.tw-hotspot-label {
  font-family: var(--tw-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-cream, #f4ece0);
  background: rgba(17, 24, 26, 0.78);
  border: 1px solid rgba(188, 202, 145, 0.32);
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 21px rgba(0, 0, 0, 0.45);
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tw-splash-wordmark-img,
  .tw-splash-sub,
  .tw-splash-rule,
  .tw-splash-location,
  .tw-splash-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .tw-ui-el,
  #tw-toast,
  .tw-dropdown,
  .tw-splash-enter,
  .tw-menu-chevron,
  #tw-map-body,
  .tw-map-chevron,
  #tw-loader,
  .tw-loader-fill,
  #tw-map-modal,
  .tw-map-modal-card,
  .tw-map-poi-chip,
  .tw-map-pin-large,
  .tw-map-aerial-pin,
  .tw-hotspot-pin,
  .tw-hotspot-dot { transition: none; animation: none; }
  .tw-loader-fill { transform: scaleX(1); }
}