/* ==========================================================================
   Public Site
   ==========================================================================

   Loaded only by the public layout, never by a dashboard. That is what
   lets it redefine the semantic tokens declared in app.css: custom
   properties resolve live, so overriding --brand here re-themes Bootstrap
   for the marketplace while the admin and developer areas keep the navy
   and gold identity.

   Load order: bootstrap(.rtl) -> bootstrap-icons -> swiper -> fonts
               -> app.css -> site.css
   ========================================================================== */

/* ==========================================================================
   1. Marketplace palette
   ==========================================================================
   Deep teal carries the chrome and every primary action; warm orange is
   the single accent, reserved for prices, badges and the one thing on a
   screen that should be clicked next.
   ========================================================================== */

:root {
    --teal-950: #08302e;
    --teal-900: #0a3d3b;
    --teal-800: #0d4f4b;
    --teal-700: #115e59;
    --teal-600: #147a72;
    --teal-500: #2a9d92;
    --teal-100: #d9ecea;
    --teal-050: #eef6f5;

    --orange-700: #c94e2c;
    --orange-600: #e8613c;
    --orange-500: #f07a4f;
    --orange-100: #fdeeea;

    --ink-900: #16302e;
    --ink-700: #2d4442;
    --ink-500: #5e7472;
    --ink-300: #9bacab;

    --sky-050: #eef4fb;
    --sky-100: #dce8f4;

    /* ---- Semantic roles, overriding app.css for the public site ---- */
    --brand: var(--teal-700);
    --brand-soft: var(--teal-050);
    --accent: var(--orange-600);
    --accent-soft: var(--orange-100);

    --text-strong: var(--ink-900);
    --text-body: var(--ink-700);
    --text-muted: var(--ink-500);

    --border-subtle: #e3ebea;
    --border-strong: #cbd9d8;
    --surface-sunken: var(--sky-050);

    --state-info: var(--teal-600);

    /* Rello's chrome is squarer than the dashboard's. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    --header-height: 84px;
}

/* ==========================================================================
   Layout width
   ==========================================================================
   Section *backgrounds* run edge to edge; section *content* does not.
   Letting text and cards stretch across a 1920px display leaves every
   row sparse and hard to scan, and a heading whose line runs the full
   width of a wide monitor is genuinely harder to read.

   So: the header bar spans the viewport, because its job is to reach
   both edges, while everything inside main and the footer sits in a
   centred column.
   ========================================================================== */

.site-header .navbar {
    max-width: 100%;
    padding-inline: 1rem;
}

main .container,
.site-footer .container,
.app-band .container {
    /* Wider than Bootstrap's 1140px default so a four-card row still
       breathes, but bounded so the layout stops growing with the screen. */
    max-width: 1320px;
    padding-inline: 1rem;
}

@media (min-width: 992px) {
    .site-header .navbar {
        padding-inline: 2rem;
    }

    main .container,
    .site-footer .container,
    .app-band .container {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1400px) {
    .site-header .navbar {
        padding-inline: 3rem;
    }
}

/* Bootstrap reads these, so the whole framework follows the palette. */
:root {
    --bs-primary: var(--teal-700);
    --bs-primary-rgb: 17, 94, 89;
    --bs-secondary: var(--orange-600);
    --bs-secondary-rgb: 232, 97, 60;
    --bs-link-color: var(--teal-700);
    --bs-link-color-rgb: 17, 94, 89;
    --bs-link-hover-color: var(--orange-600);
}

/* ==========================================================================
   2. Buttons
   ==========================================================================
   Solid, square-ish and confident. No gradients, no large radii: the
   button should read as a block of colour, not a pill.
   ========================================================================== */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .75rem;
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-font-size: .9375rem;
    transition: all var(--transition-fast);
}

.btn-lg {
    --bs-btn-padding-y: .9rem;
    --bs-btn-padding-x: 2.25rem;
    --bs-btn-font-size: 1rem;
}

.btn-sm {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-font-size: .875rem;
}

.btn-primary {
    --bs-btn-bg: var(--teal-700);
    --bs-btn-border-color: var(--teal-700);
    --bs-btn-hover-bg: var(--orange-600);
    --bs-btn-hover-border-color: var(--orange-600);
    --bs-btn-active-bg: var(--orange-700);
    --bs-btn-active-border-color: var(--orange-700);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--orange-600);
    --bs-btn-border-color: var(--orange-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--teal-700);
    --bs-btn-hover-border-color: var(--teal-700);
    --bs-btn-active-bg: var(--teal-800);
}

.btn-outline-primary {
    --bs-btn-color: var(--teal-700);
    --bs-btn-border-color: var(--teal-700);
    --bs-btn-hover-bg: var(--teal-700);
    --bs-btn-hover-border-color: var(--teal-700);
    --bs-btn-hover-color: #fff;
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--teal-700) !important;
}

.text-bg-secondary {
    color: #fff !important;
    background-color: var(--orange-600) !important;
}

/* ==========================================================================
   3. Header
   ==========================================================================
   Solid white and sticky, the way the reference does it: the search box
   and the primary action live in the bar itself, so it must stay legible
   from the first paint rather than fading in on scroll.
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
    transition: box-shadow var(--transition-fast);
}

.site-header.is-solid {
    box-shadow: 0 2px 16px rgba(8, 48, 46, .07);
}

/* Inline padding comes from the full-bleed block above, which the header
   shares with every content container so the two stay aligned. Only the
   vertical padding is the header's own. */
.site-header .navbar {
    padding-block: .875rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--ink-900);
    text-decoration: none;
    letter-spacing: -.02em;
}

.site-brand:hover {
    color: var(--teal-700);
}

.site-brand .bi {
    font-size: 1.75rem;
    color: var(--orange-600);
}

.site-header .nav-link {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ink-700);
    padding-inline: .875rem;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--teal-700);
}

/* Header search */
.header-search {
    position: relative;
    max-width: 21rem;
    width: 100%;
}

