*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #0a0c0f;
  --surface: #13161c;
  --surface-alt: #1a1e26;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f4f4f5;
  --text-muted: #9ca3af;
  --accent: #c9a962;
  --accent-glow: rgba(201, 169, 98, 0.35);
  --available: #22c55e;
  --pending: #f59e0b;
  --sold: #ef4444;
  --coming-soon: #8b5cf6;
}

html,
body {
  height: 100%;
  font-family: "Outfit", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ─── ZOOM CONTAINER ─── */
#zoom-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  z-index: 1;
  /* perspective: 1400px; */
}

#zoom-container.dragging {
  cursor: grabbing;
}

#map-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}



/* =============================================================
MAP PINS
Property, Amenity and Unit overlays
============================================================= */


/* =============================================================
BASE PIN / OPENSEADRAGON ANCHOR

OpenSeaDragon positions .pin at the map coordinate.
The element itself has no dimensions; .pin-inner is centered
on that coordinate.
============================================================= */

.pin {
    position: relative;

    width: 0;
    height: 0;

    z-index: 10;

    pointer-events: auto;
    cursor: pointer;

    opacity: 1;

    transition:
        opacity 0.22s ease;

    will-change: opacity;
}


/*
 * Used when a pin needs to be completely hidden without
 * removing the OpenSeaDragon overlay.
 */
.pin.hidden {
    opacity: 0;
    pointer-events: none;
}


/* =============================================================
PIN CONTENT
============================================================= */

.pin-inner {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*
     * Center the visual pin on the OpenSeaDragon coordinate.
     */
    transform:
        translate(-50%, -50%)
        translateY(0)
        scale(1);

    transform-origin: center;

    pointer-events: auto;

    transition:
        transform 0.22s ease,
        opacity 0.22s ease;

    will-change: transform, opacity;
}


/* Desktop hover lift */

@media (hover: hover) and (pointer: fine) {

    .pin:hover .pin-inner {
        transform:
            translate(-50%, -50%)
            translateY(-2px)
            scale(1.03);
    }
}


/* =============================================================
MARKER
============================================================= */

.pin-marker {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: #c9a962;

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* Marker hover */

@media (hover: hover) and (pointer: fine) {

    .pin:hover .pin-marker {
        transform: scale(1.05);

        box-shadow:
            0 0 0 4px rgba(201, 169, 98, 0.14),
            0 8px 18px rgba(0, 0, 0, 0.28);
    }
}


/* =============================================================
MARKER ICON
============================================================= */

.pin-marker svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: #fff;
    stroke-width: 2;
}


.pin-custom-icon {
    display: block;

    width: 24px;
    height: 24px;

    object-fit: contain;
}


/* =============================================================
PIN LABEL
============================================================= */

.pin-label {
    margin-top: 7px;

    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;

    background: rgba(12, 12, 12, 0.88);
    color: #fff;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
    text-align: center;

    opacity: 0.88;

    pointer-events: none;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.16);

    transform: translateY(0);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}


/* =============================================================
PROPERTY PINS
============================================================= */

.property-pin {
    z-index: 20;
}


/*
 * Active property rises above surrounding pins.
 *
 * JS adds .is-active on mouseenter and removes it on
 * mouseleave, so preserve this state.
 */
.property-pin.is-active {
    z-index: 999;
}


/*
 * Larger invisible interaction area.
 */
.property-pin::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 56px;
    height: 56px;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: transparent;
}


/* Active property label */

.property-pin.is-active .pin-label {
    opacity: 1;
    transform: translateY(-1px);
}


/* =============================================================
PROPERTY AVAILABLE-UNITS CHIP
============================================================= */

.pin-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    margin-top: 6px;

    padding: 7px 10px;

    border-radius: 999px;

    background: #af8f4a;
    color: #fff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
    text-align: center;

    /*
     * JS currently adds/removes .visible.
     * Keep the chip in the layout so existing behaviour
     * remains unchanged.
     */
    opacity: 1;

    transform: translateY(0) scale(1);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.18);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}


