/* =========================================================
   BestPropertyPlug Projects Premium V3.5
   PROPERTIES SEARCH WIDTH + PREMIUM PARITY
   Scope: /projects content only.
   Global header, footer and typography remain untouched.
   ========================================================= */

body#page-projects .bppp2,
body#page-projects .bppp2 *,
body#page-projects .bppp2 input,
body#page-projects .bppp2 button,
body#page-projects .bppp2 select,
body#page-projects .bppp2 textarea {
    font-family: inherit !important;
}

body#page-projects .bppp2 {
    --bpp35-green:#079455;
    --bpp35-green-dark:#056c43;
    --bpp35-deep:#063f30;
    --bpp35-ink:#10271c;
    --bpp35-muted:#718078;
    --bpp35-line:#dbe8e1;
    --bpp35-soft:#f4f9f6;
}

/* =========================================================
   DESKTOP WIDTH PARITY WITH THE PROPERTIES SEARCH EXPERIENCE
   ========================================================= */

@media (min-width:1181px) {
    body#page-projects .bppp2-container {
        width:min(1540px,calc(100% - 56px)) !important;
        max-width:1540px !important;
    }

    body#page-projects .bppp2-shell {
        grid-template-columns:330px minmax(0,1fr) !important;
        gap:28px !important;
        padding:24px !important;
        margin-top:-26px !important;
        border-radius:28px !important;
        box-shadow:0 24px 64px rgba(18,75,51,.105) !important;
    }

    body#page-projects .bppp2-results {
        min-width:0 !important;
    }

    body#page-projects .bppp2-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:20px !important;
    }

    body#page-projects .bppp2-card__media {
        height:252px !important;
    }

    body#page-projects .bppp2-card__body {
        padding:18px 18px 0 !important;
    }

    body#page-projects .bppp2-card__footer {
        margin-left:-18px !important;
        margin-right:-18px !important;
        padding:15px 18px 16px !important;
    }
}

/* Keep hero and marketplace on the same left/right grid */
body#page-projects .bppp2-hero__inner,
body#page-projects .bppp2-market > .bppp2-container {
    box-sizing:border-box !important;
}

/* =========================================================
   HERO REFINEMENT
   ========================================================= */

body#page-projects .bppp2-hero {
    min-height:222px !important;
}

body#page-projects .bppp2-hero__inner {
    min-height:222px !important;
    padding-top:30px !important;
    padding-bottom:38px !important;
}

body#page-projects .bppp2-hero h1 {
    max-width:800px !important;
    font-size:clamp(40px,3.45vw,52px) !important;
    line-height:1.015 !important;
    letter-spacing:-.045em !important;
}

body#page-projects .bppp2-hero p {
    max-width:740px !important;
    font-size:14.5px !important;
}

/* =========================================================
   FILTER BALANCE
   ========================================================= */

body#page-projects .bppp2-filter {
    padding:23px !important;
    border-radius:20px !important;
}

body#page-projects .bppp2-filter__header {
    margin-bottom:20px !important;
    padding-bottom:19px !important;
}

body#page-projects .bppp2-filter__header h2 {
    font-size:22px !important;
}

body#page-projects .bppp2-field,
body#page-projects .bppp2-range-section,
body#page-projects .bppp2-amenities {
    margin-bottom:18px !important;
}

body#page-projects .bppp2-field input,
body#page-projects .bppp2-native-filter select,
body#page-projects .bppp2-native-filter .nice-select,
body#page-projects .bppp2-native-filter .multi-select-trigger {
    height:46px !important;
    min-height:46px !important;
}

body#page-projects .bppp2 input[type="number"]::-webkit-inner-spin-button,
body#page-projects .bppp2 input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance:none !important;
    margin:0 !important;
}

body#page-projects .bppp2 input[type="number"] {
    appearance:textfield !important;
    -moz-appearance:textfield !important;
}

/* More amenities must never inherit browser/default button styling */
body#page-projects button.bppp33-more-amenities,
body#page-projects .bppp35-more-amenities {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    width:auto !important;
    min-width:0 !important;
    min-height:30px !important;
    margin:10px 0 0 !important;
    padding:6px 11px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:1px solid #aed8c2 !important;
    border-radius:999px !important;
    outline:0 !important;
    background:#eef8f3 !important;
    color:#08784a !important;
    box-shadow:none !important;
    font:inherit !important;
    font-size:9.5px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

body#page-projects button.bppp33-more-amenities:hover,
body#page-projects .bppp35-more-amenities:hover {
    border-color:#78c59c !important;
    background:#e6f6ee !important;
    color:#05683f !important;
}

/* =========================================================
   TOOLBAR / RESULT AREA
   ========================================================= */

body#page-projects .bppp2-toolbar {
    min-height:64px !important;
    margin-bottom:18px !important;
    padding:10px 11px 10px 16px !important;
    border-radius:15px !important;
}

body#page-projects .bppp2-result-count {
    font-size:12px !important;
}

body#page-projects .bppp2-view-switch a {
    width:36px !important;
    height:36px !important;
}

body#page-projects .bppp2-per-page,
body#page-projects .bppp2-sort {
    height:42px !important;
}

