/* ============================================================
   Responsive Styles – properties.php & property.php (v2)
   ============================================================ */

/* ============ PROPERTIES.PHP – FILTERS CARD (COMPACT) ============ */
.card.shadow-sm.border-0.mb-5 form.row.g-3 > div {
    margin-bottom: 0;
}
@media (max-width: 1199.98px) {
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-3,
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-4,
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-2 {
        width: 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-2.d-flex.align-items-end {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-top: 0.5rem;
    }
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-2.d-flex.align-items-end .btn-primary {
        width: auto;
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 991.98px) {
    .card.shadow-sm.border-0.mb-5 {
        margin-bottom: 1.5rem !important;
    }
    .card.shadow-sm.border-0.mb-5 .card-body.p-4 {
        padding: 1rem !important;
    }
    .card.shadow-sm.border-0.mb-5 form.row.g-3 {
        --bs-gutter-y: 0.5rem;
        --bs-gutter-x: 0.5rem;
    }
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-3,
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-4,
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-2 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-2.d-flex.align-items-end {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .card.shadow-sm.border-0.mb-5 .form-label {
        font-size: 0.78rem;
        margin-bottom: 0.2rem;
    }
    .card.shadow-sm.border-0.mb-5 .form-select,
    .card.shadow-sm.border-0.mb-5 .form-control {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 767.98px) {
    .card.shadow-sm.border-0.mb-5 .card-body.p-4 {
        padding: 0.85rem !important;
    }
    .card.shadow-sm.border-0.mb-5 form.row.g-3 {
        --bs-gutter-y: 0.4rem;
        --bs-gutter-x: 0.4rem;
    }
    .card.shadow-sm.border-0.mb-5 .form-select,
    .card.shadow-sm.border-0.mb-5 .form-control {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.82rem !important;
    }
    .card.shadow-sm.border-0.mb-5 h4 {
        font-size: 1.05rem;
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .card.shadow-sm.border-0.mb-5 {
        margin-bottom: 1.25rem !important;
        border-radius: 14px;
    }
    .card.shadow-sm.border-0.mb-5 .card-body.p-4 {
        padding: 0.75rem !important;
    }
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-3,
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-4,
    .card.shadow-sm.border-0.mb-5 form.row.g-3 .col-md-2 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .card.shadow-sm.border-0.mb-5 .form-label {
        font-size: 0.74rem;
        margin-bottom: 0.15rem;
    }
}

/* ============ PROPERTIES.PHP – 2-COLUMN GRID ALWAYS ============ */
@media (max-width: 991.98px) {
    section > .container > div + .row.g-4 > .col-md-4,
    section > .container > .row.g-4:first-of-type > .col-md-4 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 575.98px) {
    section > .container > div + .row.g-4 > .col-md-4,
    section > .container > .row.g-4:first-of-type > .col-md-4 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .property-card.h-100 .card-img-top {
        height: 150px !important;
    }
    .property-card.h-100 .card-body {
        padding: 0.65rem !important;
    }
    .property-card.h-100 h5 {
        font-size: 0.88rem !important;
    }
    .property-card.h-100 .card-text {
        font-size: 0.72rem !important;
        margin-bottom: 0.4rem !important;
    }
    .property-card.h-100 .fw-bold {
        font-size: 0.85rem !important;
    }
    .property-card.h-100 .badge {
        font-size: 0.62rem !important;
    }
    .property-card.h-100 .btn {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.72rem !important;
    }
    .property-card.h-100 .d-flex.flex-wrap.gap-3 {
        gap: 0.25rem 0.4rem !important;
        margin-bottom: 0.4rem !important;
        font-size: 0.7rem !important;
    }
}

/* ============ PAGINATION – COMPACT ============ */
@media (max-width: 767.98px) {
    nav.mt-5 {
        margin-top: 1.5rem !important;
    }
    .pagination {
        flex-wrap: wrap;
        gap: 0.15rem;
        margin-bottom: 0;
    }
    .pagination .page-link {
        padding: 0.3rem 0.55rem;
        font-size: 0.78rem;
        border-radius: 6px;
    }
}
@media (max-width: 575.98px) {
    .pagination .page-link {
        padding: 0.25rem 0.45rem;
        font-size: 0.72rem;
    }
    .text-center.mb-2.small.text-muted {
        font-size: 0.74rem;
    }
}

/* ============ EMPTY STATE ============ */
@media (max-width: 767.98px) {
    .col-12.text-center.py-5 i {
        font-size: 2.5rem !important;
    }
    .col-12.text-center.py-5 h4 {
        font-size: 1rem;
    }
    .col-12.text-center.py-5 p {
        font-size: 0.82rem;
    }
}

/* ============ PROPERTY.PHP – GALLERY ============ */
@media (max-width: 1199.98px) {
    .property-gallery .card-img-top,
    .property-gallery img {
        max-height: 420px;
    }
}
@media (max-width: 991.98px) {
    .property-gallery .col-lg-8,
    .property-gallery .col-lg-4 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .property-gallery .col-lg-4.d-none.d-lg-flex {
        display: none !important;
    }
    .property-gallery .card-img-top,
    .property-gallery img {
        max-height: 380px;
    }
}
@media (max-width: 767.98px) {
    .property-gallery {
        margin-bottom: 1.5rem !important;
    }
    .property-gallery .card-img-top,
    .property-gallery img {
        max-height: 250px;
    }
    .property-gallery .row.g-3 {
        --bs-gutter-y: 0.5rem;
        --bs-gutter-x: 0.5rem;
    }
    .property-gallery .d-lg-none .col-3,
    .property-gallery .d-lg-none .col-sm-3 {
        width: 25%;
    }
    .property-gallery .d-lg-none img {
        height: 55px !important;
    }
    .property-gallery .d-lg-none .position-absolute {
        font-size: 0.7rem !important;
    }
    .property-gallery .row.g-3.mt-3 img {
        max-height: 110px;
    }
}
@media (max-width: 575.98px) {
    .property-gallery .card-img-top,
    .property-gallery img {
        max-height: 210px;
    }
    .property-gallery .col-6 {
        width: 50%;
    }
    .property-gallery .row.g-3.mt-3 img {
        max-height: 90px;
    }
}

/* ============ PROPERTY.PHP – TITLE + SIDEBAR LAYOUT ============ */
@media (max-width: 991.98px) {
    .container > .row > .col-lg-8 {
        width: 100%;
    }
    .container > .row > .col-lg-4 {
        width: 100%;
        margin-top: 1.25rem;
    }
    .fw-bold.mb-0.text-primary {
        font-size: 1.35rem !important;
    }
    h1.fw-bold.mb-2 {
        font-size: 1.3rem;
    }
}
@media (max-width: 767.98px) {
    .fw-bold.mb-0.text-primary {
        font-size: 1.2rem !important;
    }
    h1.fw-bold.mb-2 {
        font-size: 1.2rem;
    }
    p.text-muted.mb-0 {
        font-size: 0.82rem;
    }
}
@media (max-width: 575.98px) {
    .d-flex.justify-content-between.align-items-center.mb-3.flex-wrap.gap-2 {
        gap: 0.25rem !important;
    }
    .badge.text-uppercase.px-3.py-2 {
        padding: 0.25rem 0.55rem !important;
        font-size: 0.68rem;
    }
    .fw-bold.mb-0.text-primary {
        font-size: 1.05rem !important;
    }
    h1.fw-bold.mb-2 {
        font-size: 1.05rem;
        margin-bottom: 0.4rem !important;
    }
}

/* ============ PROPERTY.PHP – OVERVIEW CARD ============ */
@media (max-width: 991.98px) {
    .card.shadow-sm.border-0.mb-4 {
        border-radius: 16px !important;
        margin-bottom: 1rem !important;
    }
    .card.shadow-sm.border-0.mb-4 .card-body.p-4 {
        padding: 1rem !important;
    }
    .card.shadow-sm.border-0.mb-4 h4 {
        font-size: 1.05rem;
        margin-bottom: 0.85rem !important;
    }
    .row.g-4 > .col-md-3,
    .row.g-4 > .col-6 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .p-3.rounded-4.h-100 {
        padding: 0.7rem !important;
    }
    .p-3.rounded-4 i {
        font-size: 1.3rem !important;
    }
    .p-3.rounded-4 p.mb-0.fw-semibold {
        font-size: 0.85rem;
    }
    .p-3.rounded-4 p.small.text-muted {
        font-size: 0.72rem;
    }
    .row.g-3.mt-4.pt-3.border-top {
        margin-top: 0.85rem !important;
        padding-top: 0.65rem !important;
    }
    .row.g-3.mt-4.pt-3.border-top p.small.text-muted.mb-1 {
        font-size: 0.72rem;
    }
    .row.g-3.mt-4.pt-3.border-top p.mb-0.fw-semibold {
        font-size: 0.82rem;
    }
}

@media (max-width: 575.98px) {
    .card.shadow-sm.border-0.mb-4 .card-body.p-4 {
        padding: 0.85rem !important;
    }
    .card.shadow-sm.border-0.mb-4 h4 {
        font-size: 0.95rem;
        margin-bottom: 0.7rem !important;
    }
    .row.g-4 {
        --bs-gutter-y: 0.4rem;
        --bs-gutter-x: 0.4rem;
    }
    .p-3.rounded-4.h-100 {
        padding: 0.6rem !important;
        border-radius: 12px !important;
    }
    .p-3.rounded-4 i {
        font-size: 1.15rem !important;
    }
    .row.g-3.mt-4.pt-3.border-top > .col-md-4,
    .row.g-3.mt-4.pt-3.border-top > .col-sm-6 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ============ PROPERTY.PHP – DESCRIPTION ============ */
@media (max-width: 991.98px) {
    .card.shadow-sm.border-0.mb-4 .text-muted {
        font-size: 0.88rem;
        line-height: 1.65 !important;
    }
}
@media (max-width: 575.98px) {
    .card.shadow-sm.border-0.mb-4 .text-muted {
        font-size: 0.8rem;
        line-height: 1.6 !important;
    }
}

/* ============ PROPERTY.PHP – FEATURES & AMENITIES ============ */
@media (max-width: 991.98px) {
    .row.g-4 > .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (max-width: 767.98px) {
    .row.g-4 > .col-md-6 h6.fw-bold.mb-3 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem !important;
    }
    .d-flex.flex-wrap.gap-2 {
        gap: 0.3rem !important;
    }
    .d-flex.flex-wrap.gap-2 > span {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.74rem !important;
    }
}
@media (max-width: 575.98px) {
    .row.g-4 > .col-md-6 h6.fw-bold.mb-3 {
        font-size: 0.82rem;
        margin-bottom: 0.4rem !important;
    }
    .d-flex.flex-wrap.gap-2 > span {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
}

/* ============ PROPERTY.PHP – SIDEBAR AGENT CARDS ============ */
@media (max-width: 767.98px) {
    .card.shadow-sm.border-0.mb-4 h5 {
        font-size: 1rem;
        margin-bottom: 0.75rem !important;
    }
    .img-fluid.rounded-circle.mb-3 {
        width: 90px !important;
        height: 90px !important;
    }
    .d-flex.flex-column.gap-2 {
        gap: 0.4rem !important;
    }
    .d-flex.flex-column.gap-2 .btn-call,
    .d-flex.flex-column.gap-2 .btn-whatsapp,
    .d-flex.flex-column.gap-2 .btn-email {
        padding: 7px 12px !important;
        font-size: 0.82rem !important;
    }
    .card-body.p-4 form input,
    .card-body.p-4 form textarea {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.82rem !important;
    }
}
@media (max-width: 575.98px) {
    .card.shadow-sm.border-0.mb-4 .card-body.p-4 {
        padding: 0.8rem !important;
    }
    .card.shadow-sm.border-0.mb-4 h5 {
        font-size: 0.92rem;
        margin-bottom: 0.6rem !important;
    }
    .img-fluid.rounded-circle.mb-3 {
        width: 75px !important;
        height: 75px !important;
        border-width: 2px !important;
    }
}

/* ============ PROPERTY.PHP – OTHER PROPERTIES ============ */
@media (max-width: 991.98px) {
    .mt-5.pt-4 > .row.g-4 > .col-md-6 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 767.98px) {
    .mt-5.pt-4 {
        margin-top: 1.5rem !important;
        padding-top: 0.85rem !important;
    }
    .mt-5.pt-4 h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem !important;
    }
}
@media (max-width: 575.98px) {
    .mt-5.pt-4 > .row.g-4 > .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .mt-5.pt-4 h3 {
        font-size: 1rem;
    }
}

/* ============ LIGHTBOX – MOBILE ============ */
@media (max-width: 575.98px) {
    .modal-xl {
        --bs-modal-width: 100%;
        margin: 0.4rem;
    }
    .modal-body.p-2.position-relative {
        padding: 0.3rem !important;
    }
    .d-flex.justify-content-between.mt-2.px-2 button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    #lightboxCounter {
        font-size: 0.74rem;
    }
}