/* ==========================================================================
   BTA33KAR — bta-visual.css  v1.2
   P2B SLICE A: global visual foundation + PROPERTY LISTING SHELL.

   Loads AFTER bta-tokens.css, which is the last theme sheet, so this layer wins
   at equal specificity without fighting anything. fixes.css is deliberately NOT
   used: it is registered BEFORE bootstrap and style.css and therefore cannot
   override them. style.css is served as style.css?v=<deploy_version> and must
   not become a modernization workspace.

   SCOPE DISCIPLINE. Tokens are global (harmless, additive). Everything that
   paints is scoped to the property listing, because .main-homes, .bgheadproject
   and even #ajax-filters-form are shared with /projects, agents, tag, career and
   404. #properties-list is unique to properties-list.blade.php and is therefore
   the anchor. Ancestors are reached with :has(); where :has() is unsupported the
   page simply keeps its current appearance, which is a safe degradation.

   P2B is shell only. Card internals, the projects grid (D5), filter behaviour,
   the interactive map (D6b), chips and the Arabic web font are later slices.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Semantic, --bta-* namespaced. Bootstrap's own --bs-* roots are left alone.
   -------------------------------------------------------------------------- */
:root {
    /* brand */
    --bta-brand: #08519B;
    --bta-brand-hover: #063A5D;
    --bta-brand-subtle: #EAF1F9;
    --bta-brand-contrast: #FFFFFF;

    /* neutral scale */
    --bta-n-0: #FFFFFF;
    --bta-n-25: #FBFBFA;
    --bta-n-50: #F6F7F5;
    --bta-n-100: #EFF0ED;
    --bta-n-200: #E3E4E0;
    --bta-n-300: #CFD1CC;
    --bta-n-400: #A8ABA4;
    --bta-n-500: #7C807A;
    --bta-n-600: #5C605A;
    --bta-n-700: #43463F;
    --bta-n-800: #2B2E29;
    --bta-n-900: #191B17;

    /* surfaces */
    --bta-surface-page: var(--bta-n-25);
    --bta-surface-raised: var(--bta-n-0);
    --bta-surface-sunken: var(--bta-n-50);

    /* text */
    --bta-text-primary: var(--bta-n-900);
    --bta-text-secondary: var(--bta-n-700);
    --bta-text-muted: var(--bta-n-500);
    --bta-text-inverse: var(--bta-n-0);

    /* borders */
    --bta-border-subtle: var(--bta-n-200);
    --bta-border-default: var(--bta-n-300);
    --bta-border-strong: var(--bta-n-400);

    /* focus — matches the P1 focus ring already shipped in bta-tokens.css */
    --bta-focus: #063A5D;
    --bta-focus-width: 3px;
    --bta-focus-offset: 2px;

    /* status */
    --bta-success: #1F7A46;
    --bta-warning: #9A6B00;
    --bta-danger: #A32020;
    --bta-info: var(--bta-brand);

    /* radius */
    --bta-radius-sm: 8px;
    --bta-radius-md: 12px;
    --bta-radius-lg: 16px;
    --bta-radius-pill: 999px;

    /* shadow — used sparingly; borders and whitespace carry the hierarchy */
    --bta-shadow-sm: 0 1px 2px rgba(25, 27, 23, .06);
    --bta-shadow-md: 0 4px 16px rgba(25, 27, 23, .08);

    /* spacing, 4px base */
    --bta-space-1: 4px;
    --bta-space-2: 8px;
    --bta-space-3: 12px;
    --bta-space-4: 16px;
    --bta-space-5: 20px;
    --bta-space-6: 24px;
    --bta-space-8: 32px;
    --bta-space-10: 40px;
    --bta-space-12: 48px;
    --bta-space-16: 64px;

    /* containers */
    --bta-container-max: 1280px;
    --bta-container-max-wide: 1440px;
    --bta-container-w: 1280px;            /* active tier, raised at &ge;1600 */
    --bta-gutter: var(--bta-space-4);

    /* controls */
    --bta-control-height: 44px;

    /* typography scale */
    --bta-fs-h1: clamp(2rem, 1.35rem + 2.1vw, 2.75rem);
    --bta-fs-h2: clamp(1.5rem, 1.2rem + 1.0vw, 2rem);
    --bta-fs-h3: clamp(1.25rem, 1.12rem + 0.4vw, 1.5rem);
    --bta-fs-body: 1rem;
    --bta-fs-meta: 0.875rem;
    --bta-fs-caption: 0.75rem;
    --bta-lh-tight: 1.15;
    --bta-lh-body: 1.6;

    /* motion */
    --bta-motion-fast: 150ms;
    --bta-motion-standard: 200ms;
    --bta-ease: cubic-bezier(.2, 0, .2, 1);

    /* z-index ladder */
    --bta-z-map-chrome: 400;
    --bta-z-sticky: 600;
    --bta-z-drawer: 1040;
    --bta-z-popup: 1060;
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY  (listing scope only in P2B)
   -------------------------------------------------------------------------- */
.main-homes:has(#properties-list) .bgheadproject .description h1 {
    font-size: var(--bta-fs-h1);
    line-height: var(--bta-lh-tight);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-block: 0 var(--bta-space-3);
    text-wrap: balance;
}

.main-homes:has(#properties-list) .bgheadproject .description p {
    font-size: var(--bta-fs-body);
    line-height: var(--bta-lh-body);
    max-width: 62ch;
    margin-inline: auto;
    margin-block: 0 var(--bta-space-4);
    color: inherit;
    opacity: .92;
}

/* Visually-hidden utility, available to later slices. */
.bta-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. CONTAINERS / PAGE SURFACE
   Replaces the shifting 95% / 85% / 1140px behaviour on the listing only.
   -------------------------------------------------------------------------- */
.container-fluid.w90:has(#properties-list) {
    max-width: var(--bta-container-w);
    padding-inline: var(--bta-gutter);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .container-fluid.w90:has(#properties-list),
    .main-homes:has(#properties-list) .bgheadproject .description .container-fluid.w90 { --bta-gutter: var(--bta-space-6); }
}
@media (min-width: 1024px) {
    .container-fluid.w90:has(#properties-list),
    .main-homes:has(#properties-list) .bgheadproject .description .container-fluid.w90 { --bta-gutter: var(--bta-space-8); }
}
@media (min-width: 1600px) {
    .container-fluid.w90:has(#properties-list),
    .main-homes:has(#properties-list) .bgheadproject .description .container-fluid.w90 { --bta-container-w: var(--bta-container-max-wide); }
}

/* Header block gets the same measure so the title does not run edge to edge. */
.main-homes:has(#properties-list) .bgheadproject .description .container-fluid.w90 {
    max-width: var(--bta-container-w);
    padding-inline: var(--bta-gutter);
    margin-inline: auto;
}

.main-homes:has(#properties-list) .bgheadproject .description {
    padding-block: var(--bta-space-10);
}

/* Quiet page ground so raised white regions read as surfaces. */
.main-homes:has(#properties-list) {
    background-color: var(--bta-surface-page);
}

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

/* --------------------------------------------------------------------------
   4. SURFACES
   -------------------------------------------------------------------------- */
#properties-list .shop__sort,
#ajax-filters-form:has(#properties-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);
}

/* --------------------------------------------------------------------------
   5. BUTTONS  (listing scope; later slices adopt these page by page)
   -------------------------------------------------------------------------- */
#ajax-filters-form:has(#properties-list) .btn.btn-primary,
#properties-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 var(--bta-motion-fast) var(--bta-ease),
                border-color var(--bta-motion-fast) var(--bta-ease);
}

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

/* The Search action is the one unmistakable primary on the page. */
#ajax-filters-form:has(#properties-list) .btn.btn-primary.btn-full {
    inline-size: 100%;
    font-weight: 600;
}

/* Secondary / dropdown triggers inside the filter shell. */
#ajax-filters-form:has(#properties-list) .search-box-items .btn.btn-secondary,
#properties-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;
}

/* --------------------------------------------------------------------------
   6. FORMS
   Visual only. Names, ids, values, order and serialization are untouched.
   -------------------------------------------------------------------------- */
#ajax-filters-form:has(#properties-list) .form-control,
#properties-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 var(--bta-motion-fast) var(--bta-ease);
}

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

#ajax-filters-form:has(#properties-list) .control-label,
#properties-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(#properties-list) .form-control::placeholder {
    color: var(--bta-text-muted);
    opacity: 1;
}

/* The P1 :focus-visible ring from bta-tokens.css must stay clearly visible. */
#ajax-filters-form:has(#properties-list) .form-control:focus-visible,
#properties-list .form-control:focus-visible,
#properties-list .pagination a:focus-visible {
    outline: var(--bta-focus-width) solid var(--bta-focus);
    outline-offset: var(--bta-focus-offset);
}

