/* ==========================================================================
   BTA33KAR — bta-listing.css  v1.2   (P2C-R1)
   Loads AFTER bta-visual.css v1.8 and bta-cards.css v1.3, both frozen.
   Additive only: no name, id, value or behaviour change.

   WHY: search-box.blade.php is SHARED by /properties and /projects, told apart
   only by which list id the form contains. P2B scoped the filter contract to
   :has(#properties-list), so /projects kept 34px controls, mixed radii, a
   transparent square surface and a Search group overflowing it by 5.5px. This
   mirrors that contract onto :has(#projects-list), removes the second blue hero,
   and rebalances the mobile hero/map ratio.
   ========================================================================== */


/* 1. PROJECT INTRO — DOUBLE-HERO CORRECTION
   Two blue .bgheadproject slabs render (page hero H1 "Projects" 161.8px, then
   the shortcode H2 146.4px, 50px apart) so the page appears to start twice.
   Both headings and the description are kept; only the second stops being a
   slab. Its banner is an INLINE style, so background needs !important. */
section.main-homes:has(#projects-list) > .bgheadproject {
    background-image: none !important;
    /* the inline `background:` shorthand also sets background-color, so this
       one needs !important too — same inline-style constraint. */
    background-color: var(--bta-surface-raised) !important;
    color: var(--bta-text-primary);
    border-block-end: 1px solid var(--bta-border-subtle);
    padding-block: var(--bta-space-5);
}

section.main-homes:has(#projects-list) > .bgheadproject .description {
    padding-block: 0;
}

section.main-homes:has(#projects-list) > .bgheadproject .description h2 {
    font-size: var(--bta-fs-h3);
    line-height: 1.15;
    font-weight: 700;
    color: var(--bta-text-primary);
    margin-block: 0 var(--bta-space-2);
    padding-block-start: 0;
    text-wrap: balance;
}

section.main-homes:has(#projects-list) > .bgheadproject .description p {
    font-size: var(--bta-fs-body);
    line-height: 1.6;
    color: var(--bta-text-secondary);
    max-width: 68ch;
    margin-inline: auto;
    margin-block: 0;
}

section.main-homes:has(#projects-list) > .bgheadproject a {
    color: var(--bta-brand);
}

section.main-homes:has(#projects-list) > .bgheadproject .description .container-fluid.w90 {
    max-width: var(--bta-container-w);
    padding-inline: var(--bta-gutter);
    margin-inline: auto;
}

section.main-homes:has(#projects-list) {
    background-color: var(--bta-surface-page);
}

section.main-homes:has(#projects-list) .container-fluid.w90.padtop30 {
    padding-block-start: var(--bta-space-6);
}


/* 2. PROJECT CONTAINER RHYTHM
   The gutter/width vars are set on the section so both the intro container and
   the filter container inherit one ladder instead of repeating the selector. */
.container-fluid.w90:has(#projects-list) {
    max-width: var(--bta-container-w);
    padding-inline: var(--bta-gutter);
    margin-inline: auto;
}

@media (min-width: 768px)  { section.main-homes:has(#projects-list) { --bta-gutter: var(--bta-space-6); } }
@media (min-width: 1024px) { section.main-homes:has(#projects-list) { --bta-gutter: var(--bta-space-8); } }
@media (min-width: 1600px) { section.main-homes:has(#projects-list) { --bta-container-w: var(--bta-container-max-wide); } }

/* 3. PROJECT FILTER SURFACE + SHOWING / SORT */
#projects-list .shop__sort,
#ajax-filters-form:has(#projects-list) .search-box-items {
    background-color: var(--bta-surface-raised);
    border: 1px solid var(--bta-border-subtle);
    border-radius: var(--bta-radius-lg);
    box-shadow: var(--bta-shadow-sm);
}

#ajax-filters-form:has(#projects-list) .search-box-items {
    padding: var(--bta-space-5);
    margin-block-end: var(--bta-space-4);
}

#ajax-filters-form:has(#projects-list) .search-box-items > .row {
    row-gap: var(--bta-space-3);
    align-items: end;
}

#projects-list .shop__sort {
    padding: var(--bta-space-3) var(--bta-space-4);
    margin-block-end: var(--bta-space-4);
}

#projects-list .shop__sort .row { row-gap: var(--bta-space-2); }

#projects-list .shop__sort .toggle-filter-offcanvas {
    min-height: var(--bta-control-height);
    border-radius: var(--bta-radius-md);
    border: 1px solid var(--bta-border-default);
    background-color: var(--bta-surface-raised);
    font-weight: 600;
    padding-inline: var(--bta-space-4);
}


/* 4. PROJECT CONTROL CONTRACT — 44px / 12px radius (was 34px / 2-3-0px). */
#ajax-filters-form:has(#projects-list) .form-control,
#projects-list .form-control {
    min-height: var(--bta-control-height);
    border-radius: var(--bta-radius-md);
    border: 1px solid var(--bta-border-default);
    background-color: var(--bta-surface-raised);
    color: var(--bta-text-primary);
    font-size: var(--bta-fs-body);
    transition: border-color .15s ease;
}