.header-search input {
    border: 1px solid transparent;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    padding: .7rem 1rem;
    padding-inline-end: 3rem;
    font-size: .9375rem;
    width: 100%;
}

.header-search input:focus {
    outline: none;
    border-color: var(--teal-500);
    background: #fff;
}

.header-search button {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 3rem;
    border: 0;
    background: transparent;
    color: var(--ink-500);
}

.header-search button:hover {
    color: var(--teal-700);
}

/* Wishlist counter */
.header-wishlist {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--ink-700);
    font-size: 1.35rem;
    text-decoration: none;
}

.header-wishlist:hover {
    color: var(--orange-600);
}

.header-wishlist-count {
    position: absolute;
    top: .1rem;
    inset-inline-end: .1rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding-inline: .2rem;
    border-radius: 999px;
    background: var(--orange-600);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

@media (max-width: 1199.98px) {
    .header-search {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        background: #fff;
        border-top: 1px solid var(--border-subtle);
        margin-top: .75rem;
        padding-top: .75rem;
    }
}

/* Floating contact rail, pinned to the viewport edge. */
/* Absolute inside the hero, not fixed to the viewport: it belongs to the
   top of the page and scrolls away with it, rather than trailing the
   reader down every section. */
.social-rail {
    position: absolute;
    inset-inline-start: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

.social-rail::after {
    content: '';
    width: 1px;
    height: 3rem;
    background: var(--border-strong);
}

.social-rail-item {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--ink-500);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-rail-item:first-child {
    background: var(--orange-600);
    color: #fff;
}

.social-rail-item:hover {
    background: var(--teal-700);
    color: #fff;
}

@media (max-width: 1399.98px) {
    .social-rail {
        display: none;
    }
}

/* ==========================================================================
   4. Hero
   ==========================================================================
   Split rather than full-bleed: copy and the search panel on one side, a
   single large photograph on the other. Text sits on the page background,
   so it needs no scrim and stays readable at any image brightness.
   ========================================================================== */

.hero {
    position: relative; /* containing block for the social rail */
    background: var(--sky-050);
    padding-block: 5rem 4.5rem;
    overflow: hidden;
}

/* Tall enough to hold the fold on a laptop: a hero that ends 400px down
   makes the page look like it starts with a strip rather than an
   opening. The container is stretched so the copy stays optically
   centred against a photograph that is now taller than it. */
@media (min-width: 992px) {
    .hero {
        display: flex;
        align-items: center;
        min-height: 44rem;
    }

    .hero > .container {
        width: 100%;
    }
}

.hero-eyebrow {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--teal-600);
    margin-bottom: .75rem;
}

.hero-title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--ink-900);
    margin-bottom: 1.25rem;
}

[dir="rtl"] .hero-title {
    letter-spacing: 0;
    line-height: 1.25;
}

.hero-lead {
    font-size: 1.0625rem;
    color: var(--ink-500);
    max-width: 44ch;
    margin-bottom: 2rem;
}

.hero-figure {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3.4;
}

@media (min-width: 992px) {
    .hero-figure {
        aspect-ratio: 4 / 4.2;
    }
}

.hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-proof {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-top: 2.5rem;
}

.hero-proof-avatars {
    display: flex;
}

.hero-proof-avatars img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sky-050);
    margin-inline-start: -.75rem;
}

.hero-proof-avatars img:first-child {
    margin-inline-start: 0;
}

/* ==========================================================================
   5. Search panel
   ========================================================================== */

/* Square, not rounded, and deliberately wider than the column it sits
   in: the panel runs past the copy and over the edge of the hero
   photograph, which is what stops the two halves of the hero reading as
   two unrelated boxes. The overflow follows the writing direction, so in
   Arabic it reaches left towards the image instead of right. */
.search-panel {
    position: relative;
    z-index: 2;
    background: var(--sky-100);
    padding: 1.75rem;
    border-radius: 0;
}

/* A percentage, so the overhang grows with the column instead of being a
   fixed number that is too little at 1600px and too much at 1000px. It
   resolves against the column width: 55% of a half-width column carries
   the panel roughly three quarters of the way across the hero. */
@media (min-width: 992px) {
    .search-panel {
        margin-inline-end: -55%;
    }
}

.search-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.search-tabs-label {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ink-900);
    margin-inline-end: .25rem;
}

.search-tab {
    border: 0;
    background: #fff;
    padding: .65rem 1.5rem;
    border-radius: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-tab:hover {
    color: var(--teal-700);
}

.search-tab.is-active {
    background: var(--teal-700);
    color: #fff;
}

.search-panel .form-control,
.search-panel .form-select {
    border: 0;
    background: #fff;
    border-radius: 0;
    padding: .95rem 1rem;
    font-size: .9375rem;
    color: var(--ink-900);
}

.search-panel .form-control::placeholder {
    color: var(--ink-300);
}

.search-panel .form-control:focus,
.search-panel .form-select:focus {
    box-shadow: inset 0 0 0 2px var(--teal-500);
}

.search-panel .btn {
    border-radius: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* ==========================================================================
   6. Sections
   ========================================================================== */

.section {
    padding-block: 5.5rem;
}

@media (max-width: 767.98px) {
    .section {
        padding-block: 3.5rem;
    }
}

.section-sunken {
    background: var(--sky-050);
}

.section-blush {
    background: var(--orange-100);
}

.section-brand {
    background: var(--teal-900);
    color: rgba(255, 255, 255, .78);
}

.section-head {
    margin-bottom: 2.75rem;
}

.section-eyebrow {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--teal-600);
    margin-bottom: .5rem;
}

.section-title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink-900);
    margin-bottom: .5rem;
}

[dir="rtl"] .section-title {
    letter-spacing: 0;
}

.section-brand .section-title {
    color: #fff;
}

.section-lead {
    color: var(--ink-500);
    max-width: 56ch;
    margin-bottom: 0;
}

