/* =========================================================
   GLOBAL SCROLLBARS (UNCHANGED)
========================================================= */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(193, 190, 190, 0.558);
  border-radius: 10px;
}
#galleryItemsList::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
#galleryItemsList::-webkit-scrollbar-thumb {
  background-color: #3b82f6;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* =========================================================
   GOOGLE MAP INFO WINDOW (MATCHING BG THEME)
========================================================= */
.gm-style .gm-style-iw-c {
  background: radial-gradient(circle at center, #0B2A44 0%, #05101A 100%) !important;
  backdrop-filter: blur(10px);
  border-radius: 16px !important;
  border: 1.5px solid rgba(147, 197, 253, 0.3) !important;
  padding: 0 !important;
  max-width: 300px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; color: white !important; }
.gm-style .gm-style-iw-tc { display: none !important; }

/* =========================================================
   WEBVERSE FILTER PANEL & PILLS (BLUE SHADE FAMILY)
========================================================= */

/* Border Cleanup */
#webverseFilters, #webverseFilters * {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- THE NORMAL BUTTON (UNSELECTED) --- */
#webverseFilters ul li {
  /* Matching background shade */
  background: rgba(11, 42, 68, 0.6) !important;
  
  /* Lighter Blue Shade for text/icons as requested */
  color: #93c5fd !important; 
  
  border: 1px solid rgba(147, 197, 253, 0.15) !important;
  border-radius: 10px;
  padding: 5px 10px !important;
  font-size: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

/* Square chips (floor / unit grid items) get their own compact footprint
   instead of the default h-10 w-10 assigned in JS */
#webverseFilters .floors li,
#webverseFilters .units li {
  height: 30px !important;
  width: 30px !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1.1;
}

/* Hover State for Unselected */
#webverseFilters ul li:hover {
  background: rgba(147, 197, 253, 0.1);
  color: #ffffff !important;
  border-color: rgba(147, 197, 253, 0.4) !important;
}
#webverseFilters ul li[aria-selected="true"],
#webverseFilters .units li[aria-selected="true"],
#webverseFilters .units li.active {

  /* Noticeable hue shift (navy → blue-cyan) */
  background: linear-gradient(
    145deg,
    #1A4E82,
    #0E3A5C
  ) !important;

  /* Brighter text */
  color: #ffffff !important;
  font-weight: 600;

  /* Inner glow ring (this is key) */
  border: 1px solid rgba(147, 197, 253, 0.6) !important;

  /* Lift + soft glow */
  box-shadow:
    0 8px 20px rgba(14, 58, 92, 0.8),
    inset 0 0 0 1px rgba(191, 219, 254, 0.25) !important;

  transform: translateY(-1px);
}

/* =========================================================
   COMPACT FILTER PANEL — ACCORDION SECTIONS
   (Each filter group is a <details>/<summary> so the user
   can collapse groups they don't need — keeps the panel
   short even with many filter categories.)
========================================================= */
#webverseFilters details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 9px;
}
#webverseFilters details:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#webverseFilters details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 0;
  user-select: none;
}
#webverseFilters details > summary::-webkit-details-marker { display: none; }
#webverseFilters details > summary::marker { content: ""; }

/* Chevron indicator */
#webverseFilters details > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  margin-left: 8px;
  border-right: 1.5px solid #93c5fd;
  border-bottom: 1.5px solid #93c5fd;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
#webverseFilters details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* =========================================================
   FLOOR SECTION LOGIC
========================================================= */
#webverseFilters #floor .floors {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 6px;
  max-height: 40px;
  padding: 2px 2px;
  transition: max-height 0.35s ease;
}
#webverseFilters #floor .floors::-webkit-scrollbar { display: none; }
#webverseFilters #floor.expanded .floors { flex-wrap: wrap; max-height: 500px; }

/* Keep every floor/unit chip a fixed, uniform size instead of letting
   flexbox squash them when the row scrolls horizontally */
#webverseFilters .floors li,
#webverseFilters .units li {
  flex-shrink: 0;
}

/* Soft fade on the right edge of the collapsed floor row so the cut-off
   feels intentional (a "there's more, scroll →" cue) instead of abrupt */
#webverseFilters #floor:not(.expanded) .floors {
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}

.floor-toggle {
  margin-top: 4px;
  font-size: 11px;
  color: #60a5fa;
  cursor: pointer;
  align-self: flex-end;
}

