/* ==========================================================================
   BE REAL ESTATE — design system
   --------------------------------------------------------------------------
   Authored as plain CSS on purpose:

   1. The project's package-lock.json is out of sync with package.json (a
      pre-existing defect in the shipped Homzen product), so `npm ci` refuses
      and no SCSS/Vite build can run. Plain CSS needs no build step.
   2. Everything directional uses CSS *logical properties*
      (margin-inline, inset-inline-start, border-start-start-radius...), so a
      single stylesheet renders correctly in both RTL and LTR. That is a real
      bidirectional design rather than an rtlcss mirror of an LTR one - which
      matters when Arabic is the primary interface.

   No Bootstrap, no Swiper, no jQuery on the public site. A template-derived
   grid is exactly what makes a site look template-derived.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — taken from the logo.
       The mark is deep navy and royal blue on white; there is no bronze or
       gold anywhere in it. Sampling the artwork gives two dominant chromatic
       families: #002050 (the wordmark and the eagle's body) and #0060c0 (the
       wings, the roof glyph and the "BUY · SELL · INVEST" rule).

       Royal blue is therefore the action colour and deep navy the structural
       one, each carried through as a ramp so no component hand-picks a one-off
       hex. --be-brand on white text measures 6.9:1.

       These are defaults. layouts/base.blade.php overrides --be-brand,
       --be-navy and --be-accent from theme options, so the palette stays
       editable in the admin without touching this file. */
    --be-brand: #0057b8;
    --be-brand-600: #0063d1;
    --be-brand-700: #004491;
    --be-brand-400: #3585dd;
    --be-brand-300: #7fb3f0;
    --be-brand-100: #cfe1f8;
    --be-brand-50: #eff5fd;

    --be-navy: #0a2050;
    --be-navy-900: #05132f;
    --be-navy-800: #0e2a63;
    --be-navy-600: #2c4784;
    --be-navy-400: #8095be;

    /* The on-dark accent. Named --be-gold when the palette was bronze; it is
       now the logo's light blue, which reads 7.2:1 on --be-navy. The token
       name is kept because it is referenced in eighteen places and renaming it
       would be churn without meaning - it has always meant "the accent that
       goes on a dark panel". */
    --be-gold: #7fb3f0;
    --be-gold-soft: #eff5fd;

    /* Neutrals */
    --be-ink: #1f2937;
    --be-ink-soft: #374151;
    --be-muted: #6b7280;
    --be-line: #e5e7eb;
    --be-line-soft: #f3f4f6;
    --be-surface: #ffffff;
    --be-canvas: #f9fafb;

    /* Status */
    --be-success: #067647;
    --be-success-soft: #ecfdf3;
    --be-warning: #b54708;
    --be-warning-soft: #fff6ed;
    --be-danger: #b42318;
    --be-danger-soft: #fef3f2;

    /* Type — Cairo is the primary Arabic face; the stack degrades to the
       platform Arabic UI font rather than to a Latin one. */
    --be-font: 'Cairo', 'Segoe UI', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif;

    --be-text-xs: 0.75rem;    /* 12 */
    --be-text-sm: 0.875rem;   /* 14 */
    --be-text-base: 0.9375rem;/* 15 */
    --be-text-md: 1rem;       /* 16 */
    --be-text-lg: 1.125rem;   /* 18 */
    --be-text-xl: 1.125rem;   /* 18 */
    --be-text-2xl: 1.375rem;  /* 22 */
    --be-text-3xl: 2.25rem;   /* 36 */
    --be-text-4xl: 2.875rem;  /* 46 */

    --be-leading-tight: 1.25;
    --be-leading-snug: 1.45;
    --be-leading-normal: 1.75;

    /* Space — 4px base */
    --be-1: 0.25rem;
    --be-2: 0.5rem;
    --be-3: 0.75rem;
    --be-4: 1rem;
    --be-5: 1.25rem;
    --be-6: 1.5rem;
    --be-8: 2rem;
    --be-10: 2.5rem;
    --be-12: 3rem;
    --be-16: 4rem;
    --be-20: 5rem;
    --be-24: 6rem;

    /* Radii */
    --be-r-sm: 8px;
    --be-r: 12px;
    /* --be-r-md was referenced in eleven places and never declared, so every
       one of those radii silently resolved to nothing. */
    --be-r-md: 12px;
    --be-r-lg: 14px;
    --be-r-xl: 22px;
    --be-r-pill: 999px;

    /* Elevation — deliberately restrained; big soft shadows read as "template" */
    --be-shadow-xs: 0 1px 2px rgba(23, 32, 51, 0.05);
    --be-shadow-sm: 0 1px 3px rgba(23, 32, 51, 0.07), 0 1px 2px rgba(23, 32, 51, 0.04);
    --be-shadow: 0 4px 14px rgba(23, 32, 51, 0.07);
    --be-shadow-lg: 0 12px 32px rgba(23, 32, 51, 0.10);

    /* Layout */
    --be-container: 1280px;
    --be-gutter: 1.5rem;
    --be-header-h: 64px;

    --be-ring: 0 0 0 3px rgba(0, 87, 184, 0.20);
    --be-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 991px) {
    :root {
        --be-header-h: 64px;
        --be-gutter: 1.125rem;
        --be-text-4xl: 2rem;
        --be-text-3xl: 1.625rem;
        --be-text-2xl: 1.375rem;
    }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.be {
    margin: 0;
    font-family: var(--be-font);
    font-size: var(--be-text-base);
    line-height: var(--be-leading-normal);
    color: var(--be-ink);
    background: var(--be-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic sets a touch larger and looser: Cairo's x-height runs small next to
   Latin faces at the same nominal size, and Arabic needs more leading. */
html[lang^="ar"] body.be {
    font-size: 1rem;
    line-height: 1.85;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--be-brand); text-decoration: none; transition: color var(--be-transition); }
a:hover { color: var(--be-navy); }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: var(--be-leading-tight);
    color: var(--be-ink);
    letter-spacing: -0.01em;
}
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3 { letter-spacing: 0; line-height: 1.4; }

h1 { font-size: var(--be-text-4xl); }
h2 { font-size: var(--be-text-3xl); }
h3 { font-size: var(--be-text-xl); }
h4 { font-size: var(--be-text-lg); }

p { margin: 0 0 var(--be-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
    outline: none;
    box-shadow: var(--be-ring);
    border-radius: var(--be-r-sm);
}

::selection { background: var(--be-brand-100); color: var(--be-navy); }

.be-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — keyboard users land here first. */
.be-skip {
    position: absolute;
    inset-inline-start: var(--be-4);
    inset-block-start: -100px;
    z-index: 200;
    padding: var(--be-3) var(--be-5);
    background: var(--be-brand);
    color: #fff;
    border-radius: var(--be-r-sm);
    transition: inset-block-start var(--be-transition);
}
.be-skip:focus { inset-block-start: var(--be-4); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.be-container {
    width: 100%;
    max-width: var(--be-container);
    margin-inline: auto;
    padding-inline: var(--be-gutter);
}

.be-section { padding-block: 60px; }
.be-section--tight { padding-block: 44px; }
.be-section--flush { padding-block-start: 0; }
.be-section--canvas { background: var(--be-surface); }
.be-section--blue { background: var(--be-brand-50); }

@media (max-width: 767px) {
    .be-section { padding-block: var(--be-10); }
    .be-section--tight { padding-block: var(--be-8); }
}

.be-grid { display: grid; gap: var(--be-5); }
.be-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.be-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.be-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.be-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1199px) {
    .be-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .be-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .be-grid--3, .be-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .be-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .be-grid--2, .be-grid--3, .be-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .be-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Section header — title inline-start, action inline-end; flips automatically. */
.be-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--be-4);
    margin-block-end: var(--be-8);
}
.be-section-head__eyebrow {
    display: block;
    font-size: var(--be-text-sm);
    font-weight: 700;
    color: var(--be-brand);
    margin-block-end: var(--be-2);
}
.be-section-head__title { font-size: var(--be-text-xl); font-weight: 700; letter-spacing: -0.01em; }
.be-section-head__sub {
    margin: var(--be-2) 0 0;
    color: var(--be-muted);
    font-size: var(--be-text-base);
    max-width: 62ch;
}
.be-section-head__link {
    flex: none;
    font-weight: 600;
    font-size: var(--be-text-base);
    display: inline-flex;
    align-items: center;
    gap: var(--be-2);
}
.be-section-head__link svg { inline-size: 16px; block-size: 16px; }
/* The chevron points "forward" in reading order in both directions. */
[dir="rtl"] .be-section-head__link svg { transform: scaleX(-1); }

@media (max-width: 575px) {
    .be-section-head { flex-direction: column; align-items: flex-start; margin-block-end: var(--be-6); }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.be-btn {
    --_bg: var(--be-brand);
    --_fg: #fff;
    --_bd: var(--be-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--be-2);
    padding: 0.5rem var(--be-5);
    font-family: inherit;
    font-size: var(--be-text-base);
    font-weight: 600;
    line-height: 1.4;
    color: var(--_fg);
    background: var(--_bg);
    border: 1px solid var(--_bd);
    border-radius: 9px;
    cursor: pointer;
    text-align: center;
    transition: background var(--be-transition), border-color var(--be-transition),
                color var(--be-transition), transform var(--be-transition);
    white-space: nowrap;
}
.be-btn:hover { --_bg: var(--be-navy); --_bd: var(--be-navy); color: #fff; }
.be-btn:active { transform: translateY(1px); }
.be-btn[disabled], .be-btn.is-disabled { opacity: 0.55; pointer-events: none; }
.be-btn svg { inline-size: 18px; block-size: 18px; flex: none; }

.be-btn--ghost { --_bg: transparent; --_fg: var(--be-ink); --_bd: var(--be-line); }
.be-btn--ghost:hover { --_bg: var(--be-brand-50); --_fg: var(--be-navy); --_bd: var(--be-brand-100); }

.be-btn--soft { --_bg: var(--be-brand-50); --_fg: var(--be-navy); --_bd: transparent; }
.be-btn--soft:hover { --_bg: var(--be-brand-100); --_fg: var(--be-navy); }

/* Gold is an accent, never the default action. Reserved for one CTA per view. */
.be-btn--gold { --_bg: var(--be-gold); --_fg: var(--be-navy); --_bd: var(--be-gold); }
.be-btn--gold:hover { --_bg: var(--be-brand-400); --_bd: var(--be-brand-400); color: #fff; }

/* The single standing call to action: "add your property" in the header, the
   submit in every search bar. Slightly taller and rounder than a default
   button so it reads as the one thing to press on a busy row. */
.be-btn--cta {
    --_bg: var(--be-brand);
    --_bd: var(--be-brand);
    padding: 0.5625rem var(--be-5);
    border-radius: 9px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(22, 36, 58, 0.08);
}
.be-btn--cta:hover { --_bg: var(--be-brand-700); --_bd: var(--be-brand-700); }

/* Outlined bronze: the per-card secondary action ("view compound"). */
.be-btn--outline { --_bg: var(--be-surface); --_fg: var(--be-brand); --_bd: var(--be-line); border-radius: 12px; min-block-size: 38px; }
.be-btn--outline:hover { --_bg: var(--be-brand-50); --_fg: var(--be-brand-700); --_bd: var(--be-brand); }

.be-btn--white { --_bg: #fff; --_fg: var(--be-navy); --_bd: #fff; }
.be-btn--white:hover { --_bg: var(--be-brand-50); color: var(--be-navy); }

.be-btn--lg { padding: 0.875rem var(--be-8); font-size: var(--be-text-md); }
.be-btn--sm { padding: 0.4375rem var(--be-4); font-size: var(--be-text-sm); }
.be-btn--block { display: flex; inline-size: 100%; }

/* Icon-only control */
.be-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    background: #fff;
    color: var(--be-ink);
    cursor: pointer;
    transition: background var(--be-transition), color var(--be-transition), border-color var(--be-transition);
}
.be-icon-btn:hover { background: var(--be-brand-50); color: var(--be-brand); border-color: var(--be-brand-100); }
.be-icon-btn svg { inline-size: 19px; block-size: 19px; }

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */
.be-field { display: block; }
.be-label {
    display: block;
    font-size: var(--be-text-sm);
    font-weight: 600;
    color: var(--be-ink);
    margin-block-end: var(--be-2);
}
.be-input,
.be-select,
.be-textarea {
    inline-size: 100%;
    padding: 0.6875rem var(--be-4);
    font-family: inherit;
    font-size: var(--be-text-base);
    color: var(--be-ink);
    background: #fff;
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    transition: border-color var(--be-transition), box-shadow var(--be-transition);
    appearance: none;
}
.be-input::placeholder, .be-textarea::placeholder { color: var(--be-muted); opacity: 1; }
.be-input:focus, .be-select:focus, .be-textarea:focus {
    outline: none;
    border-color: var(--be-brand);
    box-shadow: var(--be-ring);
}
.be-textarea { min-block-size: 110px; resize: vertical; line-height: var(--be-leading-snug); }

/* The chevron sits at the inline-end and the text clears it, in both dirs. */
.be-select {
    padding-inline-end: var(--be-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--be-4) center;
    background-size: 18px;
}
[dir="rtl"] .be-select {
    padding-inline-end: var(--be-10);
    background-position: left var(--be-4) center;
}

.be-input-group { position: relative; }
.be-input-group .be-input { padding-inline-start: var(--be-10); }
.be-input-group__icon {
    position: absolute;
    inset-inline-start: var(--be-3);
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--be-muted);
    pointer-events: none;
    inline-size: 20px;
    block-size: 20px;
}

.be-help { margin-block-start: var(--be-2); font-size: var(--be-text-sm); color: var(--be-muted); }
.be-error { margin-block-start: var(--be-2); font-size: var(--be-text-sm); color: var(--be-danger); }
.be-input.is-invalid, .be-select.is-invalid { border-color: var(--be-danger); }

/* Check / radio */
.be-check { display: inline-flex; align-items: center; gap: var(--be-2); cursor: pointer; font-size: var(--be-text-base); }
.be-check input { inline-size: 18px; block-size: 18px; accent-color: var(--be-brand); cursor: pointer; margin: 0; }

/* Segmented control — the بيع / إيجار switch */
/* Buy / rent switch.
   Navy shell with a white knob: it is a mode selector, not a call to action,
   so it stays out of the bronze that every real button uses. */
.be-segment {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--be-r-pill);
    background: var(--be-navy);
    gap: 2px;
}
.be-segment__item {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 0.4375rem var(--be-6);
    border-radius: var(--be-r-pill);
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: var(--be-text-sm);
    font-weight: 700;
    transition: background var(--be-transition), color var(--be-transition);
}
.be-segment__item:hover { color: #fff; }
.be-segment__item[aria-selected="true"] { background: #fff; color: var(--be-navy); }

/* --------------------------------------------------------------------------
   6. Badges & chips
   -------------------------------------------------------------------------- */
.be-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--be-1);
    padding: 0.1875rem var(--be-3);
    font-size: var(--be-text-xs);
    font-weight: 700;
    line-height: 1.6;
    border-radius: var(--be-r-pill);
    background: var(--be-brand-50);
    color: var(--be-navy);
    white-space: nowrap;
}
.be-badge--primary { background: var(--be-brand); color: #fff; }
.be-badge--gold { background: var(--be-gold-soft); color: #7a6110; }
.be-badge--success { background: var(--be-success-soft); color: var(--be-success); }
.be-badge--warning { background: var(--be-warning-soft); color: var(--be-warning); }
.be-badge--danger { background: var(--be-danger-soft); color: var(--be-danger); }
.be-badge--dark { background: rgba(23, 32, 51, 0.72); color: #fff; backdrop-filter: blur(4px); }
/* The second badge on a card — instalments, unit count. Reads as information
   rather than status, so it takes the brand colour instead of the dark
   overlay, and stays legible on top of a photograph. */
.be-badge--accent {
    background: rgba(0, 87, 184, 0.88);
    color: #fff;
    backdrop-filter: blur(4px);
}
.be-chip--active { background: var(--be-brand); border-color: var(--be-brand); color: #fff; }
.be-chip--active:hover { background: var(--be-navy); color: #fff; }

.be-chips { display: flex; flex-wrap: wrap; gap: var(--be-2); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.be-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--be-surface);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    overflow: hidden;
    transition: border-color var(--be-transition), box-shadow var(--be-transition), transform var(--be-transition);
}
.be-card:hover {
    border-color: var(--be-brand-100);
    box-shadow: 0 12px 28px -12px rgba(22, 36, 58, 0.18);
    transform: translateY(-2px);
}

.be-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--be-line-soft); overflow: hidden; }
.be-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.be-card:hover .be-card__media img { transform: scale(1.045); }

/* Badges sit in the corner opposite the save/share controls.

   Both used to be pinned to inset-inline-start — the same corner — so the
   round buttons were drawn straight over the status badge and clipped its
   text to "…ة بيع". Putting them on opposite sides is the fix; stacking the
   buttons vertically, which an earlier comment claimed handled it, never
   addressed two things sharing one corner.

   A column, because a listing can be both resale and sold in instalments, and
   a compound both newly launched and holding 296 units. max-inline-size keeps
   a long badge from reaching the buttons on a narrow card. */
.be-card__badges {
    position: absolute;
    inset-block-start: var(--be-3);
    inset-inline-end: var(--be-3);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--be-1);
    max-inline-size: calc(100% - 62px);
}


/* Favourite / share controls float above the stretched title link, so they
   need their own stacking context to stay clickable. */
.be-card__fav,
.be-card__tool {
    position: absolute;
    z-index: 3;
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--be-r-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--be-navy);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
    transition: background var(--be-transition), color var(--be-transition), transform var(--be-transition);
}
.be-card__fav:hover,
.be-card__tool:hover { background: #fff; color: var(--be-brand); }
.be-card__fav:active,
.be-card__tool:active { transform: scale(0.94); }
/* Controls live on the inline-start side on every card, badges on the
   inline-end side. The compound card uses this single button where the
   property card uses .be-card__tools, and it was still on the badge side —
   which simply moved the overlap from one card type to the other. One rule
   for both: whatever is interactive goes to the start, whatever is a label
   goes to the end. */
.be-card__fav { inset-block-start: var(--be-3); inset-inline-start: var(--be-3); }
.be-card__fav[aria-pressed="true"],
.be-card__tool[aria-pressed="true"] { background: var(--be-brand); color: #fff; }
.be-card__fav[aria-pressed="true"] svg,
.be-card__tool[aria-pressed="true"] svg { fill: currentColor; }

.be-card__tools {
    position: absolute;
    inset-block-start: var(--be-3);
    inset-inline-start: var(--be-3);
    z-index: 3;
    display: grid;
    gap: var(--be-2);
}
.be-card__tools .be-card__tool { position: static; }

.be-card__body { padding: var(--be-4); display: flex; flex-direction: column; gap: var(--be-2); flex: 1; }

.be-card__head { display: flex; align-items: flex-start; gap: var(--be-3); }
.be-card__headtext { flex: 1; min-inline-size: 0; }
.be-card__devlogo {
    flex: none;
    inline-size: 34px;
    block-size: 34px;
    object-fit: contain;
    border-radius: var(--be-r-sm);
    border: 1px solid var(--be-line);
    background: #fff;
    padding: 2px;
}

.be-card__title { font-size: var(--be-text-sm); font-weight: 700; line-height: 1.45; margin: 0; color: var(--be-navy); }
.be-card__title a { color: inherit; }
.be-card__title a:hover { color: var(--be-brand); }
.be-card__title--clamp a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The stretched link makes the whole card one target while leaving the real
   controls above it reachable. */
.be-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.be-card__eyebrow { font-size: var(--be-text-sm); color: var(--be-muted); margin: 2px 0 0; }
.be-card__meta { display: flex; align-items: center; gap: 5px; font-size: var(--be-text-sm); color: var(--be-muted); margin: 0; }
.be-card__meta .be-icon { flex: none; color: var(--be-brand-400); }

.be-card__price { font-size: var(--be-text-lg); font-weight: 800; color: var(--be-navy); }
.be-card__price small { font-size: var(--be-text-sm); font-weight: 600; color: var(--be-muted); }

.be-card__specs { display: flex; flex-wrap: wrap; gap: var(--be-3); font-size: var(--be-text-sm); color: var(--be-muted); }
.be-card__spec { display: inline-flex; align-items: center; gap: 4px; }
.be-card__spec b { color: var(--be-ink); font-weight: 700; }

.be-card__more {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: auto 0 0;
    padding-block-start: var(--be-2);
    font-size: var(--be-text-sm);
    font-weight: 700;
    color: var(--be-brand);
}

/* Payment terms: three equal cells divided by hairlines, never wrapping.
   A missing figure shows an em dash rather than collapsing the column, so
   every card in a row keeps the same three-cell rhythm. */
.be-terms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    margin: var(--be-1) 0 0;
    overflow: hidden;
}
.be-terms__cell { padding: var(--be-2) var(--be-1); text-align: center; min-inline-size: 0; }
.be-terms__cell + .be-terms__cell { border-inline-start: 1px solid var(--be-line); }
.be-terms dt { font-size: 0.6875rem; color: var(--be-muted); margin: 0 0 2px; }
/* Let the value wrap rather than clip it.

   Three equal columns inside a card leave each cell about 90px, and every
   value in Arabic is longer than its English counterpart — "حتى 9 سنوات"
   against "9 yrs", "10.7 مليون ج.م" against "EGP 10.7M". With nowrap and an
   ellipsis the cells were cutting the figure itself off, which is the one part
   that must survive. A second line costs the card a few pixels; a truncated
   price costs it its meaning. */
.be-terms dd {
    margin: 0;
    font-size: var(--be-text-sm);
    font-weight: 700;
    color: var(--be-navy);
    line-height: 1.35;
    overflow-wrap: anywhere;
    hyphens: none;
}

.be-card--compound .be-card__body { gap: var(--be-2); }

/* List layout: media on the inline start, body filling the rest. */
.be-card--list { flex-direction: row; }
@media (max-width: 767px) {
    .be-card--list { flex-direction: column; }
    .be-card--list .be-card__media { inline-size: 100%; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Area tile - image-led, label riding a gradient
   -------------------------------------------------------------------------- */

.be-tile__from { font-size: var(--be-text-sm); font-weight: 700; color: var(--be-gold); margin: 2px 0 0; }

/* --------------------------------------------------------------------------
   Developer card
   --------------------------------------------------------------------------
   The logo gets a plain white field: a tinted or photographic backdrop would
   fight with the hundred different brand colours in the list.
   -------------------------------------------------------------------------- */
.be-devcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--be-surface);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    padding: var(--be-5) var(--be-4) 0;
    transition: border-color var(--be-transition), box-shadow var(--be-transition), transform var(--be-transition);
}
.be-devcard:hover { border-color: var(--be-brand-100); box-shadow: 0 12px 28px -12px rgba(22, 36, 58, 0.16); transform: translateY(-2px); }
.be-devcard__logo { display: grid; place-items: center; block-size: 56px; inline-size: 100%; }
.be-devcard__logo img { max-inline-size: 120px; max-block-size: 52px; object-fit: contain; }
.be-devcard__initials {
    inline-size: 46px; block-size: 46px;
    display: grid; place-items: center;
    border-radius: var(--be-r-sm);
    background: var(--be-brand-50);
    color: var(--be-brand);
    font-weight: 800;
}
.be-devcard__name { font-size: var(--be-text-base); font-weight: 700; color: var(--be-navy); margin: var(--be-3) 0; }
.be-devcard__stats {
    display: flex; align-items: center; justify-content: center; gap: var(--be-3);
    inline-size: 100%;
    margin: auto 0 0;
    padding: var(--be-3) 0;
    border-block-start: 1px solid var(--be-line);
    font-size: var(--be-text-xs);
    color: var(--be-muted);
}
.be-devcard__stats b { color: var(--be-brand); font-weight: 700; }
.be-devcard__stats i { inline-size: 1px; block-size: 12px; background: var(--be-line); }

/* --------------------------------------------------------------------------
   8. Media / overlay cards (locations)
   -------------------------------------------------------------------------- */
.be-tile {
    position: relative;
    display: block;
    border-radius: var(--be-r-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--be-ink);
    isolation: isolate;
}
.be-tile--wide { aspect-ratio: 16 / 10; }.be-tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}.be-tile:hover img { transform: scale(1.06); }.be-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 42%, rgba(15, 23, 42, 0.82) 100%);
    /* Gradient only where the text sits — a full-surface scrim looks cheap. */
    background: linear-gradient(to top, rgba(13, 32, 60, 0.86) 0%, rgba(13, 32, 60, 0.42) 38%, rgba(13, 32, 60, 0) 68%);
}.be-tile__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 2;
    padding: var(--be-5);
    color: #fff;
}.be-tile__title { font-size: var(--be-text-lg); font-weight: 700; color: #fff; margin: 0 0 var(--be-1); }.be-tile__meta { font-size: var(--be-text-sm); color: rgba(255, 255, 255, 0.85); margin: 2px 0 0; display: flex; gap: var(--be-3); flex-wrap: wrap; }
.be-tile__meta b { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   9. Logo cards (developers)
   -------------------------------------------------------------------------- */
.be-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--be-3);
    padding: var(--be-6) var(--be-4);
    background: #fff;
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    text-align: center;
    transition: border-color var(--be-transition), box-shadow var(--be-transition);
    block-size: 100%;
}
.be-logo-card:hover { border-color: var(--be-brand-100); box-shadow: var(--be-shadow-sm); }
.be-logo-card__img {
    inline-size: 100%;
    block-size: 56px;
    object-fit: contain;
    /* Mixed-quality developer logos look tidier desaturated until hover. */
    filter: grayscale(1);
    opacity: 0.78;
    transition: filter var(--be-transition), opacity var(--be-transition);
}
.be-logo-card:hover .be-logo-card__img { filter: none; opacity: 1; }
.be-logo-card__name { font-size: var(--be-text-base); font-weight: 700; color: var(--be-ink); }
.be-logo-card__meta { font-size: var(--be-text-xs); color: var(--be-muted); }
.be-logo-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 56px;
    border-radius: var(--be-r-sm);
    background: var(--be-brand-50);
    color: var(--be-navy);
    font-weight: 800;
    font-size: var(--be-text-xl);
}