.section-brand .section-lead {
    color: rgba(255, 255, 255, .65);
}

/* Carousel arrows, square and outlined. */
.section-nav {
    display: flex;
    gap: .5rem;
}

.section-nav button {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--teal-700);
    background: transparent;
    color: var(--teal-700);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    transition: all var(--transition-fast);
}

.section-nav button:hover {
    background: var(--teal-700);
    color: #fff;
}

.section-nav button:disabled {
    opacity: .35;
    cursor: default;
}

/* ==========================================================================
   7. Property card
   ========================================================================== */

.property-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.property-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(8, 48, 46, .12);
}

.property-card .media-frame {
    border-radius: 0;
}

.property-card .media-frame img {
    transition: transform var(--transition-slow, 420ms ease);
}

.property-card:hover .media-frame img {
    transform: scale(1.06);
}

.property-card-badges {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    z-index: 2;
}

.property-card-badges .badge {
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    padding: .4rem .85rem;
}

.property-card-media-flags {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    display: flex;
    gap: .35rem;
    z-index: 2;
}

.property-card-media-flags .badge {
    background: rgba(8, 48, 46, .78);
    color: #fff;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

/* The favourite control sits opposite the badges, always reachable. */
.property-card-favourite {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--ink-700);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.property-card-favourite:hover,
.property-card-favourite.is-active {
    background: var(--orange-600);
    color: #fff;
}

.property-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: .35rem;
}

.property-card-price {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--orange-600);
    white-space: nowrap;
}

.property-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: .875rem;
    margin-top: .875rem;
    font-size: .875rem;
    color: var(--ink-500);
}

.property-card-specs .bi {
    color: var(--teal-600);
    margin-inline-end: .2rem;
}

.property-card-agent {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
}

.property-card-agent img,
.property-card-agent .avatar-circle {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Star rating */
.rating {
    display: inline-flex;
    gap: .1rem;
    color: var(--orange-600);
    font-size: .875rem;
}

/* ==========================================================================
   8. Type and location tiles
   ========================================================================== */

.type-tile {
    display: block;
    padding: 2rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.type-tile:hover {
    border-color: var(--teal-700);
    box-shadow: 0 12px 28px rgba(8, 48, 46, .1);
    transform: translateY(-3px);
}

.type-tile-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--teal-050);
    color: var(--teal-700);
    font-size: 1.6rem;
    transition: all var(--transition-fast);
}

.type-tile:hover .type-tile-icon {
    background: var(--orange-600);
    color: #fff;
}

.type-tile-label {
    font-weight: 700;
    color: var(--ink-900);
    display: block;
}

.type-tile-count {
    font-size: .875rem;
    color: var(--ink-500);
}

.location-tile {
    display: block;
    text-decoration: none;
}

.location-tile-figure {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--border-subtle);
}

.location-tile-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow, 420ms ease);
}

.location-tile:hover .location-tile-figure img {
    transform: scale(1.06);
}

.location-tile-name {
    display: block;
    margin-top: .875rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink-900);
}

.location-tile-count {
    font-size: .875rem;
    color: var(--ink-500);
}

/* ==========================================================================
   9. Developer tile
   ========================================================================== */

.developer-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    transition: all var(--transition-fast);
}

.developer-tile:hover {
    box-shadow: 0 14px 32px rgba(8, 48, 46, .12);
    transform: translateY(-3px);
}

.developer-tile-figure {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--teal-050);
}

.developer-tile-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback when a company has no photography yet. Styled as a deliberate
   monogram rather than two letters floating in an empty box. */
.developer-tile-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--teal-700);
    background: var(--teal-050);
}

.developer-tile-count {
    position: absolute;
    inset-block-start: .875rem;
    inset-inline-start: .875rem;
    background: var(--orange-600);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: var(--radius-sm);
}

.developer-tile-name {
    display: block;
    padding: 1rem 1.25rem .25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink-900);
}

.developer-tile-meta {
    padding: 0 1.25rem 1.25rem;
    font-size: .875rem;
    color: var(--ink-500);
}

/* ==========================================================================
   10. Statistics
   ========================================================================== */

.stat-item {
    text-align: center;
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--orange-500);
    line-height: 1;
}

.stat-label {
    margin-top: .5rem;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   11. Feature list
   ========================================================================== */

.feature-item {
    display: flex;
    gap: 1.25rem;
}

.feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--teal-700);
    color: #fff;
    font-size: 1.5rem;
}

.feature-title {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: .35rem;
    color: var(--ink-900);
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

/* Bounded and centred, not stretched across the container: a single
   short quote given the full width of a wide screen left most of the
   card empty, with the text pinned to one edge. */
.testimonial {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    max-width: 62rem;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 18px 40px rgba(8, 48, 46, .06);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .testimonial {
        grid-template-columns: 1fr;
    }
}

.testimonial-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Tall enough to read as a portrait, short enough that a brief quote
       does not leave the other column mostly empty. */
    min-height: 18rem;
}

/* Centred rather than top-aligned: quotes vary in length, and pinning
   short ones to the top left a large blank area beneath them. */
.testimonial-body {
    position: relative;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .testimonial-body {
        padding: 2rem;
    }
}

.testimonial-quote {
    font-size: 1.25rem;
    line-height: 1.85;
    font-weight: 500;
    color: var(--ink-700);
    margin-bottom: 1.75rem;
}

/* Above the quote it introduces, not floating in the far corner of the
   card where it read as an unrelated stray circle. */
.testimonial-mark {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--teal-050);
    color: var(--teal-700);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
}

.testimonial-author {
    display: block;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink-900);
}

.testimonial-role {
    display: block;
    font-size: .9375rem;
    color: var(--ink-500);
    margin-bottom: .625rem;
}

/* ==========================================================================
   13. App download band
   ========================================================================== */