/* --------------------------------------------------------------------------
   7. LISTING GRID SHELL   (1 / 2 / 3 / 4)
   The old markup is .data-listing > .row > .colm10.property-item, a float/flex
   row that produced five 222px cards at 1920. Card internals stay untouched:
   this replaces only the track geometry.
   -------------------------------------------------------------------------- */
#properties-list .data-listing > .row {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--bta-space-4);
    margin-inline: 0;
}

#properties-list .data-listing > .row > .colm10.property-item {
    inline-size: auto;
    max-inline-size: none;
    flex: none;
    float: none;
    padding-inline: 0;
    min-inline-size: 0;
}

/* Long Arabic titles must not push a track wider than its column. */
#properties-list .data-listing > .row > .colm10.property-item * {
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    #properties-list .data-listing > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bta-space-5);
    }
}
@media (min-width: 1024px) {
    #properties-list .data-listing > .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--bta-space-6);
    }
}
@media (min-width: 1440px) {
    #properties-list .data-listing > .row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   8. FILTER BAR SHELL   (visual container only — behaviour is frozen)
   -------------------------------------------------------------------------- */
#ajax-filters-form:has(#properties-list) .search-box-items {
    padding: var(--bta-space-5);
    margin-block-end: var(--bta-space-4);
}

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

