/* ---- from legacy property-list.php, lines 39-227 ---- */
/* Force override any conflicting styles */
.gray { background: #f8fafc !important; width: 100% !important; padding: 40px 0 !important; margin: 0 !important; }
section.gray { background: #f8fafc !important; width: 100% !important; padding: 40px 0 !important; margin: 0 !important; }
.ppl-container { max-width: 1600px !important; margin: 0 auto !important; padding: 0 20px !important; width: 100% !important; }
.ppl-main { display: grid !important; grid-template-columns: 320px 1fr !important; gap: 30px !important; padding: 30px 0 !important; align-items: start !important; }
.ppl-filter-sidebar { width: 100% !important; min-width: 280px !important; }
.ppl-cards-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; align-items: stretch !important; }
.ppl-listings-area { width: 100% !important; }
.ppl-header-section { width: 100% !important; }
* { box-sizing: border-box !important; }

/* Reset conflicting styles */
section { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 0 !important; }
.dash-section, .dash-content { width: 100% !important; max-width: 100% !important; }

/* Ensure proper alignment */
aside { width: 100% !important; }
.ppl-filter-sidebar { position: relative !important; }

/* Property mobile number overlay */
.property-image-wrapper {
  position: relative;
  display: inline-block;
}

.property-mobile-overlay { display: none !important; }
.property-mobile-overlay-disabled {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(20, 133, 128, 0.95);
  color: #fff;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  pointer-events: none;
}

.property-mobile-overlay:hover {
  background: rgba(20, 133, 128, 1);
}

/* ==========================================================================
   MOBILE FILTER — FLOATING BOTTOM-SHEET OVERLAY (<=768px)
   Must live in this LAST-loaded <style> to beat the global !important rules
   above (.ppl-main 2-col grid + .ppl-filter-sidebar position:relative).
   The panel floats on its own layer via fixed positioning + high z-index, so
   the listings never get squeezed. Desktop is untouched.
   ========================================================================== */
@media (max-width: 768px) {
    /* Keep listings full-width behind the sheet (no squeezing) */
    .ppl-main {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 20px 0 !important;
    }
    .ppl-cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Bottom-sheet drawer: hidden below the fold, slides up when .active */
    .ppl-filter-sidebar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 85vh !important;
        max-height: 85vh !important;
        z-index: 999999 !important;
        background: #ffffff !important;
        border-radius: 24px 24px 0 0 !important;
        box-shadow: 0 -10px 35px rgba(0,0,0,0.15) !important;
        padding: 24px 20px 90px 20px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
        margin: 0 !important;
    }
    .ppl-filter-sidebar.active {
        transform: translateY(0) !important;
    }

    /* Sleek grab-handle bar at the top of the sheet */
    .ppl-filter-sidebar::before {
        content: "" !important;
        display: block !important;
        width: 50px !important;
        height: 5px !important;
        background: #e2e8f0 !important;
        border-radius: 10px !important;
        margin: -8px auto 16px auto !important;
    }

    /* Full-screen dimmed backdrop, just below the sheet */
    .ppl-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 999998 !important;
    }

    /* Form controls fill the sheet width */
    .ppl-filter-sidebar .ppl-select,
    .ppl-filter-sidebar .ppl-search-input,
    .ppl-filter-sidebar .ppl-range-input {
        width: 100% !important;
        display: block !important;
    }
}

/* ==========================================================================
   PROFESSIONAL LEFT FILTER SIDEBAR (desktop/tablet, >=769px)
   Sticky column with icon-led section headers, subtle dividers and a
   cleaner visual hierarchy. Mobile bottom-sheet drawer above is untouched.
   ========================================================================== */
@media (min-width: 769px) {
    .ppl-filter-sidebar {
        position: sticky !important;
        top: 100px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
        border: 1px solid #eef1f5 !important;
        box-shadow: 0 4px 20px rgba(15,23,42,0.06) !important;
    }
    .ppl-filter-sidebar::-webkit-scrollbar { width: 5px; }
    .ppl-filter-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

    .ppl-filter-sidebar .ppl-filter-section {
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .ppl-filter-sidebar form > .ppl-filter-section:last-of-type {
        border-bottom: none !important;
        padding-bottom: 4px !important;
    }
    .ppl-filter-sidebar .ppl-filter-title {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        color: #0f172a !important;
    }
    .ppl-filter-sidebar .ppl-filter-title i {
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: rgba(25, 112, 3,0.10) !important;
        color: #197003 !important;
        font-size: 12px !important;
    }
    .ppl-filter-sidebar .ppl-filter-option:hover {
        background: #f8fafc !important;
    }
    .ppl-filter-sidebar .ppl-apply-btn {
        letter-spacing: 0.3px !important;
    }
    .ppl-clear-filters {
        background: #fff1f2 !important;
        color: #e11d48 !important;
        border: 1px solid #fecdd3 !important;
        box-shadow: none !important;
    }
    .ppl-clear-filters:hover {
        background: #f43f5e !important;
        color: #fff !important;
    }
}

/* ---- from legacy property-list.php, lines 388-394 ---- */
@media (max-width: 768px) {
    .ppl-page-title { padding: 22px 16px !important; }
    .ppl-page-title h2 { font-size: 21px !important; }
    .ppl-page-title p { font-size: 12.5px !important; margin-top: 6px !important; }
}

/* ---- from legacy property-list.php, lines 628-653 ---- */
                .ppl-quick-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
                .ppl-quick-pill {
                    padding: 9px 20px;
                    border-radius: 999px;
                    font-size: 13px;
                    font-weight: 600;
                    text-decoration: none !important;
                    border: 1.5px solid #e2e8f0;
                    background: #fff;
                    color: #1e293b;
                    transition: all 0.2s ease;
                    white-space: nowrap;
                }
                .ppl-quick-pill:hover { border-color: #C89A3C; color: #197003; text-decoration: none !important; }
                .ppl-quick-pill.active {
                    background: #197003;
                    border-color: transparent;
                    color: #fff !important;
                    box-shadow:none;
                }
                @media (max-width: 576px) {
                    .ppl-quick-pills { gap: 8px; }
                    .ppl-quick-pill { padding: 7px 16px; font-size: 12px; }
                }