.app-band {
    background: var(--orange-100);
    padding-block: 4rem;
}

.app-band-title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.3;
    margin: 0;
}

.store-button {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--teal-700);
    color: #fff;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.store-button:hover {
    background: var(--teal-800);
    color: #fff;
}

.store-button.is-dark {
    background: var(--ink-900);
}

.store-button.is-dark:hover {
    background: #000;
}

.store-button .bi {
    font-size: 1.75rem;
}

.store-button-label {
    display: block;
    font-size: .6875rem;
    opacity: .8;
    line-height: 1.2;
}

.store-button-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

/* ==========================================================================
   14. Scroll reveal
   ==========================================================================
   The default state is visible, so if JavaScript never runs the content
   is still readable: an animation must never be what makes text appear.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .js-enabled [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 600ms ease, transform 600ms ease;
    }

    .js-enabled [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
    background: var(--sky-050);
    color: var(--ink-500);
    padding-block: 4.5rem 0;
}

.site-footer h2 {
    color: var(--ink-900);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.site-footer a {
    color: var(--ink-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer a:hover {
    color: var(--orange-600);
}

.site-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer-links li {
    margin-bottom: .75rem;
}

.site-footer-links .bi {
    color: var(--orange-600);
    font-size: .75rem;
    margin-inline-end: .35rem;
}

.site-footer-contact li {
    display: flex;
    gap: .625rem;
    margin-bottom: .875rem;
}

.site-footer-contact .bi {
    color: var(--teal-700);
    margin-top: .2rem;
}

.newsletter-form {
    display: flex;
    margin-block: 1rem 1.25rem;
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-inline-end: 0;
    background: #fff;
    padding: .8rem 1rem;
    border-start-start-radius: var(--radius-sm);
    border-end-start-radius: var(--radius-sm);
    font-size: .9375rem;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--teal-500);
}

.newsletter-form button {
    border: 0;
    background: var(--teal-700);
    color: #fff;
    padding-inline: 1.25rem;
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.newsletter-form button:hover {
    background: var(--orange-600);
}

/* Scoped to the footer on purpose: `.site-footer a` above sets the link
   colour to ink-500, and an unscoped `.social-link` loses to it on
   specificity — which left the glyphs grey on teal, and invisible
   altogether on the orange hover state. */
.site-footer .social-link {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--teal-700);
    color: #fff;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.site-footer .social-link:hover,
.site-footer .social-link:focus-visible {
    background: var(--orange-600);
    color: #fff;
    transform: translateY(-2px);
}

.site-footer-bottom {
    margin-top: 3.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--border-strong);
    font-size: .9375rem;
}

/* ==========================================================================
   16. Back to top
   ========================================================================== */

.back-to-top {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 1025;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--teal-700);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--orange-600);
}

/* ==========================================================================
   17. Agent card
   ==========================================================================
   The photograph leads, with the listing count and the company laid over
   it: those are what a buyer scans before deciding who to call.
   ========================================================================== */

.agent-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.agent-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(8, 48, 46, .12);
}

.agent-card-figure {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--teal-050);
    overflow: hidden;
}

.agent-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow, 420ms ease);
}

.agent-card:hover .agent-card-figure img {
    transform: scale(1.05);
}

.agent-card-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--teal-700);
}

.agent-card-count {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    background: var(--orange-600);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: var(--radius-sm);
}

/* Sits on the photograph, so it needs its own scrim rather than relying
   on the portrait happening to be dark at the bottom. */
.agent-card-company {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 2.5rem 1rem .875rem;
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    background: linear-gradient(to top, rgba(8, 48, 46, .85), transparent);
}

.agent-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.agent-card-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: .15rem;
}

.agent-card-role {
    font-size: .875rem;
    color: var(--ink-500);
}

.agent-card-contact {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    font-size: .875rem;
}

.agent-card-contact li {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
    min-width: 0;
}

.agent-card-contact .bi {
    color: var(--teal-600);
    flex-shrink: 0;
}

.agent-card-contact a {
    color: var(--ink-500);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-card-contact a:hover {
    color: var(--orange-600);
}

.agent-card-link {
    margin-top: auto;
    padding-top: 1rem;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ink-900);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.agent-card-link:hover {
    color: var(--orange-600);
}

.rating-value {
    margin-inline-start: .25rem;
    color: var(--ink-500);
    font-weight: 600;
}

/* ==========================================================================
   18. Testimonial pagination
   ========================================================================== */

.testimonial-pagination {
    position: static;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.testimonial-pagination .swiper-pagination-bullet {
    width: .7rem;
    height: .7rem;
    background: var(--teal-100);
    opacity: 1;
}

.testimonial-pagination .swiper-pagination-bullet-active {
    background: var(--teal-700);
}

/* ==========================================================================
   19. Post card
   ========================================================================== */

.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(8, 48, 46, .12);
}

.post-card-figure {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 0;
}

.post-card-figure img {
    transition: transform var(--transition-slow, 420ms ease);
}

.post-card:hover .post-card-figure img {
    transform: scale(1.05);
}

.post-card-category {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    background: var(--orange-600);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: var(--radius-sm);
}

.post-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .8125rem;
    color: var(--ink-500);
    margin-bottom: .625rem;
}

.post-card-meta .bi {
    color: var(--teal-600);
    margin-inline-end: .25rem;
}

.post-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: .5rem;
}

.post-card-excerpt {
    font-size: .9375rem;
    color: var(--ink-500);
    margin-bottom: 0;
}

/* ==========================================================================
   20. Navigation dropdowns
   ==========================================================================
   The property-type and governorate menus can run long, so they are laid
   out as a padded panel with room to breathe rather than a cramped list.
   Everything is logical-property based, so the panel and its hover
   indicator mirror for Arabic without a separate rule.
   ========================================================================== */