/* --------------------------------------------------------------------------
   9. SHOWING / SORT
   .shop__sort and its selectors are preserved; per_page and sort_by keep their
   existing auto-submit-on-change behaviour.
   -------------------------------------------------------------------------- */
#properties-list .shop__sort {
    padding: var(--bta-space-3) var(--bta-space-4);
    margin-block-end: var(--bta-space-4);
}

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

#properties-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);
}

/* --------------------------------------------------------------------------
   10. MAP SIZING — D6a, STATIC CONTRACT ONLY
   style.css sets an unconditional #map{min-height:730px} and the Blade carries
   an inline height:420px, so both have to be overridden. No JS, no re-parenting,
   no initMaps(), no invalidateSize(), no generation or zoomAnimation change.
   D6b (expand / collapse / optional map mode) is P2D.
   -------------------------------------------------------------------------- */
#properties-list #map {
    block-size: 220px !important;
    min-block-size: 0 !important;
    height: 220px !important;
    min-height: 0 !important;
}

@media (min-width: 768px) {
    #properties-list #map {
        block-size: 320px !important;
        height: 320px !important;
    }
}

@media (min-width: 1024px) {
    #properties-list #map {
        block-size: clamp(420px, calc(100vh - 160px), 560px) !important;
        height: clamp(420px, calc(100vh - 160px), 560px) !important;
    }
}

#properties-list #properties-map-horizontal {
    margin-block-end: var(--bta-space-4);
}

/* The inert resize affordance stays hidden (P1B3B3, bta-tokens.css v1.7). */

/* --------------------------------------------------------------------------
   11. PAGINATION   (markup and hrefs untouched)
   -------------------------------------------------------------------------- */
#properties-list .pagination {
    gap: var(--bta-space-2);
    flex-wrap: wrap;
}

#properties-list .pagination .page-link {
    min-inline-size: var(--bta-control-height);
    min-block-size: var(--bta-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bta-radius-md);
    border: 1px solid var(--bta-border-subtle);
    color: var(--bta-text-primary);
    font-weight: 500;
}

#properties-list .pagination .page-item.active .page-link {
    background-color: var(--bta-brand);
    border-color: var(--bta-brand);
    color: var(--bta-brand-contrast);
}

#properties-list .pagination .page-link:hover {
    border-color: var(--bta-border-strong);
    background-color: var(--bta-surface-sunken);
}

/* --------------------------------------------------------------------------
   12. RTL
   Logical properties are used throughout, so /ar needs almost nothing. Only
   genuinely directional affordances are mirrored.
   -------------------------------------------------------------------------- */
[dir="rtl"] #properties-list .shop__sort,
[dir="rtl"] #ajax-filters-form:has(#properties-list) .search-box-items {
    text-align: start;
}

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

/* --------------------------------------------------------------------------
   13. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #ajax-filters-form:has(#properties-list) .btn,
    #ajax-filters-form:has(#properties-list) .form-control,
    #properties-list .btn,
    #properties-list .form-control,
    #properties-list .pagination .page-link {
        transition: none !important;
    }
}