/*
 * ce-search.css v4.0
 * combineestate.pk — Phase 4
 *
 * ROOT CAUSE OF BROKEN LAYOUT (found via live browser inspection):
 * The flex container .d-flex.flex-column has 3 children:
 *   1. .item-header (image)
 *   2. .item-body.w-100.flex-fill (content)
 *   3. .item-footer (buttons)
 * When we changed flex-direction to row, all 3 became columns.
 * .item-footer took 285px, .item-body.w-100 fought with Bootstrap's
 * w-100: width:100% !important leaving only 21px for content.
 *
 * FIX: CSS Grid on the wrapper.
 * grid-template-areas puts image+content side by side (top row)
 * and footer spans full width (bottom row).
 * This bypasses all Bootstrap flex/width conflicts.
 *
 * Confirmed dimensions at desktop (1512px):
 *   card: 423×552px, image: 398×298px
 * Confirmed dimensions with grid fix at desktop (mobile sim):
 *   body: 268px, card: 203px, footer: 398px ✓
 */

/* ============================================================
   PROPERTY DETAIL PANEL
   ============================================================ */
.ce-detail-panel { margin-top: 32px; }
.ce-detail-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid #f1f5f9; }
.ce-detail-section:last-child { border-bottom: none; margin-bottom: 0; }
.ce-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (max-width: 576px) { .ce-detail-grid { grid-template-columns: 1fr; } }
.ce-detail-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }
.ce-detail-label { font-size: 11px; font-weight: 500; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.ce-detail-value { font-size: 15px; font-weight: 600; color: #0f172a; }
.ce-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 12px !important; font-weight: 600 !important; width: fit-content; }
.ce-badge--green  { background: #dcfce7; color: #166534 !important; }
.ce-badge--blue   { background: #dbeafe; color: #1e40af !important; }
.ce-badge--orange { background: #fed7aa; color: #9a3412 !important; }
.ce-amenities-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ce-amenity-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #f0f7ff; border: 1px solid #bfdbfe; border-radius: 20px; font-size: 13px; font-weight: 500; color: #1e40af; }
.ce-whatsapp-section { border-bottom: none !important; }
.ce-whatsapp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: #25D366; color: #fff !important; text-decoration: none !important; border-radius: 12px; font-size: 15px; font-weight: 700; transition: all 0.15s; box-shadow: 0 4px 12px rgba(37,211,102,0.3); }
.ce-whatsapp-btn:hover { background: #1da851; transform: translateY(-1px); color: #fff !important; }
.ce-wa-number { font-size: 13px; opacity: 0.9; }

/* ============================================================
   DESKTOP — Card improvements (all screen sizes)
   ============================================================ */
.item-listing-wrap.item-wrap-v9 {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
}
.item-listing-wrap.item-wrap-v9:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important;
    transform: translateY(-3px);
}
.item-price-wrap .price { color: #1a6fc4 !important; font-weight: 800 !important; }
.item-title a { font-weight: 600 !important; color: #1a2942 !important; }
.item-title a:hover { color: #1a6fc4 !important; }

/* ============================================================
   MOBILE — Zameen.pk compact cards
   Uses CSS Grid to avoid Bootstrap flex/w-100 conflicts.
   Tested live: body=268px, card=203px, footer=398px ✓
   ============================================================ */
@media (max-width: 767px) {

    /* Single column listing grid */
    .listing-view.grid-view.row {
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 10px !important;
    }
    .listing-view.grid-view.row > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Card border radius */
    .item-listing-wrap.item-wrap-v9 {
        border-radius: 10px !important;
    }

    /* ── GRID LAYOUT — key fix ──────────────────────────────
       Replaces flex with grid to avoid Bootstrap w-100 conflict.
       Row 1: [image | content]
       Row 2: [footer spans full width]
    ────────────────────────────────────────────────────────── */
    .item-wrap-v9 .d-flex.flex-column.align-items-center.h-100 {
        display: grid !important;
        grid-template-columns: 120px 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "img content"
            "footer footer" !important;
        height: auto !important;
        /* Disable all flex properties */
        flex-direction: unset !important;
        align-items: unset !important;
    }

    /* Image area */
    .item-wrap-v9 .item-header {
        grid-area: img !important;
        width: 120px !important;
        min-width: 120px !important;
        overflow: hidden !important;
        align-self: stretch !important;
    }
    .item-wrap-v9 .listing-image-wrap,
    .item-wrap-v9 .listing-thumb,
    .item-wrap-v9 a.listing-featured-thumb {
        width: 120px !important;
        height: 100% !important;
        min-height: 120px !important;
        display: block !important;
        overflow: hidden !important;
    }
    .item-wrap-v9 a.listing-featured-thumb img,
    .item-wrap-v9 .img-fluid.wp-post-image {
        width: 120px !important;
        height: 100% !important;
        min-height: 120px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 10px 0 0 0 !important;
        max-width: none !important;
    }

    /* Content area */
    .item-wrap-v9 .item-body.w-100.flex-fill {
        grid-area: content !important;
        /* Override Bootstrap w-100 and flex-fill */
        width: auto !important;
        flex: none !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 8px 10px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    /* Footer area — full width below */
    .item-wrap-v9 .item-footer {
        grid-area: footer !important;
        width: 100% !important;
        padding: 5px 10px !important;
        background: #f8fafc !important;
        border-top: 1px solid #f0f4f8 !important;
        border-radius: 0 0 10px 10px !important;
    }
    .item-wrap-v9 .item-buttons-wrap {
        gap: 6px !important;
    }
    .item-wrap-v9 .item-buttons-wrap button,
    .item-wrap-v9 .item-buttons-wrap a.btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Price — move to top */
    .item-wrap-v9 .item-price-wrap {
        order: -1 !important;
        margin: 0 0 2px !important;
        flex-wrap: nowrap !important;
    }
    .item-wrap-v9 .item-price-wrap .price {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #1a6fc4 !important;
        line-height: 1.2 !important;
    }
    .item-wrap-v9 .price-postfix {
        font-size: 11px !important;
        color: #64748b !important;
    }

    /* Title — 2 line clamp */
    .item-wrap-v9 h2.item-title.mb-2 {
        margin: 0 0 2px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    .item-wrap-v9 .item-title a {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
    }

    /* Address — single line truncate */
    .item-wrap-v9 address.item-address.mb-2 {
        font-size: 11px !important;
        color: #64748b !important;
        margin: 0 0 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* Amenities — compact row */
    .item-wrap-v9 ul.item-amenities.mb-2 { display: none !important; }
    .item-wrap-v9 ul.item-amenities {
        flex-wrap: nowrap !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        gap: 6px !important;
    }
    .item-wrap-v9 ul.item-amenities li {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        font-size: 11px !important;
        color: #374151 !important;
        white-space: nowrap !important;
    }
    .item-wrap-v9 .hz-figure { font-size: 11px !important; font-weight: 600 !important; }
    .item-wrap-v9 ul.item-amenities i { font-size: 10px !important; color: #1a6fc4 !important; }

    /* Hide preview loader */
    .item-wrap-v9 .preview_loader { display: none !important; }
}