/*
 * JS adds .visible on property hover/click.
 * This selector is intentionally retained for compatibility.
 */
.pin-chip.visible,
.property-pin.is-active .pin-chip {
    opacity: 1;

    transform:
        translateY(-1px)
        scale(1.02);
}


/* =============================================================
AMENITY PINS
============================================================= */

.amenity-pin {
    z-index: 18;
}


.amenity-pin .pin-marker {
    width: 34px;
    height: 34px;

    background: #4DB3D0;

    border: 2px solid #fff;

    box-shadow:
        0 0 0 3px rgba(47, 128, 237, 0.22),
        0 6px 14px rgba(0, 0, 0, 0.25);
}


/* Amenity active / hover */

.amenity-pin.is-active .pin-marker {
    background: #4DB3D0;

    box-shadow:
        0 0 0 5px rgba(47, 128, 237, 0.22),
        0 8px 18px rgba(0, 0, 0, 0.30);
}


@media (hover: hover) and (pointer: fine) {

    .amenity-pin:hover .pin-marker {
        background: #4DB3D0;

        box-shadow:
            0 0 0 5px rgba(47, 128, 237, 0.22),
            0 8px 18px rgba(0, 0, 0, 0.30);
    }
}


/* =============================================================
UNIT PINS

JS controls unit visibility with .zoom-visible.
============================================================= */

.unit-pin {
    z-index: 8;

    pointer-events: none;
}


.unit-pin.zoom-visible {
    pointer-events: auto;
}


/*
 * Unit pin uses the same centered coordinate geometry as
 * every other pin. Only visibility and scale change here.
 */
.unit-pin .pin-inner {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.55);

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}


.unit-pin.zoom-visible .pin-inner {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* Unit marker */

.unit-pin .pin-marker {
    width: 30px;
    height: 30px;

    background: rgba(12, 12, 12, 0.86);
}


.unit-pin .pin-marker svg {
    width: 14px;
    height: 14px;
}


/* Unit label */

.unit-pin .pin-label {
    margin-top: 5px;

    padding: 5px 8px;

    font-size: 11px;

    opacity: 0;

    transform: translateY(4px);
}


.unit-pin.is-active .pin-label {
    opacity: 1;
    transform: translateY(0);
}


@media (hover: hover) and (pointer: fine) {

    .unit-pin:hover .pin-label {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =============================================================
PINS — RESPONSIVE
============================================================= */

@media (max-width: 767px) {

    /* ---------------------------------------------------------
    PROPERTY PINS
    --------------------------------------------------------- */

    .property-pin .pin-marker {
        width: 34px;
        height: 34px;
    }

    /* ---------------------------------------------------------
    UNIT PINS
    Units remain slightly smaller than primary map pins.
    --------------------------------------------------------- */

    .unit-pin .pin-marker {
        width: 28px;
        height: 28px;
    }


    /* ---------------------------------------------------------
    LABELS
    --------------------------------------------------------- */

    .pin-label {
        padding: 5px 8px;

        font-size: 11px;
        line-height: 1;
    }


    /* ---------------------------------------------------------
    AVAILABLE UNIT COUNT CHIP
    --------------------------------------------------------- */

    .pin-chip {
        padding: 6px 8px;

        font-size: 10px;
        line-height: 1;
    }
}


/* =============================================================
TOOLTIP
============================================================= */

#tooltip {
    position: fixed;
    z-index: 200;

    width: 280px;

    overflow: hidden;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;

    opacity: 0;
    pointer-events: auto;

    transform: translate(-50%, -110%);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#tooltip.visible {
    opacity: 1;
}


/* -------------------------------------------------------------
Tooltip image
------------------------------------------------------------- */

.tip-hero {
    width: 100%;
    height: 140px;

    background-position: center;
    background-size: cover;
}


/* -------------------------------------------------------------
Tooltip content
------------------------------------------------------------- */

.tip-body {
    padding: 12px 14px;
}

.tip-name {
    margin-bottom: 2px;

    font-family: "Playfair Display", serif;
    font-size: 1rem;
    font-weight: 500;
}

.tip-price {
    margin-bottom: 8px;

    color: var(--accent);

    font-size: 0.85rem;
    font-weight: 600;
}


/* -------------------------------------------------------------
Tooltip stats
------------------------------------------------------------- */

.tip-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;

    margin-bottom: 10px;
}

.tip-stat {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.tip-stat strong {
    color: var(--text);
    font-weight: 500;
}


/* -------------------------------------------------------------
Tooltip footer
------------------------------------------------------------- */

.tip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-top: 8px;

    border-top: 1px solid var(--border);
}

.tip-edit {
    color: var(--accent);

    font-size: 0.7rem;

    cursor: pointer;

    transition: opacity 0.2s ease;
}

.tip-edit:hover {
    opacity: 0.7;
}

.tip-hint {
    color: var(--text-muted);
    font-size: 0.65rem;
}


/* =============================================================
DETAIL PANEL
============================================================= */

#panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;

    background: rgba(0, 0, 0, 0.6);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.35s ease;
}

#panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}


#detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 350;

    display: flex;
    flex-direction: column;

    width: 420px;
    max-width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--surface);
    border-left: 1px solid var(--border);

    transform: translateX(100%);

    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#detail-panel.open {
    transform: translateX(0);
}


/* =============================================================
STATUS COLOURS
============================================================= */

.status-available,
.status-pending {
    color: #000;
}

.status-sold,
.status-coming-soon {
    color: #fff;
}

.status-available {
    background: var(--available);
}

.status-pending {
    background: var(--pending);
}

.status-sold {
    background: var(--sold);
}

.status-coming-soon {
    background: var(--coming-soon);
}


/* =============================================================
PANEL GALLERY
============================================================= */

.panel-gallery {
    position: relative;

    flex-shrink: 0;

    height: 240px;

    overflow: hidden;
}


/* -------------------------------------------------------------
Gallery track / slides
------------------------------------------------------------- */

.panel-gallery-track {
    display: flex;

    height: 100%;

    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-gallery-slide {
    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    background-position: center;
    background-size: cover;
}

.panel-gallery-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* -------------------------------------------------------------
Gallery navigation
------------------------------------------------------------- */

.panel-gallery-nav,
.panel-close {
    position: absolute;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    background: rgba(0, 0, 0, 0.5);
    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    font-size: 1.2rem;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}


.panel-gallery-nav {
    top: 50%;

    transform: translateY(-50%);
}

.panel-gallery-nav.prev {
    left: 12px;
}

.panel-gallery-nav.next {
    right: 12px;
}

.panel-gallery-nav:hover,
.panel-close:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

.panel-gallery-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* -------------------------------------------------------------
Gallery close
------------------------------------------------------------- */

.panel-close {
    top: 12px;
    right: 12px;

    color: var(--text);
}


/* -------------------------------------------------------------
Gallery dots
------------------------------------------------------------- */

.panel-gallery-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 10;

    display: flex;
    gap: 8px;

    transform: translateX(-50%);
}

.panel-gallery-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    background: rgba(255, 255, 255, 0.4);

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.panel-gallery-dot.active {
    background: #fff;
    transform: scale(1.2);
}

.panel-gallery-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.7);
}


/* -------------------------------------------------------------
Gallery counter
------------------------------------------------------------- */

.panel-gallery-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;

    padding: 4px 10px;

    background: rgba(0, 0, 0, 0.5);
    color: #fff;

    border-radius: 12px;

    font-size: 0.7rem;

    backdrop-filter: blur(8px);
}


/* -------------------------------------------------------------
Gallery status
------------------------------------------------------------- */