.site-header .dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    margin-top: .75rem;
    padding: .5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 44px rgba(8, 48, 46, .14);
    /* Sits just clear of the bar so the panel reads as attached to its
       trigger rather than floating loose. */
    animation: dropdown-in 160ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .dropdown-menu {
        animation: none;
    }
}

/* A small pointer tying the panel to the item that opened it. */
.site-header .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    inset-inline-start: 1.75rem;
    width: 10px;
    height: 10px;
    background: #fff;
    border-inline-start: 1px solid var(--border-subtle);
    border-block-start: 1px solid var(--border-subtle);
    transform: rotate(45deg);
}

.site-header .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink-700);
    transition: background var(--transition-fast), color var(--transition-fast),
                padding-inline-start var(--transition-fast);
}

.site-header .dropdown-item .bi {
    color: var(--teal-600);
    font-size: 1rem;
    width: 1.15rem;
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus-visible {
    background: var(--teal-050);
    color: var(--teal-700);
    /* Nudges toward the reading direction, which reads as the row
       stepping forward rather than sliding sideways. */
    padding-inline-start: 1rem;
}

.site-header .dropdown-item:hover .bi,
.site-header .dropdown-item:focus-visible .bi {
    color: var(--orange-600);
}

.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
    background: var(--teal-700);
    color: #fff;
}

.site-header .dropdown-item.active .bi {
    color: #fff;
}

.site-header .dropdown-divider {
    margin: .375rem .25rem;
    border-top-color: var(--border-subtle);
    opacity: 1;
}

/* The caret turns with the panel, so the trigger shows its own state. */
.site-header .dropdown-toggle::after {
    margin-inline-start: .35rem;
    vertical-align: .15em;
    transition: transform var(--transition-fast);
}

.site-header .dropdown-toggle[aria-expanded="true"] {
    color: var(--teal-700);
}

.site-header .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Collapsed into the mobile menu the panel is part of the page, not a
   floating layer: the shadow and pointer would be noise there. */
@media (max-width: 991.98px) {
    .site-header .dropdown-menu {
        box-shadow: none;
        border: 0;
        border-inline-start: 2px solid var(--teal-100);
        border-radius: 0;
        margin: .25rem 0 .5rem;
        padding-inline: .25rem;
        animation: none;
    }

    .site-header .dropdown-menu::before {
        display: none;
    }
}

/* ==========================================================================
   21. Spotlight listing
   ==========================================================================
   A photograph with a detail card overlapping its lower edge. The overlap
   is what stops the two reading as separate blocks stacked on top of one
   another.
   ========================================================================== */

.spotlight {
    position: relative;
    padding-bottom: 5rem;
}

.spotlight-figure {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
}

.spotlight-badge {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    border-radius: var(--radius-sm);
    padding: .45rem .9rem;
}

.spotlight-card {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 2rem;
    inset-inline-end: -1rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 44px rgba(8, 48, 46, .16);
    padding: 1.5rem;
}

@media (max-width: 991.98px) {
    .spotlight-card {
        inset-inline: 1rem;
    }
}

@media (max-width: 575.98px) {
    .spotlight {
        padding-bottom: 0;
    }

    /* Below the smallest breakpoint the overlap leaves no room for the
       photograph, so the card simply follows it. */
    .spotlight-card {
        position: static;
        margin-top: -2rem;
        margin-inline: 1rem;
    }
}

.spotlight-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink-900);
}

/* ==========================================================================
   22. Statistics band
   ==========================================================================
   Icons and hairline dividers, so a row of four numbers reads as one
   group rather than four disconnected figures floating in a dark field.
   ========================================================================== */

.stat-item {
    text-align: center;
    padding-inline: 1rem;
}

@media (min-width: 992px) {
    .stat-item {
        border-inline-end: 1px solid rgba(255, 255, 255, .12);
    }

    .col-lg-3:last-child .stat-item {
        border-inline-end: 0;
    }
}

.stat-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--orange-500);
    font-size: 1.4rem;
}

/* ==========================================================================
   23. Type tile
   ==========================================================================
   Rebuilt with more presence: a larger icon, a clearer count, and a
   filled hover state so the grid reads as a set of choices rather than
   a row of empty boxes.
   ========================================================================== */

.type-tile {
    display: block;
    padding: 2.25rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.type-tile:hover {
    background: var(--teal-700);
    border-color: var(--teal-700);
    box-shadow: 0 16px 34px rgba(8, 48, 46, .18);
    transform: translateY(-4px);
}

.type-tile-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.125rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--teal-050);
    color: var(--teal-700);
    font-size: 1.75rem;
    transition: all var(--transition-fast);
}

.type-tile:hover .type-tile-icon {
    background: var(--orange-600);
    color: #fff;
}

.type-tile-label {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink-900);
    display: block;
    transition: color var(--transition-fast);
}

.type-tile-count {
    font-size: .875rem;
    color: var(--ink-500);
    transition: color var(--transition-fast);
}

.type-tile:hover .type-tile-label {
    color: #fff;
}

.type-tile:hover .type-tile-count {
    color: rgba(255, 255, 255, .75);
}

/* ==========================================================================
   24. Developer call to action
   ==========================================================================
   One panel rather than a heading on one side of the page and a button
   stranded on the other: across a wide screen that left a gap between
   them wide enough to read as a layout fault rather than as breathing
   room. Inside a bounded, coloured panel the same distance reads as
   deliberate.
   ========================================================================== */

.developer-cta {
    position: relative;
    overflow: hidden;
    padding: 3.25rem;
    border-radius: var(--radius-lg);
    background: var(--teal-800);
    color: #fff;
}

/* Drawn, not downloaded: two soft rings keep the panel from being a flat
   slab of colour without costing a request. */
.developer-cta::before,
.developer-cta::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.developer-cta::before {
    width: 26rem;
    height: 26rem;
    inset-block-start: -9rem;
    inset-inline-end: -7rem;
    border: 1px solid rgba(255, 255, 255, .09);
}