#ajax-filters-form:has(#projects-list) .form-control:hover,
#projects-list .form-control:hover {
    border-color: var(--bta-border-strong);
}

#ajax-filters-form:has(#projects-list) .control-label,
#projects-list .control-label {
    font-size: var(--bta-fs-meta);
    font-weight: 600;
    color: var(--bta-text-secondary);
    margin-block-end: var(--bta-space-1);
    display: block;
}

#ajax-filters-form:has(#projects-list) .form-control::placeholder {
    color: var(--bta-text-muted);
    opacity: 1;
}

#ajax-filters-form:has(#projects-list) .form-control:focus-visible,
#projects-list .form-control:focus-visible,
#projects-list .pagination a:focus-visible {
    outline: var(--bta-focus-width) solid var(--bta-focus);
    outline-offset: var(--bta-focus-offset);
}

#ajax-filters-form:has(#projects-list) .btn.btn-primary,
#projects-list .btn.btn-primary {
    min-height: var(--bta-control-height);
    padding-inline: var(--bta-space-6);
    border-radius: var(--bta-radius-md);
    background-color: var(--bta-brand);
    border-color: var(--bta-brand);
    color: var(--bta-brand-contrast);
    font-weight: 600;
    font-size: var(--bta-fs-body);
    transition: background-color .15s ease, border-color .15s ease;
}

#ajax-filters-form:has(#projects-list) .btn.btn-primary:hover,
#projects-list .btn.btn-primary:hover {
    background-color: var(--bta-brand-hover);
    border-color: var(--bta-brand-hover);
}

#ajax-filters-form:has(#projects-list) .btn.btn-primary.btn-full {
    inline-size: 100%;
    font-weight: 600;
}

#ajax-filters-form:has(#projects-list) .search-box-items .btn.btn-secondary,
#projects-list .shop__sort .btn {
    min-height: var(--bta-control-height);
    border-radius: var(--bta-radius-md);
    border: 1px solid var(--bta-border-default);
    background-color: var(--bta-surface-raised);
    color: var(--bta-text-primary);
    font-weight: 500;
}

/* Glyphs centred by the layout model, not by padding arithmetic (P2B-R1). */
#ajax-filters-form:has(#projects-list) .btn,
#projects-list .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}


/* 4b. AVAILABLE FLOORS MULTI-SELECT (v1.1)
   The floors trigger is the P1B3 custom control `button.bta-ms-btn`, not a
   .form-control and not a .btn, so no rule above reached it: it measured 35.1px
   with a 4px radius and pushed its label 8.9px below the shared label row.
   Presentation only — name, id, serialization and multi-select behaviour are
   untouched. This control exists only on /projects, so the frozen properties
   filter cannot be affected. */
#ajax-filters-form:has(#projects-list) .bta-ms-btn {
    min-height: var(--bta-control-height);
    border-radius: var(--bta-radius-md);
    border: 1px solid var(--bta-border-default);
    background-color: var(--bta-surface-raised);
    color: var(--bta-text-primary);
    font-size: var(--bta-fs-body);
    padding-inline: var(--bta-space-3);
    transition: border-color .15s ease;
}

#ajax-filters-form:has(#projects-list) .bta-ms-btn:hover {
    border-color: var(--bta-border-strong);
}