.panel-status {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;

    padding: 6px 14px;

    border-radius: 9999px;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* =============================================================
PANEL BODY
============================================================= */

.panel-body {
    flex: 1;
    min-height: 0;

    padding: 24px;

    overflow-y: auto;
}


/* -------------------------------------------------------------
Property heading
------------------------------------------------------------- */

.panel-name {
    margin-bottom: 4px;

    font-family: "Playfair Display", serif;
    font-size: 1.75rem;
    font-weight: 500;
}

.panel-zone {
    margin-bottom: 16px;

    color: var(--text-muted);
    font-size: 0.85rem;
}

.panel-price {
    margin-bottom: 24px;

    color: var(--accent);

    font-size: 1.5rem;
    font-weight: 600;
}


/* =============================================================
PANEL DOCUMENT LINKS
============================================================= */

.panel-floorplan,
.panel-design-guidelines {
    margin-bottom: 16px;
}


.panel-pdfs {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin: 20px 0 12px;
}


.floorplan-btn,
.design-btn,
.floorplan-btn:visited,
.design-btn:visited {
    display: inline;

    margin: 0 0 20px;
    padding: 0;

    background: none;
    color: var(--accent);

    border: 0;
    border-radius: 0;

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: underline;
    text-underline-offset: 2px;

    cursor: pointer;
}

.floorplan-btn:hover,
.design-btn:hover {
    opacity: 0.8;
}

.floorplan-btn:focus-visible,
.design-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}


/* =============================================================
PANEL SECTIONS
============================================================= */

.panel-section-title {
    margin-bottom: 12px;

    color: var(--text-muted);

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* -------------------------------------------------------------
Property stats
------------------------------------------------------------- */

.panel-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 24px;
}

.panel-stat {
    padding: 14px;

    background: var(--surface-alt);

    border: 1px solid var(--border);
    border-radius: 10px;
}

.panel-stat-value {
    margin-bottom: 2px;

    font-size: 1.1rem;
    font-weight: 600;
}

.panel-stat-label {
    color: var(--text-muted);
    font-size: 0.75rem;
}


/* -------------------------------------------------------------
Description
------------------------------------------------------------- */

.panel-desc {
    margin-bottom: 24px;

    color: var(--text-muted);

    font-size: 0.9rem;
    line-height: 1.7;
}


/* =============================================================
PANEL CTA
============================================================= */

.panel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 14px;

    background: var(--accent);
    color: var(--bg);

    border: 0;
    border-radius: 10px;

    font-size: 0.95rem;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: background 0.2s ease;
}

.panel-cta:hover {
    background: #d4b66d;
}


/* =============================================================
AVAILABLE UNITS
============================================================= */

.panel-units {
    margin-bottom: 24px;
}

.panel-units-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* -------------------------------------------------------------
Unit card
------------------------------------------------------------- */

.panel-unit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 12px 14px;

    background: var(--surface-alt);

    border: 1px solid var(--border);
    border-radius: 10px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.panel-unit-item:hover {
    background: rgba(201, 169, 98, 0.05);
    border-color: var(--accent);
}


/* -------------------------------------------------------------
Unit information
------------------------------------------------------------- */