.developer-cta::after {
    width: 15rem;
    height: 15rem;
    inset-block-end: -6rem;
    inset-inline-end: 5rem;
    background: rgba(255, 255, 255, .035);
}

.developer-cta-main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.developer-cta-copy {
    max-width: 44rem;
}

.developer-cta-eyebrow {
    display: inline-block;
    font-weight: 600;
    color: var(--orange-500);
    margin-bottom: .6rem;
}

.developer-cta-title {
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    margin-bottom: .85rem;
}

.developer-cta-lead {
    max-width: 38rem;
    margin: 0;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .72);
}

.developer-cta-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* The points row spans the full panel width, so the space beside the
   button is closed off by content rather than left open. */
.developer-cta-points {
    position: relative;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 1.75rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.75rem;
}

.developer-cta-points li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
}

.developer-cta-points .bi {
    font-size: 1.1rem;
    color: var(--teal-500);
}

@media (max-width: 767.98px) {
    .developer-cta {
        padding: 2rem 1.5rem;
    }

    .developer-cta-points {
        gap: .75rem 1.5rem;
    }
}

/* ==========================================================================
   25. App band content
   ==========================================================================
   The band used to hold a heading and two store buttons pushed to
   opposite edges. Three feature lines fill the middle, and the store
   links state plainly when an app is not published yet instead of
   pointing at "#".
   ========================================================================== */

.app-band-lead {
    max-width: 32rem;
    margin: .875rem 0 0;
    color: var(--ink-700);
}

.app-band-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
    box-shadow: 0 18px 40px rgba(8, 48, 46, .07);
}

.app-band-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.125rem;
}

.app-band-features li {
    display: flex;
    align-items: center;
    gap: .875rem;
    font-weight: 500;
    color: var(--ink-900);
}

.app-band-features li + li {
    padding-top: 1.125rem;
    border-top: 1px solid var(--border-subtle);
}

.app-band-features .bi {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange-100);
    color: var(--orange-600);
    font-size: 1.0625rem;
}

.app-band-stores {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: 1.75rem;
}

/* Same weight as a live store button — it is the same shape of thing —
   but not a link, because there is nowhere to send anyone yet. */
.store-button.is-pending {
    cursor: default;
}

/* ==========================================================================
   26. Listing page
   ==========================================================================
   The page a visitor lands on from search. Two columns on a desktop: the
   listing itself on the wide side, and a contact column that follows the
   reader down, because deciding to call happens anywhere on the page and
   not only at the bottom of it.
   ========================================================================== */

.listing-page {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
}

/* ---- Breadcrumb ---- */

.listing-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: .875rem;
    color: var(--ink-500);
}

.listing-breadcrumb li + li::before {
    content: "/";
    margin-inline-end: .5rem;
    color: var(--ink-300);
}

.listing-breadcrumb a {
    color: var(--ink-500);
    text-decoration: none;
}

.listing-breadcrumb a:hover {
    color: var(--teal-700);
}

.listing-breadcrumb li[aria-current] {
    color: var(--ink-900);
    font-weight: 600;
}

/* ---- Header ---- */

.listing-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.listing-header-main {
    flex: 1 1 24rem;
}

.listing-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .875rem;
}

.listing-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--ink-900);
    margin-bottom: .625rem;
}

.listing-location {
    margin: 0;
    color: var(--ink-500);
}

.listing-location .bi {
    color: var(--orange-600);
}

.listing-header-price {
    flex: 0 0 auto;
    text-align: end;
}

.listing-price {
    display: block;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    color: var(--teal-700);
    line-height: 1.2;
}

.listing-price small {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink-500);
}

.listing-price-request {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-500);
}

.listing-price-period,
.listing-reference {
    display: block;
    font-size: .875rem;
    color: var(--ink-500);
}

.listing-reference {
    margin-top: .375rem;
}

/* ---- Gallery ---- */

.listing-gallery-main {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0;
}

.listing-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-gallery-count {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .4rem .75rem;
    border-radius: var(--radius-sm);
    background: rgba(8, 48, 46, .72);
    color: #fff;
    font-size: .875rem;
}

.listing-gallery-thumbs {
    list-style: none;
    display: flex;
    gap: .625rem;
    margin: .75rem 0 0;
    padding: 0 0 .25rem;
    overflow-x: auto;
}

.listing-gallery-thumb {
    flex: 0 0 auto;
    width: 7rem;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--sky-050);
    cursor: pointer;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
    opacity: .7;
}

.listing-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listing-gallery-thumb:hover,
.listing-gallery-thumb.is-active {
    border-color: var(--teal-700);
    opacity: 1;
}

.listing-empty-media {
    padding: 3rem;
    text-align: center;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--ink-500);
}

/* ---- Facts strip ---- */

.listing-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1px;
    margin-bottom: 2rem;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.listing-fact {
    background: #fff;
    padding: 1.25rem 1rem;
    text-align: center;
}

.listing-fact .bi {
    display: block;
    font-size: 1.375rem;
    color: var(--teal-700);
    margin-bottom: .5rem;
}

.listing-fact-value {
    display: block;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink-900);
}

.listing-fact-label {
    display: block;
    font-size: .8125rem;
    color: var(--ink-500);
}

/* ---- Content blocks ---- */

.listing-block {
    padding-block: 1.75rem;
    border-top: 1px solid var(--border-subtle);
}

.listing-block:first-child {
    border-top: 0;
    padding-top: 0;
}

.listing-block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 1.125rem;
}

.listing-lead {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ink-900);
}

/* Preserves the paragraph breaks a developer typed without letting any
   markup through: the text itself is escaped by Blade. */
.listing-prose {
    white-space: pre-line;
    line-height: 1.9;
    color: var(--ink-700);
}

.listing-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 2rem;
    margin: 0;
}

.listing-details > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.listing-details dt {
    color: var(--ink-500);
    font-weight: 500;
}