/* =========================================================
   MISC UI SECTIONS
========================================================= */
#webverseFilters #note > div { 
  border: 1px solid rgba(96, 165, 250, 0.3); 
  background: rgba(11, 42, 68, 0.4);
}

#webverseTowerLabel { display: none !important; }

/* Mobile Rotation Overlay */
.device-rotation {
  display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .device-rotation { display: flex; }
}

/* =========================================================
   FILTER PANEL — SMALL SCREEN TUNING
   (Shrinks further on narrow phones so it never eats more
   than a small corner of the viewport, and stays reachable
   with one thumb.)
========================================================= */
@media screen and (max-width: 400px) {
  #webverseFilterBtn {
    top: 52px !important;
    left: 6px !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
  }
  #webverseFilters {
    width: 152px !important;
    top: 88px !important;
    left: 6px !important;
    max-height: min(380px, calc(100vh - 106px)) !important;
    border-radius: 12px !important;
  }
  #webverseFilters ul li {
    padding: 4px 7px !important;
    font-size: 9.5px !important;
  }
  #webverseFilters .floors li,
  #webverseFilters .units li {
    height: 24px !important;
    width: 24px !important;
    font-size: 8.5px !important;
  }
  #webverseFilters details > summary {
    font-size: 9px;
  }
}

/* Short/landscape phones: cap height by viewport instead of a fixed px value */
@media screen and (max-height: 480px) {
  #webverseFilters {
    top: 8px !important;
    left: 8px !important;
    max-height: calc(100vh - 16px) !important;
  }
}

/* =========================================================
   FILTER PANEL — CLEAN OPEN/CLOSE
   The JS only toggles Tailwind's "-translate-x-full" class.
   Without a transition it just snaps away, which reads as the
   card "jumping" left instead of closing. This animates that
   same class smoothly and fades/disables it while off-screen
   so it can't be clicked while hidden.
========================================================= */
#webverseFilters {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
}
#webverseFilters.-translate-x-full {
  opacity: 0;
  pointer-events: none;
}
/* 1. Prevent the white flash on all section containers */
#home, #webverse, #interior, #floorPlans, #unitPlans, #amenities, #about, #exterior, #gallery, #brochure {
    background-color: #050b18 !important; /* Matches your theme */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s ease-out;
}

/* 2. Create a "Neat" Entrance Animation */
.section-entrance {
    animation: slideUpFade 0.7s forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Smooth out the interior list cards */
#interiorsList li {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Active state for Status Buttons */
.availability li.active {
    background: linear-gradient(to bottom right, rgb(2, 62, 101), rgb(62, 122, 161)) !important;
    border-color: white !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

/* Ensure Status Buttons show the active "Blue Pill" state */
#availabilityFilter ul.availability li.active {
    background: linear-gradient(145deg, #1A4E82, #0E3A5C) !important;
    color: #ffffff !important;
    font-weight: 600;
    border: 1px solid rgba(147, 197, 253, 0.6) !important;
    box-shadow: 0 8px 20px rgba(14, 58, 92, 0.8), 
                inset 0 0 0 1px rgba(191, 219, 254, 0.25) !important;
    transform: translateY(-1px);
}

/* Optional: remove the border on the dot if the whole pill is highlighted */
#availabilityFilter ul.availability li.active span {
    border: 1px solid rgba(255,255,255,0.4);
}

/* Floor Picker Grid Items */
#floorGrid li {
    height: 36px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f3f4f6;
    color: #1f2937;
    list-style: none;
}

#floorGrid li:hover {
    background-color: #e5e7eb;
}

#floorGrid li.active {
    background-color: #0f172a; /* Dark Navy active color */
    color: white;
}

/* Scrollbar for the Floor Popup */
.popup-scrollbar::-webkit-scrollbar { width: 4px; }
.popup-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }

/* Force show class for Mobile/Touch devices */
.floor-picker-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Ensure SVG interaction */
#floorSvg svg * {
    pointer-events: all;
}

/* Custom Theme for the 360° View Button */
#unitPlanVirtualTourLink {
    background: rgba(0, 255, 255, 0.1) !important; /* Low opacity cyan tint */
    border: 1px solid rgba(0, 255, 255, 0.4) !important; /* Cyan border */
    color: #00FFFF !important; /* Cyan text */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.1);
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.3s ease !important;
}

#unitPlanVirtualTourLink:hover {
    background: rgba(0, 255, 255, 0.2) !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    transform: translateY(-2px);
    border-color: #00FFFF !important;
}