.panel-unit-left {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.panel-unit-status {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.panel-unit-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.panel-unit-details {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.panel-unit-right {
    flex-shrink: 0;

    text-align: right;
}

.panel-unit-price {
    color: var(--accent);

    font-size: 0.9rem;
    font-weight: 600;
}


/* -------------------------------------------------------------
Unit status badge
------------------------------------------------------------- */

.panel-unit-badge {
    display: inline-block;

    margin-top: 4px;
    padding: 2px 8px;

    border-radius: 10px;

    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.panel-unit-badge.available,
.panel-unit-badge.pending {
    color: #000;
}

.panel-unit-badge.sold,
.panel-unit-badge.coming-soon {
    color: #fff;
}

.panel-unit-badge.available {
    background: var(--available);
}

.panel-unit-badge.pending {
    background: var(--pending);
}

.panel-unit-badge.sold {
    background: var(--sold);
}

.panel-unit-badge.coming-soon {
    background: var(--coming-soon);
}


/* =============================================================
UNIT NAVIGATION
============================================================= */

.panel-unit-nav {
    order: -1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 30px;
}


/* -------------------------------------------------------------
Previous / next / back links
------------------------------------------------------------- */

.panel-unit-prev,
.panel-unit-next,
.panel-back-property {
    appearance: none;

    padding: 0;

    background: none;
    color: #c9a55a;

    border: 0;

    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;

    cursor: pointer;

    transition: opacity 0.2s ease;
}

.panel-unit-prev,
.panel-unit-next {
    letter-spacing: 0.02em;
}

.panel-unit-prev:hover,
.panel-unit-next:hover,
.panel-back-property:hover {
    opacity: 0.75;
}

.panel-unit-prev:disabled,
.panel-unit-next:disabled,
.panel-unit-nav button:disabled {
    opacity: 0.35;

    cursor: not-allowed;
    text-decoration: none;
}

.panel-unit-prev:focus-visible,
.panel-unit-next:focus-visible,
.panel-back-property:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* =============================================================
UNITS SIDEBAR
============================================================= */

#units-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 350;

    display: flex;
    flex-direction: column;

    width: 340px;
    max-width: 85%;
    height: 100%;

    overflow: hidden;

    background: var(--surface);

    border-right: 1px solid var(--border);

    transform: translateX(-100%);

    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#units-sidebar.open {
    transform: translateX(0);
}


/* =============================================================
SIDEBAR HEADER
============================================================= */

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    flex-shrink: 0;

    padding: 20px;

    border-bottom: 1px solid var(--border);
}

.sidebar-title {
    margin: 0;

    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    font-weight: 500;
}


/* -------------------------------------------------------------
Close button
------------------------------------------------------------- */

.sidebar-close {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    background: var(--surface-alt);
    color: var(--text);

    border: 1px solid var(--border);
    border-radius: 50%;

    font-size: 1rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


/* =============================================================
SIDEBAR FILTERS
============================================================= */

.sidebar-filters {
    display: flex;
    gap: 8px;

    flex-shrink: 0;

    padding: 16px 20px;

    overflow-x: auto;

    border-bottom: 1px solid var(--border);
}

.sidebar-filter {
    flex: 0 0 auto;

    padding: 6px 14px;

    background: transparent;
    color: var(--text-muted);

    border: 1px solid var(--border);
    border-radius: 20px;

    font-size: 0.75rem;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.sidebar-filter:hover {
    color: var(--text);
    border-color: var(--accent);
}

.sidebar-filter.active {
    background: var(--accent);
    color: var(--bg);

    border-color: var(--accent);
}

.sidebar-filter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


/* =============================================================
SIDEBAR STATS
============================================================= */

.sidebar-stats {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;

    padding: 12px 20px;

    background: var(--surface-alt);

    border-bottom: 1px solid var(--border);
}

.sidebar-stat {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--text-muted);

    font-size: 0.75rem;
}

.sidebar-stat-dot {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.sidebar-stat-count {
    color: var(--text);
    font-weight: 600;
}


/* =============================================================
SIDEBAR BODY
============================================================= */

.sidebar-body {
    flex: 1;
    min-height: 0;

    padding: 16px;

    overflow-y: auto;
}


/* =============================================================
PROPERTY GROUPS
============================================================= */

.sidebar-group {
    margin-bottom: 20px;
}

.sidebar-group:last-child {
    margin-bottom: 0;
}


/* -------------------------------------------------------------
Group header
------------------------------------------------------------- */

.sidebar-group-header {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;
    padding: 8px 12px;

    background: var(--surface-alt);

    border-radius: 8px;

    cursor: pointer;

    transition: background 0.2s ease;
}

.sidebar-group-header:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-group-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sidebar-group-icon {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.sidebar-group-name {
    flex: 1;
    min-width: 0;

    font-size: 1rem;
    font-weight: 700;
}

.sidebar-group-count {
    flex: 0 0 auto;

    padding: 2px 8px;

    background: var(--surface);
    color: var(--text-muted);

    border-radius: 10px;

    font-size: 0.7rem;
}


/* =============================================================
UNIT CARDS
============================================================= */

.sidebar-unit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 8px;
    padding: 12px 14px;

    background: var(--surface-alt);

    border: 1px solid var(--border);
    border-radius: 10px;

    cursor: pointer;

    transform: translateX(0);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.sidebar-unit:last-child {
    margin-bottom: 0;
}

.sidebar-unit:hover {
    background: rgba(201, 169, 98, 0.05);
    border-color: var(--accent);

    transform: translateX(4px);
}

.sidebar-unit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


/* =============================================================
UNIT — LEFT SIDE
============================================================= */

.sidebar-unit-left {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 1 1 auto;

    min-width: 0;
}


/* -------------------------------------------------------------
Status indicator
------------------------------------------------------------- */

.sidebar-unit-status {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;
}


/* -------------------------------------------------------------
Thumbnail
------------------------------------------------------------- */

.sidebar-unit-thumb {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 8px;
}

.sidebar-unit-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* -------------------------------------------------------------
Unit information
------------------------------------------------------------- */

.sidebar-unit-info {
    flex: 1 1 auto;

    min-width: 0;
}

.sidebar-unit-name {
    margin-bottom: 2px;

    font-size: 0.85rem;
    font-weight: 500;
}

.sidebar-unit-details {
    overflow: hidden;

    color: var(--text-muted);

    font-size: 0.7rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =============================================================
UNIT — RIGHT SIDE
============================================================= */

.sidebar-unit-right {
    flex: 0 0 auto;

    text-align: right;
}

.sidebar-unit-price {
    color: var(--accent);

    font-size: 0.85rem;
    font-weight: 600;
}


/* -------------------------------------------------------------
Unit location
------------------------------------------------------------- */

.sidebar-unit-location {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;

    margin-top: 2px;

    color: var(--text-muted);

    font-size: 0.65rem;
}

.sidebar-unit-location svg {
    flex: 0 0 auto;

    width: 10px;
    height: 10px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}


/* =============================================================
EMPTY STATE
============================================================= */

.sidebar-empty {
    padding: 40px 20px;

    color: var(--text-muted);

    text-align: center;
}

.sidebar-empty svg {
    width: 48px;
    height: 48px;

    margin-bottom: 12px;

    fill: none;
    stroke: var(--border);
    stroke-width: 1.5;
}

.sidebar-empty-text {
    font-size: 0.9rem;
}


/* =============================================================
MAP CONTROLS
============================================================= */

/* Shared standalone control buttons */

.map-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 42px;
  padding: 8px 16px;

  background: var(--surface);
  color: var(--text-muted);

  border: 1px solid var(--border);
  border-radius: 9999px;

  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;

  cursor: pointer;

  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.map-control-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}

.map-control-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Amenities active state */

#amenities-toggle.active {
  background: #4DB3D0;
  border-color: #4DB3D0;
  color: #fff;
}

/* ─── TOGGLE BUTTONS ─── */
.toggle-group {
  position: static;
  z-index: auto;

  display: flex;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;

  padding: 4px;

  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.toggle-btn.active {
  background: var(--accent);
  color: var(--bg);
}
.toggle-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.toggle-btn.active svg {
  stroke: var(--bg);
}

/* ─── ZOOM HINT ─── */
#zoom-hint {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 50;
  backdrop-filter: blur(8px);
}
#zoom-hint.visible {
  opacity: 1;
}

/* ─── MOBILE BOTTOM SHEET ─── */
@media (max-width: 680px) {

  #detail-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 75vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  #detail-panel.open {
    transform: translateY(0);
  }
  .panel-gallery {
    height: 180px;
  }
  .panel-drag-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto;
  }

  #zoom-hint {
    bottom: 140px;
  }
}