/* --------------------------------------------------------------------------
   10. Carousel (vanilla, scroll-snap — no JS library)
   -------------------------------------------------------------------------- */
.be-rail { position: relative; }
.be-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 286px;
    gap: var(--be-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block-end: var(--be-2);
    /* Hide the scrollbar without losing keyboard/touch scrolling. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.be-rail__track::-webkit-scrollbar { display: none; }
.be-rail__track > * { scroll-snap-align: start; }

/* The column width is set as a single exact value, never as minmax(0, X).
   With grid-auto-flow: column, a zero minimum lets every item shrink to fit
   the container instead of overflowing it - so a rail of twelve cards became
   twelve slivers side by side rather than four cards and a scroll. */
@media (min-width: 992px) {
    .be-rail__track { grid-auto-columns: calc((100% - (var(--be-5) * 3)) / 4); }
    .be-rail--3 .be-rail__track { grid-auto-columns: calc((100% - (var(--be-5) * 2)) / 3); }
    .be-rail--5 .be-rail__track { grid-auto-columns: calc((100% - (var(--be-5) * 4)) / 5); }
    .be-rail--6 .be-rail__track { grid-auto-columns: calc((100% - (var(--be-5) * 5)) / 6); }
}
@media (min-width: 576px) and (max-width: 991px) {
    .be-rail__track { grid-auto-columns: calc((100% - var(--be-5)) / 2); }
    .be-rail--5 .be-rail__track,
    .be-rail--6 .be-rail__track { grid-auto-columns: calc((100% - (var(--be-5) * 2)) / 3); }
}
@media (max-width: 575px) {
    .be-rail__track { grid-auto-columns: 82%; }
}

.be-rail__nav { display: inline-flex; gap: var(--be-2); }
.be-rail__btn:disabled { opacity: 0.4; cursor: default; }
/* Arrows point "forward" in reading order; RTL flips them. */
[dir="rtl"] .be-rail__btn svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   11. Skeletons & empty states
   -------------------------------------------------------------------------- */
@keyframes be-shimmer { 100% { background-position-x: -200%; } }
.be-skeleton {
    background: linear-gradient(90deg, #eef2f7 0%, #f7fafc 40%, #eef2f7 80%);
    background-size: 200% 100%;
    animation: be-shimmer 1.4s linear infinite;
    border-radius: var(--be-r-sm);
}
@media (prefers-reduced-motion: reduce) {
    .be-skeleton { animation: none; }
    * { scroll-behavior: auto !important; }
}
.be-skeleton-card { border: 1px solid var(--be-line); border-radius: var(--be-r-lg); overflow: hidden; }
.be-skeleton-card__media { aspect-ratio: 16 / 10; }
.be-skeleton-card__body { padding: var(--be-5); display: grid; gap: var(--be-3); }
.be-skeleton-line { block-size: 12px; }
.be-skeleton-line--60 { inline-size: 60%; }
.be-skeleton-line--40 { inline-size: 40%; }

.be-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--be-3);
    padding: var(--be-16) var(--be-6);
    background: var(--be-canvas);
    border: 1px dashed var(--be-line);
    border-radius: var(--be-r-lg);
}
.be-empty__icon {
    inline-size: 56px;
    block-size: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--be-brand-50);
    color: var(--be-brand);
}
.be-empty__icon svg { inline-size: 26px; block-size: 26px; }
.be-empty__title { font-size: var(--be-text-lg); font-weight: 700; }
.be-empty__text { color: var(--be-muted); max-inline-size: 46ch; margin: 0; }