/* Custom scrollbar for the details panel if content overflows */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* Optional: Subtle entrance animation */
.panel-entrance {
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.section-entrance {
    animation: panelPop 0.3s ease-out forwards;
}

@keyframes panelPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Fix for background blur transition */
#projectDetailsPanel.flex {
    display: flex !important;
}

/* =========================================================
   VIEW / CLOSE SPECIFICATIONS BUTTON
   Same DOM button in both states (JS just swaps the label +
   icon between fa-list/fa-xmark). Redesigned with a left accent
   bar + a ringed icon badge, so each state reads as a distinct,
   deliberate look rather than just a background-colour swap.
========================================================= */
#specificationsPanelOpenBtn {
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
#specificationsPanelOpenBtn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
#specificationsToggleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  font-size: 10px !important;
  border: 1.5px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* "View Specifications" state — cool steel-blue */
#specificationsPanelOpenBtn:has(.fa-list)::before {
  background-color: #38bdf8;
}
#specificationsPanelOpenBtn:has(.fa-list) #specificationsToggleIcon {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
}

/* "Close Specifications" state — deep rose/garnet instead of the
   earlier amber, reads as a clear dismiss action without red's alarm */
#specificationsPanelOpenBtn:has(.fa-xmark) {
  background-color: rgba(190, 24, 93, 0.10) !important;
  border-color: rgba(190, 24, 93, 0.3) !important;
}
#specificationsPanelOpenBtn:has(.fa-xmark)::before {
  background-color: #be185d;
}
#specificationsPanelOpenBtn:has(.fa-xmark) #specificationsToggleIcon {
  background: rgba(190, 24, 93, 0.22);
  border-color: rgba(244, 114, 182, 0.55);
  color: #f472b6;
}
#specificationsPanelOpenBtn:has(.fa-xmark) #specificationsToggleLabel {
  color: #f9a8d4;
}
#specificationsPanelOpenBtn:has(.fa-xmark):hover {
  background-color: rgba(190, 24, 93, 0.16) !important;
}


/* This ensures the white background doesn't block the click events of the text buttons */
#svgTypePill, #viewTypePill {
    pointer-events: none !important;
    z-index: 5;
}

.svgTypeToggleBtn, .viewTypeToggleBtn {
    z-index: 10;
    position: relative;
    cursor: pointer;
}

.popup-scrollbar::-webkit-scrollbar{
width:3px;
}

.popup-scrollbar::-webkit-scrollbar-thumb{
background:#3b82f6;
border-radius:10px;
}

.popup-scrollbar::-webkit-scrollbar-track{
background:transparent;
}

.floor-active{
background:#111827;
color:white;
}

/* =========================================================
   FEATURES / MENU PANEL — CLEARER ICON AFFORDANCE
   The resting icon circles are now a visible frosted glass
   (bg-white/8 + border) rather than blending into the dark
   panel; the active item gets a soft blue glow ring so it's
   obvious which section you're on.
========================================================= */
/* =========================================================
   FEATURES / MENU PANEL — MATCHES REFERENCE LOOK
   Solid dark circles with a subtle border at rest; the active
   item gets a glowing cyan ring + cyan icon + an underline
   beneath its label, matching the target screenshot.
========================================================= */
#features {
  width: 92px !important;
  background: linear-gradient(180deg, rgba(10,14,22,0.96) 0%, rgba(5,8,13,0.98) 100%) !important;
}

#features ul.features {
  gap: 26px !important;
}

/* Icon circle: solid dark disc with a two-tone "beveled" ring — a bright
   highlight along the top-left edge fading to a darker shade at the
   bottom-right, like light catching a metallic/glass rim. This reads as
   a premium, tactile button rather than a flat outlined circle. */
#features ul.features > li div {
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.35),   /* bright edge, top-left */
    inset -1.5px -1.5px 2px rgba(0, 0, 0, 0.55),        /* dull edge, bottom-right */
    0 3px 8px rgba(0, 0, 0, 0.35);                      /* outer lift */
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

#features ul.features > li div svg,
#features ul.features > li div img {
  width: 20px !important;
  height: 20px !important;
}

/* Neutralize the old blue-gradient hover preview on inactive items —
   hover now gets the same restrained ring treatment as active, just dimmer */
#features ul.features > li:hover div:not([class~="from-[rgb(2,62,101)]"]) {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