/* ─── DESKTOP HIDE DRAG HANDLE ─── */
@media (min-width: 681px) {
  .panel-drag-handle {
    display: none;
  }
}

/* Leave OpenSeadragon internals alone */
.openseadragon-container,
.openseadragon-canvas {
  z-index: 1;
}

#map-intro {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  color: #fff;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: all;
}

#map-intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.map-intro-inner {
    text-align: center;
    max-width: 320px;
    padding: 20px;

    opacity: 1;
    transform: scale(1);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

#map-intro.is-hidden .map-intro-inner {
    opacity: 0;
    transform: scale(0.95);
}

#enter-map {
  margin-top: 16px;
  padding: 12px 18px;
  background: var(--accent);
  border: none;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
}

#btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
  min-width: max-content;
}
#btn-contact,
#btn-contact:hover,
#btn-contact:focus {
  text-decoration: none;
}

@media (max-width: 680px) {
  .sidebar-unit-thumb {
    width: 40px;
    height: 40px;
  }
}

/* =============================================================
MAP CONTROLS
Left anchored — handle remains fixed
============================================================= */

#map-controls {
  --handle-width: 42px;
  --control-gap: 8px;

  position: fixed;
  left: 0;
  right: auto;
  bottom: 24px;
  top: auto;

  z-index: 9999;

  display: flex;
  align-items: center;
  gap: var(--control-gap);

  width: max-content;
  height: auto;

  padding: 6px 8px 6px 0;

  background: rgba(45, 49, 54, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 0;
  border-radius: 0 14px 14px 0;

  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);

  pointer-events: auto;

  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    gap 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease,
    box-shadow 0.35s ease;

  overflow: hidden;
}