#ajax-filters-form:has(#projects-list) .bta-ms-btn:focus-visible {
    outline: var(--bta-focus-width) solid var(--bta-focus);
    outline-offset: var(--bta-focus-offset);
}

#ajax-filters-form:has(#projects-list) .bta-ms-wrap .dropdown-menu,
#ajax-filters-form:has(#projects-list) .bta-ms-panel {
    border-radius: var(--bta-radius-lg);
    border: 1px solid var(--bta-border-subtle);
    box-shadow: var(--bta-shadow-md);
}


/* 5. PROJECT ROW ALIGNMENT
   Choices carried 8px and the action column 15px of bottom margin -> 1px
   vertical spread. Bootstrap 4 .mb-2 is itself !important, so nothing else can
   neutralise it (same constraint documented in P2B-R1). */
#ajax-filters-form:has(#projects-list) .search-box-items > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-block-end: 0 !important;
}

#ajax-filters-form:has(#projects-list) .search-box-items > .row > [class*="col-"] .dropdown.mb-2 {
    margin-block-end: 0 !important;
}


/* 6. SEARCH SPLIT GROUP + HORIZONTAL BALANCE
   Measured at 1440: start inset 4.0px, end inset -5.5px — the split control was
   OVERFLOWING the surface, the defect P2B-R2 fixed on properties. Identical
   column classes, so the identical redistribution applies: row allocation. */
#ajax-filters-form:has(#projects-list) .button-search-wrapper .btn-group {
    inline-size: 100%;
}

#ajax-filters-form:has(#projects-list) .button-search-wrapper .btn-group > .btn-full {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: 0;
}

#ajax-filters-form:has(#projects-list) .button-search-wrapper .btn-group > .dropdown-toggle-split {
    flex: 0 0 auto;
}

#ajax-filters-form:has(#projects-list) .button-search-wrapper .btn-group > .btn:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

#ajax-filters-form:has(#projects-list) .button-search-wrapper .btn-group > .btn.dropdown-toggle {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    padding-inline: var(--bta-space-4);
}

@media (min-width: 1200px) {
    #ajax-filters-form:has(#projects-list) .search-box-items > .row > .col-xl-3 {
        flex: 0 0 20%;
        max-inline-size: 20%;
    }
    #ajax-filters-form:has(#projects-list) .search-box-items > .row > .button-search-wrapper {
        flex: 0 0 13.3333%;
        max-inline-size: 13.3333%;
    }
}


/* 7. FLAT RANGE POPOVER
   Same legacy geometry Price/Square had before P2B-R4: .row{margin-inline:
   -15px} with per-column px-1/pr-1 utilities, so inline-start is compensated
   and inline-end is not. Same contract, projects scope. */
#ajax-filters-form:has(#projects-list) .search-box-items .dropdown-menu {
    border-radius: var(--bta-radius-lg);
    border: 1px solid var(--bta-border-subtle);
    box-shadow: var(--bta-shadow-md);
}

#ajax-filters-form:has(#projects-list) .search-box-items .min-max-input > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--bta-space-2);
    align-items: end;
    margin-inline: 0;
}

/* !important: Bootstrap's px-1 / pr-1 utilities are !important themselves. */
#ajax-filters-form:has(#projects-list) .search-box-items .min-max-input > .row > [class*="col-"] {
    flex: none;
    inline-size: auto;
    max-inline-size: none;
    padding-inline: 0 !important;
}

#ajax-filters-form:has(#projects-list) .search-box-items .min-max-input .btn,
#ajax-filters-form:has(#projects-list) .btn-min-max .btn {
    inline-size: auto;
    min-inline-size: 48px;
    min-block-size: 44px;
    padding-inline: var(--bta-space-2);
}

#ajax-filters-form:has(#projects-list) .search-box-items .min-max-input .control-label {
    margin-block-end: var(--bta-space-1);
}

/* Preset list shares the top row's content grid — no Bootstrap indentation. */
#ajax-filters-form:has(#projects-list) .search-box-items .list-of-suggetions {
    margin-block-start: var(--bta-space-6);
    padding-inline: 0;
    margin-inline: 0;
    list-style: none;
}

#ajax-filters-form:has(#projects-list) .search-box-items .list-of-suggetions > * {
    margin-inline: 0;
    padding-inline: var(--bta-space-2);
    padding-block: var(--bta-space-2);
    border-radius: var(--bta-radius-sm);
    cursor: pointer;
}