/* --------------------------------------------------------------------------
   12. Breadcrumb & pagination
   -------------------------------------------------------------------------- */
.be-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--be-2); font-size: var(--be-text-sm); color: var(--be-muted); }
.be-breadcrumb a { color: var(--be-muted); }
.be-breadcrumb a:hover { color: var(--be-brand); }
.be-breadcrumb li { display: inline-flex; align-items: center; gap: var(--be-2); }
.be-breadcrumb li + li::before {
    content: '';
    inline-size: 5px; block-size: 5px;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
}
[dir="rtl"] .be-breadcrumb li + li::before { transform: rotate(-135deg); }
.be-breadcrumb [aria-current="page"] { color: var(--be-ink); font-weight: 600; }

.be-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--be-2); margin-block-start: var(--be-10); }
.be-pagination a, .be-pagination span {
    min-inline-size: 40px;
    block-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--be-3);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    color: var(--be-ink);
    font-size: var(--be-text-base);
    font-weight: 600;
    background: #fff;
}
.be-pagination a:hover { border-color: var(--be-brand); color: var(--be-brand); }
.be-pagination .active span, .be-pagination .be-pagination__current { background: var(--be-brand); border-color: var(--be-brand); color: #fff; }
.be-pagination .disabled span { opacity: 0.45; }

/* --------------------------------------------------------------------------
   13. Dialog / drawer
   -------------------------------------------------------------------------- */
.be-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(13, 32, 60, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}
.be-overlay.is-open { opacity: 1; visibility: visible; }

.be-dialog {
    position: fixed;
    z-index: 130;
    background: #fff;
    display: flex;
    flex-direction: column;
    max-block-size: 100dvh;
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, visibility 200ms;
    visibility: hidden;
    opacity: 0;
}
.be-dialog.is-open { visibility: visible; opacity: 1; }

/* Desktop: centred panel. Mobile: bottom sheet. */
@media (min-width: 768px) {
    .be-dialog {
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -46%);
        inline-size: min(760px, calc(100vw - 3rem));
        max-block-size: min(86dvh, 820px);
        border-radius: var(--be-r-xl);
        box-shadow: var(--be-shadow-lg);
    }
    .be-dialog.is-open { transform: translate(-50%, -50%); }
    /* translate(-50%) is direction-agnostic once inset-inline-start is used,
       but RTL needs the sign flipped because the origin moves. */
    [dir="rtl"] .be-dialog { transform: translate(50%, -46%); }
    [dir="rtl"] .be-dialog.is-open { transform: translate(50%, -50%); }
}
@media (max-width: 767px) {
    .be-dialog {
        inset-inline: 0;
        inset-block-end: 0;
        transform: translateY(100%);
        border-start-start-radius: var(--be-r-xl);
        border-start-end-radius: var(--be-r-xl);
        block-size: 92dvh;
    }
    .be-dialog.is-open { transform: translateY(0); }
}