/* =============================================================
ORDER
============================================================= */

#map-controls #map-controls-collapse {
  order: 1;
}

#map-controls #season-toggle {
  order: 2;
}

#map-controls #amenities-toggle {
  order: 3;
}

#map-controls #rmr-layers-btn {
  order: 4;
}

/* =============================================================
RESET LEGACY POSITIONING
============================================================= */

#map-controls #season-toggle,
#map-controls #amenities-toggle,
#map-controls #rmr-layers-btn,
#map-controls #map-controls-collapse {
  position: static;

  top: auto;
  right: auto;
  bottom: auto;
  left: auto;

  margin: 0;
}

/* =============================================================
CONTROLS
Animate them independently of the handle
============================================================= */

#map-controls #season-toggle,
#map-controls #amenities-toggle,
#map-controls #rmr-layers-btn {
  opacity: 1;
  transform: translateX(0);

  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
COLLAPSE HANDLE
============================================================= */

#map-controls #map-controls-collapse {
  flex: 0 0 var(--handle-width);

  width: var(--handle-width);
  min-width: var(--handle-width);
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: rgba(15, 18, 22, 0.92);
  color: var(--text);

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 0;

  border-radius: 0 12px 12px 0;

  cursor: pointer;
  box-shadow: none;

  /*
     * Always keep handle above the sliding controls.
     */
  position: relative;
  z-index: 2;
}

/* =============================================================
ARROW
============================================================= */

#map-controls-collapse svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;

  /*
     * OPEN = point left.
     */
  transform: rotate(180deg);

  transition: transform 0.4s ease;
}

/*
 * COLLAPSED = point right.
 */
#map-controls.is-collapsed #map-controls-collapse svg {
  transform: rotate(0deg);
}

/* =============================================================
COLLAPSED STATE
============================================================= */

#map-controls.is-collapsed {
  /*
     * Only the 42px handle remains.
     */
  max-width: var(--handle-width);

  padding-right: 0;
  gap: 0;

  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/*
 * Controls slide LEFT underneath the handle while fading.
 *
 * Don't use display:none — that would kill the animation.
 */
#map-controls.is-collapsed #season-toggle,
#map-controls.is-collapsed #amenities-toggle,
#map-controls.is-collapsed #rmr-layers-btn {
  opacity: 0;
  transform: translateX(-30px);

  pointer-events: none;
}

/* =============================================================
TRAY APPEARANCE
============================================================= */

#map-controls .toggle-group,
#map-controls .map-control-btn,
#map-controls #rmr-layers-btn {
  box-shadow: none;
}