#ajax-filters-form:has(#projects-list) .search-box-items .list-of-suggetions > *:hover {
    background-color: var(--bta-surface-sunken);
}

#ajax-filters-form:has(#projects-list) .search-box-items .list-of-suggetions > *:focus-visible {
    outline: var(--bta-focus-width) solid var(--bta-focus);
    outline-offset: calc(-1 * var(--bta-focus-width));
}


/* 8. LISTING MOBILE HERO
   Measured at 375: hero 409px vs a 220px map -> ratio 0.538. Height stays
   CONTENT-DRIVEN: no fixed height, no max-height, no clipping. Only padding,
   type scale and rhythm shrink, so Arabic wraps freely. */
@media (max-width: 767.98px) {
    .main-homes:has(#properties-list) .bgheadproject,
    main#main-content:has(#projects-list) > .bgheadproject {
        padding-block: var(--bta-space-3);
    }

    .main-homes:has(#properties-list) .bgheadproject .description,
    main#main-content:has(#projects-list) > .bgheadproject .description {
        padding-block: var(--bta-space-4);
    }

    .main-homes:has(#properties-list) .bgheadproject .description h1,
    main#main-content:has(#projects-list) > .bgheadproject .description h1 {
        font-size: 1.5rem;
        line-height: 1.2;
        padding-block-start: 0;
        margin-block-end: var(--bta-space-2);
    }

    .main-homes:has(#properties-list) .bgheadproject .description p,
    main#main-content:has(#projects-list) > .bgheadproject .description p {
        font-size: var(--bta-fs-meta);
        line-height: 1.5;
        margin-block-end: var(--bta-space-2);
    }

    .main-homes:has(#properties-list) .bgheadproject .description .container-fluid.w90 > :last-child,
    main#main-content:has(#projects-list) > .bgheadproject .description .container-fluid.w90 > :last-child {
        padding-block: var(--bta-space-1);
    }

    section.main-homes:has(#projects-list) > .bgheadproject {
        padding-block: var(--bta-space-4);
    }
}


/* 9. STATIC MOBILE MAP — D6a OWNER REVISION
   bta-visual v1.8 sets 220px below 768, 320px at 768+, a clamp at 1024+. Only
   the MOBILE tier is revised, so this is confined to max-width:767.98px and the
   larger tiers still win. CSS only: no re-parenting, re-init, initMaps(),
   invalidateSize(), generation-token or zoomAnimation change. The vh line is
   the fallback, stated first so an engine without svh keeps a valid value. */
@media (max-width: 767.98px) {
    #properties-list #map {
        block-size: clamp(280px, 40vh, 320px) !important;
        height: clamp(280px, 40vh, 320px) !important;
        min-block-size: 0 !important;
        min-height: 0 !important;
    }
}

@supports (height: 40svh) {
    @media (max-width: 767.98px) {
        #properties-list #map {
            block-size: clamp(280px, 40svh, 320px) !important;
            height: clamp(280px, 40svh, 320px) !important;
        }
    }
}


/* 10. RTL — logical properties throughout, so /ar needs almost nothing. */
[dir="rtl"] #projects-list .shop__sort,
[dir="rtl"] #ajax-filters-form:has(#projects-list) .search-box-items {
    text-align: start;
}

[dir="rtl"] #projects-list .pagination { flex-direction: row-reverse; }


/* 11. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    #ajax-filters-form:has(#projects-list) .btn,
    #ajax-filters-form:has(#projects-list) .form-control,
    #projects-list .btn,
    #projects-list .form-control { transition: none; }
}


/* 12. FIXED-WIDGET SAFE BOTTOM (v1.2)
   The global hotline bar is fixed at the viewport bottom. With the shorter
   mobile hero the map now sits in its band mid-scroll (overlap 116 -> 7021
   px^2 at 375x667), though no map control is blocked and nothing is trapped
   at max scroll (0 blocked, before and after). This reserves clearance so the
   bar cannot strand the last row. The widget is NOT repositioned (P2D). */
@media (max-width: 767.98px) {
    #properties-list,
    #projects-list {
        padding-block-end: 64px;
    }
}