.listing-details dd {
    margin: 0;
    font-weight: 600;
    color: var(--ink-900);
    text-align: end;
}

.listing-amenity-group {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin: 1.25rem 0 .75rem;
}

.listing-amenity-group:first-of-type {
    margin-top: 0;
}

.listing-amenities {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .625rem 1.5rem;
    margin: 0;
    padding: 0;
}

.listing-amenities li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-700);
}

.listing-amenities .bi {
    color: var(--teal-600);
}

.listing-media-grid,
.listing-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.listing-media-item {
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.listing-media-item iframe,
.listing-media-item video,
.listing-media-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    object-fit: cover;
    background: var(--sky-050);
}

.listing-media-item figcaption,
.listing-plan figcaption {
    padding: .625rem .875rem;
    font-size: .875rem;
    color: var(--ink-700);
    background: var(--sky-050);
}

.listing-plan {
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.listing-plan img {
    display: block;
    width: 100%;
    background: #fff;
}

.listing-address {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    color: var(--ink-700);
}

.listing-address .bi {
    color: var(--orange-600);
}

.listing-location-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ---- Contact column ---- */

.listing-aside {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .listing-aside {
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
    }
}

.listing-contact,
.listing-inquiry {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 34px rgba(8, 48, 46, .06);
}

.listing-contact-title,
.listing-inquiry-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 1rem;
}

.listing-contact-person {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1.25rem;
}

.listing-contact-person img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.listing-contact-name {
    display: block;
    font-weight: 700;
    color: var(--ink-900);
}

.listing-contact-role {
    display: block;
    font-size: .875rem;
    color: var(--ink-500);
}

.listing-contact-actions {
    display: grid;
    gap: .5rem;
}

.listing-inquiry-lead {
    font-size: .9375rem;
    color: var(--ink-500);
    margin-bottom: 1.25rem;
}

.listing-inquiry-privacy {
    margin: .875rem 0 0;
    font-size: .8125rem;
    color: var(--ink-500);
}

.listing-inquiry-closed {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--ink-500);
}

/* The whole photograph is a link; the badges above it keep their own
   stacking context so they stay clickable where they need to be. */
.property-card-media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.property-card-badges,
.property-card-media-flags {
    z-index: 2;
}

.property-card-title a {
    color: inherit;
    text-decoration: none;
}

.property-card-title a:hover {
    color: var(--teal-700);
}

/* ==========================================================================
   27. Buyer account
   ==========================================================================
   On the public layout rather than a dashboard shell: for a buyer this
   is part of browsing, and dropping them into a differently-styled tool
   to see their saved properties would feel like leaving the site.
   ========================================================================== */

.account-page,
.auth-page {
    padding-top: calc(var(--header-height) + 2.5rem);
    padding-bottom: 4rem;
}

.account-header {
    margin-bottom: 2rem;
}

.account-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: .5rem;
}

.account-lead {
    margin: 0;
    color: var(--ink-500);
    max-width: 60ch;
}

/* ---- Account navigation ---- */

.account-nav {
    display: grid;
    gap: .25rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.account-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .875rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-700);
    font-size: .9375rem;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.account-nav-link:hover {
    background: var(--sky-050);
    color: var(--teal-700);
}

.account-nav-link.is-active {
    background: var(--teal-700);
    color: #fff;
}

.account-nav-logout {
    margin-top: .25rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border-subtle);
}

.account-nav-logout .account-nav-link {
    color: var(--orange-600);
}

.account-nav-logout .account-nav-link:hover {
    background: var(--orange-100);
    color: var(--orange-700);
}

/* ---- Panels and lists ---- */

.account-panel {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.account-panel-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 1.25rem;
}

.account-list {
    display: grid;
    gap: .875rem;
}

.account-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.account-list-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: .35rem;
}

.account-list-title a {
    color: inherit;
    text-decoration: none;
}

.account-list-title a:hover {
    color: var(--teal-700);
}

.account-list-meta {
    display: block;
    font-size: .875rem;
    color: var(--ink-500);
}

.account-list-message {
    margin: .625rem 0 0;
    padding: .625rem .875rem;
    border-radius: var(--radius-sm);
    background: var(--sky-050);
    color: var(--ink-700);
    font-size: .9375rem;
}

.account-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.account-empty {
    padding: 4rem 2rem;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--ink-500);
}

.account-empty .bi {
    display: block;
    font-size: 2.5rem;
    color: var(--ink-300);
    margin-bottom: 1rem;
}

/* ---- Sign in / register ---- */

.auth-panel {
    max-width: 30rem;
    margin-inline: auto;
    padding: 2.25rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 44px rgba(8, 48, 46, .07);
}

.auth-panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: .5rem;
}

.auth-panel-lead {
    color: var(--ink-500);
    margin-bottom: 1.75rem;
}

.auth-panel-switch {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .9375rem;
    color: var(--ink-500);
}

/* ---- The save button on a card ---- */

.property-card-save {
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    /* Above the link that covers the whole photograph. */
    z-index: 2;
    margin: 0;
    line-height: 0;
    text-decoration: none;
}

.property-card-save-button {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink-500);
    font-size: 1rem;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast),
                transform var(--transition-fast);
}

.property-card-save-button:hover {
    background: #fff;
    color: var(--orange-600);
    transform: scale(1.08);
}

.property-card-save-button.is-saved {
    color: var(--orange-600);
}

/* A brief pulse on save, so the change registers without a page jump. */
@media (prefers-reduced-motion: no-preference) {
    .property-card-save-button.just-saved {
        animation: saved-pulse 420ms ease;
    }
}

@keyframes saved-pulse {
    40% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* The save-this-search bar above the results. */
.search-save-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--sky-050);
}

.search-save-bar input[type="text"] {
    flex: 1 1 14rem;
    min-width: 0;
}

.auth-panel-icon {
    display: block;
    font-size: 2.75rem;
    color: var(--teal-600);
    margin-bottom: 1rem;
}