/* =========================================================
   PREMIUM PROJECT CARDS
   ========================================================= */

body#page-projects .bppp2-card {
    border-radius:18px !important;
    border-color:rgba(25,76,54,.13) !important;
    box-shadow:0 8px 26px rgba(17,63,44,.06) !important;
}

body#page-projects .bppp2-card:hover {
    transform:translateY(-4px) !important;
    box-shadow:0 20px 44px rgba(13,72,46,.13) !important;
}

body#page-projects .bppp2-card__title {
    font-size:16px !important;
    line-height:1.28 !important;
    letter-spacing:-.018em !important;
}

body#page-projects .bppp2-card__location {
    font-size:10.5px !important;
    margin-bottom:13px !important;
}

/* wider metrics strip, clearer visual rhythm */
body#page-projects .bppp2-card__metrics {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
    margin:0 -7px 14px !important;
    padding:11px 9px !important;
    border:1px solid #e3ede8 !important;
    border-radius:12px !important;
    background:#f4faf6 !important;
}

body#page-projects .bppp2-card__metrics > div {
    justify-content:center !important;
}

body#page-projects .bppp2-card__metrics strong {
    font-size:11px !important;
}

body#page-projects .bppp2-card__metrics small {
    font-size:8px !important;
}

/* completion bar */
body#page-projects .bppp2-progress {
    position:relative !important;
    padding-bottom:12px !important;
    margin-bottom:14px !important;
}

body#page-projects .bppp2-progress::before {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:4px !important;
    border-radius:999px !important;
    background:#e0ebe5 !important;
}

body#page-projects .bppp2-progress::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    width:var(--bpp-card-progress,0%) !important;
    height:4px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,#079455,#12b76a) !important;
}

/* price should compete visually with the CTA */
body#page-projects .bppp2-price small {
    font-size:8.5px !important;
    font-weight:700 !important;
}

body#page-projects .bppp2-price strong {
    display:block !important;
    margin-top:3px !important;
    color:#153328 !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    font-weight:900 !important;
}

body#page-projects .bppp2-view-project {
    min-height:39px !important;
    padding:0 14px !important;
    border-radius:9px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#07834e,#09a75f) !important;
    border-color:transparent !important;
    font-size:9.5px !important;
    font-weight:900 !important;
}

/* =========================================================
   ROBUST NO-IMAGE STATE
   JS adds .is-bpp35-no-image after checking actual image sources.
   ========================================================= */

body#page-projects .bppp2-card__media.is-bpp35-no-image {
    position:relative !important;
    overflow:hidden !important;
    background:
        radial-gradient(circle at 78% 22%,rgba(7,148,85,.14),transparent 25%),
        linear-gradient(135deg,#f2f8f5 0%,#e5efe9 100%) !important;
}

body#page-projects .bppp2-card__media.is-bpp35-no-image::before {
    content:"Project image coming soon" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:58px 24px 20px !important;
    color:#60786d !important;
    font:inherit !important;
    font-size:12px !important;
    font-weight:800 !important;
    text-align:center !important;
}

body#page-projects .bppp2-card__media.is-bpp35-no-image::after {
    content:"⌂" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    z-index:3 !important;
    transform:translate(-50%,-38px) !important;
    color:rgba(7,148,85,.32) !important;
    font-size:38px !important;
    line-height:1 !important;
}

body#page-projects .bppp2-card__media.is-bpp35-no-image .bppp2-card__image {
    opacity:0 !important;
    pointer-events:none !important;
}

/* =========================================================
   SPACE BEFORE GLOBAL FOOTER
   ========================================================= */

body#page-projects .bppp2-market {
    padding-bottom:44px !important;
}

/* =========================================================
   RESPONSIVE GUARDS — retain the existing tablet/mobile system
   ========================================================= */

@media (max-width:1180px) {
    body#page-projects .bppp2-container {
        width:calc(100% - 34px) !important;
        max-width:none !important;
    }

    body#page-projects .bppp2-shell {
        grid-template-columns:300px minmax(0,1fr) !important;
        gap:18px !important;
        padding:18px !important;
    }

    body#page-projects .bppp2-card__media {
        height:210px !important;
    }
}

@media (max-width:1024px) {
    body#page-projects .bppp2-shell {
        grid-template-columns:280px minmax(0,1fr) !important;
    }

    body#page-projects .bppp2-card__metrics {
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media (max-width:900px) {
    body#page-projects .bppp2-shell {
        display:block !important;
    }
}

@media (max-width:767px) {
    body#page-projects .bppp2-container {
        width:calc(100% - 22px) !important;
    }

    body#page-projects .bppp2-hero {
        min-height:auto !important;
    }

    body#page-projects .bppp2-hero__inner {
        min-height:auto !important;
        padding:27px 0 44px !important;
    }

    body#page-projects .bppp2-hero h1 {
        font-size:30px !important;
    }

    body#page-projects .bppp2-shell {
        margin-top:-18px !important;
        padding:10px !important;
        border-radius:19px !important;
    }

    body#page-projects .bppp2-card__media {
        height:218px !important;
    }

    body#page-projects .bppp2-card__metrics {
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}