.be-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-4);
    padding: var(--be-5) var(--be-6);
    border-block-end: 1px solid var(--be-line);
    flex: none;
}
.be-dialog__title { font-size: var(--be-text-lg); font-weight: 700; }
.be-dialog__body { padding: var(--be-6); overflow-y: auto; flex: 1; }
.be-dialog__foot {
    display: flex;
    gap: var(--be-3);
    padding: var(--be-4) var(--be-6);
    border-block-start: 1px solid var(--be-line);
    background: var(--be-canvas);
    flex: none;
}
.be-dialog__foot .be-btn { flex: 1; }

/* Mobile nav drawer — slides in from the inline-start edge. */
.be-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 130;
    inline-size: min(320px, 86vw);
    background: #fff;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
[dir="rtl"] .be-drawer { transform: translateX(100%); }
.be-drawer.is-open { transform: translateX(0); }
[dir="rtl"] .be-drawer.is-open { transform: translateX(0); }

body.be-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */
.be-stack { display: flex; flex-direction: column; }
.be-row { display: flex; align-items: center; }
.be-wrap { flex-wrap: wrap; }
.be-between { justify-content: space-between; }
.be-center { justify-content: center; }
.be-gap-1 { gap: var(--be-1); } .be-gap-2 { gap: var(--be-2); }
.be-gap-3 { gap: var(--be-3); } .be-gap-4 { gap: var(--be-4); }
.be-gap-5 { gap: var(--be-5); } .be-gap-6 { gap: var(--be-6); }
.be-grow { flex: 1; }
.be-muted { color: var(--be-muted); }
.be-strong { font-weight: 700; }
.be-text-center { text-align: center; }
.be-mt-4 { margin-block-start: var(--be-4); }
.be-mt-6 { margin-block-start: var(--be-6); }
.be-mt-8 { margin-block-start: var(--be-8); }
.be-mb-0 { margin-block-end: 0; }
.be-hide-mobile { }
.be-only-mobile { display: none; }
@media (max-width: 991px) {
    .be-hide-mobile { display: none !important; }
    .be-only-mobile { display: initial; }
}