/* ---- Listing map ----
   Given an explicit height because Leaflet measures its container: a map
   in a box with no height renders as nothing at all. */

.listing-map {
    height: 22rem;
    margin-bottom: .75rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--sky-050);
    border: 1px solid var(--border-subtle);
}

.listing-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.listing-map-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    font-size: .8125rem;
    color: var(--ink-500);
}

/* The spotlight is a link now, so it must not look like body text. */
a.spotlight {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.spotlight:hover .spotlight-title {
    color: var(--teal-700);
}

/* ==========================================================================
   28. Page banner
   ==========================================================================
   The band under the header on every page but the homepage. It names the
   page and carries the trail that got here — one band rather than two,
   because a breadcrumb floating on white with nothing under it reads as
   a stray line of links.
   ========================================================================== */

.page-banner {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 2rem;
    background: var(--sky-050);
    border-bottom: 1px solid var(--border-subtle);
}

.page-banner-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .875rem;
    padding: 0;
    font-size: .875rem;
    color: var(--ink-500);
}

.page-banner-crumbs li + li::before {
    content: "/";
    margin-inline-end: .5rem;
    color: var(--ink-300);
}

.page-banner-crumbs a {
    color: var(--ink-500);
    text-decoration: none;
}

.page-banner-crumbs a:hover {
    color: var(--teal-700);
}

.page-banner-crumbs li[aria-current] {
    color: var(--ink-900);
    font-weight: 600;
}

.page-banner-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--ink-900);
    margin: 0;
}

[dir="rtl"] .page-banner-title {
    letter-spacing: 0;
}

.page-banner-lead {
    margin: .625rem 0 0;
    color: var(--ink-500);
    max-width: 62ch;
}

.page-banner-extra {
    margin-top: 1rem;
}

/* A page with a banner starts its content below it, so it must not add
   the header offset a second time. */
.page-banner + .listing-page,
.page-banner + .account-page,
.page-banner + .auth-page,
.page-banner + .search-page {
    padding-top: 2.5rem;
}

.listing-subtitle {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--teal-700);
}

/* ==========================================================================
   The floating assistant
   --------------------------------------------------------------------------
   Positioned with inset-inline-end rather than left/right, so it sits on
   the trailing side of whichever direction the page is in — left in
   Arabic, right in English — from one declaration instead of two rules
   and an [dir="rtl"] override that somebody forgets to update.
   ========================================================================== */

.assistant {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-end: 22px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.assistant-launcher {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--navy-900, #0f1f3d);
    color: var(--gold-500, #c9a227);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(15, 31, 61, .32);
    transition: transform .18s ease, box-shadow .18s ease;
}

.assistant-launcher:hover,
.assistant-launcher:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 31, 61, .4);
}

.assistant-panel {
    width: min(370px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 130px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ink-200, #e4e7ec);
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(15, 31, 61, .22);
}

.assistant-panel[hidden] {
    display: none;
}

.assistant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    background: var(--navy-900, #0f1f3d);
    color: #fff;
}

.assistant-head-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .95rem;
}

.assistant-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .9rem;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    opacity: .75;
}

.assistant-close:hover {
    opacity: 1;
}

.assistant-thread {
    flex: 1;
    min-height: 160px;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ink-050, #f7f8fa);
}

.assistant-intro {
    margin: 0;
    font-size: .82rem;
    color: var(--ink-500, #667085);
    line-height: 1.7;
}

.assistant-bubble {
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: .86rem;
    line-height: 1.65;
    white-space: pre-wrap;
    /* The assistant's own words. Wrapped so a long reference number
       cannot push the panel wider than the screen. */
    overflow-wrap: anywhere;
    background: #fff;
    border: 1px solid var(--ink-200, #e4e7ec);
    color: var(--ink-900, #1d2939);
    align-self: flex-start;
}

.assistant-bubble.is-mine {
    align-self: flex-end;
    background: var(--navy-900, #0f1f3d);
    border-color: var(--navy-900, #0f1f3d);
    color: #fff;
}

.assistant-bubble.is-waiting {
    opacity: .6;
}

.assistant-bubble.is-error {
    background: #fef3f2;
    border-color: #fda29b;
    color: #b42318;
}

/* The listings themselves, drawn from the server's structured output
   rather than from the reply text. */
.assistant-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-block-end: 4px;
}

.assistant-card {
    flex: 0 0 156px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ink-200, #e4e7ec);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.assistant-card:hover {
    border-color: var(--navy-700, #1b3a6b);
}

.assistant-card img {
    width: 100%;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
}

.assistant-card-title {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.assistant-card-price {
    font-size: .78rem;
    font-weight: 700;
    color: var(--navy-900, #0f1f3d);
}

.assistant-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-block-start: 1px solid var(--ink-200, #e4e7ec);
    background: #fff;
}

.assistant-form[hidden] {
    display: none;
}

.assistant-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ink-200, #e4e7ec);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: .85rem;
}

.assistant-form input:focus {
    outline: 2px solid var(--navy-700, #1b3a6b);
    outline-offset: 1px;
}

.assistant-form button {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--navy-900, #0f1f3d);
    color: #fff;
    cursor: pointer;
}

.assistant-note {
    margin: 0;
    padding: 8px 14px 12px;
    font-size: .68rem;
    color: var(--ink-500, #667085);
    background: #fff;
    text-align: center;
}

@media (max-width: 575.98px) {
    .assistant {
        inset-block-end: 14px;
        inset-inline-end: 14px;
    }

    .assistant-panel {
        max-height: calc(100vh - 110px);
    }
}

/* The assistant's "open this listing" link. Styled as the primary
   action in the thread, because it is the one thing in there that
   takes somebody off the page they are on. */
.assistant-open {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--navy-900, #0f1f3d);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.assistant-open:hover,
.assistant-open:focus-visible {
    color: #fff;
    background: var(--navy-700, #1b3a6b);
}