@media (max-width: 680px) {
  /* =========================================================
    MOBILE — EXPANDED
    ========================================================= */

  #map-controls {
    left: 0;
    right: auto;
    top: auto;
    bottom: 16px;

    display: grid;

    grid-template-columns:
      var(--handle-width)
      auto
      auto;

    grid-template-rows: auto auto;

    gap: 8px;

    width: max-content;
    max-width: calc(100vw - 16px);
    height: auto;

    padding: 8px 8px 8px 0;

    overflow: hidden;

    background: rgba(45, 49, 54, 0.92);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
    border-radius: 0 14px 14px 0;

    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);

    transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      gap 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease,
      box-shadow 0.35s ease;
  }

  /* =========================================================
    HANDLE
    ========================================================= */

  #map-controls #map-controls-collapse {
    grid-column: 1;
    grid-row: 1 / 3;

    align-self: stretch;

    width: var(--handle-width);
    min-width: var(--handle-width);
    height: auto;
    min-height: 48px;

    position: static;

    display: flex;
    align-items: center;
    justify-content: center;

    border-left: 0;
    border-radius: 0 12px 12px 0;

    transform: none;
  }

  /* =========================================================
    ROW 1 — SEASON
    ========================================================= */

  #map-controls #season-toggle {
    grid-column: 2 / 4;
    grid-row: 1;

    justify-self: start;

    opacity: 1;
    transform: translateX(0);
  }

  /* =========================================================
    ROW 2 — AMENITIES / LAYERS
    ========================================================= */

  #map-controls #amenities-toggle {
    grid-column: 2;
    grid-row: 2;

    opacity: 1;
    transform: translateX(0);
  }

  /*
     * Units is currently removed from this interface,
     * so don't reserve a mobile grid column for it.
     */

  #map-controls #rmr-layers-btn {
    grid-column: 3;
    grid-row: 2;

    opacity: 1;
    transform: translateX(0);
  }

  /* =========================================================
    MOBILE CONTROL ANIMATION
    ========================================================= */

  #map-controls #season-toggle,
  #map-controls #amenities-toggle,
  #map-controls #rmr-layers-btn {
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* =========================================================
    COLLAPSED
    ========================================================= */

  #map-controls.is-collapsed {
    /*
         * Keep the SAME bottom-left anchor.
         */
    left: 0;
    bottom: 16px;

    display: flex;

    width: var(--handle-width);
    max-width: var(--handle-width);
    height: 48px;

    padding: 0;
    gap: 0;

    overflow: hidden;

    background: transparent;

    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  #map-controls.is-collapsed #map-controls-collapse {
    flex: 0 0 var(--handle-width);

    width: var(--handle-width);
    min-width: var(--handle-width);
    height: 48px;
    min-height: 48px;

    margin: 0;

    border-radius: 0 12px 12px 0;

    transform: none;
  }

  /* Hide controls through animation rather than display:none */

  #map-controls.is-collapsed #amenities-toggle,
  #map-controls.is-collapsed #rmr-layers-btn {
    opacity: 0;
    transform: translateX(-24px);

    pointer-events: none;
  }

  /* OPEN = arrow points left */

  #map-controls:not(.is-collapsed) #map-controls-collapse svg {
    transform: rotate(180deg);
  }

  /* CLOSED = arrow points right */

  #map-controls.is-collapsed #map-controls-collapse svg {
    transform: rotate(0deg);
  }
}


/* Quiet, readable disclaimer anchored to the map viewport. */
#rmr-map-disclaimer {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  width: 260px;
  max-width: calc(100vw - 40px);
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(19, 22, 28, 0.45);
  color: #9ca3af;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.25;
  text-align: left;
  pointer-events: none;
}

#rmr-map-disclaimer h2 {
  margin: 0 0 4px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  margin-bottom: 3px;
}

#rmr-map-disclaimer p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* The disclaimer belongs to the map, not the properties list. */
body.rmr-view-properties #rmr-map-disclaimer {
  display: none;
}

@media (max-width: 767px) {
  #rmr-map-disclaimer {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(160px + env(safe-area-inset-bottom));    
    width: 240px;
    padding: 6px 8px;
    max-width: calc(100vw - 24px);
  }
}