/* ============================================================
   Mafaza Real Estate CMS — Public Site
   Direction: search-first. The hero search bar is the primary
   action; listings are the primary content.

   RTL-first using CSS logical properties throughout, so one
   stylesheet serves both Arabic (rtl) and English (ltr).
   Design tokens are injected per-request by templates/layout.php
   from the theme engine — this file consumes var(--token) so
   admin-selected brand colors actually take effect.

   Arabic NEVER gets negative letter-spacing.
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
  background: var(--bg, #f7f6f3);
  color: var(--text, #1c1c1c);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; }

.container {
  max-width: var(--max-width, 1200px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Isolate mixed Arabic/Latin runs (addresses, phone numbers, codes)
   so bidi reordering doesn't scramble them. */
bdi { unicode-bidi: isolate; }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: var(--radius-sm, 12px);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.btn:active { transform: scale(.985); }
.btn-block { display: block; width: 100%; }

/* --accent-btn is pre-darkened by the theme engine to guarantee
   WCAG AA contrast for white text. Never use raw --accent here. */
.btn-primary { background: var(--accent-btn, #00807a); color: #fff; }
.btn-primary:hover { background: var(--accent-btn-hov, #006b66); }

.btn-secondary {
  background: var(--bg-2, #fff);
  color: var(--accent-btn, #00807a);
  border-color: var(--accent-border, #cdeceb);
}
.btn-secondary:hover { border-color: var(--accent-btn, #00807a); }

.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1ebe5a; }

/* ============================================================
   Breadcrumb bar
   Soft theme-tinted strip below the header. Re-colors automatically
   with whatever brand colors the owner picks in Theme settings,
   since it reads only var(--accent-*) tokens, never hardcoded hex.
   ============================================================ */

.breadcrumb-bar {
  background: linear-gradient(135deg, var(--accent-soft, #e6f5f4) 0%, var(--bg, #f7f6f3) 65%);
  border-block-end: 1px solid rgba(0,0,0,.05);
}
.breadcrumb-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding-block: 13px;
  font-size: 13.5px;
}
.breadcrumb-link {
  color: var(--text-muted, #6b6b6b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease;
}
.breadcrumb-link:hover { color: var(--accent-btn, #00807a); }
.breadcrumb-link:first-child::before {
  content: '\f015'; /* fa-house */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 13px;
}
.breadcrumb-sep {
  font-size: 11px;
  color: var(--text-muted, #6b6b6b);
  opacity: .5;
}

.breadcrumb-current {
  color: var(--accent-btn, #00807a);
  font-weight: 700;
  background: var(--accent-soft, #e6f5f4);
  padding: 5px 14px;
  border-radius: 999px;
  /* Long property/blog titles shouldn't blow out the bar on mobile —
     truncate with an ellipsis rather than wrapping awkwardly. */
  max-inline-size: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .breadcrumb-inner { padding-block: 11px; font-size: 13px; }
  .breadcrumb-current { max-inline-size: 48vw; }
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  background: var(--bg-2, #fff);
  border-block-end: 1px solid rgba(0,0,0,.07);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-block-size: var(--nav-height, 64px);
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { max-block-size: 42px; width: auto; }
.site-logo span { font-weight: 700; font-size: 19px; color: var(--accent, #00a29a); }

.main-nav { display: flex; gap: 26px; }
.nav-link {
  font-weight: 500;
  font-size: 15px;
  padding-block: 8px;
  color: var(--text, #1c1c1c);
  border-block-end: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-link:hover { color: var(--accent, #00a29a); }
.nav-link.active { color: var(--accent, #00a29a); border-block-end-color: var(--accent, #00a29a); }

.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.lang-switch {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted, #6b6b6b);
  padding: 6px 10px;
  border-radius: var(--radius-sm, 12px);
}
.lang-switch:hover { background: var(--accent-soft, #e6f5f4); color: var(--accent-btn, #00807a); }
.header-actions .btn-whatsapp { padding: 9px 20px; font-size: 14px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius-sm, 12px);
  font-size: 20px;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
}

@media (max-width: 940px) {
  .main-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--bg-2, #fff);
    padding: 8px 20px 16px;
    border-block-end: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 10px 24px rgba(0,0,0,.07);
  }
  .main-nav.open { display: flex; }
  .nav-link { padding-block: 12px; border-block-end: 1px solid rgba(0,0,0,.05); }
  .nav-link.active { border-block-end-color: rgba(0,0,0,.05); }
  .nav-toggle { display: block; }
  .site-header { position: relative; }
  .header-actions .btn-whatsapp { display: none; }
}

/* ============================================================
   Hero — search-first
   ============================================================ */

.hero {
  position: relative;
  background-color: var(--accent-btn, #00807a);
  background-size: cover;
  background-position: center;
  padding-block: 76px;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
/* Scrim keeps hero text readable over any uploaded background image */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
}
/* Optional decorative pattern layer (configured in Theme settings).
   Sits above the scrim so it stays visible, below the content so it
   never competes with the headline or search bar for attention. */
.hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(26px, 4.2vw, 42px);
  margin-block-end: 12px;
  color: #fff;
}
.hero-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(255,255,255,.9);
  max-inline-size: 620px;
  margin-inline: auto;
  margin-block: 0 28px;
}

.hero-search {
  display: flex;
  gap: 8px;
  max-inline-size: 660px;
  margin-inline: auto;
  background: var(--bg-2, #fff);
  padding: 8px;
  border-radius: var(--radius-md, 20px);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.hero-search input,
.hero-search select {
  flex: 1;
  min-inline-size: 0;
  border: none;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  color: var(--text, #1c1c1c);
  border-radius: var(--radius-sm, 12px);
}
.hero-search input:focus,
.hero-search select:focus { outline: 2px solid var(--accent-soft, #e6f5f4); }
.hero-search button {
  background: var(--accent-btn, #00807a);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: var(--radius-sm, 12px);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.hero-search button:hover { background: var(--accent-btn-hov, #006b66); }

.hero-cta { margin-block-start: 22px; }

@media (max-width: 700px) {
  .hero { padding-block: 52px; }
  .hero-search { flex-direction: column; padding: 10px; gap: 6px; }
  .hero-search input,
  .hero-search select { border: 1px solid rgba(0,0,0,.1); }
  .hero-search button { padding-block: 14px; }
}

/* ============================================================
   Sections
   ============================================================ */

.section { padding-block: 64px; }
.section:nth-of-type(even) { background: var(--bg-2, #fff); }

/* Section headings.
   A title on its own needs MORE bottom margin than a title paired with
   a description — using one value for both was why titles sat cramped
   against the grid beneath them. The has-lead modifier handles it. */
.section-heading {
  text-align: center;
  margin-block-end: 44px;
}
.section-heading.has-lead { margin-block-end: 38px; }

.section-title {
  font-size: clamp(22px, 2.7vw, 30px);
  margin: 0;
  text-align: center;
  line-height: 1.35;
}
.section-heading.has-lead .section-title { margin-block-end: 12px; }

/* Short accent rule under the title so section starts read clearly */
.section-heading .section-title::after {
  content: '';
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: 3px;
  background: var(--accent, #00a29a);
  margin-inline: auto;
  margin-block-start: 14px;
}

.section-lead {
  text-align: center;
  color: var(--text-muted, #6b6b6b);
  margin: 0 auto;
  font-size: 15.5px;
  max-inline-size: 620px;
  line-height: 1.8;
}
.section-cta { text-align: center; margin-block-start: 40px; }
.cta-desc { color: rgba(255,255,255,.9); margin-block: 0 22px; font-size: 15.5px; }

@media (max-width: 700px) { .section { padding-block: 44px; } }

/* --- Stats: dark band with icon-led figures --- */
.section-stats {
  background: #14293d !important;
  color: #fff;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}
.stat-item {
  text-align: center;
  padding: 30px 20px;
  border-radius: var(--radius-md, 20px);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .16s ease, transform .16s ease;
}
.stat-item:hover { background: rgba(255,255,255,.09); transform: translateY(-3px); }
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  margin-inline: auto;
  margin-block-end: 14px;
  border-radius: 50%;
  background: var(--accent, #00a29a);
  color: #fff;
  font-size: 21px;
}
.stat-number {
  display: block;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}
.stat-label { color: #a9bbcc; font-size: 15px; }

/* --- Why us: icon cards --- */
.section-why-us { background: var(--bg-2, #fff) !important; }
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
.why-us-item {
  text-align: center;
  padding: 34px 26px;
  border-radius: var(--radius-md, 20px);
  border: 1px solid rgba(0,0,0,.07);
  background: var(--bg, #f7f6f3);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.why-us-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  border-color: var(--accent-border, #cdeceb);
}
.why-us-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 62px;
  block-size: 62px;
  margin-inline: auto;
  margin-block-end: 18px;
  border-radius: 18px;
  background: var(--accent-soft, #e6f5f4);
  color: var(--accent-btn, #00807a);
  font-size: 25px;
}
.why-us-item h3 { font-size: 18.5px; margin-block-end: 10px; }
.why-us-item p { color: var(--text-muted, #6b6b6b); margin: 0; font-size: 15px; line-height: 1.8; }

.section-cta-banner {
  background: var(--accent-btn, #00807a) !important;
  color: #fff;
  text-align: center;
  padding-block: 60px;
}
.section-cta-banner h2 { font-size: clamp(21px, 2.8vw, 28px); margin-block-end: 22px; color: #fff; }
.section-cta-banner .btn-primary { background: #fff; color: var(--accent-btn, #00807a); }
.section-cta-banner .btn-primary:hover { background: rgba(255,255,255,.9); }

/* ============================================================
   Property cards
   ============================================================ */

.property-grid {
  display: grid;
  /* Min width is set so the three spec items (bedrooms / bathrooms /
     area) fit on a single row rather than wrapping onto a second line. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
@media (max-width: 380px) {
  /* Very narrow phones: let the grid go below the 320px min rather
     than overflowing the viewport. */
  .property-grid { grid-template-columns: 1fr; }
}

.property-card {
  background: var(--bg-2, #fff);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease;
  display: flex;
  flex-direction: column;
}
.property-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.1); }

.property-card-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--accent-soft, #e6f5f4); }
.property-card-image img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.property-badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  background: var(--accent-btn, #00807a);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
}
.property-badge-rent { background: #5a4fc4; }
.property-badge-featured {
  inset-inline-start: auto;
  inset-inline-end: 12px;
  background: #d99b2c;
  color: #3a2703;
}

.property-card-body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.property-card-title { font-size: 16.5px; font-weight: 700; margin: 0; }
.property-card-location { color: var(--text-muted, #6b6b6b); font-size: 14px; margin: 0; }
.property-card-price {
  font-size: 19px;
  font-weight: 700;
  color: var(--accent-btn, #00807a);
  margin: 4px 0 0;
}
.property-card-specs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted, #6b6b6b);
  /* nowrap keeps the three items on one row at the 320px card width.
     min-width:0 on the children lets them shrink gracefully if an
     office renames a field label to something much longer in
     lang/ar.php, rather than overflowing the card. */
  flex-wrap: nowrap;
  overflow: hidden;
  margin-block-start: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid rgba(0,0,0,.06);
}
.property-card-specs span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.property-card-specs i {
  color: var(--accent, #00a29a);
  font-size: 12.5px;
  flex-shrink: 0;
}

/* ============================================================
   Listings page + filters
   ============================================================ */

.properties-page { padding-block-end: 40px; }

.properties-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.filter-sidebar {
  position: sticky;
  top: calc(var(--nav-height, 64px) + 20px);
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  padding: 22px;
}
.filter-group { margin-block-end: 18px; }
.filter-group > label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-block-end: 7px;
}
.filter-group select,
.filter-group input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius-sm, 12px);
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text, #1c1c1c);
}
.filter-group select:focus,
.filter-group input:focus {
  outline: none;
  border-color: var(--accent, #00a29a);
  box-shadow: 0 0 0 3px var(--accent-soft, #e6f5f4);
}
.filter-range { display: flex; gap: 8px; }
.filter-reset {
  display: block;
  text-align: center;
  margin-block-start: 12px;
  font-size: 13.5px;
  color: var(--text-muted, #6b6b6b);
}

.filter-toggle-mobile { display: none; }

@media (max-width: 940px) {
  .properties-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; display: none; }
  .filter-sidebar.open { display: block; }
  .filter-toggle-mobile {
    display: block;
    width: 100%;
    margin-block-end: 16px;
  }
}

.results-count {
  color: var(--text-muted, #6b6b6b);
  font-size: 14.5px;
  margin-block-end: 18px;
}

.pagination { display: flex; gap: 8px; justify-content: center; margin-block-start: 36px; flex-wrap: wrap; }
.pagination a {
  padding: 9px 16px;
  border-radius: var(--radius-sm, 12px);
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
  font-weight: 500;
}
.pagination a.active { background: var(--accent-btn, #00807a); color: #fff; border-color: var(--accent-btn, #00807a); }

/* ============================================================
   Property detail
   ============================================================ */

.property-detail-page { padding-block: 28px 48px; }

.property-main-image {
  border-radius: var(--radius-md, 20px);
  block-size: clamp(220px, 42vw, 440px);
  object-fit: cover;
  inline-size: 100%;
}
.property-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-block-start: 10px;
  overflow-x: auto;
  padding-block-end: 4px;
}
.property-gallery-thumbs img {
  block-size: 76px;
  inline-size: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm, 12px);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s ease;
}
.property-gallery-thumbs img:hover { opacity: .82; }

.property-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: 36px;
  margin-block-start: 28px;
  align-items: start;
}
@media (max-width: 940px) {
  .property-detail-layout { grid-template-columns: 1fr; gap: 28px; }
}

.property-header {
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  padding: 26px 28px;
  margin-block-end: 24px;
  position: relative;
  overflow: hidden;
}
/* Accent edge so the title block reads as the page header, not just
   loose text sitting under the gallery. */
.property-header::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 5px;
  background: var(--accent-btn, #00807a);
}
.property-header .property-badge { position: static; display: inline-block; margin-block-end: 12px; }
.property-header h1 {
  font-size: clamp(22px, 3.2vw, 32px);
  margin-block: 4px 14px;
  line-height: 1.35;
}
.property-price {
  font-size: clamp(21px, 2.8vw, 28px);
  font-weight: 700;
  color: var(--accent-btn, #00807a);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.price-period { font-size: .62em; font-weight: 500; color: var(--text-muted, #6b6b6b); }
.property-ref {
  color: var(--text-muted, #6b6b6b);
  font-size: 13.5px;
  margin-block-start: 10px;
  padding-block-start: 12px;
  border-block-start: 1px solid rgba(0,0,0,.06);
}

/* Official Saudi Riyal symbol glyph — sized to the surrounding text */
.riyal-symbol {
  display: inline-block;
  block-size: .82em;
  inline-size: auto;
  vertical-align: -0.03em;
  flex-shrink: 0;
}
.property-card-price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.property-card-price .price-period { font-size: .72em; }

.property-description {
  margin-block: 22px;
  line-height: 1.9;
  color: var(--text, #1c1c1c);
}

/* --- Spec rows: the RTL fix ---
   Previously these used justify-content: space-between on a flex row,
   which in RTL pushed the label and value to visually confusing edges
   with no alignment between rows. Now it's a two-column grid so the
   label column and value column line up consistently down the list,
   and it reads correctly in both RTL and LTR. */
.property-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 32px;
  margin-block: 26px;
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  padding: 8px 22px;
}
.spec-row {
  display: grid;
  grid-template-columns: minmax(90px, 40%) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 12px;
  border-block-end: 1px solid rgba(0,0,0,.06);
}
.spec-label {
  color: var(--text-muted, #6b6b6b);
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.spec-label i {
  inline-size: 18px;
  text-align: center;
  color: var(--accent, #00a29a);
  font-size: 14px;
  flex-shrink: 0;
}
.spec-value { font-weight: 700; font-size: 15px; text-align: start; }

.property-amenities { margin-block: 30px; }
.property-amenities h2 { font-size: 19px; margin-block-end: 14px; }
.amenities-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.amenity-chip {
  background: var(--accent-soft, #e6f5f4);
  color: var(--accent-btn, #00807a);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}

.property-floorplan, .property-video, .property-map { margin-block: 30px; }
.property-floorplan h2, .property-video h2 { font-size: 19px; margin-block-end: 14px; }
.property-floorplan img { border-radius: var(--radius-md, 20px); }
.property-map iframe { border-radius: var(--radius-md, 20px); display: block; }

.contact-card {
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  padding: 22px;
  position: sticky;
  top: calc(var(--nav-height, 64px) + 20px);
}
@media (max-width: 940px) { .contact-card { position: static; } }

.contact-agent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 18px;
  padding-block-end: 18px;
  border-block-end: 1px solid rgba(0,0,0,.07);
}
.contact-agent img { inline-size: 48px; block-size: 48px; border-radius: 50%; object-fit: cover; }
.contact-agent span { font-weight: 700; }

.contact-card .btn { margin-block-end: 10px; }

.inquiry-form { display: flex; flex-direction: column; gap: 11px; margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid rgba(0,0,0,.07); }
.inquiry-form input,
.inquiry-form textarea {
  padding: 11px 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius-sm, 12px);
  font-family: inherit;
  font-size: 14.5px;
}
.inquiry-form input:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: var(--accent, #00a29a);
  box-shadow: 0 0 0 3px var(--accent-soft, #e6f5f4);
}

.related-properties { margin-block-start: 56px; }
.related-properties h2 { font-size: 22px; margin-block-end: 22px; }

/* ============================================================
   Agents
   ============================================================ */

.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.agent-card {
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  padding: 26px 20px;
  text-align: center;
  transition: transform .16s ease, box-shadow .16s ease;
}
.agent-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.09); }
.agent-card img {
  inline-size: 92px;
  block-size: 92px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  margin-block-end: 14px;
}
.agent-card h3 { font-size: 16.5px; margin-block-end: 4px; }
.agent-card p { color: var(--text-muted, #6b6b6b); font-size: 14px; margin: 0; }

.agent-detail-page { padding-block: 32px 48px; }
.agent-profile { display: flex; gap: 26px; align-items: center; margin-block-end: 28px; flex-wrap: wrap; }
.agent-profile-photo { inline-size: 128px; block-size: 128px; border-radius: 50%; object-fit: cover; }
.agent-profile-info h1 { font-size: clamp(21px, 3vw, 28px); }
.agent-title { color: var(--text-muted, #6b6b6b); margin-block: 4px 12px; }
.agent-contact-links { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; color: var(--accent-btn, #00807a); margin-block-end: 12px; }
.agent-bio { line-height: 1.9; margin-block-end: 36px; max-inline-size: 760px; }
.agent-listings h2 { font-size: 22px; margin-block-end: 22px; }

/* ============================================================
   Blog
   ============================================================ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}

.blog-card {
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.1);
  border-color: var(--accent-border, #cdeceb);
}

.blog-card-media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--accent-soft, #e6f5f4);
  position: relative;
}
.blog-card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }

/* Placeholder when a post has no cover image — keeps the card shape
   consistent instead of collapsing the media area. */
.blog-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--accent, #00a29a);
  opacity: .35;
}

.blog-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.blog-card-date {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-muted, #6b6b6b);
}
.blog-card-date i { color: var(--accent, #00a29a); }

.blog-card-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
  /* Clamp to two lines so cards in a row stay the same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt {
  color: var(--text-muted, #6b6b6b);
  font-size: 14.5px;
  margin: 0;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-more {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-block-start: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid rgba(0,0,0,.06);
  color: var(--accent-btn, #00807a);
  font-weight: 700;
  font-size: 14px;
}
.blog-card-more i { font-size: 12px; transition: transform .16s ease; }
.blog-card:hover .blog-card-more i { transform: translateX(-3px); }
[dir="ltr"] .blog-card:hover .blog-card-more i { transform: translateX(3px); }

.blog-post-page { padding-block: 32px 48px; max-inline-size: 780px; }
.blog-post-page h1 { font-size: clamp(23px, 3.4vw, 34px); margin-block-end: 8px; }
.post-date { color: var(--text-muted, #6b6b6b); font-size: 14px; }
.post-cover { border-radius: var(--radius-md, 20px); block-size: clamp(200px, 36vw, 380px); object-fit: cover; inline-size: 100%; margin-block: 20px; }
.post-body { line-height: 1.95; font-size: 16.5px; }
.post-body p { margin-block: 0 1.2em; }
.related-posts { margin-block-start: 56px; }
.related-posts h2 { font-size: 21px; margin-block-end: 20px; }

/* ============================================================
   About / Contact
   ============================================================ */

.about-page, .contact-page, .legal-page { padding-block: 32px 48px; }

.about-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  align-items: center;
  margin-block: 26px;
}
.about-body { line-height: 1.95; }
.about-image { border-radius: var(--radius-md, 20px); }
.about-legal {
  margin-block-start: 28px;
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  padding: 8px 22px;
  max-inline-size: 520px;
}

.contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-block-start: 26px;
}
.contact-info .spec-row { grid-template-columns: minmax(80px, 34%) minmax(0, 1fr); }
.contact-info .btn-whatsapp { margin-block-start: 18px; }
.contact-map { margin-block-start: 22px; }
.contact-map iframe { border-radius: var(--radius-md, 20px); display: block; }

.map-warning {
  margin-block-start: 22px;
  background: #fff8e6;
  border: 1px solid #f0d998;
  border-radius: var(--radius-md, 20px);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #6b5410;
  font-size: 14.5px;
  line-height: 1.8;
}
.map-warning i { color: #d99b2c; font-size: 18px; margin-block-start: 2px; flex-shrink: 0; }
.map-warning p { margin: 0; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--bg-2, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-md, 20px);
  padding: 26px;
}
.contact-form .form-group { margin: 0; }
.contact-form label { font-weight: 700; font-size: 14px; margin-block-end: 6px; display: block; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius-sm, 12px);
  font-family: inherit;
  font-size: 15px;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent, #00a29a);
  box-shadow: 0 0 0 3px var(--accent-soft, #e6f5f4);
}

.form-success {
  color: #1a7d3c;
  background: #eaf7ef;
  border: 1px solid #bfe3cd;
  padding: 14px 18px;
  border-radius: var(--radius-sm, 12px);
  font-weight: 500;
}
.form-error {
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f3c9c6;
  padding: 14px 18px;
  border-radius: var(--radius-sm, 12px);
  font-weight: 500;
}

.legal-page .legal-body { line-height: 1.95; max-inline-size: 780px; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: #14293d;
  color: #cfd7e3;
  margin-block-start: 72px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-block: 52px 36px;
}
@media (max-width: 780px) {
  .footer-inner { grid-template-columns: 1fr; gap: 30px; padding-block: 40px 28px; }
}

.footer-col h3 { font-size: 15px; margin-block-end: 14px; color: #fff; }
.footer-col a {
  display: block;
  margin-block-end: 9px;
  color: #cfd7e3;
  font-size: 14.5px;
  transition: color .15s ease;
}
.footer-col a:hover { color: #fff; }
.footer-col p { margin-block: 0 9px; font-size: 14.5px; }

.footer-col .site-logo { margin-block-end: 14px; }
.footer-col .site-logo span { color: #fff; }
.footer-col .site-logo img { filter: brightness(0) invert(1); opacity: .95; }

.footer-legal {
  font-size: 13.5px;
  color: #8ea2ba;
  margin-block: 0 6px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-block: 20px;
  border-block-start: 1px solid rgba(255,255,255,.1);
  font-size: 13.5px;
  color: #8ea2ba;
  flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
.footer-bottom-end {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-legal-links { display: flex; gap: 20px; }
.footer-legal-links a { color: #8ea2ba; }
.footer-legal-links a:hover { color: #fff; }

/* Mafaza signature — consistent across all Mafaza CMS products */
.footer-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8ea2ba;
  font-size: 12.5px;
  padding-inline-start: 20px;
  border-inline-start: 1px solid rgba(255,255,255,.14);
  transition: color .15s ease, opacity .15s ease;
}
.footer-by:hover { color: #fff; opacity: 1; }
.footer-by img { display: block; opacity: .85; }
.footer-by:hover img { opacity: 1; }

@media (max-width: 780px) {
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
  .footer-bottom-end { justify-content: center; }
  .footer-by { border-inline-start: none; padding-inline-start: 0; }
}

.whatsapp-float {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index: 60;
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }

/* ============================================================
   Misc
   ============================================================ */

.empty-state {
  text-align: center;
  color: var(--text-muted, #6b6b6b);
  padding-block: 56px;
  font-size: 15.5px;
}
.page-title {
  font-size: clamp(23px, 3.4vw, 32px);
  margin-block: 34px 18px;
}
.error-404-page { text-align: center; padding-block: 100px 120px; }
.error-404-page h1 { font-size: clamp(26px, 4vw, 38px); margin-block-end: 12px; }
.error-404-page p { color: var(--text-muted, #6b6b6b); margin-block-end: 26px; }