/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   map-view.css — Full-viewport map layout
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── List mode: normal property section padding ─────────────────────────── */
.property {
    padding-top: 80px !important;
    padding-bottom: 24px;
    flex: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAP MODE — body class toggled by JS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.search-map-active {
    overflow: hidden;
}

body.search-map-active .property {
    padding: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAP CANVAS
   Sibling of the wrapper in the DOM so it participates in the ROOT stacking
   context at z-index 50 — below the floating panel (200) and the navbar (1030).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.search-map-pane {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #e8eaf0;
    z-index: 50 !important;
    pointer-events: all;
}

.property-map-canvas {
    width: 100%;
    height: 100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOATING PANEL WRAPPER
   Fixed overlay at z-index 200 (above map, below navbar at 1030).
   No background — transparent so the map shows through on the right side.
   pointer-events: none by default; re-enabled on toolbar and card list.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.wrapper-property-view.map-mode {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 70px);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible;
    pointer-events: none;
}

/* ── Very subtle top gradient + micro-blur ──────────────────────────────── */
.wrapper-property-view.map-mode::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    pointer-events: none;
    z-index: 1;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background: linear-gradient(
        180deg,
        rgba(50, 55, 115, 0.26) 0%,
        rgba(50, 55, 115, 0.10) 55%,
        transparent 100%
    );
}

/* ── Very subtle left gradient + micro-blur ─────────────────────────────── */
.wrapper-property-view.map-mode::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: linear-gradient(
        90deg,
        rgba(240, 243, 255, 0.13) 0%,
        rgba(240, 243, 255, 0.06) 75%,
        transparent 100%
    );
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEARCH TOOLBAR — full-width strip at the top of the panel
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.wrapper-property-view.map-mode .property-top {
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 10px 24px 6px;
    pointer-events: all;
    margin-top: 0;
}

.wrapper-property-view.map-mode .property-top .result-text {
    color: #fff !important;
    font-size: 20px !important;
}

.wrapper-property-view.map-mode .sort-by-title {
    color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROPERTY LIST — scrollable left panel
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.wrapper-property-view.map-mode #propertyContainer {
    position: relative;
    z-index: 5;
    width: 42%;
    flex: 1 1 0;
    height: 0;
    overflow-y: auto;
    padding: 4px 12px 16px;
    pointer-events: all;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wrapper-property-view.map-mode #propertyContainer::-webkit-scrollbar {
    display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARD SIZING in map mode
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.wrapper-property-view.map-mode .property-view {
    margin-bottom: 10px !important;
}

.wrapper-property-view.map-mode .prop-card {
    border-radius: 8px 8px 0 0;
    border: 1px solid #e8eaf6;
    border-bottom: none;
    min-width: unset;
    padding: 10px 12px;
    background: #fff;
}

/* Show card footer in map mode (overrides property.css display:none) */
body.search-map-active .wrapper-property-view.map-mode .card-footer-custom {
    display: flex !important;
}

.wrapper-property-view.map-mode .card-img-grid {
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
}

.wrapper-property-view.map-mode .card-body-custom {
    padding-left: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wrapper-property-view.map-mode .prop-title {
    font-size: 1.02rem;
    line-height: 1.2;
    margin-bottom: 0;
}

/* ── Gallery images ──────────────────────────────────────────────────────── */
.wrapper-property-view.map-mode .gallery {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: unset;
    gap: 6px;
    min-height: 160px;
    overflow: hidden;
    width: 100%;
    background: #fff;
}

.wrapper-property-view.map-mode .small {
    grid-column: unset;
}

.wrapper-property-view.map-mode .gallery img {
    height: 80px;
    width: 80px;
    object-fit: cover;
    display: block;
    background: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HIGHLIGHT PULSE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.map-highlight-pulse {
    animation: mapHighlightPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes mapHighlightPulse {
    0%   { box-shadow: 0 0 0 0    rgba(63, 95, 212, 0.18); }
    60%  { box-shadow: 0 0 0 12px rgba(63, 95, 212, 0.10); }
    100% { box-shadow: 0 0 0 0    rgba(63, 95, 212, 0.00); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — mobile: stack cards above map
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 991.98px) {
    .wrapper-property-view.map-mode #propertyContainer {
        width: 100%;
        height: 45vh;
        flex: 0 0 45vh;
    }

    .wrapper-property-view.map-mode::after {
        display: none;
    }

    .wrapper-property-view.map-mode .prop-card {
        min-height: 0;
    }
}