/* Numerals stay Western in both locales — Egyptian property listings are
   universally written with 1234567890, not Eastern Arabic numerals. */
.be-num { font-variant-numeric: tabular-nums; font-feature-settings: 'lnum' 1; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Money is not a bare number.
   --------------------------------------------------------------------------
   .be-num forces direction:ltr, which is right for a standalone figure — a
   count, a percentage, a year — and wrong for a price, because a price now
   carries words: "10.7 مليون ج.م". Forcing that string to lay out
   left-to-right on an Arabic page moved the figure to the far side of its own
   unit, so the card read "مليون ج.م 10.7".

   This keeps the tabular figures and the isolation from surrounding text, but
   lets the string follow the page's direction, which is the only way a mixed
   number-and-word phrase lands in the right order in both languages. */
.be-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'lnum' 1;
    unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   Top-anchored dialog (header search)
   -------------------------------------------------------------------------- */
/* Top-anchored dialog (header search).
   The centred-panel rules above are written as [dir="rtl"] .be-dialog.is-open,
   which outranks a plain .be-dialog--top.is-open - so the search panel
   inherited translate(50%, -50%) and slid off the side of the screen. These
   selectors carry the same [dir] weight so they win on order.

   `inset-inline: 0` is what overrides the centred variant's
   `inset-inline-start: 50%`, and BOTH sides have to stay 0: a fixed box is
   only centred by `margin-inline: auto` when neither inset is auto. An
   `inset-inline-start: auto` used to follow this line to "unset" the 50%,
   which left start auto and end 0 - so the panel was pinned to the
   inline-end edge, i.e. hard against the left of an Arabic page. */
.be-dialog--top,
[dir] .be-dialog--top {
    inset-block-start: 0;
    inset-block-end: auto;
    inset-inline: 0;
    inline-size: min(680px, calc(100vw - var(--be-8)));
    margin-inline: auto;
    max-block-size: 90dvh;
    border-radius: 0 0 var(--be-r-lg) var(--be-r-lg);
    transform: translateY(-100%);
}
.be-dialog--top.is-open,
[dir] .be-dialog--top.is-open { transform: translateY(0); }

.be-searchbar {
    display: flex;
    align-items: center;
    gap: var(--be-2);
    background: var(--be-surface);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-md);
    padding: var(--be-1);
    padding-inline-start: var(--be-3);
}
.be-searchbar:focus-within { border-color: var(--be-brand); box-shadow: 0 0 0 3px var(--be-brand-50); }
.be-searchbar__icon { display: inline-flex; color: var(--be-muted); flex: none; }
.be-searchbar input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--be-ink);
    padding-block: var(--be-3);
    outline: none;
}
.be-searchbar input::placeholder { color: var(--be-navy-400); }