:root {
    /* ═══ Amaas Brand Color System ═══ */
    --amaas-gold: #dfc187;
    --amaas-dark: #1a1a2e;
    --amaas-white: #ffffff;
    --amaas-overlay: rgba(11, 11, 13, 0.92);
    --amaas-gold-dark: #c9a96e;
    --amaas-gold-deep: #926119;
    --amaas-gold-hover: #ba9452;
    /* Typography System */
    --font-en: 'Montserrat', sans-serif;
    --font-ar: 'Amaas STV Arabic Font', 'STV', sans-serif;
    --font-icon: 'houzez-iconfont';
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMAAS — Professional UI/UX Fix v1.0
   Deployed: May 2026
   Purpose: Comprehensive visual audit fixes for Houzez/Elementor theme
   Scope:   Loaded AFTER all theme/plugin styles via WPCode CSS snippet
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override Bootstrap nav-link hover CSS variable */
.header-v4 .nav-link,
.main-nav .nav-link {
  --bs-nav-link-hover-color: #dfc187 !important;
}


/* ── 1. BASE TYPOGRAPHY ─────────────────────────────────────────────────── */

/* Base body defaults — fix weight (500→400) and line-height */
body,
.houzez-body,
.entry-content {
  font-weight: 400;
  line-height: 1.65;
}

/* Paragraph text — fix color (#777→#333) and line-height [Phase 2c] */
body p,
.entry-content p,
.elementor-widget-text-editor p,
.houzez-content p,
.block-content-wrap p,
.property-description p {
  color: #333333;
  font-weight: 400;
  line-height: 1.65;
}

/* Houzez-specific heading contexts only — NOT Elementor widget headings */
.entry-content h1,
.block-title-wrap h1,
.section-title h1 {
  font-weight: 700;
  line-height: 1.2;
}

.entry-content h2,
.block-title-wrap h2,
.section-title h2 {
  font-weight: 700;
  line-height: 1.25;
}

.entry-content h3,
.block-title-wrap h3,
.section-title h3 {
  font-weight: 600;
  line-height: 1.3;
}

.entry-content h4,
.block-title-wrap h4,
.section-title h4 {
  font-weight: 600;
  line-height: 1.35;
}

.entry-content h5,
.entry-content h6,
.block-title-wrap h5,
.block-title-wrap h6 {
  font-weight: 600;
  line-height: 1.4;
}

/* Secondary/muted text — ensure accessibility contrast */
.text-muted,
.houzez-listing-address,
.property-meta span,
.listing-address {
  color: #595959;
}


/* ── 2. HEADER & NAVIGATION ─────────────────────────────────────────────── */

/* CRITICAL FIX: Header-v4 .navbar uses Bootstrap flex-wrap:wrap.
   When nav items total width > container, logo and menu drop to separate rows.
   Force nowrap so logo + nav + login always stay on one line. */
.header-v4 .navbar {
  flex-wrap: nowrap !important;
}

/* Allow nav to shrink to available space instead of overflowing */
.header-v4 .main-nav {
  min-width: 0;
  overflow: hidden;
}

/* Prevent menu list items from wrapping either */
.main-nav > ul {
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
  align-items: center;
}

/* CRITICAL: Prevent nav link TEXT from wrapping to second line */
.header-v4 .main-nav > ul > li > a,
.main-nav > ul > li > a {
  white-space: nowrap !important;
}

/* Desktop — slightly reduce menu sizing to fit all items on one line */
.header-v4 .main-nav > ul > li > a {
  font-size: 16px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Narrow desktop — reduce menu sizing further to prevent overflow */
@media (max-width: 1200px) and (min-width: 1025px) {
  .main-nav > ul > li > a {
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .main-nav > ul > li > a {
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Ensure header z-index stacking */
.header-wrap,
.header-desktop {
  position: relative;
  z-index: 1000;
}


/* ── 3. BUTTONS & INTERACTIVE ────────────────────────────────────────────── */

/* Unified button styling — consistent radius, padding, transitions */
.btn,
.btn-primary,
.btn-secondary,
.elementor-button,
.houzez-button,
.houzez_button,
input[type="submit"],
button[type="submit"],
.vc_btn3,
.search-button,
.btn-search {
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Primary / gold button hover — subtle lift, no shadow */
.btn-primary:hover,
.elementor-button:hover,
.houzez-button:hover,
.houzez_button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* Reset transform on active/click */
.btn-primary:active,
.elementor-button:active {
  transform: translateY(0);
}


/* ── 4. CARDS & LISTINGS ─────────────────────────────────────────────────── */

/* Property listing cards — consistent radius, NO shadows */
.item-wrap,
.item-listing-wrap,
.property-card,
.houzez-listing-card,
.listing-item,
.property-item-wrap {
  border-radius: 12px;
  box-shadow: none !important;
  overflow: hidden;
}

/* Card hover — no shadow, no lift */
.item-wrap:hover,
.item-listing-wrap:hover,
.property-card:hover,
.houzez-listing-card:hover,
.listing-item:hover,
.property-item-wrap:hover {
  box-shadow: none !important;
  transform: none;
}

/* Card images — clipped to card radius */
.item-wrap .item-header,
.item-listing-wrap .item-header,
.item-wrap .listing-thumb,
.item-listing-wrap .listing-thumb,
.property-card .property-thumb {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* Card image hover — subtle zoom */
.item-wrap .item-header img,
.item-listing-wrap .item-header img,
.property-card .property-thumb img {
  transition: transform 0.4s ease;
}

.item-wrap:hover .item-header img,
.item-listing-wrap:hover .item-header img,
.property-card:hover .property-thumb img {
  transform: scale(1.03);
}


/* ── 5. FORMS & INPUTS ──────────────────────────────────────────────────── */

/* Form field improvements — border-radius consistency */
.houzez-search-field input,
.houzez-search-field select,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.property-schedule-tour-form-wrap input,
.property-schedule-tour-form-wrap textarea {
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state — gold accent (contact forms and search) */
.contact-form input:focus,
.contact-form textarea:focus,
.houzez-search-field input:focus,
.houzez-search-field select:focus,
.property-schedule-tour-form-wrap input:focus,
.property-schedule-tour-form-wrap textarea:focus {
  border-color: #dfc187;
  box-shadow: 0 0 0 3px rgba(223, 193, 135, 0.15);
  outline: none;
}


/* ── 6. SPACING & LAYOUT ────────────────────────────────────────────────── */

/* Consistent section vertical rhythm — only Houzez listing/archive blocks */
.block-wrap:not([style*="padding"]),
.block-content-wrap:not([style*="padding"]) {
  padding-top: 60px;
  padding-bottom: 60px;
}


/* ── 7. ACCESSIBILITY ────────────────────────────────────────────────────── */

/* Keyboard focus outlines — visible, branded */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #dfc187;
  outline-offset: 2px;
}

/* Ensure links have visible distinction */
.entry-content a:not(.btn):not(.elementor-button) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Minimum touch target size on interactive elements (mobile) */
@media (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .elementor-button,
  input[type="submit"],
  button[type="submit"],
  a.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* The back-to-top button carries the .btn class, so the touch-target rule
   above also applied display:inline-flex to it. Houzez hides that button with
   the .houzez-hidden class, which is also a single-class selector, so the
   later-loading rule above won and the button stayed pinned on screen even at
   the very top of the page. This restores the hidden default with a higher
   specificity selector. Deliberately NOT marked important: the theme reveals
   the button with a jQuery fade that writes an inline display, which must
   still be able to win. */
a#scroll-top.btn-back-to-top.houzez-hidden {
  display: none;
}


/* ── 8. ARABIC RTL ───────────────────────────────────────────────────────── */

/* RTL base — direction is already set by WordPress via html[dir="rtl"].
   Only add typography improvements here. */

/* Arabic text — increase line-height ~10% for readability */
html[lang="ar"] body p,
html[lang="ar"] .entry-content p,
html[lang="ar"] .elementor-widget-text-editor p {
  line-height: 1.82;
}

html[lang="ar"] .entry-content h1,
html[lang="ar"] .entry-content h2,
html[lang="ar"] .entry-content h3,
html[lang="ar"] .entry-content h4,
html[lang="ar"] .entry-content h5,
html[lang="ar"] .entry-content h6 {
  line-height: 1.45;
}

/* RTL form alignment */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .form-control {
  text-align: right;
}

/* RTL navigation — mirror padding */
html[lang="ar"] .main-nav > ul > li > a {
  text-align: right;
}

/* RTL property meta — mirror icon/text spacing */
html[lang="ar"] .property-meta .meta-item i,
html[lang="ar"] .property-meta .meta-item svg {
  margin-left: 5px;
  margin-right: 0;
}

/* RTL listing card body text alignment */
html[lang="ar"] .item-body,
html[lang="ar"] .item-title,
html[lang="ar"] .listing-address,
html[lang="ar"] .item-price {
  text-align: right;
}


/* ── 9. MOBILE RESPONSIVE (max-width: 768px) ────────────────────────────── */

@media (max-width: 768px) {

  /* Prevent horizontal overflow on mobile */
  body {
    overflow-x: hidden;
  }

  /* Mobile typography scale */
  .entry-content h1,
  .block-title-wrap h1,
  .section-title h1 {
    font-size: 32px;
  }

  .entry-content h2,
  .block-title-wrap h2,
  .section-title h2 {
    font-size: 26px;
  }

  .entry-content h3,
  .block-title-wrap h3,
  .section-title h3 {
    font-size: 22px;
  }

  .entry-content h4,
  .block-title-wrap h4,
  .section-title h4 {
    font-size: 20px;
  }

  body p,
  .entry-content p,
  .elementor-widget-text-editor p {
    font-size: 15px;
  }

  /* Mobile section spacing — tighter */
  .block-wrap:not([style*="padding"]),
  .block-content-wrap:not([style*="padding"]) {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Mobile cards — no shadow, no lift */
  .item-wrap:hover,
  .item-listing-wrap:hover,
  .property-card:hover {
    transform: none;
    box-shadow: none !important;
  }

  /* Footer — ensure columns stack */
  .footer-widget-col,
  .footer-widget {
    width: 100%;
    margin-bottom: 30px;
  }
}


/* ── 10. TABLET RESPONSIVE (769px – 1024px) ──────────────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {

  /* Tablet typography scale */
  .entry-content h1,
  .block-title-wrap h1 {
    font-size: 36px;
  }

  .entry-content h2,
  .block-title-wrap h2 {
    font-size: 30px;
  }

  .entry-content h3,
  .block-title-wrap h3 {
    font-size: 24px;
  }

  /* Tablet section spacing */
  .block-wrap:not([style*="padding"]),
  .block-content-wrap:not([style*="padding"]) {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}


/* ── 11. MISC FIXES ──────────────────────────────────────────────────────── */

/* Floating button deduplication — 3 Elementor floating button containers exist.
   Keep only the first, hide the other two. */
.elementor-location-floating_buttons ~ .elementor-location-floating_buttons {
  display: none !important;
}

/* Property ribbon z-index — ensure stacking within gallery only */
.property-ribbon {
  z-index: 10;
  position: absolute;
}

/* Prevent ribbon from rendering below gallery */
.property-gallery-wrap .property-ribbon,
.single-property-gallery .property-ribbon {
  z-index: 10;
}

/* Note: Icon font protection is handled by the global font enforcement snippet.
   Do NOT override font-family on icon classes here. */

/* Image performance — prevent layout shift */
img {
  height: auto;
  max-width: 100%;
}

/* Selection color — branded */
::selection {
  background-color: rgba(223, 193, 135, 0.25);
  color: #0b0b0d;
}

/* Smooth transitions — scoped to nav links and content links only */
.main-nav a,
.entry-content a,
.footer-wrap a {
  transition: color 0.3s ease;
}


/* ── 12. FOOTER PARAGRAPH COLOR ─────────────────────────────────────────── */

/* Footer widget-content paragraphs — gold tone on dark background (both EN & AR) */
footer .widget-content p,
.footer-wrap .widget-content p,
footer .block-content-wrap p,
.footer-wrap .block-content-wrap p,
footer .houzez-content p,
.footer-wrap .houzez-content p,
footer .elementor-widget-text-editor p,
.footer-wrap .elementor-widget-text-editor p,
footer .property-description p,
.footer-wrap .property-description p {
  color: #dfc187 !important;
}

/* ==========================================================================
   13. FOOTER LINK BLUE COLOR FIX
   Prevent links from turning blue on click/visited/focus
   ========================================================================== */
footer a:active,
footer a:visited,
footer a:focus,
.footer-wrap a:active,
.footer-wrap a:visited,
.footer-wrap a:focus,
.footer-bottom-wrap a:active,
.footer-bottom-wrap a:visited,
.footer-bottom-wrap a:focus {
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Also prevent blue highlight on ALL links sitewide (except keyboard focus) */
a:active {
  color: inherit !important;
}
a:focus:not(:focus-visible) {
  color: inherit !important;
  outline: none !important;
}
/* AMAAS_VISITED_LINK_NEUTRAL_V1 (2026-10-05): the global rule that forced every VISITED link to its
   parent's colour (color inherit, important) was removed. It made visited items turn black inside dark
   menus (CRM report switcher, CRM dashboard titles, project tabs). With it gone a visited link renders
   exactly like an unvisited one; component rules keep their own explicit visited colours. The pressed
   and mouse-focus rules above are unchanged. */

/* ==========================================================================
   14. ARABIC "BY AMAAS" (أماس العقارية) — only on SOLD properties
   Customizer CSS has a blanket rule that applies ::after to ALL Arabic
   property pages. This override hides it on non-sold pages.
   Sold-specific rules in Customizer use :has() with higher specificity
   and will still show the ribbon on sold properties.
   ========================================================================== */
html body.single-property .property-banner-grid-wrap::after,
html body.single-property .property-gallery-wrap::after,
html body.single-property .property-gallery-slider-wrap::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   15. AMAAS LANDING SECTION STYLING FIX
   Fix grey color, improve font and spacing to match page theme
   ========================================================================== */
.amaas-landing {
  background: linear-gradient(135deg, #0b0b0d 0%, #1a1a1f 50%, #0b0b0d 100%) !important;
}

.amaas-landing .amaas-title {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: -0.5px !important;
}

/* First three lines: company name rows (1=شركة/AMAAS AL-EMAR, 2=أمـاس/Real Estate, 3=العقارية/Development Co) in gold */
.amaas-landing .amaas-h1 > .amaas-row:nth-child(1) .amaas-title,
.amaas-landing .amaas-h1 > .amaas-row:nth-child(2) .amaas-title,
.amaas-landing .amaas-h1 > .amaas-row:nth-child(3) .amaas-title {
  color: #dfc187 !important;
}

/* Subtitle "Where You Live Your Dreams" */
.amaas-landing .amaas-h1 > .amaas-row:nth-child(4) .amaas-title {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  letter-spacing: 1px !important;
}

/* Description paragraph */
.amaas-landing .amaas-desc {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CTA Button */
.amaas-landing .amaas-cta-btn {
  border: 1px solid #dfc187 !important;
  color: #dfc187 !important;
  background: transparent !important;
  font-family: 'Montserrat', sans-serif !important;
}

.amaas-landing .amaas-cta-btn:hover {
  background: #dfc187 !important;
  color: #0b0b0d !important;
}

/* Better spacing */
.amaas-landing .amaas-container {
  padding: 0 20px !important;
}

.amaas-landing .amaas-box {
  gap: 16px !important;
}

/* Arabic version of landing */
html[lang="ar"] .amaas-landing .amaas-title {
  font-family: 'Amaas STV Arabic Font', 'STV', sans-serif !important;
}
html[lang="ar"] .amaas-landing .amaas-desc {
  font-family: 'Amaas STV Arabic Font', 'STV', sans-serif !important;
}
html[lang="ar"] .amaas-landing .amaas-cta-btn {
  font-family: 'Amaas STV Arabic Font', 'STV', sans-serif !important;
}

/* ==========================================================================
   16. REMOVE ALL CARD/BOX SHADOWS SITEWIDE
   ========================================================================== */
.item-listing-wrap,
.item-wrap,
.item-wrap-no-frame,
.property-card,
.property-listing,
.hz-item-gallery-js,
.item-listing-wrap:hover,
.item-wrap:hover,
.amaas-badge,
.card,
.widget-wrap,
.elementor-widget-container,
.property-item,
.listing-item,
.houzez-module-card,
.houzez-card,
.hz-listing-card,
[class*="item-listing"],
[class*="item-wrap"] {
  box-shadow: none !important;
}

/* ==========================================================================
   17. ELEMENTOR SECTION HEADING CONSISTENCY
   Ensure all Elementor section headings on pages share consistent styling
   ========================================================================== */
.elementor-heading-title {
  font-family: 'Montserrat', sans-serif !important;
}

html[lang="ar"] .elementor-heading-title {
  font-family: 'Amaas STV Arabic Font', 'STV', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════
   18. FOOTER LINKS GROUPING — Align with Newsletter Box
   ═══════════════════════════════════════════════════════════
   Groups "Contact Us", "Terms and Conditions", "Privacy Policy"
   together and pushes them down to align with the newsletter
   subscribe box in the left column.
   ═══════════════════════════════════════════════════════════ */

/* Make the right footer column a flex column */
.footer-top-wrap .row > .col-lg-3:last-child {
  display: flex !important;
  flex-direction: column !important;
}

/* Contact info widget takes its natural space at top */
.footer-top-wrap .row > .col-lg-3:last-child > .widget-contact-us {
  flex: 0 0 auto;
}

/* Links block (Contact Us + Terms + Privacy) aligns from top after contact info */
.footer-top-wrap .row > .col-lg-3:last-child > .widget_block {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* Style the grouped links list */
.footer-top-wrap .col-lg-3:last-child .widget_block .wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-top-wrap .col-lg-3:last-child .widget_block .wp-block-list li {
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.footer-top-wrap .col-lg-3:last-child .widget_block .wp-block-list li:last-child {
  margin-bottom: 0 !important;
}

.footer-top-wrap .col-lg-3:last-child .widget_block .wp-block-list li a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  transition: color 0.3s ease !important;
}

.footer-top-wrap .col-lg-3:last-child .widget_block .wp-block-list li a:hover,
.footer-top-wrap .col-lg-3:last-child .widget_block .wp-block-list li a:active,
.footer-top-wrap .col-lg-3:last-child .widget_block .wp-block-list li a:focus {
  color: #dfc187 !important;
  text-decoration: none !important;
}

/* Also make the left column flex to ensure proper alignment */
.footer-top-wrap .row > .col-lg-5:first-child {
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure the row itself stretches columns equally */
.footer-top-wrap .row {
  align-items: stretch !important;
}

/* ==========================================================================
   19. ADDITIONAL BOX SHADOW REMOVAL — ABOUT AMAAS PAGE
   Targets Elementor icon boxes, flip boxes, and figure elements
   that have inline/generated shadows not covered by Section 16.
   ========================================================================== */
.elementor-element[data-id="79adae8"],
.elementor-element[data-id="693e391"],
.elementor-element[data-id="6a9c207"],
.elementor-view-framed,
.elementor-flip-box__layer__description,
.amaas-fig,
.amaas-fig.hover-vid-box,
figure.amaas-fig,
.elementor-icon-box-wrapper,
.elementor-flip-box,
.elementor-flip-box__front,
.elementor-flip-box__back {
  box-shadow: none !important;
}

/* ==========================================================================
   20. HEADER NAV LINK COLORS — White normal, Gold hover/active
   Also prevents black flash during page load.
   ========================================================================== */

/* ── Normal state: WHITE ── */
.header-v4 .main-nav > ul > li > a,
.header-v4 .navbar-nav > li > a,
nav.main-nav > ul > li > a,
.navi > li > a {
  color: #ffffff !important;
  background-color: transparent !important;
  transition: color 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ── Hover + Active: SOFT GOLD — with background + transition fix ── */
.header-v4 .main-nav > ul > li > a:hover,
.header-v4 .main-nav > ul > li > a:focus:hover,
.header-v4 .main-nav > ul > li.current-menu-item > a,
.header-v4 .main-nav > ul > li.current_page_item > a,
.header-v4 .navbar-nav > li > a:hover,
.header-v4 .navbar-nav > li > a:focus:hover,
.header-v4 a.nav-link:hover,
.header-v4 a.nav-link:active,
.header-v4 a.nav-link:focus:hover,
.header-transparent-wrap .header-v4 a.nav-link:hover,
.header-transparent-wrap .header-v4 .nav-link:hover,
.header-transparent-wrap .header-v4 .nav-link:focus:hover,
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li > a:focus:hover,
nav.main-nav > ul > li.current-menu-item > a,
.navi > li > a:hover,
.navi > li > a:focus:hover,
.navi > li.current-menu-item > a {
  color: #dfc187 !important;
  background-color: transparent !important;
}

/* ── Visited / focus on regular (non-current) nav items = WHITE ── */
/* Prevents links going black after being clicked */
.header-v4 .main-nav > ul > li > a:visited,
.header-v4 .main-nav > ul > li > a:focus,
.header-v4 .navbar-nav > li > a:visited,
.header-v4 .navbar-nav > li > a:focus,
nav.main-nav > ul > li > a:visited,
nav.main-nav > ul > li > a:focus,
.navi > li > a:visited {
  color: #ffffff !important;
}

/* ── Active (mouse-press flash) = soft gold ── */
.header-v4 .main-nav > ul > li > a:active,
nav.main-nav > ul > li > a:active {
  color: #dfc187 !important;
}

/* ── Current-menu-item visited/focus stays soft gold ── */
.header-v4 .main-nav > ul > li.current-menu-item > a:visited,
.header-v4 .main-nav > ul > li.current-menu-item > a:focus,
.header-v4 .main-nav > ul > li.current_page_item > a:visited,
.header-v4 .main-nav > ul > li.current_page_item > a:focus,
nav.main-nav > ul > li.current-menu-item > a:visited,
nav.main-nav > ul > li.current-menu-item > a:focus {
  color: #dfc187 !important;
}

/* ==========================================================================
   21. ABOUT AMAAS — COUNTER SECTION DESCRIPTIONS → WHITE
   The text-editor descriptions below the number counters
   (projects, apartments, villas, town house) on dark background.
   ========================================================================== */
.elementor-element[data-id="43b0f23c"] .elementor-widget-text-editor,
.elementor-element[data-id="43b0f23c"] .elementor-widget-text-editor p,
.elementor-element[data-id="46885af3"],
.elementor-element[data-id="46885af3"] p,
.elementor-element[data-id="6458b84e"],
.elementor-element[data-id="6458b84e"] p,
.elementor-element[data-id="6297a4a6"],
.elementor-element[data-id="6297a4a6"] p,
.elementor-element[data-id="d61e951"],
.elementor-element[data-id="d61e951"] p {
  color: #ffffff !important;
}

/* ==========================================================================
   22. FAQ PAGE — TITLES GOLD + ANSWER DESCRIPTIONS WHITE
   ========================================================================== */

/* FAQ toggle titles — gold in ALL states (normal, hover, active/open) */
.elementor-toggle .elementor-tab-title,
.elementor-toggle .elementor-tab-title .elementor-toggle-title,
.elementor-toggle .elementor-tab-title a,
.elementor-toggle .elementor-tab-title a:link,
.elementor-toggle .elementor-tab-title a:visited,
.elementor-toggle .elementor-tab-title a:hover,
.elementor-toggle .elementor-tab-title a:active,
.elementor-toggle .elementor-tab-title.elementor-active,
.elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-title,
.elementor-toggle .elementor-tab-title:hover .elementor-toggle-title {
  color: #dfc187 !important;
}

/* FAQ answer/description text — white on dark background */
.elementor-toggle .elementor-tab-content,
.elementor-toggle .elementor-tab-content p,
.elementor-toggle-item-content,
.elementor-toggle-item-content p,
.elementor-tab-content.elementor-active,
.elementor-tab-content.elementor-active p {
  color: #ffffff !important;
}

/* ==========================================================================
   23. BREADCRUMB STANDARDIZATION — PROFESSIONAL DESIGN
   Premium breadcrumb styling with pixel-perfect logo alignment.
   - Soft gold links (#dfc187), bold active page
   - Clean separator (chevron ›), vertically centered
   - Consistent 16px/400 typography with 700 active
   - Full-width subtle section with proper spacing
   ========================================================================== */

/* ── Breadcrumb Section Container ──
   A full-width subtle section for visual separation */
.page-title-wrap,
.elementor-widget-houzez-property-breadcrumb,
.elementor-widget-houzez-property-breadcrumbs {
  width: 100% !important;
}

/* ── Universal breadcrumb wrap — matches header .container ──
   Header .container: max-width: 1310px, padding: 12px, margin: auto
   Breadcrumb-wrap mirrors these values for perfect logo alignment
   at ALL viewport widths, including wide screens. */
.breadcrumb-wrap {
  box-sizing: border-box !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1310px !important;
  width: 100% !important;
  background: transparent !important;
}
/* Houzez property pages — .container already provides alignment */
.page-title-wrap .breadcrumb-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Breadcrumb list — flexbox for proper vertical alignment ── */
ol.breadcrumb,
.breadcrumb-wrap ol.breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 0 !important;
  background: transparent !important;
}

/* ── Breadcrumb items — inline-flex for alignment with separator ── */
.breadcrumb-item,
ol.breadcrumb .breadcrumb-item {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
}

/* ── House icon — refined size and color ── */
.breadcrumb-wrap .houzez-icon.icon-house,
.breadcrumb-wrap i.houzez-icon {
  font-size: 16px !important;
  color: #111111 !important;
  margin-right: 6px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
html[lang="ar"] .breadcrumb-wrap .houzez-icon.icon-house,
html[lang="ar"] .breadcrumb-wrap i.houzez-icon {
  margin-right: 0 !important;
  margin-left: 6px !important;
}

/* ── Link styling — normal, visited, hover states ── */
.breadcrumb-wrap .breadcrumb-item a,
.breadcrumb-wrap .breadcrumb-item a:link,
.breadcrumb-wrap .breadcrumb-item a:visited,
ol.breadcrumb .breadcrumb-item a {
  color: #111111 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  transition: opacity 0.2s ease !important;
}
/* All breadcrumb items (including current-page text node) at 18px */
.breadcrumb-wrap .breadcrumb-item,
ol.breadcrumb .breadcrumb-item {
  font-size: 18px !important;
}

.breadcrumb-wrap .breadcrumb-item a:hover,
.breadcrumb-wrap .breadcrumb-item a:active,
ol.breadcrumb .breadcrumb-item a:hover {
  color: #111111 !important;
  opacity: 0.75 !important;
  text-decoration: none !important;
}

/* ── Active/current page — bold, distinct ── */
.breadcrumb-wrap .breadcrumb-item.active,
ol.breadcrumb .breadcrumb-item.active {
  color: #111111 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* ── Separator — chevron, gold, vertically centered with text ──
   Uses align-self:center on the flex item + a small optical nudge so the
   chevron glyph sits on the text mid-line (it otherwise renders slightly low). */
.breadcrumb-item + .breadcrumb-item::before {
  color: #111111 !important;
  opacity: 0.5 !important;
  content: "›" !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  float: none !important;
  line-height: 1 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  height: auto !important;
  position: relative !important;
  top: -0.06em !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* RTL separator (Arabic): left-pointing chevron toward the next crumb.
   direction:ltr + unicode-bidi:isolate on the pseudo prevents the RTL context
   from bidi-mirroring the glyph, so it points the intended way. */
html[lang="ar"] .breadcrumb-item + .breadcrumb-item::before {
  content: "‹" !important;
  float: none !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ── LTR (English): left-align ── */
html:not([lang="ar"]) .breadcrumb-wrap,
html:not([lang="ar"]) ol.breadcrumb {
  direction: ltr !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ── RTL (Arabic): right-align ── */
html[lang="ar"] .breadcrumb-wrap,
html[lang="ar"] ol.breadcrumb {
  direction: rtl !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

/* ==========================================================================
   ALIGNMENT: Container-matched — mirrors header .container
   
   Header .container: max-width: 1310px, padding: 12px, margin: auto
   Breadcrumb .breadcrumb-wrap now uses identical values (set above).
   
   The :has() selectors reset Elementor container padding/constraints
   so the breadcrumb-wrap controls its own centering at ALL viewport widths.
   This ensures perfect logo alignment whether viewport is 1280px or 1920px+.
   ========================================================================== */

/* ── Reset Elementor section padding for breadcrumb sections ── */
.e-con:has(.breadcrumb-wrap) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Reset boxed inner container constraints ── */
.e-con-boxed:has(.breadcrumb-wrap) > .e-con-inner {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Property detail pages (Houzez template): no changes needed ──
   .page-title-wrap .container already matches header alignment.
   The .page-title-wrap .breadcrumb-wrap override (above) ensures
   no double-padding occurs. */

/* ==========================================================================
   24. FOOTER NAVIGATION LINKS — White normal, Gold hover/active
   Targets the footer-bottom nav (.footer-nav) and any footer menus
   ========================================================================== */

/* Footer nav normal state: white */
.footer-nav .nav-link,
.footer-nav li a,
footer .nav.menu li a,
footer ul#footer-menu li a {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

/* Footer nav hover + active: gold */
.footer-nav .nav-link:hover,
.footer-nav li a:hover,
footer .nav.menu li a:hover,
footer ul#footer-menu li a:hover,
.footer-nav .nav-link:active,
.footer-nav li a:active,
footer ul#footer-menu li a:active {
  color: #dfc187 !important;
  text-decoration: none !important;
}

/* Footer top nav menu (Explore / استكشف column) */
.footer-wrap .widget_nav_menu li a,
footer .widget_nav_menu li a {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

.footer-wrap .widget_nav_menu li a:hover,
footer .widget_nav_menu li a:hover,
.footer-wrap .widget_nav_menu li a:active,
footer .widget_nav_menu li a:active {
  color: #dfc187 !important;
}

/* ==========================================================================
   25. ICON-BOX DESCRIPTION FONT WEIGHT — GLOBAL NORMAL (400)
   All icon-box descriptions sitewide should be font-weight: 400 (normal).
   Ensures consistency across EN (Montserrat) and AR (STV) pages.
   ========================================================================== */
/* Global rule — all icon-box descriptions everywhere */
.elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-description,
html .elementor-icon-box-description,
html[lang="ar"] .elementor-icon-box-description,
html[lang="en-US"] .elementor-icon-box-description {
  font-weight: 400 !important;
}

/* ============================================================
   26. AUDIT NORMALIZATION — AR ↔ EN Typography Consistency
   Phase 2 of Full Website UI/UX Audit Implementation
   ============================================================ */

/* --- 26a. AR HOMEPAGE — Vision/Mission/Goals icon-box titles ---
   EN: 36px/800 | AR was: 42px/800 → normalize to 36px
   data-ids: 58a8d00e, 7b431b6a, 10797e0e
   ------------------------------------------------------------ */
html[lang="ar"] .elementor-element[data-id="58a8d00e"] .elementor-icon-box-title,
html[lang="ar"] .elementor-element[data-id="7b431b6a"] .elementor-icon-box-title,
html[lang="ar"] .elementor-element[data-id="10797e0e"] .elementor-icon-box-title {
  font-size: 36px !important;
  line-height: 1.2 !important;
}

/* --- 26b. AR ABOUT AMAAS — Heading/icon-box size fixes ---
   Partners: 45px→36px, 700→600 | data-id: 299896f1
   Amaas Properties: 36px→40px | data-id: 38eef88
   Start icon-box: 32px→28px | data-id: 79adae8
   Locations icon-box: 32px→28px | data-id: 693e391
   Our Clients Believe: fw 700→400 | data-id: 6bb10541
   ------------------------------------------------------------ */
html[lang="ar"] .elementor-element[data-id="299896f1"] .elementor-heading-title {
  font-size: 36px !important;
  font-weight: 600 !important;
}

html[lang="ar"] .elementor-element[data-id="38eef88"] .elementor-heading-title {
  font-size: 40px !important;
}

html[lang="ar"] .elementor-element[data-id="79adae8"] .elementor-icon-box-title,
html[lang="ar"] .elementor-element[data-id="693e391"] .elementor-icon-box-title {
  font-size: 28px !important;
}

html[lang="ar"] .elementor-element[data-id="6bb10541"] .elementor-heading-title {
  font-weight: 400 !important;
}

/* --- 26c. AR FAQ — "Got more questions?" heading fix ---
   EN: 36px/600 | AR was: 65px/700 → normalize
   data-id: 219ecf8
   ------------------------------------------------------------ */
html[lang="ar"] .elementor-element[data-id="219ecf8"] .elementor-heading-title {
  font-size: 36px !important;
  font-weight: 600 !important;
}

/* --- 26d. AR TERMS — Content heading normalization ---
   AR Terms uses separate Elementor headings at 40px/32px
   EN Terms uses single text block at 18px.
   Normalize AR headings to professional size hierarchy.
   data-id: 2c29ecf2 (all headings in this widget)
   ------------------------------------------------------------ */
html[lang="ar"] .elementor-element[data-id="2c29ecf2"] h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

html[lang="ar"] .elementor-element[data-id="2c29ecf2"] h3,
html[lang="ar"] .elementor-element[data-id="2c29ecf2"] h4 {
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}

/* --- 26e. GLOBAL PARAGRAPH WEIGHT NORMALIZATION ---
   Many AR text-editor paragraphs have 700 weight vs EN 400.
   Normalize to 400 for readable body text.
   ------------------------------------------------------------ */
html[lang="ar"] .elementor-widget-text-editor p,
html[lang="ar"] .elementor-widget-text-editor div {
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* --- 26f. GLOBAL HEADING WEIGHT STANDARD ---
   H1=700, H2=600, H3=500 — consistent EN + AR.
   Applied only to Elementor heading widgets (not overriding 
   theme-level headings or content headings).
   ------------------------------------------------------------ */
html[lang="ar"] h2.elementor-heading-title {
  font-weight: 600 !important;
}

html[lang="ar"] h3.elementor-heading-title {
  font-weight: 500 !important;
}

/* --- 26g. FOOTER CONTACT INFO WEIGHT ---
   EN footer info was 300, AR was 400.
   Normalize to 400 for both (better readability).
   ------------------------------------------------------------ */
.elementor-widget-icon-list .elementor-icon-list-text {
  font-weight: 400 !important;
}

/* Footer widget titles: consistent 600 */
footer .elementor-widget-heading .elementor-heading-title,
.footer-area .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-weight: 600 !important;
}

/* --- 26h. LETTER-SPACING NORMALIZATION for AR ---
   Remove inconsistent letter-spacing on AR headings
   ------------------------------------------------------------ */
html[lang="ar"] .elementor-heading-title {
  letter-spacing: normal !important;
}

/* --- 26i. LINE-HEIGHT NORMALIZATION ---
   Base: headings = 1.2, body text = 1.65
   Applied only via AR scope to avoid breaking EN styles
   ------------------------------------------------------------ */
html[lang="ar"] .elementor-icon-box-description {
  line-height: 1.65 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2c — COLOR STANDARDIZATION
   Brand Color System Enforcement — 13 fix categories
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 2c-1. PRICE TEXT — Standard Gold #dfc187, weight 400 ──────────────────────── */
.item-v5-price,
.item-v5-price .price,
.houzez-listing-price-v1 .price,
.item-listing-wrap .item-price,
.property-price-wrap .price,
.property-price-wrap .item-price,
.property-price-wrap li,
.price-prefix,
.price-postfix,
.currency-symbol,
.price-currency {
  color: #dfc187 !important;
  font-weight: 400 !important;
}

/* High specificity overrides for property page prices */
body.single-property .property-price-wrap .price,
body.single-property .property-price-wrap .item-price,
body.single-property .property-price-wrap li,
body.single-property .property-header-wrap .price,
body.single-property .property-header-wrap .item-price,
body.single-property .detail-price,
body.single-property .detail-price .price,
body.single-property .item-price .price,
body.single-property .item-price span.price,
body.single-property span.price,
body.single-property li.item-price,
body.houzez-body .property-price-wrap .price,
body.houzez-body .property-price-wrap .item-price,
body.houzez-body .item-price .price {
  color: #dfc187 !important;
  font-weight: 400 !important;
}

/* ── 2c-2. FORM INPUT BORDERS — Brand standardization ───────────────────── */
.agent-form input[type="text"],
.agent-form input[type="email"],
.agent-form input[type="tel"],
.agent-form textarea,
.schedule-form input[type="text"],
.schedule-form input[type="email"],
.schedule-form input[type="tel"],
.schedule-form textarea,
.houzez-search-field input,
.comment-form input,
.comment-form textarea {
  border-color: #e5e5e5 !important;
  transition: border-color 0.3s ease;
}

.agent-form input:focus,
.agent-form textarea:focus,
.schedule-form input:focus,
.schedule-form textarea:focus,
.houzez-search-field input:focus,
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #dfc187 !important;
  box-shadow: 0 0 0 2px rgba(223, 193, 135, 0.15) !important;
}

/* ── 2c-3. BOOTSTRAP BLUE OVERRIDE — Brand gold ────────────────────────── */
body:not(.wp-admin) .btn-primary {
  background-color: #dfc187 !important;
  border-color: #dfc187 !important;
  color: #0b0b0d !important;
}

body:not(.wp-admin) .btn-primary:hover,
body:not(.wp-admin) .btn-primary:focus,
body:not(.wp-admin) .btn-primary:active {
  background-color: #ba9452 !important;
  border-color: #ba9452 !important;
  color: #ffffff !important;
}

/* ── 2c-4. "WE BUILD LUXURY" SECTION TITLE ──────────────────────────────── */
.amaas-tt.amaas-sec-title,
.amaas-sec-title {
  color: #0b0b0d !important;
}

.amaas-sec-title .gold,
.amaas-sec-title span[style*="color"] {
  color: #dfc187 !important;
}

/* ── 2c-5. NEAR-WHITE CONSOLIDATION (#fbfbfb → #fff) ───────────────────── */
.elementor-heading-title[style*="fbfbfb"] {
  color: #ffffff !important;
}

/* ── 2c-6. CONTENT LINKS ON LIGHT BACKGROUNDS — Accent Gold ─────────────── */
body .block-content-wrap a:not(.btn):not(.elementor-button):not(.nav-link),
body .property-description a:not(.btn):not(.elementor-button):not(.nav-link),
body .entry-content a:not(.btn):not(.elementor-button):not(.nav-link):not([class*="breadcrumb"]) {
  color: #ba9452;
  transition: color 0.3s ease;
}

body .block-content-wrap a:not(.btn):not(.elementor-button):not(.nav-link):hover,
body .property-description a:not(.btn):not(.elementor-button):not(.nav-link):hover,
body .entry-content a:not(.btn):not(.elementor-button):not(.nav-link):not([class*="breadcrumb"]):hover {
  color: #926119;
}

/* ── 2c-7. PROPERTY STATUS BADGES — Brand-styled ───────────────────────── */
/* AMAAS_LABELS_SHARP_V1 (2026-10-05): no backdrop blur - on inline badges Chromium
   blurred the badge TEXT itself (sub-unit cards, phones). Badges are inline-block
   and never break mid-text; a badge that does not fit moves whole to the next line. */
.label-status {
  background-color: rgba(11, 11, 13, 0.82) !important;
  color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  vertical-align: middle;
  margin-bottom: 4px;
}

.label-featured {
  background-color: #1b1b1b !important;
  color: #dfc187 !important;
}

.hz-label.label {
  background-color: rgba(11, 11, 13, 0.82) !important;
  color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  vertical-align: middle;
  margin-bottom: 4px;
}

/* AMAAS_LIST_LABELS_MOBILE_V1 (2026-10-05): Houzez list cards carry the badge row twice -
   an overlay copy for phones (d-block d-md-none) and a body copy for desktop
   (d-sm-none d-md-block). Below 576px Bootstrap applies neither d-sm-none nor d-md-block,
   so phones showed both rows. Keep only the overlay copy on phones. */
@media (max-width: 575.98px) {
  .item-wrap .labels-wrap.d-sm-none.d-md-block,
  .item-listing-wrap .labels-wrap.d-sm-none.d-md-block {
    display: none !important;
  }
}

/* ── 2c-8. AGENT INFO — Brand-aligned colors ───────────────────────────── */
.agent-name a,
.agent-name {
  color: #0b0b0d !important;
}

.agent-name a:hover {
  color: #926119 !important;
}

.agent-phone a,
.agent-email a {
  color: #926119 !important;
}

.agent-phone a:hover,
.agent-email a:hover {
  color: #dfc187 !important;
}

/* ── 2c-9. PROPERTY DETAIL TABLE — Clean data colors ───────────────────── */
.property-overview-data .detail-title {
  color: #666666 !important;
  font-weight: 500;
}

.property-overview-data .detail-desc {
  color: #0b0b0d !important;
  font-weight: 600;
}

/* ── 2c-10. COUNTER SECTION — Brand black ──────────────────────────────── */
.elementor-counter-title {
  color: #0b0b0d;
}

/* ── 2c-11. HOUZEZ SECTION SUBTITLE — Improved contrast ────────────────── */
.houzez_section_subtitle {
  color: #333333;
}

/* On dark backgrounds, keep white */
[style*="background-color: #0"] .houzez_section_subtitle,
[style*="background-color: #1"] .houzez_section_subtitle,
.elementor-section-dark .houzez_section_subtitle {
  color: #ffffff;
}

/* ── 2c-12. PROPERTY TAB NAV — Branded tab styling ─────────────────────── */
.nav.property-detail-nav .nav-link {
  transition: color 0.3s ease !important;
}

.nav.property-detail-nav .nav-link.active {
  border-bottom-color: #dfc187 !important;
}

/* ============================================================
   AMAAS_SPECIAL_FEATURES_FILLED_ICONS_V1
   Property "Special Features" (المميزات) — filled icons in gold circle.
   Snippet 10412 swaps the uploaded line-style feature img for a filled inline
   SVG span (.amaas-feat-ic). Default: dark glyph in gold circle.
   Hover: reversed (gold glyph, dark circle). Labels enlarged to match page.
   ============================================================ */

/* Feature list — 3-column flex grid, centered */
.fw-property-features-wrap .block-content-wrap ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  list-style: none !important;
  width: 100% !important;
  max-width: 1000px !important;
}
.fw-property-features-wrap .block-content-wrap ul li {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 18px !important;
  line-height: 1.4 !important;
  flex: 0 0 33.33% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
}

/* Standard gold circle holding the filled icon */
.fw-property-features-wrap .block-content-wrap ul li .amaas-feat-ic {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  border-radius: 50% !important;
  background: #dfc187 !important;
  color: #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}
.fw-property-features-wrap .block-content-wrap ul li .amaas-feat-ic svg {
  width: 60% !important;
  height: 60% !important;
  display: block !important;
  fill: currentColor !important;
}
/* Hover -> reversed (gold glyph, dark circle) */
.fw-property-features-wrap .block-content-wrap ul li:hover .amaas-feat-ic {
  background: #111111 !important;
  color: #dfc187 !important;
}

/* Fallback: before JS swaps the img (or if it fails), keep it visible + gold */
.fw-property-features-wrap .block-content-wrap ul li img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  filter: brightness(0) saturate(100%) invert(82%) sepia(26%) saturate(667%) hue-rotate(8deg) brightness(96%) contrast(88%) !important;
}

/* Feature label — match page body size (18px) */
.fw-property-features-wrap .block-content-wrap ul li a {
  color: #111111 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.fw-property-features-wrap .block-content-wrap ul li a:hover {
  color: #111111 !important;
}

/* RTL (Arabic) — icon first then label */
html[lang="ar"] .fw-property-features-wrap .block-content-wrap ul li {
  text-align: center !important;
  justify-content: center !important;
  flex-direction: row !important;
}

/* Mobile — 2 columns */
@media (max-width: 768px) {
  .fw-property-features-wrap .block-content-wrap ul {
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  .fw-property-features-wrap .block-content-wrap ul li {
    flex: 0 0 50% !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .fw-property-features-wrap .block-content-wrap ul li .amaas-feat-ic {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
  .fw-property-features-wrap .block-content-wrap ul li img {
    width: 34px !important;
    height: 34px !important;
  }
  .fw-property-features-wrap .block-content-wrap ul li a {
    font-size: 16px !important;
  }
  html[lang="ar"] .fw-property-features-wrap .block-content-wrap ul li {
    justify-content: center !important;
  }
}

/* ============================================================
   PROPERTY PAGE — Comprehensive Styling Fix v2.0
   Covers: Building tabs, SAR color, features bg, section gaps,
   buttons, hover, icon protection, consistency
   ============================================================ */

/* ── 1. BUILDING TABS — Gold background, radius, hover ─────────────── */
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn,
.single-property #property-sub-listings-wrap .amaas-building-tabs__dd-trigger {
  background-color: #dfc187 !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin: 0 4px !important;
}

/* Building tab hover */
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn:hover,
.single-property #property-sub-listings-wrap .amaas-building-tabs__dd-trigger:hover {
  background-color: #c9a84e !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Active building tab */
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn.active,
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn--active,
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn[aria-selected="true"] {
  background-color: #1a1a2e !important;
  color: #dfc187 !important;
  font-weight: 800 !important;
}

/* Active tab hover — subtle */
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn.active:hover,
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn--active:hover {
  background-color: #252545 !important;
  color: #dfc187 !important;
  transform: none !important;
}

/* Building tabs container — flex wrap with gap */
.single-property #property-sub-listings-wrap .amaas-building-tabs,
.single-property #property-sub-listings-wrap .amaas-building-tabs__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto 20px !important;
  list-style: none !important;
  border: none !important;
  background: transparent !important;
}

/* Dropdown trigger arrow — match text color */
.single-property #property-sub-listings-wrap .amaas-building-tabs__dd-trigger::after {
  border-top-color: #1a1a2e !important;
}
.single-property #property-sub-listings-wrap .amaas-building-tabs__dd-trigger:hover::after {
  border-top-color: #fff !important;
}

/* ── 2. SAR SYMBOL COLOR — Standard gold #dfc187 ───────────────────── */
.single-property .sar-symbol-svg {
  filter: brightness(0) saturate(100%) invert(86%) sepia(18%) saturate(700%) hue-rotate(355deg) brightness(102%) contrast(85%) !important;
}

/* Price area SAR — match standard gold */
.single-property .property-header-wrap .sar-symbol-svg,
.single-property .item-price .sar-symbol-svg,
.single-property .detail-price .sar-symbol-svg,
.single-property .price .sar-symbol-svg {
  filter: brightness(0) saturate(100%) invert(86%) sepia(18%) saturate(700%) hue-rotate(355deg) brightness(102%) contrast(85%) !important;
}

/* Sub-listing card SAR symbols — standard gold */
.single-property .item-listing-wrap .sar-symbol-svg,
.single-property #property-sub-listings-wrap .sar-symbol-svg {
  filter: brightness(0) saturate(100%) invert(86%) sepia(18%) saturate(700%) hue-rotate(355deg) brightness(102%) contrast(85%) !important;
}

/* ── 3. FEATURES SECTION — Clean background ────────────────────────── */
.single-property .fw-property-features-wrap .block-wrap.fw-property-features-left {
  background-color: #fff !important;
  padding: 40px 30px !important;
}

/* Features heading — gold branded */
.single-property .fw-property-features-wrap .block-title h4,
.single-property .fw-property-features-wrap .block-title-wrap h4 {
  color: #1a1a2e !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  margin-bottom: 20px !important;
}

/* ── 4. SECTION GAPS & SPACING — Consistent rhythm ─────────────────── */

/* All property sections — consistent vertical spacing */
.single-property .fw-property-section-wrap {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.single-property .fw-property-section-wrap > .container > .block-wrap {
  padding-top: 35px !important;
  padding-bottom: 35px !important;
}

/* Description section */
.single-property .fw-property-description-wrap .block-wrap {
  padding: 35px 0 !important;
}

/* Address section */
.single-property .fw-property-address-wrap .block-wrap {
  padding: 35px 0 !important;
}

/* Features section inner */
.single-property .fw-property-features-wrap > .container > .block-wrap,
.single-property .fw-property-features-wrap .block-wrap.fw-property-features-left {
  padding: 35px 30px !important;
}

/* Sub-listings / Project Buildings section */
.single-property .fw-property-sub-listings-wrap > .container > .block-wrap {
  padding: 35px 0 !important;
}

/* Book a Viewing section */
.single-property .fw-property-book-viewing-wrap .block-wrap {
  padding: 35px 0 !important;
}

/* Contact Info section */
.single-property .fw-property-contact-info-wrap .block-wrap {
  padding: 35px 0 !important;
}

/* Enquire section */
.single-property .fw-property-enquire-wrap .block-wrap {
  padding: 35px 0 !important;
}

/* Gallery section */
.single-property .fw-property-gallery-wrap .block-wrap {
  padding: 35px 0 !important;
}

/* Section headings — consistent styling */
.single-property .block-wrap > .block-title h4,
.single-property .block-wrap .block-title-wrap h4 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: 20px !important;
}

/* ── 5. UNIT CARDS — Consistent styling ─────────────────────────────── */

/* Details/action buttons on unit cards — REPLACED by Phase 3 gold button rules below.
   Kept only for non-btn-item buttons (like details-btn class). 
   Phase 3 .btn-item rules handle the gold style for Details buttons. */
.single-property .item-listing-wrap .details-btn:not(.btn-item),
.single-property #property-sub-listings-wrap .details-btn:not(.btn-item) {
  background-color: transparent !important;
  color: #1a1a2e !important;
  border: 1.5px solid #1a1a2e !important;
  border-radius: 6px !important;
  padding: 6px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
}

.single-property .item-listing-wrap .details-btn:not(.btn-item):hover,
.single-property #property-sub-listings-wrap .details-btn:not(.btn-item):hover {
  background-color: #dfc187 !important;
  color: #111111 !important;
  border-color: #dfc187 !important;
}

/* Unit card title link — gold color */
.single-property .item-listing-wrap .item-title a,
.single-property #property-sub-listings-wrap .item-title a {
  color: #926119 !important;
  font-weight: 700 !important;
  transition: color 0.3s ease !important;
}

.single-property .item-listing-wrap .item-title a:hover,
.single-property #property-sub-listings-wrap .item-title a:hover {
  color: #dfc187 !important;
}

/* Unit card price — standard gold */
.single-property .item-listing-wrap .item-price .price,
.single-property #property-sub-listings-wrap .item-price .price {
  color: #dfc187 !important;
  font-weight: 400 !important;
}

/* Unit card labels — clean styling */
.single-property .item-listing-wrap .hz-label,
.single-property #property-sub-listings-wrap .hz-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

/* ── 6. STICKY PROPERTY NAV — Consistent styling ───────────────────── */
.single-property .property-detail-nav .nav-link {
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
  padding: 14px 8px !important;
  text-transform: capitalize !important;
}

/* ── 7. PROPERTY SIDEBAR / DETAIL BAR ──────────────────────────────── */

/* Detail items consistent spacing */
.single-property .detail-wrap .detail-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.single-property .detail-wrap .detail-item:last-child {
  border-bottom: none !important;
}

/* Detail labels — muted */
.single-property .detail-wrap .detail-item .detail-label {
  color: #888 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Detail values — bold dark */
.single-property .detail-wrap .detail-item .detail-value {
  color: #1a1a2e !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ── 8. WHATSAPP BUTTON — Fix icon display ─────────────────────────── */
.ctc-analytics,
.wa-chat-box-content-send-btn-text .fa,
[class*="whatsapp"] .fa,
[class*="whatsapp"] [class*="fa-"],
.wa-chat-box .btn-close {
  font-family: inherit !important;
}

/* ── 9. SCHEDULE TOUR FORM — Gold branding ─────────────────────────── */
.single-property .schedule-tour-form .btn,
.single-property .schedule-tour-form button[type="submit"],
.single-property .houzez-tour-submit {
  background-color: #dfc187 !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

.single-property .schedule-tour-form .btn:hover,
.single-property .schedule-tour-form button[type="submit"]:hover {
  background-color: #c9a84e !important;
  color: #fff !important;
}

/* ── 10. OPEN ON GOOGLE MAPS BUTTON ────────────────────────────────── */
.single-property .open-on-google-maps-btn,
.single-property a[href*="maps.google"] {
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

/* ── 11. "READ MORE" LINK — Gold branded ───────────────────────────── */
.single-property .block-content-wrap .read-more,
.single-property .entry-content .read-more,
.single-property a.read-more {
  color: #926119 !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

.single-property .block-content-wrap .read-more:hover,
.single-property a.read-more:hover {
  color: #dfc187 !important;
}

/* ── 12. PROPERTY META ICONS — Consistent color ────────────────────── */
.single-property .property-meta-icon svg,
.single-property .property-meta-icon img {
  opacity: 0.7 !important;
}

/* ── 13. MOBILE RESPONSIVE — Property pages ────────────────────────── */
@media (max-width: 768px) {
  /* Building tabs stack on mobile */
  .single-property #property-sub-listings-wrap .amaas-building-tabs__btn,
  .single-property #property-sub-listings-wrap .amaas-building-tabs__dd-trigger {
    padding: 8px 16px !important;
    font-size: 13px !important;
    margin: 2px !important;
  }

  /* Section padding reduction on mobile */
  .single-property .fw-property-section-wrap > .container > .block-wrap {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  /* Unit card details button — full width on mobile */
  .single-property .item-listing-wrap .details-btn,
  .single-property #property-sub-listings-wrap .details-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── 14. ADMIN BAR ICON PROTECTION ─────────────────────────────────── */
/* Prevent font override from breaking admin bar and WhatsApp widget icons */
#wpadminbar *,
#wpadminbar .ab-icon,
#wpadminbar .ab-icon::before,
#wpadminbar .dashicons,
#wpadminbar .dashicons::before,
#wpadminbar .dashicons-before::before,
.wa-chat-box .btn-close,
.wa-chat-box .btn-close::before,
.wa-chat-box-content-send-btn i,
.ctc-notification .btn-close,
.ctc-notification .btn-close::before {
  font-family: inherit !important;
}

/* ── 15. SCROLL-TO-TOP BUTTON ──────────────────────────────────────── */
.single-property .scrollTopBtn,
.single-property #scrollTopBtn,
.single-property .scroll-to-top {
  border-radius: 50% !important;
  background-color: #1a1a2e !important;
  color: #dfc187 !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.single-property .scrollTopBtn:hover,
.single-property #scrollTopBtn:hover {
  background-color: #dfc187 !important;
  color: #111111 !important;
}



/* ============================================================
   PROPERTY PAGE COMPREHENSIVE FIX — Phase 3
   Button consistency, section gaps, lightbox, separators
   ============================================================ */

/* -----------------------------------------------------------
   3A. BUTTON CONSISTENCY — Reference: Building Tab buttons
   Gold #dfc187 bg, dark #1a1a2e text, 15px/700, 8px radius
   Excludes: Watch Video button (untouched per user)
   ----------------------------------------------------------- */

/* === Details buttons on unit cards === */
.single-property .btn-item,
.single-property .btn.btn-primary.btn-item,
.single-property #property-sub-listings-wrap a.btn-item,
.single-property #property-sub-listings-wrap a.btn.btn-primary.btn-item,
.single-property .item-listing-wrap a.btn-item {
    background-color: #dfc187 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 8px 22px !important;
    border: none !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    letter-spacing: 0.3px !important;
    min-width: 100px !important;
}
/* Reversed hover to match the FINAL sitewide button standard: black #111
   bg + gold #dfc187 text + gold outline. These selectors carry the
   #property-sub-listings-wrap ID (ID-level specificity), so they must
   themselves output the reversed style — otherwise the old darker-gold
   #ba9452 would win over the newer reversal block on the sub-unit cards. */
.single-property .btn-item:hover,
.single-property .btn.btn-primary.btn-item:hover,
.single-property #property-sub-listings-wrap a.btn-item:hover,
.single-property #property-sub-listings-wrap a.btn.btn-primary.btn-item:hover,
.single-property .item-listing-wrap a.btn-item:hover {
    background-color: #111111 !important;
    background-image: none !important;
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
    border: 1px solid #dfc187 !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}
.single-property .btn-item:active,
.single-property .btn.btn-primary.btn-item:active,
.single-property #property-sub-listings-wrap a.btn-item:active,
.single-property #property-sub-listings-wrap a.btn.btn-primary.btn-item:active,
.single-property .item-listing-wrap a.btn-item:active {
    background-color: #111111 !important;
    background-image: none !important;
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
    border: 1px solid #dfc187 !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* === Primary action buttons (Submit, Request, Send, Compare, Login, Maps) === */
.single-property .btn-secondary:not(.badge):not(.btn-close):not(.amaas-gallery-video-btn),
.single-property .houzez-ele-button.btn-secondary,
.single-property .houzez_agent_property_form.btn-secondary,
.single-property .schedule_contact_form.btn-secondary,
.single-property .btn-primary.hz-btn-map,
.single-property .btn-primary.btn-login,
.single-property .btn-reset-password.btn-primary,
.single-property .compare-btn.btn-primary {
    background-color: #dfc187 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.25s ease !important;
}
.single-property .btn-secondary:not(.badge):not(.btn-close):not(.amaas-gallery-video-btn):hover,
.single-property .houzez-ele-button.btn-secondary:hover,
.single-property .houzez_agent_property_form.btn-secondary:hover,
.single-property .schedule_contact_form.btn-secondary:hover,
.single-property .btn-primary.hz-btn-map:hover,
.single-property .btn-primary.btn-login:hover,
.single-property .btn-reset-password.btn-primary:hover,
.single-property .compare-btn.btn-primary:hover {
    background-color: #ba9452 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(223, 193, 135, 0.3) !important;
}
.single-property .btn-secondary:not(.badge):not(.btn-close):not(.amaas-gallery-video-btn):active,
.single-property .houzez-ele-button.btn-secondary:active,
.single-property .houzez_agent_property_form.btn-secondary:active,
.single-property .schedule_contact_form.btn-secondary:active {
    background-color: #b89a5a !important;
    transform: translateY(0) !important;
}

/* === Outlined buttons (Call, WhatsApp) — consistent outline style === */
.single-property .btn-secondary-outlined {
    background-color: transparent !important;
    color: #dfc187 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1.5px solid #dfc187 !important;
    transition: all 0.25s ease !important;
}
.single-property .btn-secondary-outlined:hover {
    background-color: rgba(223, 193, 135, 0.1) !important;
    color: #dfc187 !important;
    border-color: #c9a96e !important;
    transform: translateY(-1px) !important;
}
.single-property .btn-secondary-outlined:active {
    background-color: rgba(223, 193, 135, 0.15) !important;
    transform: translateY(0) !important;
}

/* === "Open on Google Maps" button match === */
.single-property .hz-btn-map {
    padding: 8px 18px !important;
    font-size: 14px !important;
}

/* === Building tab buttons (reinforce reference style) === */
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn,
.single-property #property-sub-listings-wrap .amaas-building-tabs__dd-trigger {
    background-color: #dfc187 !important;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    border: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn:hover,
.single-property #property-sub-listings-wrap .amaas-building-tabs__dd-trigger:hover {
    background-color: #c9a96e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(223, 193, 135, 0.3) !important;
}
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn.is-active {
    background-color: #1a1a2e !important;
    color: #dfc187 !important;
}
.single-property #property-sub-listings-wrap .amaas-building-tabs__btn.is-active:hover {
    background-color: #2a2a4e !important;
    color: #dfc187 !important;
}

/* === Close Compare panel button === */
.single-property .close-compare-panel {
    border-color: #dfc187 !important;
    color: #dfc187 !important;
    border-radius: 8px !important;
}
.single-property .close-compare-panel:hover {
    background-color: rgba(223, 193, 135, 0.1) !important;
}

/* === Form dropdowns (Time picker etc.) === */
.single-property .bootstrap-select .dropdown-toggle {
    border-radius: 8px !important;
    border-color: rgba(223, 193, 135, 0.3) !important;
    transition: border-color 0.25s ease !important;
}
.single-property .bootstrap-select .dropdown-toggle:hover,
.single-property .bootstrap-select .dropdown-toggle:focus {
    border-color: #dfc187 !important;
}


/* -----------------------------------------------------------
   3B. SECTION TITLE GAPS — Standardize to professional spacing
   Reduce from 60px to ~30px total; consistent across all
   ----------------------------------------------------------- */

.single-property .block-title-wrap {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(223, 193, 135, 0.15) !important;
}

/* Details section — has extra classes, align with block-title-wrap */
.single-property .block-title-wrap.my-4.py-4 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Schedule tour inner title */
.single-property .sch-title.mb-4 {
    margin-bottom: 12px !important;
}

/* Property sections spacing between each section block */
.single-property .single-property-element {
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

/* Contact info / Enquire section */
.single-property .agent-section .block-title-wrap {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
}


/* -----------------------------------------------------------
   3C. SAR SYMBOL — Gold, not black
   ----------------------------------------------------------- */

/* SAR symbol everywhere on property pages */
.single-property .sar-symbol,
.single-property .sar-currency {
    color: #dfc187 !important;
}

/* SAR in unit cards — match price color */
.single-property .item-price-wrap .sar-symbol,
.single-property .item-price-wrap .sar-currency,
.single-property .item-price .sar-symbol {
    color: #dfc187 !important;
}

/* Price labels — ensure gold tone */
.single-property .item-price,
.single-property .item-price-wrap li {
    color: #1a1a2e !important;
}


/* -----------------------------------------------------------
   3D. GALLERY LIGHTBOX — Black bg, gold close, hide empty slides
   ----------------------------------------------------------- */

/* Lightbox overlay / wrapper — black background */
.lightbox-gallery-wrap {
    background-color: #000000 !important;
}

/* Lightbox header area black */
.lightbox-gallery-wrap .btn-expand {
    background-color: #000000 !important;
    color: #dfc187 !important;
    border: none !important;
}
.lightbox-gallery-wrap .btn-expand:hover {
    color: #c9a96e !important;
}
.lightbox-gallery-wrap .btn-expand i {
    color: #dfc187 !important;
}

/* Close button (btn-close in lightbox) — gold X icon via SVG */
.lightbox-gallery-wrap .btn-close,
.lightbox-gallery-wrap .btn-close-white,
.property-lightbox .modal-header .btn-close,
.property-lightbox .modal-header .btn-close-white {
    opacity: 1 !important;
    filter: none !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dfc187'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat !important;
    width: 1.5em !important;
    height: 1.5em !important;
    padding: 0.5em !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}
.lightbox-gallery-wrap .btn-close:hover,
.lightbox-gallery-wrap .btn-close-white:hover,
.property-lightbox .modal-header .btn-close:hover,
.property-lightbox .modal-header .btn-close-white:hover {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c9a96e'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat !important;
}

/* Slick slider arrows in lightbox — gold on black */
.lightbox-gallery-wrap .slick-prev,
.lightbox-gallery-wrap .slick-next {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #dfc187 !important;
    border: 1px solid rgba(223, 193, 135, 0.3) !important;
    border-radius: 50% !important;
    z-index: 10 !important;
}
.lightbox-gallery-wrap .slick-prev:hover,
.lightbox-gallery-wrap .slick-next:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: #dfc187 !important;
}
.lightbox-gallery-wrap .slick-prev::before,
.lightbox-gallery-wrap .slick-next::before {
    color: #dfc187 !important;
}

/* Hide empty slides (video attachments with no image src) */
.lightbox-gallery-wrap .slick-slide img[src=""] {
    display: none !important;
}
.lightbox-gallery-wrap .slick-slide:has(img[src=""]) {
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Gallery header bar — black background */
.property-gallery-wrap .gallery-top-bar,
.property-gallery-wrap .gallery-count,
.property-gallery-wrap .gallery-actions {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* --- Gallery image count badge — always on physical RIGHT side (opposite of Watch Video) --- */
/* Watch Video is always physical left, so image count is always physical right.
   This works for BOTH LTR and RTL — no RTL override needed. */
.hs-gallery-v5-grid .img-wrap-3-text,
.property-banner-grid-wrap .img-wrap-3-text {
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    left: auto !important;
    z-index: 10 !important;
}
html[dir="rtl"] .hs-gallery-v5-grid .img-wrap-3-text,
html[lang="ar"] .hs-gallery-v5-grid .img-wrap-3-text,
html[dir="rtl"] .property-banner-grid-wrap .img-wrap-3-text,
html[lang="ar"] .property-banner-grid-wrap .img-wrap-3-text {
    right: 15px !important;
    left: auto !important;
}


/* -----------------------------------------------------------
   3E. PROJECT BUILDINGS — Gold separator, professional spacing
   ----------------------------------------------------------- */

/* Gold separator between tabs and unit listings */
.single-property #property-sub-listings-wrap .amaas-building-tabs {
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #dfc187 !important;
}

/* Unit card items — consistent spacing with subtle separator */
.single-property #property-sub-listings-wrap .property-listing-simple {
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(223, 193, 135, 0.15) !important;
    margin-bottom: 0 !important;
}
.single-property #property-sub-listings-wrap .property-listing-simple:last-child {
    border-bottom: none !important;
}

/* Unit card container */
.single-property #property-sub-listings-wrap .property-listing-simple .item-wrap {
    padding: 12px !important;
    border-radius: 10px !important;
    transition: background-color 0.2s ease !important;
}
.single-property #property-sub-listings-wrap .property-listing-simple .item-wrap:hover {
    background-color: rgba(223, 193, 135, 0.05) !important;
}

/* Unit card title styling */
.single-property #property-sub-listings-wrap .item-title {
    font-weight: 600 !important;
    color: #1a1a2e !important;
}
.single-property #property-sub-listings-wrap .item-title a {
    color: #1a1a2e !important;
    text-decoration: none !important;
}
.single-property #property-sub-listings-wrap .item-title a:hover {
    color: #dfc187 !important;
}


/* -----------------------------------------------------------
   3F. MOBILE VIDEO — Show video in gallery on mobile
   ----------------------------------------------------------- */

/* Ensure Watch Video button works on mobile — keep absolute overlay */
@media (max-width: 767px) {
    .amaas-gallery-video-btn {
        display: flex !important;
        position: absolute !important;
        left: 10px !important;
        bottom: 10px !important;
        z-index: 10 !important;
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
    
    /* Video modal responsive on mobile */
    .amaas-video-modal .amaas-video-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
    }
    .amaas-video-modal video {
        max-height: 60vh !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .amaas-gallery-video-btn {
        display: flex !important;
        font-size: 13px !important;
        padding: 8px 18px !important;
    }
}


/* -----------------------------------------------------------
   3G. FEATURES SECTION — Clean white background fix
   ----------------------------------------------------------- */

/* Reinforce features section white bg */
.single-property #property-features-wrap,
.single-property .property-features-wrap {
    background-color: #ffffff !important;
}


/* End Phase 3 Property Page Comprehensive Fix */

/* ==========================================================================
   PHASE 3b: LIGHTBOX SIDEBAR GAP + BUTTON CONSISTENCY + EMPTY SLIDES
   ========================================================================== */

/* --- Lightbox Modal Body: Flex layout to stretch sidebar --- */
.property-lightbox .modal.show .modal-body,
.property-lightbox .modal-body.clearfix {
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

/* --- Gallery wrap: fill left side --- */
.property-lightbox .modal-body .lightbox-gallery-wrap {
    float: none !important;
    flex: 1 1 auto !important;
    min-height: 100% !important;
}

/* --- Sidebar form wrap: stretch full height, remove gap --- */
.property-lightbox .modal-body .lightbox-form-wrap {
    float: none !important;
    flex: 0 0 320px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    min-height: 100% !important;
    padding: 15px !important;
    align-self: stretch !important;
}

/* Inner property-form-wrap fills remaining space */
.property-lightbox .lightbox-form-wrap .property-form-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.property-lightbox .lightbox-form-wrap .property-form {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.property-lightbox .lightbox-form-wrap .property-form form {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Push buttons to bottom of sidebar */
.property-lightbox .lightbox-form-wrap .property-schedule-tour-type-form {
    margin-top: auto !important;
}

/* --- Lightbox Header: Pure black background --- */
.property-lightbox .modal-header {
    background: #000000 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* Close button in header: gold — main rules are above with SVG data URI */
.property-lightbox .modal-header .btn-close {
    position: relative !important;
    z-index: 100 !important;
    margin-left: auto !important;
}

/* --- Lightbox Buttons: ALL consistent gold style --- */
/* Send Message button */
.property-lightbox .lightbox-form-wrap .btn.btn-secondary,
.property-lightbox .lightbox-form-wrap .houzez_agent_property_form {
    background-color: #dfc187 !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    transition: all 0.25s ease !important;
}

/* Call button - make gold filled */
.property-lightbox .lightbox-form-wrap .btn.btn-secondary-outlined.hz-btn-call {
    background-color: #dfc187 !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    transition: all 0.25s ease !important;
}

/* WhatsApp button - make gold filled */
.property-lightbox .lightbox-form-wrap .btn.btn-secondary-outlined.hz-btn-whatsapp {
    background-color: #dfc187 !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    transition: all 0.25s ease !important;
}

/* Hide Send Message button in lightbox — ultra-high specificity */
body.single-property .property-lightbox .lightbox-form-wrap .property-form-wrap .houzez-send-message.btn.btn-secondary-outlined.w-100,
body.single-property .property-lightbox .lightbox-form-wrap .houzez-send-message.btn,
body.single-property .property-lightbox .modal-content .houzez-send-message.btn,
body .property-lightbox .lightbox-form-wrap .houzez-send-message.btn,
body .property-lightbox .houzez-send-message.btn,
.property-lightbox .lightbox-form-wrap .houzez-send-message.btn,
.property-lightbox .houzez-send-message.btn,
.property-lightbox .houzez-send-message {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover state for ALL lightbox sidebar buttons — REVERSED sitewide standard
   (black bg + gold text + gold outline), matches the property page buttons */
.property-lightbox .lightbox-form-wrap .btn:hover,
.property-lightbox .lightbox-form-wrap .btn.btn-secondary:hover,
.property-lightbox .lightbox-form-wrap .btn.btn-secondary-outlined:hover,
.property-lightbox .lightbox-form-wrap .houzez_agent_property_form:hover,
.property-lightbox .lightbox-form-wrap .hz-btn-call:hover,
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp:hover,
.property-lightbox .lightbox-form-wrap .btn:focus,
.property-lightbox .lightbox-form-wrap .btn.btn-secondary:focus,
.property-lightbox .lightbox-form-wrap .btn.btn-secondary-outlined:focus,
.property-lightbox .lightbox-form-wrap .hz-btn-call:focus,
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp:focus {
    background-color: #111111 !important;
    color: #dfc187 !important;
    border: 1px solid #dfc187 !important;
    border-color: #dfc187 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Active/pressed state for ALL lightbox sidebar buttons — keep reversed */
.property-lightbox .lightbox-form-wrap .btn:active,
.property-lightbox .lightbox-form-wrap .btn.btn-secondary:active,
.property-lightbox .lightbox-form-wrap .btn.btn-secondary-outlined:active,
.property-lightbox .lightbox-form-wrap .hz-btn-call:active,
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp:active {
    background-color: #111111 !important;
    color: #dfc187 !important;
    border: 1px solid #dfc187 !important;
    border-color: #dfc187 !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Inner text spans also flip to gold on hover */
.property-lightbox .lightbox-form-wrap .btn:hover span,
.property-lightbox .lightbox-form-wrap .btn:hover bdi,
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp:hover span,
.property-lightbox .lightbox-form-wrap .hz-btn-call:hover span {
    color: #dfc187 !important;
}

/* WhatsApp icon color — dark at rest (on gold), gold on hover (on black) */
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp i,
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp .houzez-icon {
    color: #1a1a2e !important;
    margin-right: 6px !important;
}

/* Call button icon/text alignment */
.property-lightbox .lightbox-form-wrap .hz-btn-call i,
.property-lightbox .lightbox-form-wrap .hz-btn-call .houzez-icon {
    color: #1a1a2e !important;
    margin-right: 6px !important;
}

/* Icons flip to gold when button is hovered/focused (font-glyph icons) */
.property-lightbox .lightbox-form-wrap .btn:hover i,
.property-lightbox .lightbox-form-wrap .btn:hover .houzez-icon,
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp:hover i,
.property-lightbox .lightbox-form-wrap .hz-btn-whatsapp:hover .houzez-icon,
.property-lightbox .lightbox-form-wrap .hz-btn-call:hover i,
.property-lightbox .lightbox-form-wrap .hz-btn-call:hover .houzez-icon {
    color: #dfc187 !important;
}
/* Stroke-style injected SVG icons (envelope on Send Message): recolor the
   STROKE only and keep fill:none so the closed envelope path does not flood
   solid gold on hover. currentColor already turns gold via the text color. */
.property-lightbox .lightbox-form-wrap .btn:hover .amaas-btn-icon svg,
.property-lightbox .lightbox-form-wrap .btn:hover .amaas-btn-icon svg * {
    stroke: #dfc187 !important;
    fill: none !important;
    color: #dfc187 !important;
}

/* --- Agent details styling in lightbox --- */
.property-lightbox .lightbox-form-wrap .agent-details {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.property-lightbox .lightbox-form-wrap .agent-name {
    font-weight: 600 !important;
    color: #1a1a2e !important;
}

.property-lightbox .lightbox-form-wrap .agent-link a {
    color: #dfc187 !important;
    font-weight: 500 !important;
}

/* --- Form inputs in lightbox --- */
.property-lightbox .lightbox-form-wrap .form-control {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    transition: border-color 0.2s ease !important;
}

.property-lightbox .lightbox-form-wrap .form-control:focus {
    border-color: #dfc187 !important;
    box-shadow: 0 0 0 2px rgba(223, 193, 135, 0.15) !important;
    outline: none !important;
}

/* --- Lightbox Slider: Hide empty video slides --- */
.lightbox-slider .slick-slide img[src=""],
.lightbox-slider .slick-slide img:not([src]),
.lightbox-slider .slick-slide img[src$="/property/amaas-6/"],
.lightbox-slider .slick-slide img[src$="/property/amaas-1/"] {
    display: none !important;
}

/* --- Lightbox Navigation Arrows: Gold --- */
.property-lightbox .lightbox-slider .slick-prev,
.property-lightbox .lightbox-slider .slick-next {
    background: rgba(223, 193, 135, 0.85) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 10 !important;
}

.property-lightbox .lightbox-slider .slick-prev:hover,
.property-lightbox .lightbox-slider .slick-next:hover {
    background: rgba(223, 193, 135, 1) !important;
}

.property-lightbox .lightbox-slider .slick-prev::before,
.property-lightbox .lightbox-slider .slick-next::before {
    color: #1a1a2e !important;
    font-size: 20px !important;
}

/* --- Expand/fullscreen button in lightbox --- */
.property-lightbox .btn-expand {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #dfc187 !important;
    border-radius: 4px !important;
}

.property-lightbox .btn-expand:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ============================================================
   LIGHTBOX MOBILE RESPONSIVENESS
   ============================================================ */

/* Tablet: <= 991px — sidebar below gallery */
@media (max-width: 991px) {
    .property-lightbox .modal-body {
        flex-direction: column !important;
    }

    .property-lightbox .lightbox-gallery-wrap {
        width: 100% !important;
        flex: none !important;
        max-height: 50vh !important;
    }

    .property-lightbox .lightbox-form-wrap {
        width: 100% !important;
        flex: none !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        min-height: auto !important;
    }

    .property-lightbox .modal-dialog {
        max-width: 100% !important;
        margin: 0.5rem !important;
        height: calc(100vh - 1rem) !important;
    }

    .property-lightbox .modal-content {
        height: 100% !important;
    }

    .property-lightbox .lightbox-slider .slick-slide img {
        max-height: 48vh !important;
        object-fit: contain !important;
    }
}

/* Mobile: <= 767px — compact layout */
@media (max-width: 767px) {
    .property-lightbox .modal-dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    .property-lightbox .modal-content {
        border-radius: 0 !important;
        height: 100vh !important;
    }

    .property-lightbox .modal-header {
        padding: 8px 12px !important;
    }

    .property-lightbox .lightbox-gallery-wrap {
        max-height: 45vh !important;
    }

    .property-lightbox .lightbox-form-wrap {
        max-height: 55vh !important;
        padding: 12px !important;
    }

    /* Smaller buttons on mobile */
    .property-lightbox .lightbox-form-wrap .btn {
        font-size: 13px !important;
        padding: 8px 12px !important;
        min-height: 38px !important;
    }

    /* Stack buttons vertically with gap */
    .property-lightbox .lightbox-form-wrap .btn.btn-secondary,
    .property-lightbox .lightbox-form-wrap .btn.btn-secondary-outlined {
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    /* Form inputs slightly smaller */
    .property-lightbox .lightbox-form-wrap .form-control {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* Agent details compact */
    .property-lightbox .lightbox-form-wrap .agent-details {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Navigation arrows smaller */
    .property-lightbox .lightbox-slider .slick-prev,
    .property-lightbox .lightbox-slider .slick-next {
        width: 36px !important;
        height: 36px !important;
    }

    .property-lightbox .lightbox-slider .slick-prev::before,
    .property-lightbox .lightbox-slider .slick-next::before {
        font-size: 16px !important;
    }

    /* Close button larger tap target on mobile */
    .property-lightbox .modal-header .btn-close {
        width: 2em !important;
        height: 2em !important;
        padding: 0.75em !important;
    }
}

/* Small mobile: <= 480px — ultra compact */
@media (max-width: 480px) {
    .property-lightbox .lightbox-gallery-wrap {
        max-height: 40vh !important;
    }

    .property-lightbox .lightbox-form-wrap {
        max-height: 60vh !important;
        padding: 10px !important;
    }

    .property-lightbox .lightbox-form-wrap .btn {
        font-size: 12px !important;
        padding: 7px 10px !important;
        min-height: 36px !important;
    }

    .property-lightbox .lightbox-form-wrap .form-control {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    .property-lightbox .lightbox-slider .slick-prev,
    .property-lightbox .lightbox-slider .slick-next {
        width: 30px !important;
        height: 30px !important;
    }
}


/* ==========================================================================
   PHASE 4: MOBILE PROPERTY PAGE COMPREHENSIVE FIX
   Issues: mobile contact bar, button consistency, Watch Video, verified badge,
           msg-login-required cropped, agent alignment, price styling
   ========================================================================== */

/* -----------------------------------------------------------
   4A. PROPERTY FORM — CONSISTENT GOLD BUTTONS (ALL VIEWPORTS)
   ----------------------------------------------------------- */

/* Send Message button — gold bg, dark text */
.property-form .property-schedule-tour-type-form .btn.btn-secondary,
.property-form .houzez-ele-button.houzez_agent_property_form.btn.btn-secondary,
.single-property .property-form .btn.btn-secondary:not(.badge):not(.btn-close),
body.single-property .property-form .houzez_agent_property_form,
body.single-property .houzez_agent_property_form.btn {
    background-color: #dfc187 !important;
    border-color: #dfc187 !important;
    color: #111111 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Call button — gold bg, dark text (match Send Message) */
.property-form .property-schedule-tour-type-form .btn.btn-secondary-outlined.hz-btn-call,
.property-form .hz-btn-call.btn.btn-secondary-outlined,
body.single-property .property-form .hz-btn-call,
body.single-property .hz-btn-call.btn,
.single-property .property-schedule-tour-type-form .hz-btn-call {
    background-color: #dfc187 !important;
    border-color: #dfc187 !important;
    color: #111111 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* WhatsApp button — gold bg, dark text (match others) */
.property-form .hz-btn-whatsapp.btn.btn-secondary-outlined,
body.single-property .property-form .hz-btn-whatsapp,
body.single-property .hz-btn-whatsapp.btn,
.single-property .hz-btn-whatsapp.btn {
    background-color: #dfc187 !important;
    border-color: #dfc187 !important;
    color: #111111 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* WhatsApp icon — dark color to match text + correct icon font */
.property-form .hz-btn-whatsapp .houzez-icon,
.property-form .hz-btn-whatsapp i,
.property-form .hz-btn-whatsapp i.houzez-icon {
    color: #1a1a2e !important;
    font-family: 'houzez-iconfont' !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Global icon font protection — ensures ALL houzez icons keep their glyph font */
i.houzez-icon,
i[class*="icon-"],
.houzez-icon[class*="icon-"],
span.houzez-icon {
    font-family: 'houzez-iconfont' !important;
}
i.houzez-icon::before,
i[class*="icon-"]::before,
.houzez-icon[class*="icon-"]::before {
    font-family: 'houzez-iconfont' !important;
}

/* Hover state — ALL property form buttons */
.property-form .property-schedule-tour-type-form .btn:hover,
.property-form .hz-btn-whatsapp:hover,
.property-form .hz-btn-call:hover {
    background-color: #c9a96e !important;
    border-color: #c9a96e !important;
    color: #1a1a2e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(223, 193, 135, 0.3) !important;
}

/* -----------------------------------------------------------
   4B. HIDE msg-login-required BUTTON (duplicate Send Message)
   ----------------------------------------------------------- */

/* This button shows for logged-out users but is redundant and looks cropped */
.property-form .msg-login-required,
.property-form button.msg-login-required,
.property-form .msg-login-required.btn.btn-secondary-outlined,
.single-property .msg-login-required,
button.msg-login-required.btn.btn-secondary-outlined {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Send Message button — HIDDEN in sidebar agent form. */
/* Only "طلب معلومات" (request info submit) should remain. */
/* Phase 26: user wants a single button. Mobile modal submit         */
/* (#mobile-property-form .houzez-send-message) is a DIFFERENT        */
/* selector and stays visible (line ~6655). */
body.single-property .block-content-wrap .houzez-send-message.btn.btn-secondary-outlined.w-100,
body.single-property .block-content-wrap .houzez-send-message.btn.btn-secondary-outlined,
body.single-property .block-content-wrap .houzez-send-message.btn,
body.single-property .block-content-wrap .houzez-send-message {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* Make the remaining request-info submit span full width alone */
body.single-property .block-content-wrap .houzez_agent_property_form.btn {
    width: 100% !important;
}
/* Keep hidden in lightbox — lightbox rules at lines 2419-2428 still apply */

/* -----------------------------------------------------------
   4C. MOBILE FIXED CONTACT BAR — COMPLETE REDESIGN
   ----------------------------------------------------------- */

/* Main bar — sticky at bottom, clean white bg */
.mobile-property-contact {
    background: #ffffff !important;
    border-top: 2px solid rgba(223, 193, 135, 0.4) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
    padding: 8px 12px !important;
    z-index: 1040 !important;
}

/* Inner flex container — center everything vertically */
.mobile-property-contact > .d-flex {
    align-items: center !important;
    gap: 8px !important;
}

/* Agent details — compact, vertically centered */
.mobile-property-contact .agent-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.mobile-property-contact .agent-details > .d-flex {
    align-items: center !important;
    gap: 8px !important;
}

/* Agent image — smaller, centered */
.mobile-property-contact .agent-details .agent-image {
    flex-shrink: 0 !important;
}

.mobile-property-contact .agent-details .agent-image img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Agent name — prominent, proportional to contact buttons */
.mobile-property-contact .agent-details .agent-name {
    color: #333333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}

/* All 3 icon buttons — consistent gold squares */
.mobile-property-contact .btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}

/* Envelope (Send Message) button — gold bg, circular, match WhatsApp+Call
   MUST override .single-property .btn-secondary:not(.badge):not(.btn-close) (specificity 0,5,0+)
   Using body.single-property + multiple class selectors for maximum specificity */
body.single-property .mobile-property-contact .btn.btn-secondary:not(.badge):not(.btn-close),
body .mobile-property-contact button.btn.btn-secondary:not(.badge),
.single-property .mobile-property-contact .btn.btn-secondary,
.mobile-property-contact .btn.btn-secondary {
    background-color: #dfc187 !important;
    border-color: #dfc187 !important;
    color: #111111 !important;
    border-radius: 8px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
}

/* WhatsApp + Call buttons — gold bg (match envelope) */
.mobile-property-contact .btn.btn-secondary-outlined {
    background-color: #dfc187 !important;
    border-color: #dfc187 !important;
    color: #111111 !important;
}

/* Icon colors and font — dark on gold background, MUST keep icon font */
.mobile-property-contact .btn i,
.mobile-property-contact .btn .houzez-icon,
.mobile-property-contact .btn i.houzez-icon,
.mobile-property-contact .btn i[class*="icon-"] {
    color: #1a1a2e !important;
    font-size: 18px !important;
    font-family: 'houzez-iconfont' !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure ALL houzez icon ::before pseudo-elements use correct font */
.mobile-property-contact .btn i::before,
.mobile-property-contact .btn .houzez-icon::before,
.property-form .btn i.houzez-icon::before,
.property-form .btn .houzez-icon::before {
    font-family: 'houzez-iconfont' !important;
}

/* Hover/active for all mobile buttons */
.mobile-property-contact .btn:hover,
.mobile-property-contact .btn:active,
.mobile-property-contact .btn:focus {
    background-color: #c9a96e !important;
    border-color: #c9a96e !important;
    color: #1a1a2e !important;
}

/* -----------------------------------------------------------
   4D. AGENT VERIFIED BADGE — RESPONSIVE
   ----------------------------------------------------------- */

/* Base badge styling — all viewports */
.agent-verified-icon {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: #dfc187 !important;
    border: 2px solid #ffffff !important;
    z-index: 2 !important;
    line-height: 1 !important;
}

/* Badge icon — small checkmark */
.agent-verified-icon i,
.agent-verified-icon .houzez-icon {
    font-size: 10px !important;
    color: #1a1a2e !important;
    font-family: 'houzez-iconfont' !important;
    line-height: 1 !important;
}

/* Agent image container must be relative for badge positioning */
.property-form .agent-image,
.lightbox-form-wrap .agent-image,
.mobile-property-contact .agent-image {
    position: relative !important;
    display: inline-block !important;
}

/* -----------------------------------------------------------
   4E. WATCH VIDEO — VISIBLE ON ALL VIEWPORTS
   ----------------------------------------------------------- */

/* Ensure Watch Video button shows in gallery on all screens */
.amaas-gallery-video-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* -----------------------------------------------------------
   4F. PRICE — STANDARD GOLD, NORMAL WEIGHT (ALL VIEWPORTS)
   ----------------------------------------------------------- */

/* Main property price area */
.single-property .property-price-wrap .price,
.single-property .detail-price .price,
.single-property .price-text,
.single-property .item-price .price {
    color: #dfc187 !important;
    font-weight: 400 !important;
}

/* Price on listing cards sitewide */
.item-v5-price .price,
.houzez-listing-price-v1 .price,
.item-listing-wrap .item-price .price {
    font-weight: 400 !important;
}

/* Price prefix/postfix */
.single-property .price-prefix,
.single-property .price-postfix,
.single-property .price-currency,
.single-property .currency-symbol {
    color: #dfc187 !important;
    font-weight: 400 !important;
}

/* ============================================================
   MOBILE-SPECIFIC PROPERTY PAGE OVERRIDES
   ============================================================ */

@media (max-width: 991px) {

    /* -----------------------------------------------------------
       Mobile contact bar — smaller screens: buttons stay 48px
       ----------------------------------------------------------- */
    .mobile-property-contact .agent-details .agent-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .mobile-property-contact .agent-details .agent-image img {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (max-width: 767px) {

    /* -----------------------------------------------------------
       Watch Video button — compact on small mobile
       ----------------------------------------------------------- */
    .amaas-gallery-video-btn {
        font-size: 12px !important;
        padding: 6px 14px !important;
        gap: 4px !important;
    }

    /* -----------------------------------------------------------
       Property form buttons — full width stacked
       ----------------------------------------------------------- */
    .property-form .property-schedule-tour-type-form {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .property-form .property-schedule-tour-type-form .btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .property-form .hz-btn-whatsapp.btn {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* -----------------------------------------------------------
       Agent details in sidebar form — centered
       ----------------------------------------------------------- */
    .property-form .agent-details > .d-flex {
        justify-content: center !important;
    }

    .property-form .agent-details .agent-image img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
    }

    /* Verified badge — hidden on mobile (all contexts) */
    .agent-verified-icon,
    body.single-property .agent-verified-icon,
    .property-form .agent-verified-icon,
    .mobile-property-contact .agent-verified-icon,
    .lightbox-form-wrap .agent-verified-icon,
    span.badge.agent-verified-icon {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* -----------------------------------------------------------
       Mobile contact bar — compact padding, buttons stay 44px
       ----------------------------------------------------------- */
    .mobile-property-contact {
        padding: 6px 8px !important;
    }

    .mobile-property-contact > .d-flex {
        gap: 6px !important;
    }

    .mobile-property-contact .btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }

    .mobile-property-contact .btn i,
    .mobile-property-contact .btn .houzez-icon {
        font-size: 18px !important;
    }

    .mobile-property-contact .agent-details .agent-name {
        font-size: 13px !important;
        font-weight: 600 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .mobile-property-contact .agent-details .agent-image img {
        width: 42px !important;
        height: 42px !important;
    }

    .mobile-property-contact .agent-details > .d-flex {
        gap: 6px !important;
    }
}

@media (max-width: 480px) {

    /* Ultra-small screens: buttons 40px */
    .mobile-property-contact .btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    .mobile-property-contact .btn i,
    .mobile-property-contact .btn .houzez-icon {
        font-size: 16px !important;
    }

    .mobile-property-contact .agent-details .agent-name {
        font-size: 12px !important;
        font-weight: 600 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .mobile-property-contact .agent-details .agent-image img {
        width: 38px !important;
        height: 38px !important;
    }

    .mobile-property-contact .agent-details > .d-flex {
        gap: 6px !important;
    }

    /* Property form buttons ultra-compact */
    .property-form .property-schedule-tour-type-form .btn,
    .property-form .hz-btn-whatsapp.btn {
        min-height: 40px !important;
        font-size: 13px !important;
    }

    /* Watch Video button — smallest */
    .amaas-gallery-video-btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}

/* ============================================================
   PHASE 5 — COMPREHENSIVE MOBILE + SECTION FIXES
   ============================================================ */

/* -----------------------------------------------------------
   5A. PROPERTY PAGE SECTION HEADINGS — CENTERED + CONSISTENT FONT
   Both "with units" and "without units" templates
   ----------------------------------------------------------- */

/* All section headings in property page — centered, 28px consistent */
.single-property .block-title-wrap h2,
.single-property .block-title-wrap h3,
.single-property .block-title-wrap h4 {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    letter-spacing: 0.5px !important;
    color: #dfc187 !important;
    margin-bottom: 0 !important;
}

/* Enquire About This Property — also centered, same style */
.single-property .enquire-form .block-title-wrap h3,
.single-property .enquire-form .block-title-wrap h2 {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    color: #dfc187 !important;
}

/* Address heading — now consistent 28px centered like all other section titles */
.single-property .fw-property-address-wrap .block-title-wrap h2,
.single-property #property-address-wrap .block-title-wrap h2,
body.single-property .fw-property-address-wrap h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    color: #dfc187 !important;
    text-align: center !important;
}

/* Arabic property pages — ensure STV font on headings */
html[lang="ar"] .single-property .block-title-wrap h2,
html[lang="ar"] .single-property .block-title-wrap h3,
html[lang="ar"] .single-property .block-title-wrap h4 {
    font-family: 'STV', sans-serif !important;
}

/* English property pages — ensure Montserrat on headings */
html[lang="en-US"] .single-property .block-title-wrap h2,
html[lang="en-US"] .single-property .block-title-wrap h3,
html[lang="en-US"] .single-property .block-title-wrap h4 {
    font-family: 'Montserrat', sans-serif !important;
}

/* Schedule Tour title (.sch-title) — centered + consistent 28px */
.single-property .sch-title {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    color: #dfc187 !important;
}

html[lang="ar"] .single-property .sch-title {
    font-family: 'STV', sans-serif !important;
}

html[lang="en-US"] .single-property .sch-title {
    font-family: 'Montserrat', sans-serif !important;
}

/* Details heading parent — also center the container */
.single-property .block-title-wrap {
    text-align: center !important;
}

/* Address block-title-wrap — now centered like all other sections */
.single-property .fw-property-address-wrap .block-title-wrap,
.single-property #property-address-wrap .block-title-wrap {
    text-align: center !important;
}

/* Arabic address — also centered (consistent with all titles) */
html[dir="rtl"] .single-property .fw-property-address-wrap .block-title-wrap,
html[dir="rtl"] .single-property .fw-property-address-wrap .block-title-wrap h2,
html[lang="ar"] .single-property .fw-property-address-wrap .block-title-wrap,
html[lang="ar"] .single-property .fw-property-address-wrap .block-title-wrap h2 {
    text-align: center !important;
}

/* -----------------------------------------------------------
   5B. HIDE "CONTACT INFORMATION" ON MOBILE
   (Already have contact buttons at bottom bar)
   ----------------------------------------------------------- */

@media (max-width: 991px) {
    .fw-property-contact-agent-wrap,
    #property-contact-agent-wrap,
    .single-property .fw-property-contact-agent-wrap.fw-property-section-wrap {
        display: none !important;
    }
}

/* -----------------------------------------------------------
   5C. HIDE LIGHTBOX SEND MESSAGE / FORM ON MOBILE
   (Second button that appears cut off when clicking images)
   ----------------------------------------------------------- */

@media (max-width: 991px) {
    /* Hide the entire lightbox right-side form panel on mobile */
    .property-lightbox .lightbox-form-wrap {
        display: none !important;
        width: 0 !important;
    }

    /* Make lightbox gallery take full width when form is hidden */
    .property-lightbox .lightbox-gallery-wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Also hide any floating Send Message in lightbox */
    .property-lightbox .houzez-send-message,
    .property-lightbox .houzez-ele-button {
        display: none !important;
    }
}

/* -----------------------------------------------------------
   5D. HOMEPAGE SLIDER — CENTER "DETAILS" BUTTON
   ----------------------------------------------------------- */

/* Center the Details button container in the main slider */
/* Details button on homepage slider — center the label text inside button only */
.property-slider-item .btn.btn-primary.btn-item {
    text-align: center !important;
}

/* -----------------------------------------------------------
   5E. WATCH VIDEO BUTTON — FORCE VISIBLE ON ALL VIEWPORTS
   Ensure gallery container doesn't clip the button
   ----------------------------------------------------------- */

/* Gallery grid container — overflow hidden by default to contain sold ribbon */
.hs-gallery-v5-grid,
.property-banner-grid-wrap,
.hs-gallery-v5-grid.property-banner-grid-wrap {
    overflow: hidden !important;
    position: relative !important;
}

/* Individual gallery grid items — position context for button */
.hs-gallery-v5-grid > div,
.property-banner-grid-wrap > div {
    position: relative !important;
}
/* Gallery stacking context — contains Watch Video button within gallery bounds */
.property-banner,
.property-banner-grid-wrap,
.hs-gallery-v5-grid.property-banner-grid-wrap {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
}

/* Watch Video button — local z-index within gallery (not global) */
.hs-gallery-v5-grid.property-banner-grid-wrap .amaas-gallery-video-btn {
    z-index: 5 !important;
}

/* Watch Video absolute positioning — all viewports */
.amaas-gallery-video-btn {
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* RTL — Watch Video mirrors to the right, matching where the hero photo
   itself moves to in the mirrored Arabic grid (dir:rtl reverses the grid
   item order). Keeps it paired with the hero image and clear of the native
   "More" badge on the small thumbnail — same relationship as English,
   correctly mirrored instead of force-pinned to the English side. */
html[dir="rtl"] .amaas-gallery-video-btn,
html[lang="ar"] .amaas-gallery-video-btn {
    right: 15px !important;
    left: auto !important;
}

/* Mobile specific — slightly smaller but still visible */
@media (max-width: 767px) {
    .amaas-gallery-video-btn {
        bottom: 10px !important;
        left: 10px !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
        z-index: 5 !important;
    }

    html[dir="rtl"] .amaas-gallery-video-btn,
    html[lang="ar"] .amaas-gallery-video-btn {
        right: 10px !important;
        left: auto !important;
    }
}

/* -----------------------------------------------------------
   5F. VERIFIED BADGE — PROPERLY VISIBLE ON MOBILE BAR
   ----------------------------------------------------------- */

/* Mobile bar agent image container — ensure relative for badge */
.mobile-property-contact .agent-image {
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Badge on mobile bar — visible, properly positioned */
.mobile-property-contact .agent-verified-icon {
    position: absolute !important;
    bottom: -3px !important;
    right: -3px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: #dfc187 !important;
    border: 1.5px solid #ffffff !important;
    z-index: 5 !important;
}

.mobile-property-contact .agent-verified-icon i,
.mobile-property-contact .agent-verified-icon .houzez-icon {
    font-size: 8px !important;
    color: #1a1a2e !important;
    font-family: 'houzez-iconfont' !important;
    line-height: 1 !important;
}

/* -----------------------------------------------------------
   5G. MOBILE RESPONSIVE ADJUSTMENTS FOR NEW RULES
   ----------------------------------------------------------- */

@media (max-width: 767px) {

    /* Section headings — slightly smaller on mobile */
    .single-property .block-title-wrap h2,
    .single-property .block-title-wrap h3,
    .single-property .block-title-wrap h4 {
        font-size: 20px !important;
    }

    .single-property .sch-title {
        font-size: 20px !important;
    }

    /* Homepage slider details button */
    .property-slider-item .btn.btn-primary.btn-item {
        font-size: 13px !important;
        padding: 8px 20px !important;
    }
}

@media (max-width: 480px) {

    /* Section headings — compact on very small screens */
    .single-property .block-title-wrap h2,
    .single-property .block-title-wrap h3,
    .single-property .block-title-wrap h4 {
        font-size: 18px !important;
    }

    .single-property .sch-title {
        font-size: 18px !important;
    }
}


/* ==========================================================================
   PHASE 6 — MOBILE CRITICAL FIXES
   - Watch Video button on mobile gallery
   - Lightbox Send Message style fix
   - Mobile viewport shrinking / overflow fix
   - Mobile contact bar scroll stability
   ========================================================================== */

/* -----------------------------------------------------------
   6A. MOBILE VIEWPORT — PREVENT SHRINKING / HORIZONTAL OVERFLOW
   The page shrinks while scrolling because content overflows
   horizontally. Lock the viewport width.
   ----------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 18 FIX 7: COMPREHENSIVE BACKGROUND TRANSPARENCY
   Make ALL intermediate containers transparent so the body crosshatch/styled
   background pattern shows through uniformly across the entire site.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- A) Global structural wrappers --- */
.main-wrap,
.main-wrap.main-wrap-js,
.main-content-wrap,
.content-wrap,
.single-property-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- B) Property page — ALL section wraps (video, gallery, features, schedule, contact, etc.) --- */
/* Override theme's nth-child alternating backgrounds */
.fw-property-section-wrap:nth-child(2n),
.fw-property-section-wrap:nth-child(odd),
.fw-property-section-wrap:nth-child(even),
/* Override theme's .single-property specific selectors */
.single-property .fw-property-section-wrap,
.single-property .property-features-wrap,
.single-property #property-features-wrap,
.single-property .fw-property-features-wrap,
.single-property .fw-property-schedule-tour-wrap,
.single-property .fw-property-contact-agent-wrap,
.single-property .fw-property-floor-plans-wrap,
.single-property .fw-property-sub-listings-wrap,
.single-property .fw-property-video-wrap,
.single-property .fw-property-gallery-wrap,
.single-property .fw-property-description-wrap,
.single-property .fw-property-address-wrap,
.single-property .fw-property-details-wrap,
.single-property .fw-property-map-wrap,
.single-property .fw-property-near-by-wrap,
.single-property .fw-property-attachments-wrap,
.single-property .fw-property-review-wrap,
.fw-property-section-wrap,
.fw-property-video-wrap,
.fw-property-gallery-wrap,
.fw-property-description-wrap,
.fw-property-sub-listings-wrap,
.fw-property-features-wrap,
.fw-property-features-left,
.fw-property-floor-plans-wrap,
.fw-property-schedule-tour-wrap,
.fw-property-contact-agent-wrap,
.fw-property-address-wrap,
.fw-property-details-wrap,
.fw-property-map-wrap,
.fw-property-near-by-wrap,
.fw-property-attachments-wrap,
.fw-property-walkscore-wrap,
.fw-property-mortgage-calculator-wrap,
.fw-property-review-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- C) Property page — block wraps, overview, custom sections --- */
.block-wrap,
.block-wrap.border-0,
.block-wrap.fw-property-features-left,
.block-wrap.fw-property-features-left.w-100,
.single-property .block-wrap,
/* Must beat theme's embedded: .single-property .fw-property-features-wrap .block-wrap.fw-property-features-left */
body.single-property .fw-property-features-wrap .block-wrap.fw-property-features-left,
body.single-property .fw-property-features-wrap .block-wrap.fw-property-features-left.w-100,
.single-property .fw-property-features-wrap .fw-property-features-left,
.amaas-overview-wrapper,
.location-hub-wrapper,
.guarantees-wrapper,
.guarantee-card,
.destination-node,
[class*="destination-node-"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- D) Homepage — property slider cards --- */
.property-slider-item {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
}

/* --- D2) Homepage — listing cards and item wraps --- */
.item-wrap,
.item-wrap-no-frame,
.item-wrap.item-wrap-no-frame,
.item-wrap.item-wrap-no-frame.h-100,
.item-footer,
.item-footer.items-btns-count-3 {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- E) Homepage — sections that SHOULD be transparent (light-text sections) --- */
.elementor-element-dea3c23,
.elementor-element-52524c35,
.elementor-element-486c44a0,
.elementor-element-0be454e {
    background-color: transparent !important;
    background: transparent !important;
}

/* --- E2) Homepage — ONLY title widget rows need dark background (not entire sections) --- */
/* Inner section 8478049 = "Discover Featured Locations" title row */
/* Inner section 973e61e = "Explore New Lifestyles" title row */
.elementor-element-8478049,
.elementor-element-973e61e {
    background-color: rgba(11, 11, 13, 0.92) !important;
    background: rgba(11, 11, 13, 0.92) !important;
    border-radius: 12px !important;
    padding: 20px 30px !important;
    margin-bottom: 15px !important;
}
/* Parent sections — transparent (NOT dark) — show crosshatch behind */
.elementor-element-1d5bfe2,
.elementor-element-b99ea08,
.elementor-element-7ba3c4b {
    background-color: transparent !important;
    background: transparent !important;
}

/* --- E3) Contact section — transparent to show pattern --- */
.elementor-element-5226fedb,
[data-id="969f999"] {
    background-color: transparent !important;
    background: transparent !important;
}
[data-id="969f999"] > .e-con-inner {
    background-color: transparent !important;
    background: transparent !important;
}

/* --- F) Elementor inner containers on pages --- */
body.page .elementor-widget-container,
body.page .elementor-column-wrap,
body.page .elementor-widget-wrap {
    background-color: transparent !important;
}

/* --- F2) Mobile Send Message form — crosshatch background style --- */
#mobile-property-form .modal-content {
    background-color: transparent !important;
    background-image: none !important; /* AMAAS_BG_LIGHTGREY_V1 crosshatch removed */
    background-color: #f0f0f0 !important;
    border: 1px solid rgba(223, 193, 135, 0.3) !important;
}
#mobile-property-form .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(223, 193, 135, 0.2) !important;
}
#mobile-property-form .modal-header .modal-title {
    color: #1a1a2e !important;
    font-weight: 700 !important;
}
#mobile-property-form .modal-header .btn-close {
    filter: none !important;
}
#mobile-property-form .modal-body {
    background: transparent !important;
}
#mobile-property-form .property-form-wrap,
#mobile-property-form .property-form {
    background: transparent !important;
}
#mobile-property-form .form-control {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(223, 193, 135, 0.4) !important;
    color: #1a1a2e !important;
}
#mobile-property-form .form-control::placeholder {
    color: #888 !important;
}
#mobile-property-form .agent-name,
#mobile-property-form .agent-link a,
#mobile-property-form .agent-information {
    color: #1a1a2e !important;
}
#mobile-property-form .agent-link a {
    color: #926119 !important;
}
#mobile-property-form .gdpr-text-wrap,
#mobile-property-form .gdpr-text-wrap a {
    color: #666 !important;
}
#mobile-property-form .gdpr-text-wrap a {
    color: #926119 !important;
}
/* Ensure Send Message button is visible with gold styling */
#mobile-property-form .houzez_agent_property_form.btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #dfc187 !important;
    color: #111111 !important;
    font-weight: 700 !important;
    border: none !important;
    height: auto !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Phase 23: Call button in mobile modal — now hidden (see Phase 23 section) */

/* --- G) Modal and lightbox — keep slightly transparent white for readability --- */
.modal-content,
.lightbox-form-wrap {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

/* --- H) Search/listing pages --- */
.houzez-search-results-wrap,
.houzez-module-listing-v7,
.property-listing-simple,
.hz-listing-card {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- I) Fix broken images — hide broken image icon, show subtle placeholder --- */
img.img-fluid[src$=".webp"] {
    /* If webp fails, at least don't show broken icon */
    min-height: 50px;
}

/* --- J) Ensure form inputs KEEP white background (override the blanket transparent) --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select,
.form-control,
.elementor-field {
    background-color: #ffffff !important;
}

/* --- K) Keep dropdown menus white for readability --- */
.dropdown-menu,
.logged-in-nav.dropdown-menu,
.mega-dropdown-menu {
    background-color: #ffffff !important;
}

/* --- L) Keep compare panel white --- */
.compare-property-panel {
    background-color: #ffffff !important;
}

/* Lock body/html to prevent horizontal overflow on mobile */
@media (max-width: 991px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Prevent any element from causing horizontal overflow */
    .main-wrap,
    .content-wrap,
    .property-wrap,
    .property-detail-v7,
    .container,
    .container-fluid,
    .row {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Property page specific — prevent maps, galleries from overflowing */
    .property-top-wrap,
    .property-banner,
    #property-map-wrap,
    .block-wrap {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* -----------------------------------------------------------
   6B. MOBILE CONTACT BAR — FIXED BOTTOM, STABLE ON SCROLL
   Ensure contact bar stays properly fixed and doesn't
   shift/distort while scrolling.
   ----------------------------------------------------------- */

@media (max-width: 991px) {
    .mobile-property-contact.d-block.d-lg-none {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: #ffffff !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* Add bottom padding to body so content isn't hidden behind fixed bar */
    body.single-property {
        padding-bottom: 70px !important;
    }
}

/* -----------------------------------------------------------
   6C. WATCH VIDEO BUTTON — MOBILE GALLERY (d-block d-md-none)
   The desktop gallery (.hs-gallery-v5-grid) is inside
   d-none d-md-block = hidden on mobile. Mobile uses a
   separate single-image container.
   ----------------------------------------------------------- */

/* Mobile gallery container — needs relative positioning for button overlay */
.property-banner > .d-block.d-md-none {
    position: relative !important;
    overflow: visible !important;
}

/* Mobile Watch Video button — visible and clickable */
.amaas-gallery-video-btn-mobile,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    z-index: 5 !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    min-height: 44px !important;
    background: #dfc187 !important;
    border: 1px solid #dfc187 !important;
    border-radius: 8px !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: Montserrat, sans-serif !important;
    cursor: pointer !important;
    letter-spacing: 0.3px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Mobile Watch Video hover and press state - reversed sitewide standard */
.amaas-gallery-video-btn-mobile:hover,
.amaas-gallery-video-btn-mobile:focus,
.amaas-gallery-video-btn-mobile:active,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn:hover,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn:focus,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn:active {
    background: #111111 !important;
    border-color: #dfc187 !important;
    color: #dfc187 !important;
}
.amaas-gallery-video-btn-mobile svg,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn svg {
    fill: #111111 !important;
}
.amaas-gallery-video-btn-mobile:hover svg,
.amaas-gallery-video-btn-mobile:focus svg,
.amaas-gallery-video-btn-mobile:active svg,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn:hover svg,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn:focus svg,
.property-banner > .d-block.d-md-none > .amaas-gallery-video-btn:active svg {
    fill: #dfc187 !important;
}

/* RTL mobile Watch Video — same position as English (bottom-left) */
html[dir="rtl"] .amaas-gallery-video-btn-mobile,
html[lang="ar"] .amaas-gallery-video-btn-mobile,
html[dir="rtl"] .property-banner > .d-block.d-md-none > .amaas-gallery-video-btn,
html[lang="ar"] .property-banner > .d-block.d-md-none > .amaas-gallery-video-btn {
    left: 10px !important;
    right: auto !important;
}

/* Smaller on very small screens */
@media (max-width: 400px) {
    .amaas-gallery-video-btn-mobile {
        font-size: 11px !important;
        padding: 6px 12px !important;
        gap: 4px !important;
        bottom: 8px !important;
        left: 8px !important;
    }
    html[dir="rtl"] .amaas-gallery-video-btn-mobile,
    html[lang="ar"] .amaas-gallery-video-btn-mobile {
        left: 8px !important;
        right: auto !important;
    }
}

/* -----------------------------------------------------------
   6D. LIGHTBOX — SEND MESSAGE STYLE FIX (MOBILE)
   When envelope icon in lightbox header is clicked on mobile,
   the form panel slides in. Fix broken layout.
   ----------------------------------------------------------- */

/* Lightbox modal — full screen on mobile */
@media (max-width: 767px) {
    #property-lightbox .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
    }

    #property-lightbox .modal-content {
        border-radius: 0 !important;
        height: 100% !important;
        border: none !important;
    }

    /* Lightbox body — fill available space */
    #property-lightbox .modal-body {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        height: 100% !important;
    }

    /* Gallery area — fill when form is hidden */
    #property-lightbox .lightbox-gallery-wrap {
        flex: 1 !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Form wrap — when visible on mobile, take full space */
    #property-lightbox .lightbox-form-wrap {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 50 !important;
        background: #ffffff !important;
        overflow-y: auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    /* Lightbox header — proper layout on mobile */
    #property-lightbox .modal-header {
        padding: 8px 12px !important;
        background: #1a1a2e !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        z-index: 60 !important;
        position: relative !important;
    }

    /* Lightbox header tools — proper alignment */
    #property-lightbox .modal-header .lightbox-tools {
        display: flex !important;
        align-items: center !important;
    }

    #property-lightbox .modal-header .lightbox-tools .list-inline {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #property-lightbox .modal-header .lightbox-tools .list-inline-item {
        margin: 0 !important;
    }

    /* Envelope/Send Message button in lightbox header */
    #property-lightbox .lightbox-tools .btn-email a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        background: rgba(223, 193, 135, 0.15) !important;
        color: #dfc187 !important;
        text-decoration: none !important;
        transition: background 0.3s ease !important;
    }

    #property-lightbox .lightbox-tools .btn-email a:hover,
    #property-lightbox .lightbox-tools .btn-email a:active {
        background: rgba(223, 193, 135, 0.3) !important;
    }

    #property-lightbox .lightbox-tools .btn-email i {
        font-size: 18px !important;
        color: #dfc187 !important;
    }

    /* Close button in lightbox — consistent style */
    #property-lightbox .btn-close,
    #property-lightbox .btn-close-white {
        width: 36px !important;
        height: 36px !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important;
    }

    /* Form inside lightbox — proper styling */
    #property-lightbox .lightbox-form-wrap .property-form-wrap {
        max-width: 100% !important;
        width: 100% !important;
    }

    #property-lightbox .lightbox-form-wrap .property-form {
        padding: 0 !important;
    }

    /* Agent details in lightbox form */
    #property-lightbox .lightbox-form-wrap .agent-details {
        margin-bottom: 15px !important;
    }

    /* Form inputs in lightbox */
    #property-lightbox .lightbox-form-wrap .form-control {
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* Submit button in lightbox form */
    #property-lightbox .lightbox-form-wrap .btn-primary,
    #property-lightbox .lightbox-form-wrap [type="submit"] {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }
}

/* Tablet lightbox adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    #property-lightbox .modal-body {
        display: flex !important;
        flex-direction: row !important;
    }

    #property-lightbox .lightbox-gallery-wrap {
        flex: 1 !important;
    }

    #property-lightbox .lightbox-form-wrap {
        width: 300px !important;
        min-width: 300px !important;
        overflow-y: auto !important;
    }
}


/* ==========================================================================
   PHASE 7 — BUTTON CONSISTENCY + LIGHTBOX IMAGES-ONLY + DETAILS ICONS
   Issues: buttons different sizes, missing icons, lightbox form on mobile,
           badge broken, property amenity icons not gold
   ========================================================================== */

/* -----------------------------------------------------------
   7A. PROPERTY FORM BUTTONS — ALL SAME SIZE
   Send Message, Call, WhatsApp must be identical height/style.
   These are the full-text buttons in the property form area.
   ----------------------------------------------------------- */

/* Universal button sizing in property form */
.property-form .property-schedule-tour-type-form .btn,
.property-form .hz-btn-whatsapp.btn.btn-secondary-outlined,
.single-property .property-form .property-schedule-tour-type-form .btn.btn-secondary,
.single-property .property-form .property-schedule-tour-type-form .btn.btn-secondary-outlined,
.single-property .property-form .hz-btn-whatsapp {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}

/* On mobile — stack vertically, all full width */
@media (max-width: 767px) {
    .property-form .property-schedule-tour-type-form {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .property-form .property-schedule-tour-type-form .btn,
    .property-form .hz-btn-whatsapp.btn {
        width: 100% !important;
        flex: none !important;
    }
}

/* Button icon SVGs injected by JS — proper sizing */
.property-form .amaas-btn-icon,
.lightbox-form-wrap .amaas-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.property-form .amaas-btn-icon svg,
.lightbox-form-wrap .amaas-btn-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
}

/* RTL — flip icon margin */
html[dir="rtl"] .property-form .amaas-btn-icon,
html[lang="ar"] .property-form .amaas-btn-icon,
html[dir="rtl"] .lightbox-form-wrap .amaas-btn-icon,
html[lang="ar"] .lightbox-form-wrap .amaas-btn-icon {
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* -----------------------------------------------------------
   7B. MOBILE CONTACT BAR — BUTTONS EXACTLY SAME SIZE
   Override any specificity issues making them unequal
   ----------------------------------------------------------- */

body.single-property .mobile-property-contact .btn,
body .mobile-property-contact .btn.btn-secondary,
body .mobile-property-contact .btn.btn-secondary-outlined,
body .mobile-property-contact a.btn,
body .mobile-property-contact button.btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
}

/* Icons inside mobile bar buttons — centered, proper size */
body .mobile-property-contact .btn i,
body .mobile-property-contact .btn .houzez-icon,
body .mobile-property-contact .btn svg {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide text labels inside mobile bar buttons — icon only */
body .mobile-property-contact .btn span:not(.houzez-icon):not(.amaas-btn-icon),
body .mobile-property-contact .btn .hide-on-click,
body .mobile-property-contact .btn .show-on-click {
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
}

/* -----------------------------------------------------------
   7C. LIGHTBOX — IMAGES ONLY ON MOBILE (HIDE ALL FORM/BUTTONS)
   When image is clicked on mobile, show gallery only.
   No form, no Send Message, no Call, no WhatsApp.
   ----------------------------------------------------------- */

@media (max-width: 767px) {
    /* Hide the ENTIRE form panel on mobile */
    #property-lightbox .lightbox-form-wrap,
    .property-lightbox .lightbox-form-wrap,
    .property-lightbox .modal-body .lightbox-form-wrap,
    #property-lightbox .modal-body .lightbox-form-wrap {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 0px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
    }

    /* Hide envelope/Send Message button in lightbox header */
    #property-lightbox .lightbox-tools .btn-email,
    .property-lightbox .lightbox-tools .btn-email,
    #property-lightbox .modal-header .houzez-send-message,
    .property-lightbox .modal-header .houzez-send-message,
    #property-lightbox .houzez-send-message,
    .property-lightbox .houzez-send-message,
    #property-lightbox .msg-login-required,
    .property-lightbox .msg-login-required {
        display: none !important;
    }

    /* Gallery takes full space — images only */
    #property-lightbox .lightbox-gallery-wrap,
    .property-lightbox .lightbox-gallery-wrap {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-height: 100% !important;
        height: calc(100% - 50px) !important;
        overflow: hidden !important;
    }

    /* Lightbox slider — fill available space */
    #property-lightbox .lightbox-slider,
    #property-lightbox .lightbox-gallery {
        height: 100% !important;
    }

    #property-lightbox .lightbox-slider .slick-list {
        height: 100% !important;
    }

    #property-lightbox .lightbox-slider .slick-slide img {
        max-height: calc(100vh - 60px) !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* Modal body — single column for gallery */
    #property-lightbox .modal-body {
        flex-direction: column !important;
        height: calc(100% - 50px) !important;
    }
}

/* -----------------------------------------------------------
   7D. AGENT BADGE — FIX POSITIONING IN ALL CONTEXTS
   Badge must sit properly on agent image in forms,
   lightbox, and mobile contact bar.
   ----------------------------------------------------------- */

/* Agent image containers — must be relative for badge */
.property-form .agent-image,
.property-form-wrap .agent-image,
.lightbox-form-wrap .agent-image,
.property-lightbox .agent-image,
.agent-details .agent-image {
    position: relative !important;
    display: inline-block !important;
    overflow: visible !important;
}

/* Badge — absolute overlay on image, bottom-right */
.property-form .agent-verified-icon,
.property-form-wrap .agent-verified-icon,
.lightbox-form-wrap .agent-verified-icon,
.property-lightbox .agent-verified-icon,
.agent-details .agent-verified-icon {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #dfc187 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    z-index: 5 !important;
    line-height: 1 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* Badge icon — checkmark */
.property-form .agent-verified-icon i,
.property-form-wrap .agent-verified-icon i,
.lightbox-form-wrap .agent-verified-icon i,
.property-lightbox .agent-verified-icon i,
.agent-details .agent-verified-icon i {
    font-size: 11px !important;
    color: #1a1a2e !important;
    font-family: 'houzez-iconfont' !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1 !important;
}

/* Mobile contact bar badge — smaller to fit 40px image */
.mobile-property-contact .agent-verified-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    bottom: -1px !important;
    right: -1px !important;
    border-width: 1.5px !important;
}

.mobile-property-contact .agent-verified-icon i {
    font-size: 9px !important;
}

/* -----------------------------------------------------------
   7E. PROPERTY DETAILS/AMENITIES — GOLD ICONS + ALIGNMENT
   Make all icons gold, add icons for items without images,
   ensure consistent sizing across desktop and mobile.
   ----------------------------------------------------------- */

/* All icon images — consistent size + gold colorization */
.fw-property-amenities img.img-fluid {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    /* Gold filter: black → invert → sepia → hue-shift to match #dfc187 */
    filter: brightness(0) saturate(100%) invert(82%) sepia(26%) saturate(667%) hue-rotate(8deg) brightness(96%) contrast(88%) !important;
}

/* JS-injected SVG placeholder icons for items without images */
.fw-property-amenities .amaas-amenity-icon-svg {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.fw-property-amenities .amaas-amenity-icon-svg svg {
    width: 32px !important;
    height: 32px !important;
}

/* Amenity container — even grid layout */
.fw-property-amenities-wrap.row {
    gap: 0 !important;
}

.fw-property-amenities {
    text-align: center !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
}

/* Inner flex — align icon + text */
.fw-property-amenities > .d-flex {
    gap: 12px !important;
}

/* Text labels — clean hierarchy */
.fw-property-amenities .fw-property-amenities-data {
    font-size: 13px !important;
    color: #777777 !important;
    line-height: 1.4 !important;
}

.fw-property-amenities .fw-property-amenities-data strong {
    color: #333333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: block !important;
}

/* Responsive — mobile amenity sizing */
@media (max-width: 991px) {
    .fw-property-amenities img.img-fluid,
    .fw-property-amenities .amaas-amenity-icon-svg {
        width: 36px !important;
        height: 36px !important;
    }

    .fw-property-amenities .amaas-amenity-icon-svg svg {
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    .fw-property-amenities img.img-fluid,
    .fw-property-amenities .amaas-amenity-icon-svg {
        width: 32px !important;
        height: 32px !important;
    }

    .fw-property-amenities .amaas-amenity-icon-svg svg {
        width: 24px !important;
        height: 24px !important;
    }

    .fw-property-amenities .fw-property-amenities-data {
        font-size: 12px !important;
    }

    .fw-property-amenities .fw-property-amenities-data strong {
        font-size: 13px !important;
    }

    .fw-property-amenities {
        padding: 6px 8px !important;
    }
}


/* ══════════════════════════════════════════════════════════════════
 * PHASE 8 — Overview, Spacing, Features, Mobile Fixes
 * ══════════════════════════════════════════════════════════════════ */

/* --- 8.1 "DETAILS" heading: title case (override text-transform: uppercase) --- */
.fw-property-details-wrap .block-title-wrap h3,
.fw-property-details-wrap .block-title-wrap h3 span {
    text-transform: none !important;
}

/* --- 8.2 Consistent section spacing (match Details reference) --- */
/* Add consistent top spacing to all section titles */
.single-property .block-title-wrap {
    margin-top: 8px !important;
    padding-top: 8px !important;
}
/* Enquire section: reduce excessive top margin from its parent */
.single-property .agent-section .block-title-wrap {
    margin-top: 8px !important;
}
.single-property .agent-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* --- 8.3 Overview section: restructured layout --- */
.property-overview-data {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0.75rem 0 1rem !important;
}
.property-overview-data .amaas-overview-item {
    text-align: center !important;
    padding: 0.5rem 1rem !important;
}
.property-overview-data .amaas-ov-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 36px !important;
    margin-bottom: 6px !important;
}
.property-overview-data .amaas-ov-icon .houzez-icon {
    font-size: 28px !important;
    color: #dfc187 !important;
    font-family: 'houzez-iconfont' !important;
    font-weight: 700 !important;
    -webkit-text-stroke: 0.7px #dfc187 !important;
    text-stroke: 0.7px #dfc187 !important;
}
.property-overview-data .amaas-ov-icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke: #dfc187 !important;
    stroke-width: 2.3 !important;
}
.property-overview-data .amaas-ov-label {
    font-size: 13px !important;
    color: #111111 !important;
    margin-bottom: 2px !important;
    font-weight: 800 !important;
    text-align: center !important;
}
.property-overview-data .amaas-ov-value {
    text-align: center !important;
}
.property-overview-data .amaas-ov-value strong {
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 15px !important;
}
/* RTL font family for overview labels */
html[dir="rtl"] .property-overview-data .amaas-ov-label,
html[lang="ar"] .property-overview-data .amaas-ov-label {
    font-family: 'Amaas STV Arabic Font', sans-serif !important;
}

/* --- 8.4 Features: centered grid, centered items (match Location Hub) --- */
.fw-property-features-wrap .block-content-wrap > ul.row,
.fw-property-features-left .block-content-wrap > ul.row {
    justify-content: center !important;
}
.fw-property-features-wrap .block-content-wrap > ul.row > li,
.fw-property-features-left .block-content-wrap > ul.row > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- 8.5 Details section: icon-tags for Property ID (matching overview) --- */
.fw-property-amenities .amaas-amenity-icon-tags {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
}
.fw-property-amenities .amaas-amenity-icon-tags .houzez-icon {
    font-size: 32px !important;
    color: #dfc187 !important;
    font-family: 'houzez-iconfont' !important;
}

/* --- 8.5a HIDE Details section entirely (desktop + mobile, with/without units) --- */
.fw-property-details-wrap.text-start,
body.single-property .fw-property-details-wrap {
    display: none !important;
}

/* --- 8.5b Center Features section items on desktop --- */
.fw-property-features-wrap .block-content-wrap {
    display: flex !important;
    justify-content: center !important;
}
.fw-property-features-wrap ul.row.g-3.list-unstyled {
    justify-content: center !important;
}
.fw-property-features-wrap ul.row.g-3.list-unstyled > li {
    justify-content: center !important;
    /* Flex items default to an "automatic minimum size" no smaller than
       their content's natural width — so a label with a long/unbreakable
       word (e.g. "Air-Conditioned Corridors") silently grows past its
       intended 50%/33% column share, and every sibling that would have
       shared its row gets pushed to its own row too, one after another,
       until a short-enough label finally resets the pattern. That is what
       reads as random misalignment. min-width:0 removes that automatic
       floor so the column share (already fixed by the col-* classes) wins
       and the label simply wraps its own text inside its own column,
       exactly like every other item — verified this makes every item land
       at the identical column width with correct 2-per-row / 3-per-row
       pairing, in both languages, no label renaming required. */
    min-width: 0 !important;
}

/* --- 8.6 Mobile: overview below gallery (no double gallery) --- */
/* Hide desktop gallery grid on phones — theme has its own mobile gallery */
@media (max-width: 767px) {
    .property-banner .hs-gallery-v5-grid.property-banner-grid-wrap {
        display: none !important;
    }
}
/* Overview visible + aligned on mobile — centered in viewport */
@media (max-width: 991px) {
    .amaas-overview-wrapper {
        display: block !important;
        padding: 12px 0 0 !important;
        border-top: none !important;
        /* Compensate for Bootstrap grid 12px asymmetric offset to center in viewport */
        position: relative !important;
        left: 12px !important;
    }
    /* RTL: offset is mirrored — shift opposite direction */
    html[dir="rtl"] .amaas-overview-wrapper {
        left: -12px !important;
    }
    .amaas-overview-wrapper .d-flex.property-overview-data {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    .amaas-overview-wrapper .d-flex.property-overview-data > ul {
        flex: 0 0 calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
        margin-bottom: 8px !important;
        padding: 8px 4px !important;
        text-align: center !important;
    }
    .amaas-overview-wrapper .amaas-overview-item .amaas-ov-icon {
        display: flex !important;
        justify-content: center !important;
    }
    .amaas-overview-wrapper .amaas-overview-item .amaas-ov-label {
        text-align: center !important;
    }
    .amaas-overview-wrapper .amaas-overview-item .amaas-ov-value {
        text-align: center !important;
    }
}

/* --- 8.6b Mobile: empty tools block hidden, overview center-aligned --- */
@media (max-width: 991px) {
    /* Hide the empty tools block initially (JS fills it with title+tools) */
    .mobile-property-tools.block-wrap .houzez-media-tabs-5:empty {
        display: none !important;
    }
    /* Mobile tools bottom styling */
    .mobile-property-tools-bottom {
        margin-top: 12px !important;
    }
    .mobile-property-tools-bottom .property-item-tools {
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    .mobile-property-tools-bottom .item-tool {
        font-size: 18px !important;
    }
    .mobile-property-tools-bottom .item-tool i {
        color: #888 !important;
    }
    /* Overview center-aligned in mobile viewport */
    .amaas-overview-wrapper {
        text-align: center !important;
    }
    .amaas-overview-wrapper .d-flex.property-overview-data {
        justify-content: center !important;
    }
}

/* --- 8.7 Mobile: contact buttons alignment fix --- */
@media (max-width: 991px) {
    /* Spread agent + buttons across full width */
    .mobile-property-contact > .d-flex.justify-content-between,
    .mobile-property-contact > .d-flex {
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    /* Agent details shrinks to give room to buttons */
    .mobile-property-contact .agent-details {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: calc(100% - 170px) !important;
    }
    /* Buttons: slightly larger (48px) and evenly sized to fill bar */
    .mobile-property-contact .btn,
    body.single-property .mobile-property-contact .btn,
    body .mobile-property-contact .btn.btn-secondary,
    body .mobile-property-contact .btn.btn-secondary-outlined,
    body .mobile-property-contact a.btn,
    body .mobile-property-contact button.btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* --- 8.8 Mobile: date picker arrows — compact, proportional --- */
@media (max-width: 767px) {
    .property-schedule-tour-day-form-slide.slick-slider {
        padding: 0 28px !important;
        margin: 0 !important;
    }
    .tour-day-form-slide-arrow {
        width: 24px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2 !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        padding: 4px !important;
    }
    .tour-day-form-slide-arrow.prev {
        left: 0 !important;
        right: auto !important;
    }
    .tour-day-form-slide-arrow.next {
        right: 0 !important;
        left: auto !important;
    }
    .tour-day-form-slide-arrow .houzez-icon {
        font-size: 14px !important;
        font-family: 'houzez-iconfont' !important;
        color: #666 !important;
        line-height: 1 !important;
    }

    /* Ensure both arrows always visible */
    .tour-day-form-slide-arrow.prev,
    .tour-day-form-slide-arrow.next {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* RTL mirror handled by desktop rule (8.8b2) — no extra mobile RTL rules needed */
}

/* --- 8.8b2 RTL date picker: Force LTR behavior via JS (no CSS transforms) --- */
/* Arabic schedule tour is re-initialized with rtl:false in JS, so no CSS mirror needed.
   Keep arrows in their natural LTR positions — identical to English. */
html[dir="rtl"] .property-schedule-tour-day-form-slide .tour-day-form-slide-arrow.prev {
    left: 0 !important;
    right: auto !important;
}
html[dir="rtl"] .property-schedule-tour-day-form-slide .tour-day-form-slide-arrow.next {
    right: 0 !important;
    left: auto !important;
}

/* --- 8.8c Date picker: fallback for non-initialized Slick (RTL/slow load) --- */
@media (max-width: 991px) {
    /* When Slick hasn't initialized, dates stack vertically = huge blob. 
       Force horizontal layout + overflow hidden as fallback */
    .property-schedule-tour-day-form-slide:not(.slick-initialized) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        max-height: 100px !important;
        padding: 0 28px !important;
        gap: 8px !important;
    }
    .property-schedule-tour-day-form-slide:not(.slick-initialized) .form-group {
        flex: 0 0 auto !important;
        min-width: 120px !important;
        max-width: 150px !important;
    }
    /* Hide the wrap until it has either Slick or our fallback */
    .property-schedule-tour-day-form-slide-wrap {
        min-height: 80px !important;
        overflow: hidden !important;
    }
}

/* --- 8.8d Schedule tour section — center on mobile viewport --- */
@media (max-width: 991px) {
    /* Remove Bootstrap grid offset — the form has NO class, use #property-schedule-tour-wrap */
    #property-schedule-tour-wrap .row,
    .fw-property-schedule-tour-wrap .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #property-schedule-tour-wrap .col-sm-12,
    #property-schedule-tour-wrap .col-md-6,
    .fw-property-schedule-tour-wrap .col-sm-12,
    .fw-property-schedule-tour-wrap .col-md-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Symmetric inner padding for form content */
    .property-schedule-tour-form-wrap {
        padding: 0 8px !important;
    }
    /* Ensure heading text is centered */
    .property-schedule-tour-type-form h4,
    .property-schedule-tour-type-form h3,
    .property-schedule-tour-type-form .sch-title {
        text-align: center !important;
    }
}

/* --- 8.8b Overview wrapper — explicit center alignment on mobile --- */
@media (max-width: 991px) {
    .amaas-overview-wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    .amaas-overview-wrapper .d-flex.property-overview-data {
        justify-content: center !important;
        margin: 0 auto !important;
    }
    .amaas-overview-wrapper .d-flex.property-overview-data > ul.amaas-overview-item {
        flex: 0 0 calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* --- 8.9 Mobile offcanvas menu — match desktop nav colors --- */
/* Normal links: white text */
#hz-offcanvas-mobile-menu .nav-link,
#mobile-main-nav .nav-link,
.offcanvas-mobile-menu-body .nav-link,
.mobile-navbar-nav .nav-link {
    color: #ffffff !important;
    background-color: transparent !important;
    transition: color 0.2s ease !important;
}

/* Hover state: gold */
#hz-offcanvas-mobile-menu .nav-link:hover,
#mobile-main-nav .nav-link:hover,
.offcanvas-mobile-menu-body .nav-link:hover,
.mobile-navbar-nav .nav-link:hover {
    color: #dfc187 !important;
    background-color: transparent !important;
}

/* Active item (current page): gold */
#hz-offcanvas-mobile-menu .current-menu-item > .nav-link,
#hz-offcanvas-mobile-menu .current_page_item > .nav-link,
#mobile-main-nav .current-menu-item > .nav-link,
#mobile-main-nav .current_page_item > .nav-link,
.mobile-navbar-nav .current-menu-item > .nav-link,
.mobile-navbar-nav .current_page_item > .nav-link {
    color: #dfc187 !important;
    background-color: transparent !important;
}

/* Click/focus/active states: keep consistent — no weird Bootstrap colors */
#hz-offcanvas-mobile-menu .nav-link:focus,
#hz-offcanvas-mobile-menu .nav-link:active,
#hz-offcanvas-mobile-menu .nav-link:focus-visible,
#mobile-main-nav .nav-link:focus,
#mobile-main-nav .nav-link:active,
#mobile-main-nav .nav-link:focus-visible,
.mobile-navbar-nav .nav-link:focus,
.mobile-navbar-nav .nav-link:active,
.mobile-navbar-nav .nav-link:focus-visible {
    color: #dfc187 !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Visited links: stay white (non-active) */
#hz-offcanvas-mobile-menu .nav-link:visited,
#mobile-main-nav .nav-link:visited,
.mobile-navbar-nav .nav-link:visited {
    color: #ffffff !important;
}

/* Visited active page: stay gold */
#hz-offcanvas-mobile-menu .current-menu-item > .nav-link:visited,
#mobile-main-nav .current-menu-item > .nav-link:visited,
.mobile-navbar-nav .current-menu-item > .nav-link:visited {
    color: #dfc187 !important;
}

/* Override any Bootstrap focus ring or active bg */
#hz-offcanvas-mobile-menu .nav-item:focus-within,
#mobile-main-nav .nav-item:focus-within {
    background-color: transparent !important;
}

/* Offcanvas body background — keep black */
#hz-offcanvas-mobile-menu,
.offcanvas-mobile-menu {
    background-color: #000000 !important;
}
.offcanvas-mobile-menu-body {
    background-color: #000000 !important;
}
#hz-offcanvas-mobile-menu .offcanvas-header {
    background-color: #000000 !important;
    border-bottom: 1px solid rgba(223, 193, 135, 0.2) !important;
}
/* --- 8.12 Mobile menu close button — gold --- */
#hz-offcanvas-mobile-menu .btn-close,
.offcanvas-mobile-menu .btn-close {
    filter: none !important;
    opacity: 1 !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    padding: 8px !important;
    box-shadow: none !important;
}
#hz-offcanvas-mobile-menu .btn-close .houzez-icon,
.offcanvas-mobile-menu .btn-close .houzez-icon,
#hz-offcanvas-mobile-menu .btn-close i,
.offcanvas-mobile-menu .btn-close i {
    color: #dfc187 !important;
    font-size: 22px !important;
    font-family: 'houzez-iconfont' !important;
}
#hz-offcanvas-mobile-menu .btn-close:hover .houzez-icon,
.offcanvas-mobile-menu .btn-close:hover .houzez-icon,
#hz-offcanvas-mobile-menu .btn-close:hover i,
.offcanvas-mobile-menu .btn-close:hover i {
    color: #fff !important;
}

/* ================================================================
   PHASE 9: Features centering + Mobile tools + Mobile overview
   ================================================================ */

/* --- 9.1 Features section: visually centered on desktop --- */
.fw-property-features-wrap .fw-property-content-wrap {
    display: flex !important;
    justify-content: center !important;
}
.fw-property-features-wrap ul.row.g-3.list-unstyled {
    max-width: 880px !important;
    justify-content: center !important;
}

/* --- 9.2 Hide Details section (both mobile + desktop, with/without units) --- */
/* Already added above as .fw-property-details-wrap display:none */

/* --- 9.3 Mobile: tools block + overview centering --- */
@media (max-width: 991px) {
    /* Force overview ancestor container visible (CSS-only fallback — JS also removes d-none) */
    .property-banner > .container.d-none.d-md-block {
        display: block !important;
    }
    /* Mobile: overview centered in viewport */
    .d-flex.property-overview-data {
        justify-content: center !important;
        text-align: center !important;
        flex-wrap: wrap !important;
    }
    .d-flex.property-overview-data .amaas-overview-item {
        text-align: center !important;
        flex: 0 0 33.33% !important;
        max-width: 33.33% !important;
    }
    /* Mobile: title block styling when moved into tools block */
    .mobile-property-tools.block-wrap .d-flex.align-items-center,
    .mobile-property-tools.block-wrap .property-labels-wrap,
    .mobile-property-tools.block-wrap .page-title,
    .mobile-property-tools.block-wrap .item-address,
    .mobile-property-tools.block-wrap .item-price-wrap {
        display: block !important;
    }
    .mobile-property-tools.block-wrap {
        padding: 15px !important;
    }
    /* Hide original title block IMMEDIATELY via CSS — prevents flash during load.
       JS clones this content into .amaas-title-moved above the overview. */
    .mobile-property-title.block-wrap {
        display: none !important;
    }
    /* Also hide empty tools block on mobile */
    .mobile-property-tools.block-wrap:not(.amaas-title-moved) {
        display: none !important;
    }
    /* Style the moved title block (inserted after gallery, before overview) */
    .amaas-title-moved {
        display: block !important;
        background: #fff;
    }
    .amaas-title-moved .page-title-mobile {
        font-size: 22px;
        font-weight: 700;
        color: #333;
        margin-bottom: 4px;
    }
    .amaas-title-moved .item-address {
        font-size: 14px;
        color: #666;
    }
    .amaas-title-moved .item-price .price {
        color: #dfc187 !important;
        font-weight: 400 !important;
    }
    /* Tools-bottom spacing below price */
    .amaas-title-moved .mobile-property-tools-bottom {
        margin-top: 10px !important;
    }
    .amaas-title-moved .item-price-wrap {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }
    .amaas-title-moved .item-price-wrap .item-price {
        margin-bottom: 0 !important;
    }
    /* Tools spacing below price */
    .amaas-title-moved .mobile-property-tools-bottom {
        position: static !important;
    }
}

/* ================================================================
   PHASE 10: Homepage mobile button centering + Menu close gold fix
   ================================================================ */

/* --- 10.1 Center ALL Elementor button widgets on mobile homepage ---
   AMAAS fix: page-id-9603 added explicitly. That page is the AR homepage
   template but lost its body.home class once the Amaas landing page
   became the WP front page, which silently broke this rule's selector. */
@media (max-width: 991px) {
    body.home .elementor-widget-button,
    body.page-id-9603 .elementor-widget-button,
    body.page-template-default .elementor-widget-button {
        text-align: center !important;
    }
    body.home .elementor-widget-button .elementor-button-wrapper,
    body.page-id-9603 .elementor-widget-button .elementor-button-wrapper,
    body.page-template-default .elementor-widget-button .elementor-button-wrapper {
        justify-content: center !important;
        display: flex !important;
    }
    /* Also center any Elementor column text on mobile for button parents */
    body.home .elementor-column .elementor-widget-button,
    body.page-id-9603 .elementor-column .elementor-widget-button,
    body.page-template-default .elementor-column .elementor-widget-button {
        text-align: center !important;
    }
}

/* --- 10.2 Center "About Amaas" section heading on homepage mobile --- */
@media (max-width: 991px) {
    body.home .houzez_section_title_wrap.section-title-module {
        text-align: center !important;
    }
    body.home .houzez_section_title_wrap.section-title-module .houzez_section_title {
        text-align: center !important;
    }
}

/* =============================================
   ABOUT AMAAS PAGE — MOBILE ALIGNMENT FIXES
   Page ID: 8391
   ============================================= */
@media (max-width: 991px) {

    /* --- GLOBAL: prevent horizontal overflow on About page --- */
    .page-id-8391 {
        overflow-x: hidden !important;
    }

    /* --- "Discover the story behind the success..." H1 — justify → center --- */
    .page-id-8391 .elementor-element-57eaac2 h1,
    .page-id-8391 .elementor-element-57eaac2 .elementor-heading-title {
        text-align: center !important;
    }

    /* --- About Company main section (307eb3a) — wrap children on mobile --- */
    .page-id-8391 .elementor-element-307eb3a {
        text-align: center !important;
    }
    .page-id-8391 [data-id="307eb3a"] > .e-con-inner {
        flex-wrap: wrap !important;
    }
    .page-id-8391 [data-id="307eb3a"] > .e-con-inner > .e-con {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .page-id-8391 .elementor-element-307eb3a p,
    .page-id-8391 .elementor-element-307eb3a .elementor-text-editor {
        text-align: center !important;
    }

    /* --- Timeline section (d690c18) — prevent overflow --- */
    .page-id-8391 [data-id="d690c18"],
    .page-id-8391 [data-id="d690c18"] > .e-con-inner {
        overflow-x: hidden !important;
    }

    /* --- CEO text section (paragraph + Read More button) — left → center --- */
    .page-id-8391 .elementor-element-00e18a8 {
        text-align: center !important;
        align-items: center !important;
    }
    .page-id-8391 .elementor-element-00e18a8 p,
    .page-id-8391 .elementor-element-00e18a8 .elementor-text-editor {
        text-align: center !important;
    }
    .page-id-8391 .elementor-element-4eb052b {
        align-self: center !important;
    }
    .page-id-8391 .elementor-element-00e18a8 .elementor-divider {
        text-align: center !important;
    }
    .page-id-8391 .elementor-element-00e18a8 .elementor-divider-separator {
        margin: 0 auto !important;
    }

    /* --- CEO Speech main wrapper — center items on mobile --- */
    .page-id-8391 .elementor-element-56a0cef {
        align-items: center !important;
    }
    .page-id-8391 .elementor-element-959a3e6 {
        align-items: center !important;
        text-align: center !important;
    }

    /* --- "Explore Amaas In Numbers" heading — center --- */
    .page-id-8391 [data-id="14d96fe"] h2,
    .page-id-8391 [data-id="14d96fe"] .elementor-heading-title {
        text-align: center !important;
    }

    /* --- Counter section — center all content --- */
    .page-id-8391 .elementor-element-43b0f23c {
        flex-direction: column !important;
        align-items: center !important;
    }
    .page-id-8391 .elementor-element-4c961ad6 {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .page-id-8391 .elementor-element-3ddd97be,
    .page-id-8391 .elementor-element-2639eb03,
    .page-id-8391 .elementor-element-555c7c10,
    .page-id-8391 .elementor-element-2ac10e76 {
        text-align: center !important;
    }
    .page-id-8391 .elementor-widget-counter {
        text-align: center !important;
    }
    .page-id-8391 .elementor-counter-title {
        text-align: center !important;
    }
    .page-id-8391 .elementor-counter-number-wrapper {
        justify-content: center !important;
        text-align: center !important;
    }

    /* --- "Why Choose Us / For Your Dream House?" (a81c660) --- */
    /* Elementor selectors */
    .page-id-8391 .elementor-element-a81c660 {
        text-align: center !important;
        align-items: center !important;
    }
    .page-id-8391 .elementor-element-a81c660 h2,
    .page-id-8391 .elementor-element-a81c660 h3,
    .page-id-8391 .elementor-element-a81c660 p,
    .page-id-8391 .elementor-element-a81c660 .elementor-heading-title,
    .page-id-8391 .elementor-element-a81c660 .elementor-text-editor {
        text-align: center !important;
    }
    /* Custom Amaas selectors for "Why Choose Us" */
    .page-id-8391 [data-id="a81c660"] .amaas-tt,
    .page-id-8391 [data-id="5ecf328"] .amaas-tt,
    .page-id-8391 section.amaas-why .amaas-tt {
        text-align: center !important;
    }
    /* Wrap inner section children */
    .page-id-8391 [data-id="5ecf328"] > section,
    .page-id-8391 section.amaas-why {
        flex-wrap: wrap !important;
    }
    .page-id-8391 section.amaas-why > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* --- "We build luxury real estate..." (819e2b6 / e334779) --- */
    /* Elementor selectors */
    .page-id-8391 .elementor-element-819e2b6 {
        text-align: center !important;
        align-items: center !important;
    }
    .page-id-8391 .elementor-element-819e2b6 h2,
    .page-id-8391 .elementor-element-819e2b6 h3,
    .page-id-8391 .elementor-element-819e2b6 p,
    .page-id-8391 .elementor-element-819e2b6 span,
    .page-id-8391 .elementor-element-819e2b6 .elementor-heading-title,
    .page-id-8391 .elementor-element-819e2b6 .elementor-text-editor {
        text-align: center !important;
    }

    /* CRITICAL: "We build" header row — STACK vertically on mobile */
    .page-id-8391 .amaas-we-have-sec .amaas-head,
    .page-id-8391 .amaas-head.container.center {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 16px !important;
    }
    /* Title text: full width + centered */
    .page-id-8391 .amaas-we-have-sec .amaas-head .amaas-tt,
    .page-id-8391 .amaas-head .amaas-tt.amaas-sec-title {
        text-align: center !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Register button: center below text */
    .page-id-8391 .amaas-we-have-sec .amaas-btns,
    .page-id-8391 .amaas-head .amaas-btns {
        justify-content: center !important;
        width: auto !important;
    }

    /* Inner section wrap */
    .page-id-8391 [data-id="e334779"] > section,
    .page-id-8391 .amaas-we-have-sec {
        flex-wrap: wrap !important;
    }

    /* Feature grids: single column on mobile */
    .page-id-8391 .amaas-we-have-sec .amaas-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    /* Feature items: constrain height */
    .page-id-8391 .amaas-we-have-sec .amaas-item {
        min-height: auto !important;
    }
    /* Feature image containers: cap height on mobile */
    .page-id-8391 .amaas-we-have-sec .amaas-img {
        max-height: 250px !important;
        overflow: hidden !important;
    }
    .page-id-8391 .amaas-we-have-sec .amaas-img img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    /* Feature text: center */
    .page-id-8391 .amaas-we-have-sec .amaas-cnt,
    .page-id-8391 .amaas-we-have-sec .amaas-cnt h3,
    .page-id-8391 .amaas-we-have-sec .amaas-cnt p {
        text-align: center !important;
    }
    /* Browse all properties button: center */
    .page-id-8391 .amaas-we-have-sec .amaas-btns.bottom {
        justify-content: center !important;
    }
    /* Buttons / CTAs via Elementor */
    .page-id-8391 .elementor-element-819e2b6 > .e-con {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .page-id-8391 .elementor-element-819e2b6 .elementor-button-wrapper,
    .page-id-8391 .elementor-element-819e2b6 .elementor-widget-button {
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* =============================================
       Phase 15: About page — Why Choose Us centering +
       Cards section black color fix + white descriptions
       Both EN (page-id-8391) & AR (page-id-9658)
       ============================================= */

    /* --- "Why Choose Us" heading — center BOTH rows on mobile --- */
    .amaas-why .amaas-h2 {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .amaas-why .amaas-head {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .amaas-why .amaas-head2 {
        text-align: center !important;
        width: 100% !important;
    }
    .amaas-why .amaas-title {
        text-align: center !important;
    }
    /* Description + CTA row — stack and center */
    .amaas-why .amaas-top-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }
    .amaas-why .amaas-desc {
        text-align: center !important;
    }
    /* Grid items — single column, centered text */
    .amaas-why .amaas-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .amaas-why .amaas-item {
        text-align: center !important;
    }
    .amaas-why .amaas-item h3,
    .amaas-why .amaas-item p {
        text-align: center !important;
    }

    /* --- Arabic About page (page-id-9658) — same overflow fix --- */
    .page-id-9658 {
        overflow-x: hidden !important;
    }

    /* --- Cards section: "We build luxury..." — fix black text --- */
    .amaas-we-have-sec .amaas-head.container.center {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }
    .amaas-we-have-sec .amaas-sec-title {
        text-align: center !important;
    }
    .amaas-we-have-sec .amaas-btns {
        justify-content: center !important;
    }

    /* Cards grid: single column on mobile */
    .amaas-we-have-sec .amaas-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .amaas-we-have-sec .amaas-item {
        text-align: center !important;
    }
    .amaas-we-have-sec .amaas-tt1,
    .amaas-we-have-sec .amaas-tt2 {
        text-align: center !important;
    }
    .amaas-we-have-sec .amaas-link-row {
        text-align: center !important;
        justify-content: center !important;
    }
}

/* =============================================
   Phase 15: Cards section — GLOBAL (desktop + mobile)
   Fix black text + white descriptions + neat spacing
   ============================================= */

/* Fix inherited black color in the "We build" section */
.amaas-we-have-sec {
    color: #fff !important;
}
.amaas-we-have-sec .amaas-sec-title {
    color: rgba(255, 255, 255, 0.96) !important;
}
.amaas-we-have-sec .amaas-sec-title span {
    color: rgba(255, 255, 255, 0.96) !important;
}
/* Register button text fix */
.amaas-we-have-sec .amaas-btns a {
    color: #fff !important;
}

/* Card descriptions → white (user request) — higher specificity to override inline !important */
.amaas-we-have-sec .amaas-item p.amaas-tt2,
.amaas-we-have-sec .amaas-box p.amaas-tt2,
section.amaas-we-have-sec .amaas-tt2 {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Card title stays gold — higher specificity */
.amaas-we-have-sec .amaas-item p.amaas-tt1,
.amaas-we-have-sec .amaas-box p.amaas-tt1,
section.amaas-we-have-sec .amaas-tt1 {
    color: #dfc187 !important;
}

/* Link row stays gold — higher specificity */
.amaas-we-have-sec .amaas-item .amaas-link,
.amaas-we-have-sec .amaas-item .amaas-link span,
section.amaas-we-have-sec .amaas-link,
section.amaas-we-have-sec .amaas-link span {
    color: #dfc187 !important;
}

/* Neat spacing for cards */
.amaas-we-have-sec .amaas-item {
    padding-bottom: 30px !important;
}
.amaas-we-have-sec .amaas-tt1 {
    margin-bottom: 8px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}
.amaas-we-have-sec .amaas-tt2 {
    margin-bottom: 16px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.amaas-we-have-sec .amaas-link-row {
    margin-top: 8px !important;
}
.amaas-we-have-sec .amaas-fig {
    margin-bottom: 20px !important;
}

/* ==========================================================================
/* [PHASE 16 FOOTER — CONSOLIDATED INTO PHASE 25 BLOCK AT END OF FILE] */



































































































/* ===================================================================
   FIX 3: Arabic desktop date picker — also swap Slick native arrows
   =================================================================== */
@media (min-width: 768px) {
    html[dir="rtl"] .property-schedule-tour-day-form-slide .slick-prev {
        left: auto !important;
        right: -16px !important;
    }
    html[dir="rtl"] .property-schedule-tour-day-form-slide .slick-next {
        right: auto !important;
        left: -16px !important;
    }
}
/* Hide Slick native arrows on mobile — use custom arrows only */
@media (max-width: 767px) {
    .property-schedule-tour-day-form-slide .slick-prev,
    .property-schedule-tour-day-form-slide .slick-next {
        display: none !important;
    }
}

/* Fix 7c: Arabic schedule tour — arrows not transformed/flipped by CSS */
html[lang="ar"] .tour-day-form-slide-arrow,
html[dir="rtl"] .tour-day-form-slide-arrow {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ===================================================================
   FIX 5b: WhatsApp button inside agent form container — HIDE
   When user clicks "Send Message", the form opens with a WhatsApp
   button in the same container. Only the form should show.
   Very high specificity to override theme defaults.
   =================================================================== */
body.single-property .property-form .hz-btn-whatsapp,
body.single-property .property-form a.hz-btn-whatsapp,
body .property-form a.btn.btn-secondary-outlined.w-100.hz-btn-whatsapp,
body .property-schedule-tour-type-form .hz-btn-whatsapp,
body .property-schedule-tour-type-form a.hz-btn-whatsapp,
body .d-flex.flex-column.flex-md-row.gap-2 .hz-btn-whatsapp,
body .d-flex.flex-column.flex-md-row.gap-2 a.hz-btn-whatsapp {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Keep WhatsApp in mobile contact bar */
body .mobile-property-contact .hz-btn-whatsapp,
body .mobile-property-contact a.hz-btn-whatsapp {
    display: inline-flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
/* Keep WhatsApp in desktop lightbox form panel — ULTRA HIGH specificity to beat hide rule (0,5,2) */
body.single-property .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.w-100.hz-btn-whatsapp,
body.single-property .lightbox-form-wrap .property-form a.hz-btn-whatsapp,
body.single-property .lightbox-form-wrap .property-form .hz-btn-whatsapp,
body.single-property .property-lightbox .lightbox-form-wrap .property-form a.btn.hz-btn-whatsapp,
body .property-lightbox .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.hz-btn-whatsapp {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    min-height: 42px !important;
    margin: 0 0 8px 0 !important;
    padding: 10px 16px !important;
    background-color: #dfc187 !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
}
/* Reversed hover for the lightbox WhatsApp button — MUST beat the (0,6,2)
   rest-gold keep-visible rules above. Mirroring those selectors + :hover
   raises specificity to (0,7,2) so the reversal wins (black bg + gold text). */
body.single-property .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.w-100.hz-btn-whatsapp:hover,
body.single-property .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.w-100.hz-btn-whatsapp:focus,
body.single-property .lightbox-form-wrap .property-form a.hz-btn-whatsapp:hover,
body.single-property .lightbox-form-wrap .property-form .hz-btn-whatsapp:hover,
body.single-property .property-lightbox .lightbox-form-wrap .property-form a.btn.hz-btn-whatsapp:hover,
body.single-property .property-lightbox .lightbox-form-wrap .property-form a.btn.hz-btn-whatsapp:focus,
body .property-lightbox .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.hz-btn-whatsapp:hover,
body .property-lightbox .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.hz-btn-whatsapp:focus {
    background-color: #111111 !important;
    color: #dfc187 !important;
    border: 1px solid #dfc187 !important;
    border-color: #dfc187 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Its icon + inner text flip to gold on that hover */
body .property-lightbox .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.hz-btn-whatsapp:hover i,
body .property-lightbox .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.hz-btn-whatsapp:hover .houzez-icon,
body .property-lightbox .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.hz-btn-whatsapp:hover span,
body .property-lightbox .lightbox-form-wrap .property-form a.btn.btn-secondary-outlined.hz-btn-whatsapp:hover bdi {
    color: #dfc187 !important;
    fill: #dfc187 !important;
}
/* Phase 23: WhatsApp in mobile modal — now hidden (see Phase 23 section) */

/* ===================================================================
   FIX 6: Form validation/error messages — brand-styled
   =================================================================== */
.houzez-msg,
.hz-msg,
.houzez-msg-error,
.houzez-msg-success,
.property-form .message,
.property-form .error-message,
.wpcf7-not-valid-tip,
.houzez_agent_property_form + .message,
.agent-form-wrap .message,
.houzez-schedule-tour-msg,
.houzez-agent-form-msg {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    margin-top: 8px !important;
}
/* Error state — soft red with gold accent */
.houzez-msg.houzez-msg-error,
.hz-msg.error,
.houzez-msg-error,
.property-form .error-message,
.houzez-schedule-tour-msg.text-danger,
.houzez-agent-form-msg.text-danger {
    background-color: rgba(223, 193, 135, 0.08) !important;
    border: 1px solid #dfc187 !important;
    color: #a0522d !important;
}
/* Success state */
.houzez-msg.houzez-msg-success,
.hz-msg.success,
.houzez-msg-success,
.houzez-schedule-tour-msg.text-success,
.houzez-agent-form-msg.text-success {
    background-color: rgba(223, 193, 135, 0.08) !important;
    border: 1px solid #dfc187 !important;
    color: #2e7d32 !important;
}
/* Individual field validation tips */
.wpcf7-not-valid-tip {
    color: #a0522d !important;
    font-size: 12px !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
}

/* ===================================================================
   FIX 9: Floor plan images — ensure visible and styled
   =================================================================== */
.floor-plan-wrap img,
.floor-plans-tabs img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}
.floor-plan-wrap a[data-lightbox] {
    display: block !important;
    cursor: pointer !important;
}

/* ===================================================================
   FIX 8: Mobile overview wrapper — prevent flash/layout shift
   Hide the original desktop overview on mobile before JS runs.
   The JS creates the mobile version — this hides the original.
   =================================================================== */
@media (max-width: 991px) {
    /* The original desktop overview container starts hidden on mobile */
    .property-overview-data:not(.amaas-ov-ready-inner) {
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    .property-overview-data.amaas-ov-ready-inner {
        opacity: 1 !important;
    }
}

/* ============================================================
   PHASE 18 — COMPREHENSIVE 11-FIX UPDATE
   ============================================================ */

/* --- Fix 4: Mobile send message form — crosshatch background style --- */
@media (max-width: 991px) {
    .mobile-property-contact .agent-form,
    .mobile-property-contact .houzez-agent-form,
    .mobile-property-contact form {
        background-color: #f0f0f0 !important;
        background-image: none !important; /* AMAAS_BG_LIGHTGREY_V1 crosshatch removed */
        border-radius: 12px !important;
        padding: 20px !important;
        border: 1px solid rgba(223, 193, 135, 0.3) !important;
    }
    .mobile-property-contact .agent-form input[type="text"],
    .mobile-property-contact .agent-form input[type="email"],
    .mobile-property-contact .agent-form input[type="tel"],
    .mobile-property-contact .agent-form textarea,
    .mobile-property-contact .houzez-agent-form input,
    .mobile-property-contact .houzez-agent-form textarea {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(223, 193, 135, 0.4) !important;
        color: #1a1a2e !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
    }
    .mobile-property-contact .agent-form input::placeholder,
    .mobile-property-contact .houzez-agent-form input::placeholder,
    .mobile-property-contact .agent-form textarea::placeholder,
    .mobile-property-contact .houzez-agent-form textarea::placeholder {
        color: #888 !important;
    }
    .mobile-property-contact .agent-form input:focus,
    .mobile-property-contact .houzez-agent-form input:focus,
    .mobile-property-contact .agent-form textarea:focus,
    .mobile-property-contact .houzez-agent-form textarea:focus {
        border-color: #dfc187 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(223, 193, 135, 0.2) !important;
    }
    /* Send message submit button — MUST be visible with gold styling */
    .mobile-property-contact .agent-form .btn,
    .mobile-property-contact .agent-form button[type="submit"],
    .mobile-property-contact .agent-form input[type="submit"],
    .mobile-property-contact .houzez-agent-form .btn,
    .mobile-property-contact .houzez_agent_property_form,
    .mobile-property-contact .houzez_agent_property_form.btn,
    .mobile-property-contact .houzez_agent_property_form.btn-secondary {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #dfc187 !important;
        color: #111111 !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 12px 24px !important;
        font-weight: 700 !important;
        width: 100% !important;
        margin-top: 12px !important;
        cursor: pointer !important;
        min-height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        overflow: visible !important;
    }
    .mobile-property-contact .agent-form .btn:hover,
    .mobile-property-contact .houzez_agent_property_form:hover {
        background: #c9a96e !important;
    }
    /* Agent name — dark text on light crosshatch background */
    .mobile-property-contact .agent-form .agent-name,
    .mobile-property-contact .houzez-agent-form .agent-name {
        color: #1a1a2e !important;
    }
    .mobile-property-contact .agent-form .agent-link a {
        color: #926119 !important;
    }
}

/* --- Fix 5: Mobile gallery image count — show and position opposite of Watch Video --- */
@media (max-width: 767px) {
    .hs-gallery-v5-grid .img-wrap-3-text,
    .property-banner-grid-wrap .img-wrap-3-text,
    .img-wrap-3-text {
        display: flex !important;
        visibility: visible !important;
        position: absolute !important;
        bottom: 15px !important;
        right: 15px !important;
        left: auto !important;
        z-index: 10 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: #fff !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
        font-size: 13px !important;
    }
}

/* --- Fix 6b: Features section — center the whole section on both desktop and mobile --- */
.fw-property-features-wrap .block-content-wrap,
#property-features-wrap .block-content-wrap,
.property-features-wrap .block-content-wrap {
    display: flex !important;
    justify-content: center !important;
}
.fw-property-features-wrap .block-content-wrap ul,
#property-features-wrap .block-content-wrap ul,
.property-features-wrap .block-content-wrap ul {
    justify-content: center !important;
}
.fw-property-features-wrap .block-content-wrap ul li,
#property-features-wrap .block-content-wrap ul li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-direction: row !important;
}
/* Arabic features — icon first in RTL reading order (right side) */
html[dir="rtl"] .fw-property-features-wrap .block-content-wrap ul li,
html[lang="ar"] .fw-property-features-wrap .block-content-wrap ul li {
    flex-direction: row !important;
}

/* Fix 6c: Force features section centering on both desktop and mobile */
.fw-property-features-wrap,
#property-features-wrap,
.property-features-wrap {
    text-align: center !important;
}
.fw-property-features-wrap .block-content-wrap {
    margin: 0 auto !important;
    max-width: 100% !important;
    text-align: center !important;
}
/* Mobile features — ensure centered regardless of RTL */
@media (max-width: 768px) {
    .fw-property-features-wrap .block-content-wrap ul {
        justify-content: center !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .fw-property-features-wrap .block-content-wrap ul li {
        justify-content: center !important;
        text-align: center !important;
    }
}
/* Arabic features — force LTR flex to ensure icon→label order while keeping text RTL */
html[lang="ar"] .fw-property-features-wrap .block-content-wrap ul {
    direction: ltr !important;
}
html[lang="ar"] .fw-property-features-wrap .block-content-wrap ul li {
    direction: rtl !important;
    justify-content: center !important;
}

/* [FIX 9 FOOTER NAV — CONSOLIDATED INTO PHASE 25 BLOCK AT END OF FILE] */

























/* --- Fix 10b: Contact Us Elementor section — ensure transparent on ALL pages --- */
.e-con[data-id="969f999"],
.elementor-element[data-id="969f999"] {
    background: transparent !important;
    background-color: transparent !important;
}
.e-con[data-id="969f999"] > .e-con-inner,
.elementor-element[data-id="969f999"] > .e-con-inner {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- Fix 11: Breadcrumb on mobile/tablet — align with menu icon (hamburger) start --- */
/* Mobile header (#header-mobile) uses padding: 0 10px, so breadcrumb must match */
@media (max-width: 991px) {
    .page-title-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .page-title-wrap .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .page-title-wrap .breadcrumb-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html[dir="rtl"] .page-title-wrap .breadcrumb-wrap {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    /* Elementor breadcrumb sections — same alignment */
    .e-con:has(.breadcrumb-wrap) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .breadcrumb-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .page-title-wrap .breadcrumb-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Mobile title section background — transparent */
    .page-title-wrap,
    .page-title-wrap .container,
    .amaas-title-moved {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* --- Fix 3b: Page title wrap (desktop) — mobile rearranged section bg fix --- */
.page-title-wrap.d-none.d-md-block {
    background: transparent !important;
    background-color: transparent !important;
}
.amaas-title-moved {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===================================================================
   FIX 20A: SHARE DROPDOWN — Dark text + icons on white background
   Theme/Bootstrap override causes white text on white bg
   =================================================================== */
.item-tool-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    min-width: 180px !important;
}
.item-tool-dropdown-menu .dropdown-item,
.item-tool-dropdown-menu a.dropdown-item,
.item-tool-dropdown-menu div.dropdown-item {
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    background: transparent !important;
    transition: background 0.2s ease !important;
}
.item-tool-dropdown-menu .dropdown-item:hover,
.item-tool-dropdown-menu a.dropdown-item:hover {
    background: rgba(223, 193, 135, 0.15) !important;
    color: #1a1a2e !important;
}
/* Share on: label */
.item-tool-dropdown-menu .dropdown-item:first-child {
    color: #888888 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    pointer-events: none !important;
    padding: 6px 16px !important;
}
/* Social icons inside dropdown */
.item-tool-dropdown-menu .dropdown-item i,
.item-tool-dropdown-menu .dropdown-item .houzez-icon,
.item-tool-dropdown-menu .dropdown-item svg {
    color: #dfc187 !important;
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* ===================================================================
   FIX 20B: MOBILE FORM MODAL — Ensure scrollable + button accessible
   On short screens, the form may overflow. Ensure modal body scrolls.
   =================================================================== */
#mobile-property-form .modal-body {
    overflow-y: auto !important;
    max-height: calc(100vh - 70px) !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Ensure the form buttons area is always reachable with padding at bottom */
#mobile-property-form .property-form-wrap {
    padding-bottom: 16px !important;
}
/* Mobile form — button row flex column for proper stacking */
#mobile-property-form .d-flex.flex-column.flex-md-row.gap-2,
#mobile-property-form .property-schedule-tour-type-form.d-flex {
    flex-direction: column !important;
    gap: 8px !important;
}
/* Ensure Send Message submit button is ALWAYS visible in mobile modal */
#mobile-property-form .houzez_agent_property_form.btn,
#mobile-property-form .houzez-ele-button.houzez_agent_property_form.btn,
#mobile-property-form button.houzez_agent_property_form {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #dfc187 !important;
    color: #111111 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    height: auto !important;
    min-height: 48px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
}

/* ==========================================================================
   PHASE 21 FIXES — v2 (comprehensive rewrite)
   ========================================================================== */

/* ─── Phase 23: Mobile form modal — Call/WhatsApp/duplicate Send hidden ───
   These buttons are already on the mobile contact bar. Only the form submit
   "Send Message" button should appear inside the modal.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── 21-2: ALL close buttons → gold color ────────────────────────────── */
/* Modal close buttons (agent form, lightbox, any Bootstrap modal) */
.mobile-property-form .btn-close,
.mobile-property-form .modal-header .btn-close,
#mobile-property-form .btn-close,
.modal .btn-close,
.modal .modal-header .btn-close {
    filter: none !important;
    opacity: 1 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dfc187'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
}
.mobile-property-form .btn-close:hover,
#mobile-property-form .btn-close:hover,
.modal .btn-close:hover {
    opacity: 0.8 !important;
}

/* Elementor WhatsApp floating chat close button → gold */
/* Fix: eicon-close must use eicons font (protected in font snippet) */
.e-contact-buttons__close-button,
.e-contact-buttons__close-button i,
.e-contact-buttons__close-button .eicon-close,
.e-contact-buttons__close-button i.eicon-close {
    color: #dfc187 !important;
    fill: #dfc187 !important;
}
.e-contact-buttons__close-button {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Ensure eicon-close glyph renders with correct font */
.e-contact-buttons__close-button .eicon-close {
    font-family: 'eicons' !important;
    font-size: 18px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
/* Fallback: if eicon font fails, inject close via CSS content */
.e-contact-buttons__close-button .eicon-close::before {
    font-family: 'eicons' !important;
    color: #dfc187 !important;
}

/* ─── 21-3: Homepage slider card — price prefix/postfix → BLACK ────────── */
.property-slider-item .price-prefix,
.property-slider-item .price-postfix,
.property-slider-item .item-price .price-prefix,
.property-slider-item .item-price .price-postfix,
.property-slider .price-prefix,
.property-slider .price-postfix,
.property-slider .item-price .price-prefix,
.property-slider .item-price .price-postfix,
body .property-slider-item .price-prefix,
body .property-slider-item .price-postfix {
    color: #1a1a2e !important;
}

/* ─── 21-3b: Property names → consistent BLACK on all cards ──────────── */
/* Homepage top slider card property names */
.property-slider-item .item-title,
.property-slider-item .item-title a,
.property-slider-item h3,
.property-slider-item h3 a,
.property-slider-item h2,
.property-slider-item h2 a,
body .property-slider-item .item-title a {
    color: #1a1a2e !important;
}
/* Featured properties / listing cards — property names */
.item-wrap .item-title,
.item-wrap .item-title a,
.item-listing-wrap .item-title,
.item-listing-wrap .item-title a,
.houzez-listing-card .item-title,
.houzez-listing-card .item-title a,
.property-card .item-title,
.property-card .item-title a,
.item-body .item-title a,
.item-body .item-title {
    color: #1a1a2e !important;
}

/* ─── 21-3c: Slider card amenity icons → extra bold / visible ────────── */
.property-slider-item .item-amenities i,
.property-slider-item .item-amenities .houzez-icon,
.property-slider-item .amenities-icon,
.property-slider-item .item-amenities img {
    font-weight: 900 !important;
    -webkit-text-stroke: 0.5px currentColor;
    font-size: 18px !important;
}
/* SAR symbol on slider cards — bolder/more visible */
.property-slider-item .sar-symbol-svg,
.property-slider-item .item-price .sar-symbol-svg {
    width: 22px !important;
    height: 22px !important;
    font-weight: bold !important;
    filter: brightness(0) saturate(100%) !important;
}
/* Reduce slider card background opacity a bit */
.property-slider-item {
    background: rgba(255,255,255,0.7) !important;
}

/* ─── 21-4: Price prefix spacing — add gap between prefix and price ───── */
.price-prefix {
    margin-right: 4px !important;
}
html[lang="ar"] .price-prefix,
html[dir="rtl"] .price-prefix {
    margin-right: 0 !important;
    margin-left: 4px !important;
}
/* Also ensure postfix has spacing from price */
.price-postfix {
    margin-left: 2px !important;
}
html[lang="ar"] .price-postfix,
html[dir="rtl"] .price-postfix {
    margin-left: 0 !important;
    margin-right: 2px !important;
}

/* ─── 21-5: Featured properties section — SAR symbol → gold like price ── */
.item-wrap .sar-symbol-svg,
.item-wrap .item-price .sar-symbol-svg,
.item-wrap .item-price-wrap .sar-symbol-svg,
.item-listing-wrap .sar-symbol-svg,
.houzez-listing-price-v1 .sar-symbol-svg,
.item-body .sar-symbol-svg,
.item-price .sar-symbol-svg {
    filter: brightness(0) saturate(100%) invert(80%) sepia(35%) saturate(350%) hue-rotate(6deg) brightness(95%) contrast(88%) !important;
}
/* On listing cards, ensure consistent SAR sizing */
body:not(.single-property) .item-wrap .sar-symbol-svg,
body:not(.single-property) .item-price .sar-symbol-svg {
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle !important;
    margin-right: 2px !important;
}

/* ─── 21-6: Footer contact icons — expert alignment ───────────────────── */
/* Desktop: icon + text on same baseline, aligned left */
.widget-contact-us .contact-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.widget-contact-us .contact-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
}
.widget-contact-us .contact-list li i,
.widget-contact-us .contact-list li .houzez-icon {
    font-size: 16px !important;
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    color: #dfc187 !important;
    line-height: 1.7 !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.widget-contact-us .contact-list li span,
.widget-contact-us .contact-list li a {
    flex: 1 !important;
    line-height: 1.7 !important;
    word-break: break-word !important;
}

/* ─── 21-7: Footer mobile centering — EXPERT UI/UX ───────────────────── */
/* [PHASE 21 FOOTER — CONSOLIDATED INTO PHASE 25 BLOCK AT END OF FILE] */















































































































/* ============================================================
   PHASE 22 — Homepage Typography + Property Title Consistency
   + Contact Info Hide + Spacing Normalization
   ============================================================ */

/* ------------------------------------------------------------------
   22.1 — Homepage Section Titles (houzez_section_title)
   "About Amaas", "Discover Featured Locations", "Explore New Lifestyles"
   → 36px, 36px line-height, normal letter-spacing, capitalize
   ------------------------------------------------------------------ */
.houzez_section_title {
    font-size: 36px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
}

/* ------------------------------------------------------------------
   22.2 — "AMAAS REAL ESTATE" heading
   → 36px, 36px line-height, normal letter-spacing, capitalize (NOT uppercase)
   ------------------------------------------------------------------ */
[data-id="58d63e90"] .elementor-heading-title.elementor-size-default {
    font-size: 36px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
}

/* ------------------------------------------------------------------
   22.3 — Our Vision / Our Mission / Our Goals — icon box titles
   → h3, 28px font-size, weight 600
   ------------------------------------------------------------------ */
[data-id="7ea4ef08"] .elementor-icon-box-title,
[data-id="50f8e2e9"] .elementor-icon-box-title,
[data-id="304ea944"] .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
}

/* ------------------------------------------------------------------
   22.4 — Icon box descriptions (Our Vision/Mission/Goals paragraphs)
   → justified, Montserrat, 18px
   Fix: font-family was incorrectly set to houzez-iconfont by font enforcement
   ------------------------------------------------------------------ */
.elementor-icon-box-description {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    text-align: justify !important;
    font-family: 'Montserrat', sans-serif !important;
}
/* Arabic override — STV font for Arabic pages */
html[lang="ar"] .elementor-icon-box-description {
    font-family: 'Amaas STV Arabic Font', 'STV', sans-serif !important;
}

/* ------------------------------------------------------------------
   22.5 — "Our Channels" heading
   → 36px, 36px line-height, normal letter-spacing, capitalize, weight 700
   ------------------------------------------------------------------ */
[data-id="661c97f"] .elementor-heading-title.elementor-size-default {
    font-size: 36px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
}

/* ------------------------------------------------------------------
   22.6 — "Premium Properties Recommendations" and "Talk to our property experts"
   Ensure consistent with other headings
   ------------------------------------------------------------------ */
[data-id="98fa98f"] .elementor-heading-title,
[data-id="d726a82"] .elementor-heading-title {
    font-size: 36px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
}


/* ==================================================================
   22.7 — Property Page Section Titles — CONSISTENT across all pages
   (Description, Details, Features, Address, Book a Viewing,
    Enquire About This Property, Floor Plans, Project Buildings)
   → 28px, 600 weight, centered, gold color, consistent on EN + AR
   ================================================================== */

/* English property pages — section titles */
.single-property .block-title-wrap h2,
.single-property .block-title-wrap h3,
.single-property .block-title-wrap h4,
.single-property .property-overview .block-title-wrap h2,
.single-property .property-overview .block-title-wrap h3 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    letter-spacing: 0.5px !important;
    color: #dfc187 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* Arabic property pages — explicit center alignment per user request */
html[lang="ar"] .single-property .block-title-wrap h2,
html[lang="ar"] .single-property .block-title-wrap h3,
html[lang="ar"] .single-property .block-title-wrap h4 {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #dfc187 !important;
    margin-bottom: 0 !important;
}

/* Details title inside fw-property-details-wrap */
.single-property .fw-property-details-wrap .block-title-wrap h3 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    color: #dfc187 !important;
}

/* Enquire About This Property title */
.single-property .houzez_agent_property_form .block-title-wrap h3,
.single-property form .block-title-wrap h3 {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    color: #dfc187 !important;
    text-align: center !important;
}


/* ==================================================================
   22.8 — HIDE "Contact Information" Section
   (on BOTH English and Arabic property pages)
   IMPORTANT: The Enquire form lives INSIDE the same .block-wrap
   as the Contact Info. We must hide ONLY the heading row and
   agent details, NOT the entire block-wrap or the Enquire form.
   ================================================================== */

/* Hide the Contact Information heading row */
.single-property .block-title-wrap:has(#contact-info-heading) {
    display: none !important;
}
.single-property #contact-info-heading {
    display: none !important;
}

/* Hide the agent details card ONLY inside the Contact Information section (sidebar) */
/* DO NOT use broad ".single-property .agent-details" — it hides lightbox + mobile too! */
.single-property .block-content-wrap > .agent-details,
.single-property .block-content-wrap > .d-flex:has(.agent-details) {
    display: none !important;
}

/* EXPLICITLY SHOW agent details in lightbox form, sidebar property form, and mobile */
.property-lightbox .agent-details,
.property-lightbox .lightbox-form-wrap .agent-details,
#property-lightbox .agent-details,
#property-lightbox .lightbox-form-wrap .agent-details {
    display: block !important;
    visibility: visible !important;
}
.single-property .property-form-wrap .agent-details,
.single-property .property-form .agent-details {
    display: block !important;
    visibility: visible !important;
}
.mobile-property-contact .agent-details,
#mobile-property-form .agent-details {
    display: block !important;
    visibility: visible !important;
}

/* ==================================================================
   22.8b — Floor Plan Tabs — Gold Active State
   Active tab gets gold color and gold bottom border
   ================================================================== */
.fw-property-floor-plans-wrap .nav-tabs .nav-link.active,
.fw-property-floor-plans-wrap .nav-tabs .nav-link.active:focus {
    color: #dfc187 !important;
    border-bottom-color: #dfc187 !important;
    border-bottom-width: 2px !important;
    font-weight: 600 !important;
}
.fw-property-floor-plans-wrap .nav-tabs .nav-link {
    color: #555 !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
    padding: 8px 16px !important;
    font-size: 15px !important;
}
.fw-property-floor-plans-wrap .nav-tabs .nav-link:hover {
    color: #dfc187 !important;
    border-bottom-color: rgba(223, 193, 135, 0.5) !important;
}

/* ==================================================================
   22.8c — Floor Plan Layout — Image Centered + Title Below
   Desktop: stacked layout (image centered, then title centered below)
   Mobile: title + description center-aligned
   ================================================================== */

/* Desktop: stack columns vertically, image on top, title below */
.fw-property-floor-plans-wrap .floor-plan-wrap .row {
    flex-direction: column !important;
    align-items: center !important;
}
.fw-property-floor-plans-wrap .floor-plan-wrap .row > .col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    order: 1 !important;
    margin-bottom: 20px !important;
}
.fw-property-floor-plans-wrap .floor-plan-wrap .row > .col-lg-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    order: 2 !important;
}

/* Center the image on desktop — limit width so it doesn't stretch too wide */
.fw-property-floor-plans-wrap .floor-plan-wrap .col-lg-4 a[data-lightbox] {
    display: inline-block !important;
    margin: 0 auto !important;
}
.fw-property-floor-plans-wrap .floor-plan-wrap .col-lg-4 img.img-fluid {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Title + description centered */
.fw-property-floor-plans-wrap .floor-plan-title {
    text-align: center !important;
}
.fw-property-floor-plans-wrap .floor-plan-description,
.fw-property-floor-plans-wrap .floor-plan-description p {
    text-align: center !important;
}

/* Spec details row centered */
.fw-property-floor-plans-wrap .floor-plan-wrap .d-flex.gap-4 {
    justify-content: center !important;
}

/* Mobile: image can be larger */
@media (max-width: 991px) {
    .fw-property-floor-plans-wrap .floor-plan-wrap .col-lg-4 img.img-fluid {
        max-width: 100% !important;
    }
}


/* ==================================================================
   22.9 — Consistent Spacing Between Title Wraps and Content
   All .block-title-wrap → uniform padding/margin
   All .block-content-wrap → uniform top spacing
   Desktop AND mobile — with and without units
   ================================================================== */

/* Title wraps — consistent vertical rhythm */
.single-property .block-title-wrap {
    padding-top: 24px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
}

/* Content wraps — consistent top spacing from title */
.single-property .block-content-wrap {
    padding-top: 16px !important;
    margin-top: 0 !important;
}

/* Details section title wrap (has different structure) */
.single-property .fw-property-details-wrap .block-title-wrap {
    padding-top: 24px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
}

/* Block wraps — consistent spacing between sections */
.single-property .block-wrap + .block-wrap {
    margin-top: 8px !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .single-property .block-title-wrap {
        padding-top: 20px !important;
        padding-bottom: 10px !important;
    }
    .single-property .block-content-wrap {
        padding-top: 12px !important;
    }
    .single-property .block-wrap + .block-wrap {
        margin-top: 4px !important;
    }
}

/* Address section — "Get Direction" button alignment with centered title */
.single-property .block-title-wrap.d-flex.justify-content-between {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
}
.single-property .block-title-wrap.d-flex.justify-content-between h2,
.single-property .block-title-wrap.d-flex.justify-content-between.align-items-center h2,
.single-property .block-title-wrap.d-flex.justify-content-between.align-items-center.flex-wrap h2 {
    width: 100% !important;
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    letter-spacing: 0.5px !important;
    color: #dfc187 !important;
}


/* ==================================================================
   22.10 — Arabic Homepage — Same heading styles as English
   ================================================================== */
html[lang="ar"] .houzez_section_title {
    font-size: 36px !important;
    line-height: 36px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
}

html[lang="ar"] .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
}

html[lang="ar"] .elementor-icon-box-description {
    font-size: 18px !important;
    text-align: justify !important;
    line-height: 28px !important;
}


/* ==================================================================
   Phase 23 — Mobile Send Message Modal: Hide redundant buttons
   Only the form submit "إرسال رسالة" should show inside the modal.
   Call + WhatsApp + duplicate Send Message are ALREADY on the
   mobile contact bar — no need to repeat them in the modal.
   ================================================================== */
#mobile-property-form .hz-btn-call,
#mobile-property-form .hz-btn-whatsapp {
    display: none !important;
}
/* Keep .houzez-send-message VISIBLE — it IS the form submit on real mobile */


/* Phase 23 — Inline @import / @font-face cleanup is handled by JS in snippet 10412 */


/* ==========================================================================
   PHASE 25: DEFINITIVE MOBILE FOOTER CENTERING (≤991px)
   Replaces: Phase 16 (lines 5398-5492), Fix 9 (lines 5832-5855),
             Phase 21 (lines 6196-6305)
   This is the SINGLE FINAL authority on mobile footer layout.
   ========================================================================== */
@media (max-width: 991px) {

    /* ── A. Footer top columns: stack full-width, center content ── */
    .footer-top-wrap .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    .footer-top-wrap .row > [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
    /* Hide empty spacer column */
    .footer-top-wrap .row > .col-lg-1 {
        display: none !important;
    }

    /* ── B. Logo / About image: centered ── */
    .footer-top-wrap .widget-about-image,
    .footer-top-wrap .widget-about-site .widget-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .footer-top-wrap .widget-about-image img,
    .footer-top-wrap .footer-widget img.attachment-full {
        display: block !important;
        margin: 0 auto !important;
    }

    /* ── C. About / description text: centered ── */
    .footer-top-wrap .widget-about-site .widget-content,
    .footer-top-wrap .widget-about-site .widget-content p,
    .footer-top-wrap .widget-about-site p,
    .footer-top-wrap .footer-widget p,
    .footer-top-wrap .footer-widget .textwidget,
    .footer-top-wrap .footer-widget .widget-body p {
        text-align: center !important;
    }

    /* ── D. "Read more" link: centered ── */
    .footer-top-wrap .widget-read-more {
        text-align: center !important;
    }

    /* ── E. Widget titles: centered ── */
    .footer-top-wrap .widget-title,
    .footer-top-wrap .footer-widget .widget-title,
    .footer-top-wrap h3,
    .footer-top-wrap h4 {
        text-align: center !important;
    }

    /* ── F. Newsletter form: centered ── */
    .footer-top-wrap .es_form_wrapper,
    .footer-top-wrap .ig_es_subscription_form {
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    /* ── G. Discover / taxonomy nav links: stacked + centered ── */
    .footer-top-wrap .widget-taxonomy .widget-body ul,
    .footer-top-wrap .footer-widget .menu,
    .footer-top-wrap .footer-widget .widget-body ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .footer-top-wrap .widget-taxonomy .widget-body ul li,
    .footer-top-wrap .footer-widget .menu li {
        text-align: center !important;
        float: none !important;
        display: block !important;
        width: auto !important;
    }
    .footer-top-wrap .widget-taxonomy .widget-body ul li a,
    .footer-top-wrap .footer-widget .menu li a {
        text-align: center !important;
        display: inline-block !important;
        padding: 4px 0 !important;
    }

    /* -- H. Contact list: icon+text pairs centered as a GROUP --
       The UL is a flex column centered. Each LI is a flex item, so its
       specified inline-flex blockifies to flex automatically (expected,
       harmless). The address/email span uses flex:1 and can wrap to 2
       lines with the 2nd line shorter than the 1st -- text-align must be
       center (inherited down to the span) or that shorter line hugs one
       edge instead of balancing, which reads as "not centered" even
       though the icon+span box itself is centered by the UL. */
    .footer-top-wrap .widget-contact-us .contact-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .footer-top-wrap .widget-contact-us .contact-list li {
        display: inline-flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 10px !important;
        width: auto !important;
        max-width: 90% !important;
    }
    /* RTL: contact list items -- icon right-aligned before text (natural RTL flow) */
    html[lang="ar"] .footer-top-wrap .widget-contact-us .contact-list li,
    html[dir="rtl"] .footer-top-wrap .widget-contact-us .contact-list li {
        text-align: center !important;
        flex-direction: row !important;
    }

    /* ── I. Links block (Contact Us, Terms, Privacy): centered ── */
    .footer-top-wrap .widget_block .wp-block-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .footer-top-wrap .widget_block .wp-block-list li {
        text-align: center !important;
    }

    /* ── J. Social icons: centered row ── */
    .footer-top-wrap .social-list,
    .footer-top-wrap .widget-social .social-list {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ── K. Widget bottom spacing ── */
    .footer-top-wrap .footer-widget {
        margin-bottom: 16px !important;
    }
    .footer-top-wrap .row > [class*="col-"]:last-child .footer-widget:last-child {
        margin-bottom: 0 !important;
    }

    /* ── L. BOTTOM FOOTER BAR: centered ── */
    .footer-bottom-wrap .container,
    .footer-bottom-wrap .row {
        text-align: center !important;
    }
    .footer-bottom-wrap .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    /* Bottom nav links: horizontal wrap, centered */
    .footer-bottom-wrap .footer-nav,
    .footer-bottom-wrap .footer-nav .nav,
    .footer-bottom-wrap .footer-nav ul,
    .footer-bottom-wrap .menu,
    .footer-bottom-wrap .d-flex,
    .footer-wrap .footer-nav,
    .footer-wrap .footer-nav .nav,
    .footer-wrap .footer-nav ul,
    footer .widget_nav_menu ul,
    footer .menu {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px 12px !important;
    }
    .footer-bottom-wrap .footer-nav li,
    .footer-bottom-wrap .menu li,
    .footer-wrap .footer-nav .nav-item,
    .footer-wrap .footer-nav li,
    footer .widget_nav_menu li,
    footer .menu li {
        float: none !important;
        text-align: center !important;
    }
    /* Copyright text centered */
    .footer-bottom-wrap .copyright,
    .footer-bottom-wrap .copyright-text,
    .footer-bottom-wrap p {
        text-align: center !important;
    }
}

/* ============================================================
   CUSTOM PROPERTY SECTIONS — Location Hub & Guarantees
   Reusable sections added manually to property descriptions.
   Styled to match existing property page sections (28px/600/gold).
   ============================================================ */

/* --- Shared base for both custom sections --- */
.amaas-custom-section {
    background: transparent !important;
    padding: 40px 0;
    direction: rtl;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Title — match property page section titles (28px/600/centered/gold) */
.amaas-custom-section .block-title-wrap {
    margin-bottom: 10px !important;
}
.amaas-custom-section .block-title-wrap h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--amaas-gold, #dfc187) !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.amaas-custom-section .block-title-wrap h2 span {
    color: inherit !important;
}

/* Subtitle paragraph */
.amaas-custom-section .hub-subtitle,
.amaas-custom-section .guarantees-subtitle {
    text-align: center;
    color: var(--amaas-dark, #1a1a2e);
    font-size: 16px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 50px !important;
    margin-bottom: 50px !important;
    padding: 0 20px;
}
/* Override Houzez theme p:last-of-type margin reset */
.block-content-wrap .amaas-custom-section p.hub-subtitle:last-of-type,
.block-content-wrap .amaas-custom-section p.guarantees-subtitle:last-of-type {
    margin-bottom: 50px !important;
}

/* ============================================================
   LOCATION HUB SECTION (Updated v2 — user design)
   ============================================================ */
.location-hub-wrapper {
    font-family: inherit;
    overflow: hidden;
}

.location-hub-wrapper .hub-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* Central Anchor */
.location-hub-wrapper .property-anchor {
    position: absolute;
    z-index: 10;
    background: var(--amaas-dark, #1a1a2e);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--amaas-gold, #dfc187);
    box-shadow: 0 0 30px rgba(0,0,0,0.2), 0 0 0 10px rgba(223, 193, 135, 0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.location-hub-wrapper .property-anchor i { font-size: 2.2rem; margin-bottom: 5px; }
.location-hub-wrapper .property-anchor span { font-weight: bold; font-size: 1rem; }

/* Destination Nodes */
.location-hub-wrapper .destination-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff !important;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    border: 1px solid #e2e2e2;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 5;
    width: 260px;
}
.location-hub-wrapper .destination-node:hover {
    transform: translateY(-5px);
    border-color: var(--amaas-gold, #dfc187);
    box-shadow: 0 12px 30px rgba(223, 193, 135, 0.2);
}

.location-hub-wrapper .icon-box {
    width: 45px;
    height: 45px;
    background: rgba(223, 193, 135, 0.25);
    border: 2px solid var(--amaas-gold, #dfc187);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ba9452;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.location-hub-wrapper .destination-node:hover .icon-box {
    background: var(--amaas-gold, #dfc187);
    color: white;
    transform: rotate(360deg);
}

.location-hub-wrapper .content-box {
    display: flex;
    flex-direction: column;
}
.location-hub-wrapper .dest-name {
    font-weight: 700;
    color: #111;
    font-size: 1.05rem;
}
.location-hub-wrapper .dest-time {
    color: #444;
    font-size: 0.92rem;
    font-weight: 500;
    margin-top: 3px;
}
.location-hub-wrapper .dest-time strong {
    color: #ba9452;
    font-weight: 700;
}

/* Node positioning (Desktop) */
.location-hub-wrapper .node-1 { top: 0; right: 5%; }
.location-hub-wrapper .node-2 { top: 0; left: 5%; }
.location-hub-wrapper .node-3 { top: 40%; right: -5%; }
.location-hub-wrapper .node-4 { top: 40%; left: -5%; }
.location-hub-wrapper .node-5 { bottom: 0; right: 5%; }
.location-hub-wrapper .node-6 { bottom: 0; left: 5%; }

/* SVG Connection Lines */
.location-hub-wrapper .connection-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.location-hub-wrapper .connection-line {
    stroke: #ba9452;
    stroke-width: 2.5;
    stroke-dasharray: 7, 6;
    opacity: 0.6;
    fill: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SVG Line Labels (shown on hover) */
.location-hub-wrapper .line-label {
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.location-hub-wrapper .line-label tspan.gold-num {
    fill: var(--amaas-gold, #dfc187);
}
.location-hub-wrapper .line-label tspan.black-text {
    fill: var(--amaas-dark, #1a1a2e);
}

/* ============================================================
   GUARANTEES SECTION (v2 — 80% size, more spacing)
   ============================================================ */
.guarantees-wrapper {
    font-family: inherit;
}

.guarantees-wrapper .guarantees-grid {
    max-width: 1100px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 20px;
}

.guarantees-wrapper .guarantee-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    border: 1px solid #eee;
    padding: 32px 24px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
}
.guarantees-wrapper .guarantee-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--amaas-dark, #1a1a2e);
    transform: translateY(100%);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}
.guarantees-wrapper .guarantee-card:hover {
    transform: translateY(-10px);
    border-color: var(--amaas-gold, #dfc187);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.guarantees-wrapper .guarantee-card:hover::before {
    transform: translateY(0);
}

.guarantees-wrapper .card-content {
    position: relative;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.guarantees-wrapper .guarantee-card:hover .card-content {
    color: #fff;
}

.guarantees-wrapper .icon-seal {
    width: 56px;
    height: 56px;
    background: rgba(223, 193, 135, 0.25);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    color: #ba9452;
    font-size: 1.6rem;
    border: 2px solid var(--amaas-gold, #dfc187);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.guarantees-wrapper .guarantee-card:hover .icon-seal {
    background: transparent;
    border-color: var(--amaas-gold, #dfc187);
    transform: rotateY(360deg);
}

.guarantees-wrapper .guarantee-title {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--amaas-dark, #1a1a2e);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.guarantees-wrapper .guarantee-card:hover .guarantee-title {
    color: var(--amaas-gold, #dfc187);
}

.guarantees-wrapper .years-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    padding: 6px;
    border: 2px solid var(--amaas-gold, #dfc187);
    border-radius: 50%;
    margin: 0 auto;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.guarantees-wrapper .years-badge .number {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--amaas-dark, #1a1a2e);
    line-height: 1;
    margin-bottom: 2px;
}
/* AMAAS_WARRANTY_YEARS_BADGE_FIT_V1: the "years" pill inherited the Houzez theme
   .label style (dark box, padding:4px) whose bottom corners poked the round badge
   border. Pin explicit, smaller pill dimensions + a larger circle so the square
   sits fully inside the circle with clearance. Applies EN + AR. */
.guarantees-wrapper .years-badge .label {
    font-size: 0.72rem;
    color: #111;
    font-weight: 700;
    background: var(--amaas-gold, #dfc187);
    padding: 2px 9px;
    border-radius: 5px;
    line-height: 1.15;
    letter-spacing: 0.3px;
    white-space: nowrap;
    max-width: 100%;
}
.guarantees-wrapper .guarantee-card:hover .years-badge {
    background: var(--amaas-gold, #dfc187);
    border-color: #fff;
}
.guarantees-wrapper .guarantee-card:hover .years-badge .number {
    color: var(--amaas-dark, #1a1a2e);
}
.guarantees-wrapper .guarantee-card:hover .years-badge .label {
    background: #1a1a2e;
    color: var(--amaas-gold, #dfc187);
}

/* ============================================================
   MOBILE RESPONSIVE — both sections
   ============================================================ */
@media (max-width: 900px) {
    .location-hub-wrapper .hub-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        min-height: auto;
    }
    .location-hub-wrapper .property-anchor {
        position: relative;
        margin-bottom: 30px;
        top: auto; left: auto; right: auto;
    }
    .location-hub-wrapper .destination-node {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100%;
        max-width: 350px;
    }
    .location-hub-wrapper .connection-svg { display: none; }

    .guarantees-wrapper .guarantees-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .amaas-custom-section {
        padding: 30px 0;
    }
    .guarantees-wrapper .guarantees-grid {
        grid-template-columns: 1fr;
    }
    .amaas-custom-section .hub-subtitle,
    .amaas-custom-section .guarantees-subtitle {
        font-size: 15px;
        padding: 0 15px;
    }
}

/* ============================================================
   FIX: Prevent custom section elements overlapping sticky header
   ============================================================ */
.fw-property-description-wrap .amaas-custom-section {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* ═══════════════════════════════════════════════════
   PHASE 3 v3: Smart Collapsed Cards + Filter System
   ═══════════════════════════════════════════════════ */

/* --- Filter bar with crosshatch pattern --- */
.amaas-unit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    background-image: none !important; /* AMAAS_BG_LIGHTGREY_V1 crosshatch removed */
    border: 1px solid rgba(223,193,135,0.3);
    border-radius: var(--amaas-radius, 8px);
    position: relative;
}
.amaas-unit-filters::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}
.amaas-unit-filters > * {
    position: relative;
    z-index: 1;
}

.amaas-filter-row,
.amaas-building-row,
.amaas-floor-row,
.amaas-villatype-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
}
.amaas-building-row,
.amaas-floor-row,
.amaas-villatype-row {
    border-top: 1px solid rgba(223,193,135,0.2);
    margin-top: 4px;
    padding-top: 12px;
}
.amaas-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--amaas-dark, #1a1a2e);
    white-space: nowrap;
}
.amaas-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid rgba(223,193,135,0.4);
    border-radius: 20px;
    background: rgba(255,255,255,0.7);
    color: var(--amaas-dark, #1a1a2e);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.amaas-filter-pill:hover {
    background: rgba(223,193,135,0.2);
    border-color: var(--amaas-gold, #dfc187);
}
.amaas-filter-pill.is-active {
    background: var(--amaas-dark, #1a1a2e);
    color: var(--amaas-gold, #dfc187);
    border-color: var(--amaas-dark, #1a1a2e);
}
.amaas-pill-count {
    font-size: 11px;
    opacity: 0.7;
}
.amaas-filter-pill.is-active .amaas-pill-count {
    opacity: 1;
    color: rgba(223,193,135,0.8);
}

/* --- Progressive disclosure: Show all units button --- */
.amaas-showmore-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 18px 0 4px;
}
.amaas-showmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 30px;
    border: 1px solid var(--amaas-gold, #dfc187);
    border-radius: 8px;
    background: var(--amaas-gold, #dfc187);
    color: #111;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.amaas-showmore-btn:hover {
    background: #ba9452;
    color: #111;
    border-color: #ba9452;
}

/* --- View toggle --- */
.amaas-view-toggle {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}
.amaas-view-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--amaas-gold, #dfc187) !important;
    border-radius: 6px;
    background: rgba(255,255,255,0.7);
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}
.amaas-view-btn:hover { background: rgba(223,193,135,0.15); border-color: var(--amaas-gold, #dfc187) !important; }
.amaas-view-btn.is-active {
    background: var(--amaas-dark, #1a1a2e);
    color: var(--amaas-gold, #dfc187);
    border-color: var(--amaas-gold, #dfc187) !important;
}

/* --- Compact row with crosshatch --- */
.amaas-compact-row {
    display: none; /* hidden by default, shown in compact mode */
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background-color: #f0f0f0;
    background-image: none !important; /* AMAAS_BG_LIGHTGREY_V1 crosshatch removed */
    border: none;
    border-bottom: 1px solid rgba(223,193,135,0.15);
    border-radius: 0;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 54px;
    position: relative;
}
.amaas-compact-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.75);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}
.amaas-compact-row > * {
    position: relative;
    z-index: 1;
}
.amaas-compact-row:hover {
    border-bottom-color: var(--amaas-gold, #dfc187);
    box-shadow: 0 2px 8px rgba(223,193,135,0.15);
}
.amaas-compact-row:hover::before {
    background: rgba(255,255,255,0.65);
}

/* --- Status pill --- */
.amaas-compact-status,
.amaas-collapse-status {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.amaas-status-sold {
    background: #fee2e2;
    color: #dc2626;
}
.amaas-status-reserved {
    background: #fef3c7;
    color: #d97706;
}
.amaas-status-available {
    background: #dcfce7;
    color: #16a34a;
}
.amaas-status-ready {
    background: #dbeafe;
    color: #2563eb;
}
.amaas-status-other {
    background: #f3f4f6;
    color: #6b7280;
}

/* --- Unit name link --- */
.amaas-compact-name {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 15px;
    color: var(--amaas-dark, #1a1a2e) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.amaas-compact-name:hover {
    color: var(--amaas-gold, #dfc187) !important;
}

/* --- Amenities on compact row --- */
.amaas-compact-amenities {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    font-size: 14px;
    color: #333;
    min-width: 0;
}
.amaas-compact-amenities i,
.amaas-compact-amenities .amaas-floor-icon {
    font-size: 16px !important;
    color: var(--amaas-gold, #dfc187);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.amaas-amen-sep {
    color: #ccc;
    margin: 0 2px;
}
/* Each amenity chip keeps its icon + text vertically centered as one unit,
   so wrapping one chip (e.g. a long facade like "شمالية غربية") never
   knocks the icons/text of neighbouring chips out of alignment. */
.amaas-compact-amenities .amaas-amen-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.4;
}

/* --- Price on compact row --- */
.amaas-compact-price {
    flex-shrink: 0;
    font-weight: 400;
    font-size: 17px;
    color: var(--amaas-gold, #dfc187);
    white-space: nowrap;
}
.amaas-compact-price .sar-symbol-svg {
    height: 16px;
    width: auto;
    margin-right: 3px;
    vertical-align: middle;
}
.amaas-compact-price.amaas-sold-label {
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
}
.amaas-compact-price.amaas-reserved-label {
    color: #d97706;
    font-size: 12px;
    font-weight: 500;
}

/* --- Expand/collapse button --- */
.amaas-expand-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(223,193,135,0.3);
    border-radius: 50%;
    background: transparent;
    color: var(--amaas-gold, #dfc187);
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 14px;
    padding: 0;
}
.amaas-expand-btn:hover {
    background: var(--amaas-gold, #dfc187);
    color: #fff;
}
.amaas-expand-btn i {
    transition: transform 0.25s ease;
}

/* ═══ COLLAPSE BAR (inside expanded detail) ═══ */
.amaas-collapse-bar {
    display: none; /* shown only when card is expanded */
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--amaas-dark, #1a1a2e);
    border-radius: var(--amaas-radius, 8px) var(--amaas-radius, 8px) 0 0;
    margin: -16px -16px 16px -16px;
    width: calc(100% + 32px);
    box-sizing: border-box;
}
.amaas-collapse-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.amaas-collapse-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--amaas-gold, #dfc187);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.amaas-collapse-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(223,193,135,0.4);
    border-radius: 20px;
    background: transparent;
    color: var(--amaas-gold, #dfc187);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.amaas-collapse-btn:hover {
    background: rgba(223,193,135,0.15);
}
.amaas-collapse-btn i {
    font-size: 12px;
}

/* ═══ COMPACT MODE ═══ */
.amaas-compact-mode .amaas-compact-row {
    display: flex !important;
}
.amaas-compact-mode .amaas-card-detail {
    display: none !important;
}

/* When a single card is expanded in compact mode:
   HIDE compact row, SHOW detail with collapse bar */
.amaas-compact-mode .amaas-unit-card.is-expanded .amaas-compact-row {
    display: none !important;
}
.amaas-compact-mode .amaas-unit-card.is-expanded .amaas-card-detail {
    display: flex !important;
    flex-wrap: wrap;
    border: none;
    border-bottom: 1px solid rgba(223,193,135,0.15);
    border-radius: var(--amaas-radius, 8px);
    margin-bottom: 6px;
    padding: 16px;
    background-color: #f0f0f0;
    background-image: none !important; /* AMAAS_BG_LIGHTGREY_V1 crosshatch removed */
    position: relative;
    animation: amaasSlideDown 0.3s ease;
}
.amaas-compact-mode .amaas-unit-card.is-expanded .amaas-collapse-bar {
    display: flex !important;
}
/* Hide price in expanded detail to avoid double price (compact row already shows it) */
.amaas-compact-mode .amaas-unit-card.is-expanded .amaas-card-detail .item-price-wrap,
.amaas-compact-mode .amaas-unit-card.is-expanded .amaas-card-detail .item-price {
    display: none !important;
}

@keyframes amaasSlideDown {
    from { opacity: 0; max-height: 0; overflow: hidden; }
    to { opacity: 1; max-height: 900px; overflow: visible; }
}

/* ═══ EXPANDED MODE (grid view) ═══ */
.amaas-expanded-mode .amaas-compact-row {
    display: none !important;
}
.amaas-expanded-mode .amaas-card-detail {
    display: flex !important;
}
.amaas-expanded-mode .amaas-collapse-bar {
    display: none !important;
}

/* ═══ No empty space — filtered cards use display:none ═══ */
.fw-property-sub-listings-wrap .block-content-wrap {
    display: flex;
    flex-direction: column;
}
.fw-property-sub-listings-wrap .block-content-wrap .item-wrap {
    flex-shrink: 0;
}

/* ═══ CARD WIDTH MUST MATCH THE FILTER BAR (≤991px) ═══
   Measured directly on the rendered page (not just the source): the
   Bootstrap ".row.g-4" here carries its usual -12px/-12px gutter-
   compensation margins, and its column ".item-listing-wrap" carries the
   matching +12px/+12px padding that is supposed to land back on the true
   container edges. Below ~992px that compensation does not fully apply
   (the row does not get to expand by the full gutter), so one side's
   margin/padding cancels while the other doesn't, leaving a 24px gap —
   and because the unapplied side flips with text direction, the gap sits
   on the left in Arabic and the right in English. Neutralizing both the
   row's negative margin and the column's compensating padding removes the
   mismatch outright: confirmed the card box then lands pixel-for-pixel on
   the filter bar's own edges in both languages, in both the compact and
   expanded view. Desktop (≥992px) already measured correct and is
   untouched. (An earlier attempt at this fix targeted
   ".property-listing-simple", a class this project's list-view template
   never actually uses — that rule stayed dead code below; left in place
   since other sub-listing displays on the site do use that class.) */
@media (max-width: 991px) {
    .fw-property-sub-listings-wrap .block-content-wrap .row.g-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .fw-property-sub-listings-wrap .block-content-wrap .item-listing-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 767px) {
    .amaas-unit-filters {
        padding: 12px 14px;
        gap: 8px;
        justify-content: center;
    }
    .amaas-filter-row,
    .amaas-building-row,
    .amaas-floor-row,
    .amaas-villatype-row {
        gap: 6px;
        justify-content: center;
    }
    .amaas-filter-pill {
        padding: 5px 10px;
        font-size: 12px;
    }
    .amaas-view-toggle {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
    
    /* Zero the native .item-wrap horizontal padding on mobile so the card's
       gold border spans the full block width and lines up with the filter
       bar's outer edge. Inner content stays inset via each card's own padding. */
    .single-property #property-sub-listings-wrap .property-listing-simple .item-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .single-property #property-sub-listings-wrap .property-listing-simple {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Compact row — centered vertical stack on mobile.
       Full gold outer border, same width as the filter bar. */
    .amaas-compact-row {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 12px 38px;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--amaas-gold, #dfc187);
        border-radius: var(--amaas-radius, 8px);
        margin: 0 0 10px 0;
    }
    .amaas-compact-status {
        order: 1;
    }
    .amaas-compact-name {
        order: 2;
        width: 100%;
        min-width: 0;
        text-align: center;
        white-space: normal;
        font-weight: 700;
    }
    /* Price gets its own full-width, centered line so it is never crowded by
       an amenity chip (e.g. the street-width icon) sitting next to it. */
    .amaas-compact-price {
        order: 3;
        width: 100%;
        text-align: center;
        font-size: 15px;
        margin: 2px 0;
    }
    .amaas-compact-amenities {
        order: 4;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 10px;
    }
    /* Wrapped chips stay centered with their icon, regardless of text length */
    .amaas-compact-amenities .amaas-amen-item {
        justify-content: center;
        gap: 3px;
    }
    /* Tighter, smaller icons on mobile so icon sits close to its value */
    .amaas-compact-amenities i,
    .amaas-compact-amenities .amaas-floor-icon {
        font-size: 14px !important;
        width: 15px;
    }
    /* Mobile compact row: show only floor + price, hide other amenities */
    .amaas-compact-amenities .amaas-amen-item:not(.amaas-floor-item):not(.amaas-villatype-item):not(.amaas-streetwidth-item):not(.amaas-facade-item) {
        display: none !important;
    }
    .amaas-compact-amenities .amaas-amen-sep {
        display: none !important;
    }
    /* Expand control floats to top corner so it never offsets the
       centered name/price/items stack. LTR -> right, RTL -> left. */
    .amaas-expand-btn {
        position: absolute;
        top: 10px;
        right: 8px;
        order: 5;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    html[dir="rtl"] .amaas-expand-btn,
    html[lang="ar"] .amaas-expand-btn {
        right: auto;
        left: 8px;
    }
    
    /* Collapse bar mobile — sits flush inside the bordered detail card,
       rounding only its top corners so the gold border stays clean. */
    .amaas-collapse-bar {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 8px;
        margin: -12px -12px 12px -12px;
        width: calc(100% + 24px);
        border-radius: var(--amaas-radius, 8px) var(--amaas-radius, 8px) 0 0;
    }
    .amaas-collapse-info {
        flex: 1;
        min-width: 0;
    }
    .amaas-collapse-name {
        font-size: 13px;
    }
    .amaas-collapse-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    /* Detail card mobile — same full gold border, width and radius as the
       compact row so collapsed and expanded cards are perfectly uniform and
       aligned with the filter bar. */
    .amaas-compact-mode .amaas-unit-card.is-expanded .amaas-card-detail {
        flex-direction: column !important;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--amaas-gold, #dfc187);
        border-radius: var(--amaas-radius, 8px);
        margin: 0 0 10px 0;
        overflow: hidden;
    }
    /* Each card container spans the full content width on mobile */
    .fw-property-sub-listings-wrap .block-content-wrap .item-wrap {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .amaas-compact-row {
        padding: 10px 12px;
    }
    .amaas-compact-name {
        font-size: 13px;
    }
    .amaas-compact-amenities {
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESERVED STATUS — Full Visual Treatment
   Mirrors sold logic with amber/gold color scheme
   Term ID: 531, slug: reserved
   ═══════════════════════════════════════════════════════════════ */

/* ── A) LISTING CARDS — Reserved ribbon on thumbnails ───────── */
.item-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap,
.item-listing-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap,
.item-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap,
.item-listing-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap,
.listing-image-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) {
    position: relative;
    overflow: hidden;
}

/* RESERVED text (::before) */
.item-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
.item-listing-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
.item-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
.item-listing-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
.listing-image-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"])::before {
    content: "RESERVED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #111111;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 800;
    border-top: 2px solid rgba(255,255,255,0.85);
    border-bottom: 2px solid rgba(255,255,255,0.85);
    border-left: none;
    border-right: none;
    z-index: 10;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    box-shadow: none;
    width: 110%;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.35;
}

/* By Amaas signature (::after) */
.item-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
.item-listing-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
.item-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
.item-listing-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
.listing-image-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"])::after {
    content: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 2%) rotate(-15deg);
    color: #1a1a1a;
    font-family: "Allura", cursive;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.4px;
    z-index: 11;
    pointer-events: none;
    text-align: center;
    width: 110%;
}

/* Dim image */
.item-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap img,
.item-listing-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap img,
.item-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap img,
.item-listing-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap img,
.listing-image-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) img {
    filter: brightness(0.65) grayscale(0.1) sepia(0.1);
    transition: filter 0.3s ease;
}

/* Arabic card ribbon text */
html[lang^="ar"] .item-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
html[lang^="ar"] .item-listing-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
html[lang^="ar"] .item-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
html[lang^="ar"] .item-listing-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::before,
html[lang^="ar"] .listing-image-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"])::before {
    content: "محجوز";
    font-family: 'STV', sans-serif;
    letter-spacing: 2px;
}
html[lang^="ar"] .item-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
html[lang^="ar"] .item-listing-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
html[lang^="ar"] .item-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
html[lang^="ar"] .item-listing-wrap-v6:has(.status-color-531, a.label-status[href*="/status/reserved"]) .listing-image-wrap::after,
html[lang^="ar"] .listing-image-wrap:has(.status-color-531, a.label-status[href*="/status/reserved"])::after {
    content: none;
    font-family: 'Aref Ruqaa', serif;
}

/* ── B) SINGLE PROPERTY — Gallery + banner for reserved ─────── */
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .hs-gallery-v5-grid::before {
    content: "RESERVED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #111111;
    padding: 21px 80px;
    font-size: 32px;
    font-weight: 900;
    border-top: 3px solid rgba(255,255,255,0.85);
    border-bottom: 3px solid rgba(255,255,255,0.85);
    z-index: 10;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 5px;
    width: 120%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.3;
}
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .hs-gallery-v5-grid::after {
    content: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%) rotate(-15deg);
    color: #1a1a1a;
    font-family: "Allura", cursive;
    font-size: 22px;
    z-index: 11;
    pointer-events: none;
    text-align: center;
    width: 120%;
}
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .hs-gallery-v5-grid img {
    filter: brightness(0.65) grayscale(0.1) sepia(0.1);
}
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .hs-gallery-v5-grid {
    position: relative;
    overflow: hidden;
}

/* Arabic gallery ribbon */
html[lang^="ar"] body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .hs-gallery-v5-grid::before {
    content: "محجوز";
    font-family: 'STV', sans-serif;
    letter-spacing: 2px;
}
html[lang^="ar"] body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .hs-gallery-v5-grid::after {
    content: none;
    font-family: 'Aref Ruqaa', serif;
}

/* ── C) PROPERTY PAGE BANNER — Reserved notice (improved styling) ─ */
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .property-top-wrap::after,
body.single-property:has(
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"]
) .property-title-wrap::after {
    content: "This property is currently Reserved — View-only for reference.";
    display: block;
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(245,158,11,0.4);
    background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(217,119,6,0.08) 100%);
    color: #92400e;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 1.6;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Arabic reserved banner */
html[lang^="ar"] body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .property-top-wrap::after,
html[lang^="ar"] body.single-property:has(
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"]
) .property-title-wrap::after {
    content: "هذا العقار محجوز في الوقت الحالي — للعرض فقط كمرجع.";
    direction: rtl;
    unicode-bidi: plaintext;
    font-family: 'STV', sans-serif;
}

/* ── D) IMPROVED SOLD BANNER STYLING (replaces heavy black) ── */
body.single-property:has(
    .property-top-wrap .label-status.status-color-52,
    .property-top-wrap a.label-status[href*="/status/sold"],
    .property-top-wrap a.label-status[href*="/status/sold-out"],
    #property-top-wrap .label-status.status-color-52,
    #property-top-wrap .label-status.status-color-52,
    #property-top-wrap a.label-status[href*="/status/sold"],
    #property-top-wrap a.label-status[href*="/status/sold-out"],
    .property-title-wrap .label-status.status-color-52,
    .property-title-wrap .label-status.status-color-52,
    .property-title-wrap a.label-status[href*="/status/sold"],
    .property-title-wrap a.label-status[href*="/status/sold-out"],
    .detail-wrap .label-status.status-color-52,
    .detail-wrap .label-status.status-color-52,
    .detail-wrap a.label-status[href*="/status/sold"],
    .detail-wrap a.label-status[href*="/status/sold-out"],
    .fw-property-title-wrap .label-status.status-color-52,
    .fw-property-title-wrap .label-status.status-color-52,
    .fw-property-title-wrap a.label-status[href*="/status/sold"],
    .fw-property-title-wrap a.label-status[href*="/status/sold-out"],
    .fw-property-header-wrap .label-status.status-color-52,
    .fw-property-header-wrap .label-status.status-color-52,
    .fw-property-header-wrap a.label-status[href*="/status/sold"],
    .fw-property-header-wrap a.label-status[href*="/status/sold-out"],
    .fw-property-banner-wrap .label-status.status-color-52,
    .fw-property-banner-wrap .label-status.status-color-52,
    .fw-property-banner-wrap a.label-status[href*="/status/sold"],
    .fw-property-banner-wrap a.label-status[href*="/status/sold-out"]
) .property-top-wrap::after,
body.single-property:has(
    .property-title-wrap .label-status.status-color-52,
    .property-title-wrap .label-status.status-color-52,
    .property-title-wrap a.label-status[href*="/status/sold"],
    .property-title-wrap a.label-status[href*="/status/sold-out"]
) .property-title-wrap::after {
    background: linear-gradient(135deg, rgba(220,38,38,0.10) 0%, rgba(185,28,28,0.07) 100%) !important;
    background-color: transparent !important;
    border: 1px solid rgba(220,38,38,0.35) !important;
    color: #991b1b !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 14px 18px !important;
    line-height: 1.6 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html[lang^="ar"] body.single-property:has(
    .property-top-wrap .label-status.status-color-52,
    .property-top-wrap a.label-status[href*="/status/sold"],
    .property-top-wrap a.label-status[href*="/status/sold-out"],
    #property-top-wrap .label-status.status-color-52,
    #property-top-wrap a.label-status[href*="/status/sold"],
    #property-top-wrap a.label-status[href*="/status/sold-out"],
    .property-title-wrap .label-status.status-color-52,
    .property-title-wrap a.label-status[href*="/status/sold"],
    .property-title-wrap a.label-status[href*="/status/sold-out"],
    .detail-wrap .label-status.status-color-52,
    .detail-wrap a.label-status[href*="/status/sold"],
    .detail-wrap a.label-status[href*="/status/sold-out"],
    .fw-property-title-wrap .label-status.status-color-52,
    .fw-property-title-wrap a.label-status[href*="/status/sold"],
    .fw-property-title-wrap a.label-status[href*="/status/sold-out"],
    .fw-property-header-wrap .label-status.status-color-52,
    .fw-property-header-wrap a.label-status[href*="/status/sold"],
    .fw-property-header-wrap a.label-status[href*="/status/sold-out"],
    .fw-property-banner-wrap .label-status.status-color-52,
    .fw-property-banner-wrap a.label-status[href*="/status/sold"],
    .fw-property-banner-wrap a.label-status[href*="/status/sold-out"]
) .property-top-wrap::after,
html[lang^="ar"] body.single-property:has(
    .property-title-wrap .label-status.status-color-52,
    .property-title-wrap a.label-status[href*="/status/sold"],
    .property-title-wrap a.label-status[href*="/status/sold-out"]
) .property-title-wrap::after {
    background: linear-gradient(135deg, rgba(220,38,38,0.10) 0%, rgba(185,28,28,0.07) 100%) !important;
    background-color: transparent !important;
    border-color: rgba(220,38,38,0.35) !important;
    color: #991b1b !important;
}

/* ── E) PRICE HIDING — Reserved property pages ──────────────── */
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .property-price,
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .fw-price-wrap,
body.single-property:has(
    .property-top-wrap .label-status.status-color-531,
    .property-top-wrap a.label-status[href*="/status/reserved"],
    #property-top-wrap .label-status.status-color-531,
    #property-top-wrap a.label-status[href*="/status/reserved"],
    .property-title-wrap .label-status.status-color-531,
    .property-title-wrap a.label-status[href*="/status/reserved"],
    .detail-wrap .label-status.status-color-531,
    .detail-wrap a.label-status[href*="/status/reserved"],
    .fw-property-title-wrap .label-status.status-color-531,
    .fw-property-title-wrap a.label-status[href*="/status/reserved"],
    .fw-property-header-wrap .label-status.status-color-531,
    .fw-property-header-wrap a.label-status[href*="/status/reserved"],
    .fw-property-banner-wrap .label-status.status-color-531,
    .fw-property-banner-wrap a.label-status[href*="/status/reserved"]
) .houzez-listing-price-wrap {
    display: none !important;
}

/* ── F) MAP INFO WINDOW — Reserved/Sold ribbon treatment lives in
   Customizer CSS (post 8767) section C. The old block here used a broken
   comma-grouped selector that applied a whole-window sepia filter and
   double-dimmed the reserved popup, so it was removed. Only the popup
   width fix (F2 below) stays. */

/* ── F2) MAP INFO WINDOW — proper card width ─────────────────
   Leaflet auto-measures popup content width when it opens. The property
   info window had no intrinsic width, so it collapsed to ~51px and the
   thumbnail plus gold RESERVED ribbon rendered as a thin, skewed dark-gold
   bar when hovering a list item. Giving the window a fixed width lets
   Leaflet lay it out (and position it) as a clean card. Map popups only. */
.leaflet-popup-content .property-info-window {
    width: 240px;
    max-width: 240px;
    box-sizing: border-box;
}
.leaflet-popup-content .info-window-image {
    width: 100%;
    overflow: hidden;
}
.leaflet-popup-content .info-window-image img.listing-thumbnail,
.leaflet-popup-content .info-window-image img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.leaflet-popup-content .info-content {
    box-sizing: border-box;
}

/* ── G) RESPONSIVE — Banner mobile adjustments ──────────────── */
@media (max-width: 767px) {
    body.single-property:has(a.label-status[href*="/status/reserved"]) .property-top-wrap::after,
    body.single-property:has(a.label-status[href*="/status/reserved"]) .property-title-wrap::after,
    body.single-property:has(a.label-status[href*="/status/sold"]) .property-top-wrap::after,
    body.single-property:has(a.label-status[href*="/status/sold"]) .property-title-wrap::after {
        font-size: 13px !important;
        padding: 10px 14px !important;
        margin-top: 8px !important;
        border-radius: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMAAS_MAP_GREYSCALE_V1 — Colorless map tiles sitewide (Leaflet / OpenStreetMap)
   Greyscales the tile imagery only; markers, pins and controls stay usable.
   ═══════════════════════════════════════════════════════════════════════════ */
.leaflet-tile-pane {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
}

/* ===== FEATURES ICON EDGE ALIGNMENT V1 ===== */
.fw-property-features-wrap .block-content-wrap ul li,
#property-features-wrap .block-content-wrap ul li {
  justify-content: flex-start !important;
  text-align: start !important;
}
html[lang="ar"] .fw-property-features-wrap .block-content-wrap ul li {
  justify-content: flex-start !important;
  direction: rtl !important;
}
html[lang="en-US"] .fw-property-features-wrap .block-content-wrap ul li,
html[lang="en"] .fw-property-features-wrap .block-content-wrap ul li {
  justify-content: flex-start !important;
  direction: ltr !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMAAS_SF_CROSSHATCH_REMOVE_V1 — Special Features template crosshatch removal
   The per-property "المميزات الخاصة" section ships an inline style block that
   paints the card families (.feature-card, .radial-item, .vsp-card,
   .vsp-feature, .vf-room) with a gold repeating-linear-gradient crosshatch over
   a cream (#f5f0e8) base. Neutralise to the flat sitewide light grey (#f0f0f0).
   Loaded after content styles + !important, so it wins over the non-important
   inline rules regardless of source order.
   ═══════════════════════════════════════════════════════════════════════════ */
.feature-card,
.radial-item,
.vsp-card,
.vsp-feature,
.vf-room {
  background-image: none !important; /* crosshatch removed */
  background-color: #f0f0f0 !important;
}


/* AMAAS_MASTER_BANNER_AVAILABLE_KILL_V1
   Master / available property pages must never show the sold or reserved
   info bar that leaks from sub-unit status classes. Five-class specificity
   so it beats every legacy has() leak regardless of source order.
   Keyed only on the PHP body class (mu-plugin). Both languages. */
body.single-property.wp-singular.property-template-default.amaas-main-available .property-title-wrap::after,
body.single-property.wp-singular.property-template-default.amaas-main-available .property-top-wrap::after,
body.single-property.wp-singular.property-template-default.amaas-main-no-status .property-title-wrap::after,
body.single-property.wp-singular.property-template-default.amaas-main-no-status .property-top-wrap::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* AMAAS_DESCRIPTION_READMORE_ALWAYS_OPEN_V1
   Show the full property description at all times, no Read More toggle. */
.fw-property-description-wrap .houzez-more-content,
.fw-property-description-content .houzez-more-content {
  display: block !important;
}
.fw-property-description-wrap .houzez-read-more-link,
.fw-property-description-content .houzez-read-more-link {
  display: none !important;
}

/* AMAAS_FOOTER_COPYRIGHT_WHITE_V1
   Copyright line must stay legible on the dark footer. Both languages. */
.footer-copyright,
.footer-copyright p,
.footer-copyright a,
.footer-copyright span {
  color: #ffffff !important;
}

/* ============================================================
   AMAAS_EN_CUSTOM_SECTIONS_LTR_V1
   English pages (lang en-US): the custom property sections
   (Location Hub + Valuable Warranties) were authored for Arabic
   and inherit direction rtl from .amaas-custom-section. On English
   they must read left-to-right, match the Arabic layout mirrored,
   and must not be broken by phantom paragraphs that wpautop injects
   into the English stored content. Arabic pages stay untouched.
   ============================================================ */
html[lang="en-US"] .amaas-custom-section { direction: ltr; }
html[lang="en-US"] .location-hub-wrapper,
html[lang="en-US"] .location-hub-wrapper .hub-container,
html[lang="en-US"] .location-hub-wrapper .destination-node,
html[lang="en-US"] .location-hub-wrapper .content-box,
html[lang="en-US"] .location-hub-wrapper .dest-name,
html[lang="en-US"] .location-hub-wrapper .dest-time,
html[lang="en-US"] .location-hub-wrapper .line-label,
html[lang="en-US"] .guarantees-wrapper,
html[lang="en-US"] .guarantees-wrapper .guarantees-grid,
html[lang="en-US"] .guarantees-wrapper .guarantee-card { direction: ltr !important; }

/* Center anchor: keep the longer English label inside the circle.
   AMAAS_EN_HUB_ANCHOR_CENTER_V2 (2026-09-23, reviewer note "EN circle label not
   centred"): wpautop also injects a stray br element between the icon and the
   label in the English stored content only (Arabic markup is clean). Inside the
   anchor's flex column that br becomes a 22px empty line, pushing the icon up
   and the label down so the label sat visibly below centre. Hide that direct
   child br (the br inside the label span is real and stays). With the room back,
   the label moves from 0.78rem to 0.85rem, closer to the Arabic 1rem; the longest
   label "Villas and Floors / Amaas 26" keeps two lines (side padding trimmed
   8px to 4px so the widest line has ~8px of spare width on phones too). */
html[lang="en-US"] .location-hub-wrapper .property-anchor > br { display: none !important; }
html[lang="en-US"] .location-hub-wrapper .property-anchor span {
    font-size: 0.85rem;
    line-height: 1.22;
    padding: 0 4px;
}

/* Warranties grid + hub: drop the empty phantom paragraphs that wpautop
   inserts between cards/nodes in the English content, so the grid keeps a
   clean 3 column flow (identical to the clean Arabic markup).
   IMPORTANT: wpautop also wraps the connection-lines SVG (which carries the
   hover distance labels) in a phantom paragraph. That paragraph must NOT be
   hidden, or the connection lines and the on-hover distance labels vanish on
   English only. Spare any phantom paragraph that contains an svg. */
html[lang="en-US"] .location-hub-wrapper .hub-container > p:not(:has(svg)),
html[lang="en-US"] .guarantees-wrapper .guarantees-grid > p:not(:has(svg)) { display: none !important; }
/* Keep the wpautop-wrapped SVG paragraph laid out so the overlay fills the hub. */
html[lang="en-US"] .location-hub-wrapper .hub-container > p:has(svg.connection-svg) {
    display: block !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; pointer-events: none;
}
html[lang="en-US"] .location-hub-wrapper .hub-container > p:has(svg.connection-svg) > br { display: none !important; }

/* Warranties badge: remove the stray line break wpautop injects between the
   number and the "years" label so both stay centered inside the circle. */
html[lang="en-US"] .guarantees-wrapper .years-badge br { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   AMAAS_BUTTON_STANDARD_V1 — Sitewide button standard (launch)
   ONE look for every CTA, A to Z: FLAT gold background, BLACK BOLD text.
   Gold #dfc187 default, #ba9452 hover; text stays black (700) in all states.
   No gradients on buttons anywhere. Utility/icon controls are intentionally
   excluded so they are not turned into gold pills.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Core CTA classes ── */
body:not(.wp-admin) .btn-primary,
body:not(.wp-admin) .btn-secondary,
body:not(.wp-admin) .btn-success,
body:not(.wp-admin) .btn-info,
body:not(.wp-admin) .btn-outlined,
body:not(.wp-admin) .btn-outline-primary,
body:not(.wp-admin) .btn-primary-outlined,
body:not(.wp-admin) .houzez-btn,
body:not(.wp-admin) .houzez_container_search_button,
body:not(.wp-admin) .btn-search,
body:not(.wp-admin) .btn-login,
body:not(.wp-admin) .btn-login-submit,
body:not(.wp-admin) .btn-signup,
body:not(.wp-admin) .btn-compare-search,
body:not(.wp-admin) .elementor-button,
body:not(.wp-admin) .wp-block-button__link,
body:not(.wp-admin) .vc_btn3,
body:not(.wp-admin) .fw-btn,
body:not(.wp-admin) form button[type="submit"],
body:not(.wp-admin) form input[type="submit"],
body:not(.wp-admin) .houzez-search-form button[type="submit"],
body:not(.wp-admin) .es-form button,
body:not(.wp-admin) .es_subscription_form button,
body:not(.wp-admin) .ig-es-form button,
body:not(.wp-admin) .amaas-osp-btn,
/* Generic bootstrap/theme buttons (utility/icon controls excluded) */
body:not(.wp-admin) .btn:not(.btn-close):not(.btn-item):not(.btn-back-to-top):not(.compare-property-label),
body:not(.wp-admin) .amaas-view-btn,
body:not(.wp-admin) .amaas-cta-btn,
body:not(.wp-admin) .amaas-showmore-btn,
body:not(.wp-admin) .amaas-expand-btn,
body:not(.wp-admin) .amaas-collapse-btn,
body:not(.wp-admin) .houzez-submit-button,
body:not(.wp-admin) .es-subscribe-btn,
body:not(.wp-admin) .es-custom-button,
body:not(.wp-admin) .btn-reset-password,
body:not(.wp-admin) .compare-btn,
body:not(.wp-admin) .btn-whatsapp,
/* Social share (under review) */
body:not(.wp-admin) .houzez-social-share a,
body:not(.wp-admin) .social-share-btns a,
body:not(.wp-admin) .social-share li a,
body:not(.wp-admin) .property-social-share a {
    background: #dfc187 !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    border-radius: 8px !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background 0.25s ease, border-color 0.25s ease !important;
}

/* Keep inner text/icon spans black + bold too */
body:not(.wp-admin) .btn-primary span,
body:not(.wp-admin) .btn-secondary span,
body:not(.wp-admin) .elementor-button span,
body:not(.wp-admin) .elementor-button .elementor-button-text,
body:not(.wp-admin) .wp-block-button__link span,
body:not(.wp-admin) .vc_btn3 span,
body:not(.wp-admin) .amaas-osp-btn bdi,
body:not(.wp-admin) .es-form button span,
body:not(.wp-admin) .amaas-building-tabs__btn bdi,
body:not(.wp-admin) .amaas-building-tabs__dd-trigger bdi {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
}

/* ── Hover / focus / active — darker gold, text still black ──
      Every button from the default-state list above gets the same
      #ba9452 hover so no CTA is left with a different hover colour. ── */
body:not(.wp-admin) .btn-primary:hover,
body:not(.wp-admin) .btn-primary:focus,
body:not(.wp-admin) .btn-primary:active,
body:not(.wp-admin) .btn-secondary:hover,
body:not(.wp-admin) .btn-secondary:focus,
body:not(.wp-admin) .btn-secondary:active,
body:not(.wp-admin) .btn-success:hover,
body:not(.wp-admin) .btn-success:focus,
body:not(.wp-admin) .btn-success:active,
body:not(.wp-admin) .btn-info:hover,
body:not(.wp-admin) .btn-info:focus,
body:not(.wp-admin) .btn-info:active,
body:not(.wp-admin) .btn-outlined:hover,
body:not(.wp-admin) .btn-outlined:focus,
body:not(.wp-admin) .btn-outline-primary:hover,
body:not(.wp-admin) .btn-outline-primary:focus,
body:not(.wp-admin) .btn-primary-outlined:hover,
body:not(.wp-admin) .btn-primary-outlined:focus,
body:not(.wp-admin) .houzez-btn:hover,
body:not(.wp-admin) .houzez-btn:focus,
body:not(.wp-admin) .houzez_container_search_button:hover,
body:not(.wp-admin) .houzez_container_search_button:focus,
body:not(.wp-admin) .btn-search:hover,
body:not(.wp-admin) .btn-search:focus,
body:not(.wp-admin) .btn-login:hover,
body:not(.wp-admin) .btn-login:focus,
body:not(.wp-admin) .btn-login-submit:hover,
body:not(.wp-admin) .btn-login-submit:focus,
body:not(.wp-admin) .btn-signup:hover,
body:not(.wp-admin) .btn-signup:focus,
body:not(.wp-admin) .btn-compare-search:hover,
body:not(.wp-admin) .btn-compare-search:focus,
body:not(.wp-admin) .elementor-button:hover,
body:not(.wp-admin) .elementor-button:focus,
body:not(.wp-admin) .wp-block-button__link:hover,
body:not(.wp-admin) .wp-block-button__link:focus,
body:not(.wp-admin) .vc_btn3:hover,
body:not(.wp-admin) .vc_btn3:focus,
body:not(.wp-admin) .fw-btn:hover,
body:not(.wp-admin) .fw-btn:focus,
body:not(.wp-admin) form button[type="submit"]:hover,
body:not(.wp-admin) form button[type="submit"]:focus,
body:not(.wp-admin) form input[type="submit"]:hover,
body:not(.wp-admin) form input[type="submit"]:focus,
body:not(.wp-admin) .houzez-search-form button[type="submit"]:hover,
body:not(.wp-admin) .houzez-search-form button[type="submit"]:focus,
body:not(.wp-admin) .es-form button:hover,
body:not(.wp-admin) .es-form button:focus,
body:not(.wp-admin) .es_subscription_form button:hover,
body:not(.wp-admin) .es_subscription_form button:focus,
body:not(.wp-admin) .ig-es-form button:hover,
body:not(.wp-admin) .ig-es-form button:focus,
body:not(.wp-admin) .amaas-osp-btn:hover,
body:not(.wp-admin) .amaas-osp-btn:focus,
body:not(.wp-admin) .btn:not(.btn-close):not(.btn-item):not(.btn-back-to-top):not(.compare-property-label):hover,
body:not(.wp-admin) .btn:not(.btn-close):not(.btn-item):not(.btn-back-to-top):not(.compare-property-label):focus,
body:not(.wp-admin) .amaas-view-btn:hover,
body:not(.wp-admin) .amaas-view-btn:focus,
body:not(.wp-admin) .amaas-cta-btn:hover,
body:not(.wp-admin) .amaas-cta-btn:focus,
body:not(.wp-admin) .amaas-showmore-btn:hover,
body:not(.wp-admin) .amaas-expand-btn:hover,
body:not(.wp-admin) .amaas-collapse-btn:hover,
body:not(.wp-admin) .houzez-submit-button:hover,
body:not(.wp-admin) .houzez-submit-button:focus,
body:not(.wp-admin) .es-subscribe-btn:hover,
body:not(.wp-admin) .es-subscribe-btn:focus,
body:not(.wp-admin) .es-custom-button:hover,
body:not(.wp-admin) .es-custom-button:focus,
body:not(.wp-admin) .btn-reset-password:hover,
body:not(.wp-admin) .btn-reset-password:focus,
body:not(.wp-admin) .compare-btn:hover,
body:not(.wp-admin) .compare-btn:focus,
body:not(.wp-admin) .btn-whatsapp:hover,
body:not(.wp-admin) .btn-whatsapp:focus,
body:not(.wp-admin) .houzez-social-share a:hover,
body:not(.wp-admin) .social-share-btns a:hover,
body:not(.wp-admin) .social-share li a:hover,
body:not(.wp-admin) .property-social-share a:hover,
body:not(.wp-admin) .amaas-building-tabs__btn:hover,
body:not(.wp-admin) .amaas-building-tabs__dd-trigger:hover,
body:not(.wp-admin) .property-nav-tabs .nav-link:hover,
body:not(.wp-admin) .fw-property-floor-plans-wrap .nav-tabs .nav-link:hover {
    background: #111111 !important;
    background-image: none !important;
    border-color: #dfc187 !important;
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ── Inner label spans/bdi must also flip to gold on hover ──
      The default-state rule forces inner text black; without a hover
      variant the label would stay black on the black hover (invisible).
      This turns every inner label gold to match the reversed button. ── */
body:not(.wp-admin) .btn:hover span,
body:not(.wp-admin) .btn:hover bdi,
body:not(.wp-admin) .btn-primary:hover span,
body:not(.wp-admin) .btn-secondary:hover span,
body:not(.wp-admin) .houzez-btn:hover span,
body:not(.wp-admin) .elementor-button:hover span,
body:not(.wp-admin) .elementor-button:hover .elementor-button-text,
body:not(.wp-admin) .wp-block-button__link:hover span,
body:not(.wp-admin) .vc_btn3:hover span,
body:not(.wp-admin) .amaas-osp-btn:hover bdi,
body:not(.wp-admin) .amaas-cta-btn:hover span:not(.amaas-cta-icon),
body:not(.wp-admin) .amaas-view-btn:hover span,
body:not(.wp-admin) .houzez-submit-button:hover span,
body:not(.wp-admin) .es-form button:hover span,
body:not(.wp-admin) .es-subscribe-btn:hover span {
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
    font-weight: 700 !important;
}

/* Active/selected tab keeps the same flat gold (no special-case colours) */
body:not(.wp-admin) .amaas-building-tabs__btn.active,
body:not(.wp-admin) .amaas-building-tabs__btn.is-active,
body:not(.wp-admin) .amaas-building-tabs__btn[aria-selected="true"],
body:not(.wp-admin) .property-nav-tabs .nav-link.active,
body:not(.wp-admin) .fw-property-floor-plans-wrap .nav-tabs .nav-link.active {
    background: #dfc187 !important;
    background-image: none !important;
    border-color: #dfc187 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
}

/* ── AMAAS_SEARCH_PLACEHOLDER_BLACK_V1 ──
      Houzez dynamic CSS paints bootstrap-select placeholders gold
      (.bootstrap-select .dropdown-toggle.bs-placeholder). UX review: the
      placeholder text must be black for readability. Scoped to the
      search dropdowns only; selected values are unaffected. ── */
body:not(.wp-admin) .bootstrap-select > .dropdown-toggle.bs-placeholder,
body:not(.wp-admin) .bootstrap-select > .dropdown-toggle.bs-placeholder:active,
body:not(.wp-admin) .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
body:not(.wp-admin) .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
body:not(.wp-admin) .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* ── AMAAS_QS_PLACEHOLDER_BLACK_V1 ──
      Quick Search (splash) page keyword field: the placeholder text renders
      in soft gold (#dfc187), which is low-contrast on the light field. UX
      review: make the placeholder BOLD BLACK for readability. Scoped to the
      splash page (page-id-8662 / template-splash) so header/other search
      placeholders are unaffected. ── */
body.page-id-8662 .houzez-keyword-autocomplete::placeholder,
body.page-template-template-splash .houzez-keyword-autocomplete::placeholder,
body.page-id-8662 .houzez-keyword-autocomplete::-webkit-input-placeholder,
body.page-template-template-splash .houzez-keyword-autocomplete::-webkit-input-placeholder {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
body.page-id-8662 .houzez-keyword-autocomplete::-moz-placeholder,
body.page-template-template-splash .houzez-keyword-autocomplete::-moz-placeholder {
    color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
body.page-id-8662 .houzez-keyword-autocomplete:-ms-input-placeholder,
body.page-template-template-splash .houzez-keyword-autocomplete:-ms-input-placeholder {
    color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* ── High-specificity overrides to beat the three remaining !important
      GRADIENT button rules (footer newsletter, owners-support, know-us-better). ── */
html body:not(.wp-admin) footer .footer-widget .es-form button,
html body:not(.wp-admin) footer .footer-widget .es_subscription_form button,
html body:not(.wp-admin) footer .footer-widget .ig-es-form button,
html body:not(.wp-admin) footer.widget .es-form button,
html body:not(.wp-admin) footer.widget .es_subscription_form button,
html body:not(.wp-admin) footer.widget .ig-es-form button,
/* Icegram/Email-Subscribers renders the subscribe control as input[type=submit], not button.
   NOTE: :hover selectors intentionally NOT included here — the reversed hover
   (black bg + gold text) is defined in AMAAS_BTN_HOVER_REVERSE_FINAL_V1 below.
   Leaving hover states out of this resting-state block avoids a same-specificity
   tie that kept the Subscribe control gold on hover. */
html body:not(.wp-admin) .es_subscription_form input[type="submit"],
html body:not(.wp-admin) .es-form input[type="submit"],
html body:not(.wp-admin) .ig-es-form input[type="submit"],
html body:not(.wp-admin) footer .es_subscription_form input[type="submit"],
html body:not(.wp-admin) footer .footer-widget .es_subscription_form input[type="submit"],
html body:not(.wp-admin) footer input[type="submit"],
html body:not(.wp-admin) a.amaas-osp-btn,
html body:not(.wp-admin) a.amaas-osp-btn:hover,
html body:not(.wp-admin) .know-us-better .elementor-button,
html body:not(.wp-admin) .know-us-better a.elementor-button,
html body:not(.wp-admin) .know-us-better .elementor-button:hover,
html body:not(.wp-admin) .know-us-better a.elementor-button:hover {
    background: #dfc187 !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    border-color: #dfc187 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    /* Normalise native submit-control rendering so the newsletter Subscribe
       input paints the exact same flat gold as the anchor buttons (no UA
       shading/gradient on input[type=submit]). */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-clip: border-box !important;
    text-shadow: none !important;
    filter: none !important;
}
html body:not(.wp-admin) footer .footer-widget .es-form button:hover,
html body:not(.wp-admin) footer.widget .es-form button:hover,
html body:not(.wp-admin) a.amaas-osp-btn:hover,
html body:not(.wp-admin) .know-us-better .elementor-button:hover,
html body:not(.wp-admin) .know-us-better a.elementor-button:hover {
    /* Reversed hover to match the sitewide standard: black bg + gold text +
       gold outline (was darker-gold #ba9452 under the old hover model). */
    background: #111111 !important;
    background-image: none !important;
    border-color: #dfc187 !important;
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
}

/* ── Single-property buttons: force BLACK BOLD text over the older
      single-property styling that used dark-navy #1a1a2e / weight 600 / #c9a96e
      hover. Higher specificity (html body prefix) so it wins decisively. ── */
html body:not(.wp-admin) .single-property .btn-secondary:not(.badge):not(.btn-close):not(.amaas-gallery-video-btn),
html body:not(.wp-admin) .single-property .btn-item,
html body:not(.wp-admin) .single-property .btn.btn-primary.btn-item,
html body:not(.wp-admin) .single-property .btn-primary.hz-btn-map,
html body:not(.wp-admin) .single-property .btn-primary.btn-login,
html body:not(.wp-admin) .single-property .btn-reset-password.btn-primary,
html body:not(.wp-admin) .single-property .compare-btn.btn-primary,
html body:not(.wp-admin) .single-property .houzez-ele-button.btn-secondary,
html body:not(.wp-admin) .single-property .houzez_agent_property_form.btn-secondary,
html body:not(.wp-admin) .single-property .schedule_contact_form.btn-secondary {
    background-color: #dfc187 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
}
html body:not(.wp-admin) .single-property .btn-secondary:not(.badge):not(.btn-close):not(.amaas-gallery-video-btn):hover,
html body:not(.wp-admin) .single-property .btn-item:hover,
html body:not(.wp-admin) .single-property .btn.btn-primary.btn-item:hover,
html body:not(.wp-admin) .single-property .btn-primary.hz-btn-map:hover,
html body:not(.wp-admin) .single-property .btn-primary.btn-login:hover,
html body:not(.wp-admin) .single-property .btn-reset-password.btn-primary:hover,
html body:not(.wp-admin) .single-property .compare-btn.btn-primary:hover,
html body:not(.wp-admin) .single-property .houzez-ele-button.btn-secondary:hover,
html body:not(.wp-admin) .single-property .houzez_agent_property_form.btn-secondary:hover,
html body:not(.wp-admin) .single-property .schedule_contact_form.btn-secondary:hover {
    background-color: #ba9452 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
}

/* ── Exclusions: utility / icon controls must NOT become gold pills ── */
body:not(.wp-admin) .btn-close,
body:not(.wp-admin) .mfp-close,
body:not(.wp-admin) .mfp-arrow,
body:not(.wp-admin) .slick-arrow,
body:not(.wp-admin) .houzez-back-to-top,
body:not(.wp-admin) #backtotop,
body:not(.wp-admin) .listing-view-type .btn,
body:not(.wp-admin) .grid-view,
body:not(.wp-admin) .list-view {
    background: initial !important;
    background-image: initial !important;
    border-radius: initial !important;
    -webkit-text-fill-color: initial !important;
}


/* ============================================================
   AMAAS_SINGLE_PROP_POLISH_V1 — gallery chips, unit-card (list)
   price, and larger amenity (المميزات) icons on the single
   property page. English + Arabic.
   ============================================================ */

/* -- Gallery overlay chips: Watch Video + (N) More = flat-gold
      standard button, black bold, matched size, aligned. -- */
.single-property .amaas-gallery-video-btn,
.single-property .hs-gallery-v5-grid .img-wrap-3-text,
.single-property .property-banner-grid-wrap .img-wrap-3-text,
html[dir="rtl"] .single-property .amaas-gallery-video-btn,
html[lang="ar"] .single-property .amaas-gallery-video-btn {
    background: #dfc187 !important;
    background-color: #dfc187 !important;
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    height: auto !important;
    min-height: 40px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.28) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}
.single-property .amaas-gallery-video-btn:hover,
.single-property .hs-gallery-v5-grid .img-wrap-3-text:hover,
.single-property .property-banner-grid-wrap .img-wrap-3-text:hover {
    background: #ba9452 !important;
    background-color: #ba9452 !important;
    color: #111 !important;
}
/* icons inside chips = black to match the label */
.single-property .amaas-gallery-video-btn svg,
.single-property .amaas-gallery-video-btn svg * ,
.single-property .hs-gallery-v5-grid .img-wrap-3-text i,
.single-property .property-banner-grid-wrap .img-wrap-3-text i {
    fill: #111 !important;
    color: #111 !important;
}
/* keep both chips pinned to the same bottom line so they align */
.single-property .amaas-gallery-video-btn {
    bottom: 15px !important;
}

/* -- Units list/grid (card) view price = gold + bigger, matching
      the compact-row price size exactly. -- */
.single-property .amaas-unit-card .item-price,
.single-property .amaas-unit-card .item-price .price,
.single-property .amaas-unit-card .item-price .price span {
    color: #dfc187 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}
.single-property .amaas-unit-card .item-price .price-prefix,
.single-property .amaas-unit-card .item-price .price-postfix {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.single-property .amaas-unit-card .item-price .sar-symbol-svg {
    height: 16px !important;
    width: auto !important;
    vertical-align: middle !important;
}

/* -- المميزات (Houzez amenity list) icons: bigger + clearer.
      Icons are uploaded per-feature SVG images. -- */
.single-property li:has(> a[href*="/feature/"]) > img,
.single-property .property-features li > img,
.single-property .fw-property-features li > img {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

/* ===========================================================================
   AMAAS_HOME_GRID_EQUAL_CARDS_V1
   Equalize the location/lifestyle grid cards on the homepage so every card is
   the same size (uniform 1:1 square). Covers EN (page-id-194) and AR
   (page-id-9603) home via body.home. Sections: "Discover Featured Locations" /
   the Arabic featured-locations section, and "Explore New Lifestyles" / the
   Arabic new-lifestyles section. Houzez grid-builder sizes each card via a
   ::before padding-top ratio (landscape 75% = 225px vs square 100% = 300px);
   forcing all to 100% makes every card a uniform square. The two card columns
   already use symmetric row gaps, so equal heights also align the rows.
   =========================================================================== */
body.home .grid-item::before {
    padding-top: 100% !important;
}

/* AMAAS_SEARCH_FIELDS_WHITE_V1
   Projects (AR page-id-9818, EN page-id-1626) and Quick Search splash (page-id-9663 / template-splash):
   the search dropdown fields were being painted flat gold by the sitewide button
   standard because the bootstrap-select toggle carries the .btn class. Search
   inputs are form fields, not CTAs, so force them WHITE with BOLD BLACK text and
   placeholders. The actual search BUTTONS keep the gold/black standard with the
   reversed hover, untouched. Scoped to these two pages only. */

/* -- Default state: dropdown fields + keyword input -> white, bold black -- */
html body.page-id-9818 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item),
html body.page-id-1626 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item),
html body.page-id-9663 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item),
html body.page-template-template-splash .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item),
html body.page-id-9818 .houzez-keyword-autocomplete,
html body.page-id-1626 .houzez-keyword-autocomplete,
html body.page-id-9663 .houzez-keyword-autocomplete,
html body.page-template-template-splash .houzez-keyword-autocomplete {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* -- Hover / focus / active on the dropdown fields must STAY white (beat the
      button-standard reversed hover which would turn them black). -- */
html body.page-id-9818 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):hover,
html body.page-id-9818 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):focus,
html body.page-id-9818 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):active,
html body.page-id-1626 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):hover,
html body.page-id-1626 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):focus,
html body.page-id-1626 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):active,
html body.page-id-9663 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):hover,
html body.page-id-9663 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):focus,
html body.page-id-9663 .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):active,
html body.page-template-template-splash .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):hover,
html body.page-template-template-splash .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):focus,
html body.page-template-template-splash .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
}

/* -- Selected value + placeholder text inside the dropdown toggle: bold black -- */
html body.page-id-9818 .bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
html body.page-id-1626 .bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
html body.page-id-9663 .bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
html body.page-template-template-splash .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
}

/* -- Keyword input placeholder: bold black (all vendor prefixes) -- */
html body.page-id-9818 .houzez-keyword-autocomplete::placeholder,
html body.page-id-1626 .houzez-keyword-autocomplete::placeholder,
html body.page-id-9663 .houzez-keyword-autocomplete::placeholder,
html body.page-template-template-splash .houzez-keyword-autocomplete::placeholder,
html body.page-id-9818 .houzez-keyword-autocomplete::-webkit-input-placeholder,
html body.page-id-1626 .houzez-keyword-autocomplete::-webkit-input-placeholder,
html body.page-id-9663 .houzez-keyword-autocomplete::-webkit-input-placeholder,
html body.page-template-template-splash .houzez-keyword-autocomplete::-webkit-input-placeholder {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
html body.page-id-9818 .houzez-keyword-autocomplete::-moz-placeholder,
html body.page-id-1626 .houzez-keyword-autocomplete::-moz-placeholder,
html body.page-id-9663 .houzez-keyword-autocomplete::-moz-placeholder,
html body.page-template-template-splash .houzez-keyword-autocomplete::-moz-placeholder {
    color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* AMAAS_BS_ACTIONS_GAP_V1
      bootstrap-select "select all / deselect all" action buttons
      (.bs-actionsbox .btn-group) sit flush against each other (gold, 8px
      radius) because the bootstrap btn-group collapses the gap and overlaps
      the second button by -1px. Add a small gap and drop the negative margin
      so the two gold buttons are visually separated. Global rule -- appears
      wherever a multi-select dropdown is used (projects, quick-search, etc). */
.bs-actionsbox .btn-group {
    display: flex !important;
    gap: 6px !important;
}
.bs-actionsbox .btn-group > .btn,
.bs-actionsbox .btn-group > .actions-btn {
    margin: 0 !important;
    flex: 1 1 auto !important;
}

/* AMAAS_SEARCH_RESULTS_FIELDS_WHITE_V1
      Search-results half-map page (body.page-template-template-search -- covers
      both AR page-id-9824 and the EN equivalent). Same rationale as
      AMAAS_SEARCH_FIELDS_WHITE_V1: the filter dropdown fields + keyword input +
      sort-by field were painted flat gold by the sitewide button standard
      because each carries the .btn class. They are FORM FIELDS, not CTAs, so
      force them WHITE with BOLD BLACK text. The actual SEARCH (.btn-search) and
      RESET (.reset-search-btn) buttons are NOT dropdown toggles, so they keep
      the gold standard -- exactly as requested: gold only on Search + Reset.
      Applies to EN + AR. */
html body.page-template-template-search .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item),
html body.page-template-template-search .houzez-keyword-autocomplete,
html body.page-template-template-search .dropdown-toggle.btn-light:not(.btn-search):not(.reset-search-btn) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
/* Hover / focus / active on the fields must STAY white (beat the sitewide
      reversed hover that would otherwise turn them black). */
html body.page-template-template-search .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):hover,
html body.page-template-template-search .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):focus,
html body.page-template-template-search .bootstrap-select > .dropdown-toggle.btn:not(.btn-close):not(.btn-item):active,
html body.page-template-template-search .dropdown-toggle.btn-light:not(.btn-search):not(.reset-search-btn):hover,
html body.page-template-template-search .dropdown-toggle.btn-light:not(.btn-search):not(.reset-search-btn):focus,
html body.page-template-template-search .dropdown-toggle.btn-light:not(.btn-search):not(.reset-search-btn):active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
}
/* Selected value + placeholder text inside the toggles: bold black. */
html body.page-template-template-search .bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
html body.page-template-template-search .dropdown-toggle.btn-light .filter-option-inner-inner {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
}
/* Keyword input placeholder: bold black (all vendor prefixes). */
html body.page-template-template-search .houzez-keyword-autocomplete::placeholder,
html body.page-template-template-search .houzez-keyword-autocomplete::-webkit-input-placeholder {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
html body.page-template-template-search .houzez-keyword-autocomplete::-moz-placeholder {
    color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* AMAAS_FOOTER_LOGO_SIZE_V1
      The bottom-center footer logo (.footer_logo.logo img) rendered at its
      full natural size (732x244), spanning nearly the whole width. UX review:
      match the header logo dimensions (183x61). The image is the same crisp
      retina master used by the header, so quality is identical -- this only
      constrains the display size and keeps it centered. */
body:not(.wp-admin) .footer_logo.logo,
body:not(.wp-admin) .footer_logo {
    text-align: center !important;
}
body:not(.wp-admin) .footer_logo.logo img,
body:not(.wp-admin) .footer_logo img {
    height: 61px !important;
    width: auto !important;
    max-width: 183px !important;
    display: inline-block !important;
    margin: 0 auto !important;
}
/* Footer about-widget logo (.widget-about-image img -> Group-247-1.png)
      rendered at 503x168. Match the header logo dimensions (183x61). Same
      crisp retina master, so quality is identical. */
body:not(.wp-admin) .widget-about-image img {
    height: 61px !important;
    width: auto !important;
    max-width: 183px !important;
    display: inline-block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMAAS_BTN_HOVER_REVERSE_FINAL_V1 — force the sitewide REVERSED hover on the
   remaining CTAs that page-level inline styles / the old darker-gold override
   kept from reversing: homepage explore CTA (.amaas-cta-btn), know-us-better
   Elementor button, discover arrow buttons, owners-support (.amaas-osp-btn),
   and the newsletter Subscribe control. Highest specificity + last in source
   so it wins over inline Elementor styles. Class-based, so EN + AR both.
   Reversed = black bg #111111 + gold text #dfc187 + gold 1px outline.
   ═══════════════════════════════════════════════════════════════════════════ */
html body:not(.wp-admin) .amaas-cta-row .amaas-cta-btn:hover,
html body:not(.wp-admin) .amaas-cta-row .amaas-cta-btn:focus,
html body:not(.wp-admin) a.amaas-osp-btn:hover,
html body:not(.wp-admin) a.amaas-osp-btn:focus,
html body:not(.wp-admin) .know-us-better .elementor-button:hover,
html body:not(.wp-admin) .know-us-better a.elementor-button:hover,
html body:not(.wp-admin) .elementor-button.elementor-animation-grow:hover,
html body:not(.wp-admin) .es_subscription_form input[type="submit"]:hover,
html body:not(.wp-admin) .es_subscription_form input[type="submit"]:focus,
html body:not(.wp-admin) .es-subscribe-btn:hover,
html body:not(.wp-admin) .es-subscribe-btn:focus,
html body:not(.wp-admin) .es-custom-button:hover,
html body:not(.wp-admin) .es-custom-button:focus,
html body:not(.wp-admin) footer input[type="submit"]:hover {
    background: #111111 !important;
    background-image: none !important;
    border-color: #dfc187 !important;
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
/* Inner labels flip to gold on hover so text stays visible on the black bg. */
html body:not(.wp-admin) .amaas-cta-row .amaas-cta-btn:hover span:not(.amaas-cta-icon),
html body:not(.wp-admin) .know-us-better .elementor-button:hover span,
html body:not(.wp-admin) .know-us-better .elementor-button:hover .elementor-button-text,
html body:not(.wp-admin) .elementor-button.elementor-animation-grow:hover span,
html body:not(.wp-admin) .elementor-button.elementor-animation-grow:hover .elementor-button-text,
html body:not(.wp-admin) a.amaas-osp-btn:hover bdi,
html body:not(.wp-admin) .es-subscribe-btn:hover span {
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
}
/* Elementor arrow icon SVG: black by default (matches text), gold on hover so
   the arrow follows the reversed hover exactly. The theme paints the path
   black rather than currentColor, so force both fill and color. */
html body:not(.wp-admin) .elementor-button .elementor-button-icon svg,
html body:not(.wp-admin) .elementor-button .elementor-button-icon svg path {
    fill: #111111 !important;
    color: #111111 !important;
    transition: fill 0.25s ease, color 0.25s ease !important;
}
html body:not(.wp-admin) .elementor-button:hover .elementor-button-icon svg,
html body:not(.wp-admin) .elementor-button:hover .elementor-button-icon svg path {
    fill: #dfc187 !important;
    color: #dfc187 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMAAS_NEWSLETTER_FIELDS_WHITE_V1 — Icegram/Email-Subscribers subscribe form
   fields (email + name) render gold text on a transparent field (low contrast).
   Make them WHITE background + BOLD BLACK text + BLACK placeholder, matching
   the projects / quick-search field standard. Sitewide (footer + any page),
   EN + AR. ═══════════════════════════════════════════════════════════════════ */
html body:not(.wp-admin) .es_subscription_form input.ig-es-form-input,
html body:not(.wp-admin) .es_subscription_form input[type="email"],
html body:not(.wp-admin) .es_subscription_form input[type="text"],
html body:not(.wp-admin) .es_subscription_form input.es_txt_email,
html body:not(.wp-admin) .es_subscription_form input.ig_es_form_field_text,
html body:not(.wp-admin) .ig_es_subscription_form input.ig-es-form-input,
html body:not(.wp-admin) .es-form input[type="email"],
html body:not(.wp-admin) .es-form input[type="text"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 600 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
}
html body:not(.wp-admin) .es_subscription_form input.ig-es-form-input::placeholder,
html body:not(.wp-admin) .es_subscription_form input[type="email"]::placeholder,
html body:not(.wp-admin) .es_subscription_form input[type="text"]::placeholder,
html body:not(.wp-admin) .ig_es_subscription_form input::placeholder,
html body:not(.wp-admin) .es-form input::placeholder {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
html body:not(.wp-admin) .es_subscription_form input.ig-es-form-input::-webkit-input-placeholder,
html body:not(.wp-admin) .es_subscription_form input[type="email"]::-webkit-input-placeholder,
html body:not(.wp-admin) .es_subscription_form input[type="text"]::-webkit-input-placeholder {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
html body:not(.wp-admin) .es_subscription_form input.ig-es-form-input::-moz-placeholder,
html body:not(.wp-admin) .es_subscription_form input[type="email"]::-moz-placeholder,
html body:not(.wp-admin) .es_subscription_form input[type="text"]::-moz-placeholder {
    color: #111111 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMAAS_PROPERTY_BTN_REVERSE_V1 — bring every remaining property-page control
   onto the sitewide button standard: FLAT gold #dfc187 + black bold text at
   rest, REVERSED on hover (black #111111 bg + gold #dfc187 text + gold outline).
   Also make the Schedule-Tour + agent-contact form fields WHITE with bold BLACK
   text and BLACK placeholders, and the time selector WHITE (it carries .btn so
   the sitewide standard was painting it gold). Appended last so it wins on
   source order. Class-based, so English + Arabic both. NOTE: no angle-bracket
   characters allowed inside these comments.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- 1. Gallery chips (Watch Video + N More) + Details button: REVERSED hover
      (replaces the old darker-gold #ba9452 hover). -- */
html body.single-property:not(.wp-admin) .amaas-gallery-video-btn:hover,
html body.single-property:not(.wp-admin) .amaas-gallery-video-btn:focus,
html body.single-property:not(.wp-admin) .hs-gallery-v5-grid .img-wrap-3-text:hover,
html body.single-property:not(.wp-admin) .property-banner-grid-wrap .img-wrap-3-text:hover,
html body.single-property:not(.wp-admin) .btn-item:hover,
html body.single-property:not(.wp-admin) .btn-item:focus,
html body.single-property:not(.wp-admin) .btn.btn-primary.btn-item:hover,
html body.single-property:not(.wp-admin) .btn.btn-primary.btn-item:focus,
html body.single-property:not(.wp-admin) #property-sub-listings-wrap a.btn-item:hover,
html body.single-property:not(.wp-admin) .item-listing-wrap a.btn-item:hover,
html body.single-property:not(.wp-admin) .houzez_agent_property_form.btn-secondary:hover,
html body.single-property:not(.wp-admin) .houzez_agent_property_form.btn-secondary:focus,
html body.single-property:not(.wp-admin) .schedule_contact_form.btn-secondary:hover,
html body.single-property:not(.wp-admin) .schedule_contact_form.btn-secondary:focus,
html body.single-property:not(.wp-admin) .houzez-ele-button.btn-secondary:hover,
html body.single-property:not(.wp-admin) .houzez-ele-button.btn-secondary:focus,
html body.single-property:not(.wp-admin) .btn-secondary-outlined:hover,
html body.single-property:not(.wp-admin) .btn-secondary-outlined:focus,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:focus {
    background: #111111 !important;
    background-color: #111111 !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    border-color: #dfc187 !important;
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
/* inner label spans/bdi flip to gold on hover so they stay visible on black */
html body.single-property:not(.wp-admin) .btn-item:hover span,
html body.single-property:not(.wp-admin) .btn-item:hover bdi,
html body.single-property:not(.wp-admin) .houzez_agent_property_form.btn-secondary:hover span,
html body.single-property:not(.wp-admin) .schedule_contact_form.btn-secondary:hover span,
html body.single-property:not(.wp-admin) .btn-secondary-outlined:hover span,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover span {
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
    font-weight: 700 !important;
}
/* WhatsApp button: flip its icon (SVG glyph + houzez i) to gold on hover so it
   stays visible on the reversed black background, matching Send + Call. */
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover i,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover .houzez-icon,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover svg,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover svg *,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover .amaas-social-fill,
html body.single-property:not(.wp-admin) a.hz-btn-whatsapp.btn:hover .amaas-social-fill path {
    color: #dfc187 !important;
    fill: #dfc187 !important;
}
/* chip icons: black at rest (already forced elsewhere), GOLD on hover */
html body.single-property:not(.wp-admin) .amaas-gallery-video-btn:hover svg,
html body.single-property:not(.wp-admin) .amaas-gallery-video-btn:hover svg *,
html body.single-property:not(.wp-admin) .hs-gallery-v5-grid .img-wrap-3-text:hover i,
html body.single-property:not(.wp-admin) .property-banner-grid-wrap .img-wrap-3-text:hover i {
    fill: #dfc187 !important;
    color: #dfc187 !important;
}

/* -- 2. Schedule-Tour day-picker arrows = flat-gold round button + reversed
      hover (were transparent with grey glyphs). Covers both the custom
      .tour-day-form-slide-arrow and the Slick native prev/next. -- */
html body.single-property:not(.wp-admin) .tour-day-form-slide-arrow,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-prev,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-next {
    background: #dfc187 !important;
    background-color: #dfc187 !important;
    background-image: none !important;
    border: 1px solid #dfc187 !important;
    border-radius: 8px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}
html body.single-property:not(.wp-admin) .tour-day-form-slide-arrow .houzez-icon,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-prev:before,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-next:before {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 1 !important;
    transition: color 0.25s ease !important;
}
html body.single-property:not(.wp-admin) .tour-day-form-slide-arrow:hover,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-prev:hover,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-next:hover {
    background: #111111 !important;
    background-color: #111111 !important;
    border-color: #dfc187 !important;
}
html body.single-property:not(.wp-admin) .tour-day-form-slide-arrow:hover .houzez-icon,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-prev:hover:before,
html body.single-property:not(.wp-admin) .property-schedule-tour-day-form-slide .slick-next:hover:before {
    color: #dfc187 !important;
    -webkit-text-fill-color: #dfc187 !important;
}

/* -- 3. Schedule-Tour + agent-contact form FIELDS: white bg, bold black text,
      black placeholders. -- */
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap input,
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap textarea,
html body.single-property:not(.wp-admin) input.form-control,
html body.single-property:not(.wp-admin) textarea.form-control,
html body.single-property:not(.wp-admin) select.form-control {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
}
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap input::placeholder,
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap textarea::placeholder,
html body.single-property:not(.wp-admin) input.form-control::placeholder,
html body.single-property:not(.wp-admin) textarea.form-control::placeholder {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap input::-webkit-input-placeholder,
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap textarea::-webkit-input-placeholder,
html body.single-property:not(.wp-admin) input.form-control::-webkit-input-placeholder,
html body.single-property:not(.wp-admin) textarea.form-control::-webkit-input-placeholder {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap input::-moz-placeholder,
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap textarea::-moz-placeholder,
html body.single-property:not(.wp-admin) input.form-control::-moz-placeholder,
html body.single-property:not(.wp-admin) textarea.form-control::-moz-placeholder {
    color: #111111 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* -- 4. Time selector (bootstrap-select) inside Schedule-Tour: it carries .btn
      so the sitewide standard painted it gold. Force it WHITE (a field, not a
      CTA) with bold black text/placeholder; keep white on hover/focus/active. -- */
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap .bootstrap-select > .dropdown-toggle.btn,
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap .bootstrap-select > .dropdown-toggle.btn:hover,
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap .bootstrap-select > .dropdown-toggle.btn:focus,
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap .bootstrap-select > .dropdown-toggle.btn:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #d1d5db !important;
    border-color: #d1d5db !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
html body.single-property:not(.wp-admin) .property-schedule-tour-form-wrap .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 700 !important;
}