/* Active state: dark disc stays, but gets a glowing cyan ring + cyan icon */
#features ul.features > li div[class~="from-[rgb(2,62,101)]"] {
  background: rgba(56, 189, 248, 0.10) !important;
  background-image: none !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14), 0 0 18px rgba(56, 189, 248, 0.55);
}
#features ul.features > li div[class~="from-[rgb(2,62,101)]"] svg path,
#features ul.features > li div[class~="from-[rgb(2,62,101)]"] svg circle,
#features ul.features > li div[class~="from-[rgb(2,62,101)]"] svg rect {
  fill: #38bdf8 !important;
}

/* Label: smaller, wider letter-spacing, lighter weight — reads as a
   refined caption rather than plain body text */
#features ul.features > li p {
  position: relative;
  font-size: 9px !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease;
  margin: 0;
  padding-bottom: 6px;
}

#features ul.features > li:hover p {
  color: rgba(255, 255, 255, 0.9);
}

/* Active item's label — cyan + bolder + underline, matching the reference */
#features ul.features > li div[class~="from-[rgb(2,62,101)]"] + p {
  color: #38bdf8;
  font-weight: 600;
}
#features ul.features > li div[class~="from-[rgb(2,62,101)]"] + p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

/* Slightly smaller close button to match the narrower, lighter panel */
#featurePanelCloseBtn {
  height: 30px !important;
  width: 30px !important;
}
#featurePanelCloseBtn i {
  font-size: 12px !important;
}

#unitFloorGrid li,
#unitFlatGrid li{
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
height:28px;
border-radius:6px;
background:#f3f4f6;
font-weight:600;
font-size:12px;
color:#374151;
transition:all .2s ease;
}

#floorsOptions li,
#floorGrid li {
  height: 30px !important;
  font-size: 12px !important;
}

#unitFloorGrid li:hover,
#unitFlatGrid li:hover{
background:#e5e7eb;
}

#unitFloorGrid li.floor-active,
#unitFlatGrid li.floor-active{
background:#111827 !important;
color:white !important;
}

#unitFloorGrid li.floor-active:hover,
#unitFlatGrid li.floor-active:hover{
background:#111827 !important;
}

#unitFloorPopup::after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:50%;
    transform:translateX(-50%);
    border-width:8px;
    border-style:solid;
    border-color:#ffffff transparent transparent transparent;
}

/* --- PREMIUM REFINED EXPERIENCE PANEL (vertical, right-side day/night scrubber) ---
   Visibility (hidden ⇄ flex) is handled entirely by the existing
   Tailwind classList toggles in script.js — no display override needed here. */

#timeMeter {
    /* Width/height come from Tailwind (w-6 = a comfortable 24px drag target);
       this just needs to stay a positioning context for its children and
       behave well for mouse/touch dragging. */
    position: relative;
    overflow: visible !important; /* Vital for the dot to sit "on" the line */
    touch-action: none; /* Stops the page from trying to scroll while dragging on touch/trackpad */
}

#timeMeterFill {
    position: absolute;
    top: 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #D8B75B 0%, #9ABBE6 100%);
}

#timeMeterDot {
    position: absolute;
    left: 50%;
    top: 0%; /* This is updated by your JS */
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    /* Centering Logic: Moves the ball back by half its width/height */
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    z-index: 100;
    pointer-events: none; /* Let clicks pass through to the wider track for better UX */
}

#timeIndicator {
    pointer-events: none;
}
/* =========================================================
   VIEW MODE CONTROLS (Floor/Apartment, Spin/Top View,
   Day-Night Experience) — PREMIUM THEME
   These were a flat bg-black/60 + faint white border, which
   all but disappears against a dark night-mode background.
   Given the same blue-tinted bevel + glow as the menu panel
   and home dock so they read as buttons in any lighting.
========================================================= */
#floorApartmentWrap,
#spinTopWrap,
#experienceModeBtn {
  background: rgba(8, 14, 24, 0.78) !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  box-shadow:
    inset 1px 1px 2px rgba(147, 197, 253, 0.22),
    inset -1px -1px 2px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(56, 189, 248, 0.16),
    0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

#experienceModeBtn:hover {
  
  border-color: rgba(56, 189, 248, 0.7) !important;
}

/* Active pill gets a touch of the same blue glow blended with its
   existing white glow, so it feels part of the same premium family */
#svgTypePill,
#viewTypePill {
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.55),
    0 0 20px rgba(255, 255, 255, 0.22),
    0 0 16px rgba(56, 189, 248, 0.35) !important;
}