/* ============================================================
   HOMEFINDER — "ELEGANT ESTATE" DESIGN SYSTEM  ·  Phase A (Home)
   Approved direction 2026-07-24 (owner's Replit concept + bilingual
   hero). Loads AFTER hf-frontend-modern.css; remove this <link>
   to fully revert. Palette: cream/sage-teal/mint/coral/gold.
   ============================================================ */
:root{
  --el-cream:#F7F4ED; --el-card:#FFFDF8; --el-mint:#E8EEE6;
  --el-teal:#2E4B46; --el-teal-deep:#1F3835; --el-teal-ink:#1A2C29;
  --el-ink:#22332F; --el-mut:#68786F; --el-line:#E7E1D3; --el-line-soft:#EFEAE0;
  --el-coral:#F27846; --el-coral-deep:#D96334; --el-gold:#F7CF91;
  --el-disp:'Manrope','Tajawal',sans-serif;
  --el-body:'DM Sans','Tajawal',sans-serif;
  --el-kufi:'Noto Kufi Arabic','Tajawal',sans-serif;
  --el-r:20px; --el-ease:cubic-bezier(.4,0,.2,1);
  /* re-point the theme's own vars at the new system */
  --color-primary:#F27846; --color-primary-rgb:242,120,70;
  --color-secondary:#2E4B46; --color-secondary-rgb:46,75,70;
}

/* ---------- global type & ground ---------- */
body{font-family:var(--el-body);color:var(--el-ink);background:var(--el-cream)}
h1,h2,h3,h4,h5,h6,.title{font-family:var(--el-disp);color:var(--el-ink);font-weight:800;letter-spacing:-.015em}
.section-title .title,.content-title h2{font-weight:800;color:var(--el-ink)}
a{transition:color .15s var(--el-ease)}

/* eyebrow utility (also restyles theme .subtitle) */
.hf-kick,.content-title .subtitle,.section-title .subtitle{display:inline-block;font-family:var(--el-body);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--el-coral);background:none;border:0;padding:0;margin-bottom:10px}
.content-title .line,.section-title .line{display:none}

/* ---------- NAVBAR ---------- */
.header-area.header-1{background:var(--el-cream);border-bottom:1px solid var(--el-line)}
.main-navbar .navbar-nav .nav-link{font-family:var(--el-body);font-weight:500;font-size:15px;color:var(--el-ink);padding:9px 13px;border-radius:9px}
.main-navbar .navbar-nav > .nav-item > .nav-link:hover{color:var(--el-coral);background:rgba(242,120,70,.07)}
.navbar-brand img{max-height:46px;width:auto}
.header-area.header-1.is-sticky{background:rgba(247,244,237,.94);backdrop-filter:blur(10px);box-shadow:0 6px 22px rgba(26,44,41,.08)}
/* home: transparent bar over the teal hero */




/* right-cluster pills */
.hf-pill{background:transparent;border:1.5px solid var(--el-line);color:var(--el-ink);font-weight:600;font-size:13.5px;padding:6.5px 15px;border-radius:999px;letter-spacing:.2px}
.hf-pill:hover,.hf-pill:focus{border-color:var(--el-coral);color:var(--el-coral);box-shadow:none;background:transparent}


#currencyDropdown{border:1.5px solid var(--el-line)!important;border-radius:999px!important;padding:6.5px 15px!important;color:var(--el-ink)!important;background:transparent!important}
#currencyDropdown:hover{border-color:var(--el-coral)!important;color:var(--el-coral)!important}
.hf-cta{display:inline-block;background:var(--el-coral);color:#fff!important;font-weight:600;font-size:13.5px;line-height:1;padding:11px 19px;border-radius:999px;box-shadow:0 4px 14px rgba(242,120,70,.35);white-space:nowrap;transition:background .15s var(--el-ease),transform .15s var(--el-ease)}
.hf-cta:hover{background:var(--el-coral-deep);transform:translateY(-1px)}

/* ---------- HERO ---------- */
.home-banner-1{position:relative;overflow:hidden;background:linear-gradient(150deg,#365650 0%,var(--el-teal) 45%,var(--el-teal-deep) 100%)!important;padding-top:140px;padding-bottom:90px}
.home-banner-1 .bg-img{display:none}
.home-banner-1::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.home-banner-1 .container{position:relative;z-index:2}
.hf-kick-hero{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#A9C2BB;margin-bottom:18px}
.hf-kick-hero::before{content:"";width:22px;height:1.5px;background:var(--el-gold)}
.hf-hero-ar{font-family:var(--el-kufi);font-weight:700;color:var(--el-gold);font-size:clamp(26px,3.4vw,42px);line-height:1.5;margin:0 0 4px;direction:rtl;text-align:left}
.home-banner-1 .content .title{font-family:var(--el-disp);font-weight:800;font-size:clamp(2.6rem,2rem + 3vw,4.6rem);line-height:1.06;letter-spacing:-.025em;color:#F5F2E9!important}
.home-banner-1 .content .title .hf-gold{color:var(--el-gold)}
.home-banner-1 .content .text{color:#C9D8D2!important;font-size:1.05rem;line-height:1.75;max-width:560px}

/* search card */
.banner-filter-form{margin-top:28px}
.banner-filter-form .nav-tabs{border:0;background:transparent;gap:22px;margin-bottom:0;padding:0 6px}
.banner-filter-form .nav-tabs .nav-link{border:0!important;background:transparent!important;font-family:var(--el-body);font-weight:700;font-size:14.5px;color:#B9CCC5!important;padding:10px 2px;position:relative;border-radius:0!important}
.banner-filter-form .nav-tabs .nav-link.active{color:#fff!important}
.banner-filter-form .nav-tabs .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;background:var(--el-coral)}
.banner-filter-form .tab-content,.banner-filter-form .form-wrapper{border:1px solid rgba(255,255,255,.12)!important;border-radius:22px!important;background:#FBF8F1!important;box-shadow:0 26px 60px rgba(15,28,26,.35)!important}
.banner-filter-form label{font-family:var(--el-body);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8A9790;margin-bottom:6px}
.banner-filter-form .form-control,.banner-filter-form select.form-control{border:1.5px solid var(--el-line)!important;border-radius:12px!important;min-height:46px;background:#fff!important;font-size:14.5px;color:var(--el-ink)}
.banner-filter-form .form-control:focus{border-color:var(--el-coral)!important;box-shadow:0 0 0 3px rgba(242,120,70,.15)!important}
.banner-filter-form .select2-container--default .select2-selection--single{height:46px!important;display:flex!important;align-items:center!important;background:#fff!important;border:1.5px solid var(--el-line)!important;border-radius:12px!important}
.banner-filter-form .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:normal!important;padding-left:14px!important;color:var(--el-ink)!important;font-size:14.5px!important}
.banner-filter-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px!important;top:1px!important}
.banner-filter-form [type="submit"]{background:var(--el-coral)!important;border:0!important;border-radius:14px!important;font-family:var(--el-body);font-weight:700!important;letter-spacing:.01em;box-shadow:0 8px 22px rgba(242,120,70,.4)!important;transition:background .16s var(--el-ease),transform .16s var(--el-ease)}
.banner-filter-form [type="submit"]:hover{background:var(--el-coral-deep)!important;transform:translateY(-2px)}

/* ---------- SECTIONS ---------- */
.product-area,.about-area,.choose-area{background:var(--el-cream)}
.gallery-area{background:var(--el-mint);border-radius:0}
.section-title .title,.content-title h2{font-size:clamp(1.6rem,1.2rem+1.5vw,2.3rem)}

/* ---------- PROPERTY CARDS ---------- */
.product-default{background:var(--el-card);border:1px solid var(--el-line);border-radius:var(--el-r);overflow:hidden;box-shadow:0 2px 10px rgba(26,44,41,.05);transition:transform .22s var(--el-ease),box-shadow .22s var(--el-ease)}
.product-default:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(26,44,41,.14)}
.product-default .product-img{overflow:hidden;position:relative}
.product-default .product-img img{transition:transform .45s var(--el-ease)}
.product-default:hover .product-img img{transform:scale(1.05)}
.product-default .product-img .label{background:rgba(251,248,241,.95)!important;color:var(--el-teal)!important;font-family:var(--el-body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border-radius:8px;padding:5px 12px;box-shadow:0 2px 8px rgba(26,44,41,.14)}
.product-default .product-details{padding:16px 18px 16px}
.product-default .product-title{font-family:var(--el-disp);font-weight:700;font-size:16.5px;line-height:1.3}
.product-default .product-title a:hover{color:var(--el-coral)}
.product-default .product-location{font-size:13px;color:var(--el-mut)}
.product-default .product-category{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--el-coral);background:none;padding:0}
.product-default .product-price .new-price{font-family:var(--el-disp);font-weight:800;font-size:20px;color:var(--el-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.product-default .product-info{border-top:1px solid var(--el-line-soft);margin-top:12px;padding-top:12px;font-size:13px;color:var(--el-mut)}
.product-default .author img{border:2px solid #fff;box-shadow:0 0 0 2px var(--el-line);border-radius:50%}
.hf-featured-badge{background:var(--el-teal)!important;color:var(--el-gold)!important;border-radius:8px;font-size:10.5px;letter-spacing:.14em}

/* ---------- PAGE-TITLE BANDS (restyle keepers) ---------- */
.page-title-area.hf-band{background:linear-gradient(150deg,#365650 0%,var(--el-teal) 55%,var(--el-teal-deep) 100%)}
.page-title-area.hf-band h1{font-family:var(--el-disp);color:#F5F2E9}
.page-title-area.hf-band ul li{color:#A9C2BB}
.page-title-area.hf-band ul li a{color:#A9C2BB}
.page-title-area.hf-band ul li.active{color:var(--el-gold)}
.hf-band-tick{background:var(--el-coral)}

/* ---------- NEWSLETTER (restyle keepers) ---------- */
.newsletter-area{background:linear-gradient(135deg,var(--el-teal-ink) 0%,var(--el-teal) 100%)}
.newsletter-area p{color:#B9CCC5}
.newsletter-area [type="submit"],.newsletter-area .btn-primary{background:var(--el-coral)!important;box-shadow:0 8px 22px rgba(242,120,70,.4)!important}
.newsletter-area [type="submit"]:hover,.newsletter-area .btn-primary:hover{background:var(--el-coral-deep)!important}

/* ---------- FOOTER (restyle keepers) ---------- */
.footer-area.border,footer.footer-area,.footer-area{background:var(--el-teal-ink)!important}
.footer-area,.footer-area p{color:#A9BDB6}
.footer-area a,.footer-area .footer-links li a,.footer-area .copy-right-content,.footer-area .copy-right-content span,.footer-area li,.footer-area span{color:#A9BDB6!important}
.footer-area a:hover,.footer-area .footer-links li a:hover{color:var(--el-gold)!important}

/* ---------- BUTTONS GLOBAL ---------- */
.theme-btn,.btn-primary{background:var(--el-coral);border-color:var(--el-coral);border-radius:12px;font-family:var(--el-body);font-weight:600;transition:transform .16s var(--el-ease),background .16s var(--el-ease)}
.theme-btn:hover,.btn-primary:hover{background:var(--el-coral-deep);border-color:var(--el-coral-deep);transform:translateY(-1px)}

/* ---------- RTL & responsive ---------- */
html[dir="rtl"] .hf-hero-ar{text-align:right}
html[dir="rtl"] .hf-kick-hero::before{order:2}
@media(max-width:991px){.home-banner-1{padding-top:115px;padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){.product-default,.product-default .product-img img,.hf-cta,.theme-btn,.btn-primary,.banner-filter-form [type="submit"]{transition:none}}
/* ================== END ELEGANT PHASE A ==================== */


/* ============================================================
   ELEGANT PHASE B — owner's filter mix (2026-07-24)
   home: segmented tabs + compact primary search + more-filters
   /properties: top filter card + chips + hidden legacy sidebar
   ============================================================ */
/* -- segmented pill tabs (replaces Phase-A underline style) -- */
.banner-filter-form .nav-tabs{background:#EFEAE0;border:0;border-radius:999px;display:inline-flex;padding:5px;gap:2px;margin-bottom:16px}
.banner-filter-form .nav-tabs .nav-link{border:0!important;border-radius:999px!important;background:transparent!important;font-family:var(--el-body);font-weight:700;font-size:14px;color:#7C8A82!important;padding:9px 22px;display:inline-flex;align-items:center;gap:8px}
.banner-filter-form .nav-tabs .nav-link.active{background:#fff!important;color:var(--el-ink)!important;box-shadow:0 2px 10px rgba(26,44,41,.12)}
.banner-filter-form .nav-tabs .nav-link.active::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--el-coral)}
.banner-filter-form .nav-tabs .nav-link.active::after{display:none}
.banner-filter-form .nav-tabs .hf-tab-link:hover{color:var(--el-ink)!important}

/* -- compact primary search row (collapsed state) -- */
#rent form:not(.hf-open) .grid > .grid-item:nth-child(3),
#rent form:not(.hf-open) .grid > .grid-item:nth-child(4),
#rent form:not(.hf-open) .grid > .grid-item:nth-child(5),
#rent form:not(.hf-open) .grid > .grid-item:nth-child(6),
#rent form:not(.hf-open) .grid > .grid-item:nth-child(9),
#rent form:not(.hf-open) .grid > .grid-item:nth-child(10){display:none}
#rent form:not(.hf-open) .grid{display:grid;grid-template-columns:1.6fr 1.1fr .75fr .75fr auto;gap:12px;align-items:end}
#sale form:not(.hf-open) .grid > .grid-item:nth-child(3),
#sale form:not(.hf-open) .grid > .grid-item:nth-child(4),
#sale form:not(.hf-open) .grid > .grid-item:nth-child(7),
#sale form:not(.hf-open) .grid > .grid-item:nth-child(8),
#sale form:not(.hf-open) .grid > .grid-item:nth-child(9){display:none}
#sale form:not(.hf-open) .grid{display:grid;grid-template-columns:1.6fr 1.1fr .75fr .75fr auto;gap:12px;align-items:end}
@media(max-width:840px){
  #rent form:not(.hf-open) .grid,#sale form:not(.hf-open) .grid{grid-template-columns:1fr 1fr}
}
.hf-more-toggle{margin-top:12px;background:none;border:0;color:var(--el-mut);font-family:var(--el-body);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:4px 2px}
.hf-more-toggle:hover{color:var(--el-coral)}
.hf-more-toggle i{transition:transform .2s var(--el-ease)}
form.hf-open .hf-more-toggle i{transform:rotate(180deg)}
.hf-popular{margin:14px 4px 0;font-size:13.5px;color:#A9C2BB}
.hf-popular a{color:#EDE9DC;font-weight:600}
.hf-popular a:hover{color:var(--el-gold)}

/* -- /properties: top filter card -- */
.hf-oldfilters{display:none}
/* legacy sidebar retired — the card expands instead */
.hf-results{flex:0 0 100%;max-width:100%}
.hf-filterbar{background:#FFFDF8;border:1px solid var(--el-line);border-radius:18px;padding:16px 18px;box-shadow:0 2px 12px rgba(26,44,41,.05);margin-bottom:18px}
.hf-fb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end}
@media(max-width:1200px){.hf-fb-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.hf-fb-grid{grid-template-columns:1fr 1fr}}
.hf-fb-field{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--el-line);border-radius:12px;background:#fff;padding:8px 12px;margin:0}
.hf-fb-field > span{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8A9790}
.hf-fb-field select,.hf-fb-field input{border:0;outline:0;background:transparent;font-family:var(--el-body);font-size:14px;font-weight:600;color:var(--el-ink);width:100%;padding:0}
.hf-fb-pair{display:flex;gap:6px;align-items:center}
.hf-fb-pair input{width:50%;font-variant-numeric:tabular-nums}
.hf-fb-apply{background:var(--el-coral);color:#fff;border:0;border-radius:12px;font-family:var(--el-body);font-weight:700;font-size:14.5px;padding:14px 26px;box-shadow:0 6px 16px rgba(242,120,70,.35);cursor:pointer;transition:background .15s var(--el-ease),transform .15s var(--el-ease)}
.hf-fb-apply:hover{background:var(--el-coral-deep);transform:translateY(-1px)}
.hf-fb-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1.5px dashed var(--el-line);margin-top:14px;padding-top:13px}
.hf-fb-count{font-size:14px;color:var(--el-mut);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hf-fb-count b{font-family:var(--el-disp);font-weight:800;font-size:19px;color:var(--el-teal)}
.hf-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#B4552B;background:#FBE3D9;border:1px solid #F0C3AE;border-radius:999px;padding:5px 12px}
.hf-chip:hover{background:#F7D4C4;color:#9C4420}
.hf-chip span{font-size:14px;line-height:1}
.hf-fb-more{background:none;border:1.5px solid var(--el-line);border-radius:999px;color:var(--el-ink);font-family:var(--el-body);font-weight:600;font-size:13px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.hf-fb-more:hover{border-color:var(--el-coral);color:var(--el-coral)}
body.hf-more-open .hf-oldfilters .sidebar-widget-area{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-items:start}
/* sort control polish */
.product-sort-area .form-select{border:1.5px solid var(--el-line);border-radius:10px;font-family:var(--el-body);font-weight:600}
/* ================== END ELEGANT PHASE B ==================== */

/* -- PHASE B POLISH -- */
.banner-filter-form .nav-tabs{background:#EFEAE0!important}
.banner-filter-form .nav-tabs .nav-link{color:#7C8A82!important}
.banner-filter-form .nav-tabs .nav-link.active{background:#fff!important;color:#22332F!important}
.banner-filter-form .nav-tabs .nav-link.active::before{content:""!important;display:inline-block!important;width:7px;height:7px;border-radius:50%;background:#F27846}
.home-banner-1 .hf-popular{color:#A9C2BB!important}
.home-banner-1 .hf-popular a{color:#EDE9DC!important}
.home-banner-1 .hf-popular a:hover{color:#F7CF91!important}
#rent form:not(.hf-open) .grid .form-control,#sale form:not(.hf-open) .grid .form-control{width:100%}
#rent form:not(.hf-open) .grid .form-group,#sale form:not(.hf-open) .grid .form-group{margin-bottom:0}

/* -- PHASE B FIXPACK 2 (owner feedback): centered capsule tabs,
      uniform equal boxes, centered text, working more-filters -- */
.banner-filter-form .nav-tabs{display:flex!important;width:max-content!important;margin:0 auto 16px!important;border-radius:999px!important;overflow:hidden;padding:5px!important}
.banner-filter-form .nav-tabs .nav-link{border-radius:999px!important}
.banner-filter-form .nav-tabs .nav-link:not(.active)::before{display:none!important;content:none!important}
#rent form:not(.hf-open) .grid,#sale form:not(.hf-open) .grid{display:grid!important;grid-template-columns:1.6fr 1.1fr .8fr .8fr auto!important;gap:14px!important;align-items:end!important;justify-content:stretch!important}
#rent .grid > .grid-item,#sale .grid > .grid-item{width:100%!important;min-width:0!important;flex:none!important;margin:0!important}
#rent form.hf-open .grid,#sale form.hf-open .grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:14px!important;align-items:end!important}
#rent .grid .form-group,#sale .grid .form-group{margin:0!important;width:100%}
#rent .grid .form-control,#sale .grid .form-control{width:100%!important;height:48px!important;padding:0 14px!important;display:flex;align-items:center;line-height:normal!important}
#rent .grid input.form-control,#sale .grid input.form-control{display:block;line-height:46px!important;padding:0 14px!important}
#rent .grid select.form-control,#sale .grid select.form-control{padding:0 12px!important}
.banner-filter-form .select2-container{width:100%!important}
.banner-filter-form .select2-container--default .select2-selection--single{height:48px!important}
#rent .grid .grid-item .btn,#sale .grid .grid-item .btn{height:48px;display:flex;align-items:center;justify-content:center}

/* ============================================================
   ELEGANT PHASE C — property detail polish
   ============================================================ */
.product-single-gallery img,.product-single-gallery .swiper{border-radius:18px}
.product-single-details{background:#FFFDF8;border:1px solid var(--el-line);border-radius:18px;box-shadow:0 2px 12px rgba(26,44,41,.05)}
.sidebar-widget-area .widget{background:#FFFDF8;border:1px solid var(--el-line);border-radius:18px;box-shadow:0 2px 12px rgba(26,44,41,.05)}
.product-single .product-price .new-price,.product-single-details .new-price{font-family:var(--el-disp);font-weight:800;color:var(--el-ink);font-variant-numeric:tabular-nums}
.product-featured .featured-list li{background:var(--el-mint);border:0;border-radius:12px;color:var(--el-teal);font-weight:600}
.product-single .nav-tabs .nav-link.active{color:var(--el-coral);border-color:var(--el-coral)}
.widget-form .form-control{border:1.5px solid var(--el-line);border-radius:12px}
.widget-form [type="submit"],.widget .theme-btn{background:var(--el-coral);border-color:var(--el-coral);border-radius:12px}
/* ================== END ELEGANT PHASE C ==================== */

/* -- LOGO SIZING FIX: brand box collapses to 0 width; global img
      max-width:100% then caps the logo at 0. Explicit height +
      max-width:none breaks the circle. -- */
.header-area.header-1 .navbar-brand{display:flex!important;align-items:center;min-width:max-content}
.header-area.header-1.is-sticky .navbar-brand img{height:38px!important}
.main-responsive-nav .logo img{height:56px!important;max-width:none!important;width:auto!important}

/* -- LOGO FIT TUNE: keep the CTA on-screen at laptop widths -- */
@media(max-width:1500px){
  .main-navbar .navbar-nav .nav-link{padding:9px 9px;font-size:14.5px}
  .hf-pill,#currencyDropdown{padding:6px 12px!important;font-size:13px}
  .hf-cta{padding:10px 15px;font-size:13px}
}
@media(max-width:1300px){
  .main-navbar .navbar-nav .nav-link{padding:8px 7px;font-size:14px}
}


/* -- LOGO FINAL: back in the navbar, bar-height, always visible -- */
.header-area.header-1 .navbar-brand{position:static!important;display:flex!important;align-items:center;min-width:max-content;margin:0 10px 0 0!important}
.header-area.header-1 .navbar-brand img{height:46px!important;max-height:none!important;max-width:none!important;width:auto!important;margin:0!important;filter:none!important}
.main-responsive-nav .logo img{height:40px!important;max-width:none!important;width:auto!important}

/* -- NAV TAD BIGGER -- */
.header-area.header-1 .main-navbar{padding:10px 0}

/* -- PF-STYLE SOLID BAR: cream bar on every page, more air -- */
.header-area.header-1{background:var(--el-cream)!important;border-bottom:1px solid var(--el-line)!important}
.main-navbar .navbar-nav .nav-link{font-size:15.5px;font-weight:600;padding:10px 14px}

/* -- NAV FIT LADDER: keep logo big on wide screens, tighten the
      row progressively so the CTA never falls off. -- */
@media(max-width:1500px){
  .main-navbar .navbar-nav .nav-link{padding:8px 8px;font-size:14px}
  .header-area.header-1 .navbar-brand img{height:42px!important}
  .hf-pill,#currencyDropdown{padding:5px 11px!important;font-size:12.5px!important}
  .hf-cta{padding:9px 13px;font-size:12.5px}
  .main-navbar .more-option{gap:6px!important}
}
@media(max-width:1350px){
  .main-navbar .navbar-nav .nav-link{padding:7px 6px;font-size:13.5px}
  .header-area.header-1 .navbar-brand img{height:38px!important}
  .hf-pill,#currencyDropdown{padding:5px 9px!important;font-size:12px!important}
  .hf-cta{padding:8px 11px;font-size:12px}
}

/* -- AR hero: demoted latin line (mirror of .hf-hero-ar) -- */
.hf-hero-alt{font-family:var(--el-disp);font-weight:700;color:var(--el-gold);font-size:clamp(20px,2.4vw,30px);line-height:1.25;margin:6px 0 0}
html[dir="rtl"] .home-banner-1 .content .title,html[dir="rtl"] .hf-hero-alt,html[dir="rtl"] .hf-kick-hero,html[dir="rtl"] .home-banner-1 .content .text{text-align:right}
html[dir="rtl"] .hf-kick-hero{flex-direction:row-reverse}


/* ============================================================
   ADVANCED FILTER PANEL — /properties card expands downward
   ============================================================ */
.hf-fb-adv{display:none;border-top:1.5px dashed var(--el-line);margin-top:14px;padding-top:14px}
.hf-filterbar.hf-adv-open .hf-fb-adv{display:block;animation:hfAdvIn .18s var(--el-ease)}
@keyframes hfAdvIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.hf-fb-advgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1200px){.hf-fb-advgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.hf-fb-advgrid{grid-template-columns:1fr 1fr}}
.hf-fb-amen{margin-top:14px}
.hf-fb-amenlab{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8A9790;margin:0 0 8px}
.hf-fb-amenwrap{display:flex;flex-wrap:wrap;gap:7px}
.hf-amchip{margin:0;cursor:pointer}
.hf-amchip input{position:absolute;opacity:0;pointer-events:none}
.hf-amchip span{display:inline-block;font-size:12.5px;font-weight:500;color:var(--el-mut);background:#fff;border:1.5px solid var(--el-line);border-radius:999px;padding:6px 13px;transition:all .14s var(--el-ease)}
.hf-amchip:hover span{border-color:var(--el-coral);color:var(--el-coral)}
.hf-amchip input:checked + span{background:var(--el-coral);border-color:var(--el-coral);color:#fff;font-weight:600}
.hf-filterbar.hf-adv-open .hf-fb-more{border-color:var(--el-coral);color:var(--el-coral);background:rgba(242,120,70,.06)}
.hf-filterbar.hf-adv-open .hf-fb-more i{transform:rotate(180deg)}
.hf-fb-more i{transition:transform .2s var(--el-ease)}
/* ============ END ADVANCED FILTER PANEL ==================== */


/* -- Apply pinned to the bottom of the filter form -- */
.hf-fb-actions{display:flex;justify-content:flex-end;margin-top:14px}
.hf-fb-actions .hf-fb-apply{min-width:160px;padding:13px 30px}
@media(max-width:767px){
  .hf-fb-actions{margin-top:12px}
  .hf-fb-actions .hf-fb-apply{width:100%;min-width:0}
}


/* ============================================================
   RTL CARD BADGES — mirror the FEATURED / purpose tags
   In Arabic the badges sit flush to the RIGHT edge, so the flat
   side must face that edge and the rounded corners face inward.
   Arabic is cursive: letter-spacing breaks letter joining.
   ============================================================ */
html[dir="rtl"] .product-default .hf-featured-badge{
  border-radius:8px 0 0 8px;      /* was 0 8 8 0 (correct for LTR only) */
  letter-spacing:0;               /* never letter-space Arabic */
  font-size:12px;                 /* optical match for English uppercase */
  padding:6px 13px;
}
html[dir="rtl"] .product-default .hf-featured-badge::before{font-size:12px}
html[dir="rtl"] .hf-featured-badge.hf-featured-inline{letter-spacing:0;font-size:12px}
/* purpose tag (Rent / Buy) — mirror only if the theme gave it flat/rounded sides */
html[dir="rtl"] .product-default .product-img .label{letter-spacing:0}
/* ================== END RTL CARD BADGES ==================== */

/* ===== MUHARRAQ MODERN — HOME BACKGROUND ===== */
/* Concept 01 from the three-concepts deck: warm paper ground with two soft
   glows (orange top-right, sand mid-left) in place of the dark teal hero.
   The hero's text is re-inked here only because white/gold on paper is
   unreadable — nothing else about the hero changes. Delete this block to revert. */
:root{
  --mq-paper:#FBFAF8;    /* Paper  */
  --mq-ink:#1E2A2E;      /* Ink    */
  --mq-orange:#F08A00;   /* Muharraq's amber — used in the ground glow */
  --mq-sand:#EDE7DC;     /* Sand   */
  --mq-mut:#6B7A74;      /* muted ink for secondary copy */
  /* Accent for the hero words that had to leave gold behind. Kept as the site's
     existing coral so the page still has ONE accent hue (the coral CTA button is
     right beside the headline). Swap to var(--mq-orange) for Muharraq's amber. */
  --mq-accent:var(--el-coral);
}

/* --- the ground --- */
.home-banner-1{
  background:var(--mq-paper)!important;
  background-image:
    radial-gradient(900px 400px at 85% -5%,rgba(240,138,0,.07),transparent 60%),
    radial-gradient(700px 380px at -10% 30%,rgba(237,231,220,.8),transparent 60%)!important;
}
/* the old white dot texture is invisible on paper — Muharraq's ground is clean */
.home-banner-1::before{display:none}

/* page ground below the hero picks up the same paper */
body{background:var(--mq-paper)}
.product-area,.about-area,.choose-area{background:var(--mq-paper)}

/* --- hero text re-inked for a light ground --- */
.home-banner-1 .content .title{color:var(--mq-ink)!important}
.home-banner-1 .content .title .hf-gold{color:var(--mq-accent)}
.home-banner-1 .content .text{color:var(--mq-mut)!important}
.hf-kick-hero{color:var(--mq-mut)}
.hf-kick-hero::before{background:var(--mq-accent)}
.hf-hero-ar,.hf-hero-alt{color:var(--mq-accent)}
.home-banner-1 .hf-popular{color:var(--mq-mut)!important}
.home-banner-1 .hf-popular a{color:var(--mq-ink)!important}
.home-banner-1 .hf-popular a:hover{color:var(--mq-accent)!important}

/* the search card used to float on a dark ground; on paper it needs a real edge
   (its white 12%-alpha border was invisible against the new background) */
.banner-filter-form .tab-content,.banner-filter-form .form-wrapper{
  border:1px solid #EFE9DE!important;
  box-shadow:0 18px 48px -24px rgba(30,42,46,.32)!important;
}
/* ===== END MUHARRAQ MODERN — HOME BACKGROUND ===== */

/* === HF MUHARRAQ INNER BANDS (patch_innerbands) === */
/* Home moved to the Muharraq paper ground; these bands were still dark teal,
   so the site read as two designs. Paper ground + Muharraq ink, same tokens. */
.page-title-area.hf-band {
  background: #FBFAF8 !important;
  /* ONE large, very soft warm glow. The home hero's two-glow recipe does not
     transfer: compressed into a ~226px band the bottom-left teal glow reads as
     a grey smudge rather than ambient light. */
  background-image:
    radial-gradient(120% 190% at 88% 0%, rgba(242,120,70,.055) 0%, rgba(242,120,70,0) 58%) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(34,51,47,.08) !important;
}
/* h1 carries .color-white from the theme -- override it */
.page-title-area.hf-band h1,
.page-title-area.hf-band h1.color-white {
  color: #1E2A2E !important;
}
.page-title-area.hf-band ul li,
.page-title-area.hf-band ul li a { color: #6B7A74 !important; }
.page-title-area.hf-band ul li a:hover { color: #1E2A2E !important; }
.page-title-area.hf-band ul li.active { color: var(--el-coral) !important; }
.page-title-area.hf-band .hf-sep { color: #6B7A74 !important; opacity: .45 !important; }
/* dot texture was white-on-dark -> re-ink for paper */
.page-title-area.hf-band .hf-band-dots {
  background-image: radial-gradient(rgba(34,51,47,.18) 1px, transparent 1px) !important;
  opacity: .10 !important;
}
/* skyline SVG was stroked #BFE3E6 (light on dark) -> would vanish on paper */
.page-title-area.hf-band .hf-band-sky,
.page-title-area.hf-band .hf-band-sky * {
  stroke: #2E4B46 !important;
  opacity: .16 !important;
}
/* === END HF MUHARRAQ INNER BANDS === */

/* === HF PEOPLE FINDER (patch_people_finder) === */
.hf-pf-wrap{position:relative;z-index:6;margin-top:-52px;margin-bottom:34px}
.hf-pf{background:#fff;border:1px solid rgba(34,51,47,.08);border-radius:16px;
  box-shadow:0 12px 34px rgba(34,51,47,.10);padding:18px}
.hf-pf__tabs{display:flex;gap:8px;margin-bottom:14px}
.hf-pf__tab{display:inline-block;padding:8px 20px;border-radius:999px;font-size:14px;
  font-weight:600;color:#6B7A74;background:#F5F2EC;border:1px solid transparent;
  text-decoration:none;transition:.18s}
.hf-pf__tab:hover{color:#1E2A2E}
.hf-pf__tab.is-active{color:var(--el-coral);background:#fff;border-color:var(--el-coral)}
.hf-pf__form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hf-pf__field{flex:1 1 170px;min-width:0}
.hf-pf__field--grow{flex:2 1 260px}
.hf-pf__field input,.hf-pf__field select{width:100%;height:48px;padding:0 14px;font-size:14px;
  color:#22332F;background:#fff;border:1px solid rgba(34,51,47,.16);border-radius:10px;
  outline:none;appearance:none;-webkit-appearance:none}
.hf-pf__field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236B7A74' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.hf-pf__field input:focus,.hf-pf__field select:focus{border-color:var(--el-coral)}
.hf-pf__field input::placeholder{color:#9AA8A2}
.hf-pf__btn{height:48px;padding:0 22px;border:0;border-radius:10px;background:var(--el-coral);
  color:#fff;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;transition:.18s}
.hf-pf__btn:hover{filter:brightness(.95)}
/* RTL: flip the select arrow and the button padding */
[dir="rtl"] .hf-pf__field select{background-position:left 14px center;padding-right:14px;padding-left:34px}
@media(max-width:767px){
  .hf-pf-wrap{margin-top:-28px}
  .hf-pf__field,.hf-pf__field--grow{flex:1 1 100%}
  .hf-pf__btn{width:100%;justify-content:center}
}
/* === END HF PEOPLE FINDER === */

/* === HF CARD STYLE (card_style.py) === */
/* ================= PROPERTY CARD — STYLE 02 "DILMUN" =================
   Values lifted from concept 3 of the three-concepts deck (artifact
   1be1e52b), so this is the real thing, not an approximation:
     sand #F5EEE1 · teal #14535F · terracotta #C4643B / deep #A34E2C
     ink #26221C · hairline #E3D7C2 · muted #6E655A · card #FDF9F0
     Bricolage Grotesque 700/800 · Figtree · Noto Kufi Arabic 700
   ==================================================================== */
/* NOTE ON !important: /properties carries a PAGE-LEVEL inline <style> with
   `.product-default{background:white!important;border-radius:8px!important;
   box-shadow:…!important}`. Inline blocks come after every external sheet, so
   the card shell must be flagged to win. Any future card style needs the same.
   (Typography/children are fine unflagged — only the shell is contested.) */
.hf-dc.product-default{
  --dc-sand:#F5EEE1; --dc-teal:#14535F; --dc-terra:#FF9400; --dc-terra-d:#FF9400;   /* owner: use the ORIGINAL brand orange, not terracotta */
  --dc-ink:#26221C; --dc-line:#E3D7C2; --dc-mut:#6E655A; --dc-card:#FDF9F0;
  position:relative;
  background:var(--dc-card) !important;
  border:1px solid var(--dc-line) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 2px 12px rgba(38,34,28,.06) !important;
  padding:0;display:flex;flex-direction:column;
  font-family:'Figtree',system-ui,-apple-system,sans-serif;color:var(--dc-ink);
  transition:transform .2s ease, box-shadow .2s ease}
.hf-dc.product-default:hover{transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(38,34,28,.13) !important}

/* featured = terracotta frame + warm glow (concept: .feat) */
.hf-dc.is-feat.product-default{border:2px solid var(--dc-terra) !important;
  box-shadow:0 12px 30px rgba(255,148,0,.22) !important}

/* ---- art / image ---- */
.hf-dc__art{position:relative;aspect-ratio:16/10;overflow:hidden;background:#EBDFC8}
.hf-dc__imglink{display:block;width:100%;height:100%}
.hf-dc__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.hf-dc.product-default:hover .hf-dc__art img{transform:scale(1.04)}

.hf-dc__badge{position:absolute;top:12px;left:12px;z-index:3;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:7px;color:#FDF6EC;line-height:1}
.hf-dc__badge.is-rent{background:var(--dc-teal)}
.hf-dc__badge.is-sale{background:var(--dc-ink)}

/* Featured sits on the SAME SIDE as the purpose badge, stacked under it — the
   original design. It used to sit top-right where it collided with the heart
   (measured 6px of overlap). */
.hf-dc__feat{position:absolute;top:44px;left:12px;right:auto;z-index:3;background:var(--dc-terra);color:#FDF6EC;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:7px;line-height:1}

.hf-dc .btn-wishlist.hf-dc__fav{position:absolute;top:10px;right:10px;left:auto;z-index:4;
  width:32px;height:32px;border-radius:8px;background:#FDF6EC;display:flex;align-items:center;
  justify-content:center;font-size:14px;border:1px solid var(--dc-line)}
/* Heart is TEAL, never ink/black — including while the CARD is hovered, and on
   the <i> itself, since the icon font can carry its own colour. */
.hf-dc .btn-wishlist.hf-dc__fav,
.hf-dc .btn-wishlist.hf-dc__fav i,
.hf-dc.product-default:hover .btn-wishlist.hf-dc__fav,
.hf-dc.product-default:hover .btn-wishlist.hf-dc__fav i{color:var(--dc-teal) !important}
/* saved / direct hover keeps the terracotta accent so the action still reads */
.hf-dc .btn-wishlist.hf-dc__fav:hover,
.hf-dc .btn-wishlist.hf-dc__fav:hover i,
.hf-dc .btn-wishlist.wishlist-active,
.hf-dc .btn-wishlist.wishlist-active i{color:var(--dc-terra) !important}
.hf-dc .btn-wishlist.hf-dc__fav:hover,
.hf-dc .btn-wishlist.wishlist-active{border-color:var(--dc-terra)}

/* Logo FILLS its rounded square — no padding ring. Broker photos are square
   (verified 1280x1280), so cover crops nothing; overflow:hidden makes the image
   respect the 11px radius. */
/* border removed too — it was the last 1px of inset. Edge definition comes from
   a shadow instead, which costs no space inside the square. */
/* Logo is a child of .hf-dc__body (see blade). Positioning it against the BODY
   makes it deterministic: the photo's height changes with the grid width, the
   body's top edge does not. Desktop grid lifts it onto the photo with a
   negative top; phones leave it ON THE CARD. */
.hf-dc__body{position:relative}
.hf-dc__logo{position:absolute;top:-54px;right:12px;bottom:auto;z-index:3;width:42px;height:42px;border-radius:11px;
  background:#FDF6EC;border:0;padding:0;overflow:hidden;display:flex;
  align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(38,34,28,.20)}
.hf-dc__logo img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  border-radius:inherit}

/* ---- body ---- */
.hf-dc__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}

.hf-dc__kick{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dc-terra);line-height:1}

.hf-dc__title{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:17.5px;line-height:1.25;color:var(--dc-ink)}
.hf-dc__title a{color:inherit}
.hf-dc__title a:hover{color:var(--dc-teal)}

.hf-dc__loc{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--dc-mut)}
.hf-dc__loc i{color:var(--dc-terra);font-size:13px}

.hf-dc__price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;
  color:var(--dc-terra-d);font-variant-numeric:tabular-nums;line-height:1.15;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hf-dc__price span{font-family:'Figtree',sans-serif;font-weight:600;font-size:12.5px;color:#8A7E6D}

.hf-dc__specs{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;
  padding:10px 0 2px;border-top:1px solid var(--dc-line)}
.hf-dc__specs li{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;
  color:#5C5347;font-variant-numeric:tabular-nums}
.hf-dc__specs i{color:#A79A85;font-size:13px}

.hf-dc__agent{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:11px;border-top:1px dashed var(--dc-line)}
.hf-dc__who{display:flex;gap:9px;align-items:center;min-width:0;color:inherit}
.hf-dc__av{width:30px;height:30px;border-radius:50%;background:var(--dc-teal);color:var(--dc-sand);
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex:none;object-fit:cover;letter-spacing:.02em}
.hf-dc__av--img{background:transparent}
.hf-dc__whotxt{min-width:0}
.hf-dc__whotxt b{display:block;font-size:12.5px;color:var(--dc-ink);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-dc__whotxt i{font-style:normal;font-size:11px;color:#8A7E6D}
.hf-dc__who:hover .hf-dc__whotxt b{color:var(--dc-terra)}
.hf-dc__meta{text-align:right;flex:none}
.hf-dc__meta b{display:block;font-size:11.5px;font-weight:700;color:#5C5347;
  font-variant-numeric:tabular-nums}
.hf-dc__meta i{font-style:normal;font-size:10.5px;color:#A79A85}

/* Arabic co-display — Dilmun's signature bilingual treatment */
[dir="rtl"] .hf-dc__title{font-family:'Noto Kufi Arabic','Bricolage Grotesque',sans-serif;
  font-size:16px;line-height:1.45}
[dir="rtl"] .hf-dc__badge{left:auto;right:12px}
[dir="rtl"] .hf-dc__feat{left:auto;right:12px}
[dir="rtl"] .hf-dc .btn-wishlist.hf-dc__fav{right:auto;left:10px}
[dir="rtl"] .hf-dc__logo{right:auto;left:12px}
[dir="rtl"] .hf-dc__meta{text-align:left}

/* ---- LIST VIEW ----
   /properties renders the SAME component in list mode via a `.list-view` class
   on the container. Its inline CSS targets the OLD `.product-img` /
   `.product-details` names, which this card does not have — without these rules
   the image balloons to full width and the body collapses.
   Selector needs 3 classes to out-specify `.list-view .product-default`, which
   otherwise wins on source order (inline <style> loads after hf-elegant.css). */
.list-view .hf-dc.product-default{
  --dc-rail:290px;                 /* image rail width — reused for overlay maths */
  flex-direction:row !important;
  align-items:stretch !important;
  padding:0 !important;
  background:var(--dc-card) !important;
  border-radius:16px !important;
  margin-bottom:16px !important}
.list-view .hf-dc .hf-dc__art{width:var(--dc-rail);flex:0 0 var(--dc-rail);
  aspect-ratio:auto;min-height:210px;
  /* static so the overlays below anchor to the CARD, not the photo — that is
     what lets the logo + featured tag sit in the card's top-right corner */
  position:static}
.list-view .hf-dc .hf-dc__imglink{position:relative;display:block;width:100%;height:100%}
.list-view .hf-dc .hf-dc__body{flex:1;padding:18px 22px}
.list-view .hf-dc .hf-dc__title{font-size:19px}
.list-view .hf-dc .hf-dc__price{font-size:25px}

/* purpose badge stays on the photo (card's top-left == photo's top-left) */
.list-view .hf-dc .hf-dc__badge{top:12px;left:12px}
/* heart stays on the photo: offset in from the rail's right edge */
.list-view .hf-dc .btn-wishlist.hf-dc__fav{top:10px;left:calc(var(--dc-rail) - 42px);right:auto}

/* logo OFF the photo -> card top-right; featured tag stacked ABOVE it */
.list-view .hf-dc .hf-dc__feat{top:16px;right:16px;left:auto}
.list-view .hf-dc .hf-dc__logo{top:16px;right:16px;bottom:auto;left:auto}
.list-view .hf-dc.is-feat .hf-dc__logo{top:50px}      /* clear the tag above it */

/* keep body text clear of that corner stack */
.list-view .hf-dc .hf-dc__body{padding-right:74px}
.list-view .hf-dc.is-feat .hf-dc__body{padding-right:112px}

/* ---- RTL list view: mirror the whole thing to the top-LEFT corner ----
   NOTE: do NOT add flex-direction:row-reverse here. In an RTL container `row`
   ALREADY flows right-to-left, so the image lands on the right on its own —
   row-reverse cancels that and forces the LTR arrangement back (which also
   dragged the logo back onto the photo, since the card's left edge became the
   image's left edge). Plain `row` is the correct mirror. */
[dir="rtl"] .list-view .hf-dc .hf-dc__badge{left:auto;right:12px}
[dir="rtl"] .list-view .hf-dc .btn-wishlist.hf-dc__fav{left:auto;right:calc(var(--dc-rail) - 42px)}
[dir="rtl"] .list-view .hf-dc .hf-dc__feat{right:auto;left:16px}
[dir="rtl"] .list-view .hf-dc .hf-dc__logo{right:auto;left:16px}
[dir="rtl"] .list-view .hf-dc .hf-dc__body{padding-right:22px;padding-left:74px}
[dir="rtl"] .list-view .hf-dc.is-feat .hf-dc__body{padding-right:22px;padding-left:112px}

@media(max-width:767px){
  /* stack again on small screens — a 290px rail leaves no room for the body.
     Restore the art as the positioning context so every overlay returns to the
     photo exactly as it sits in grid view. */
  .list-view .hf-dc.product-default{flex-direction:column !important}
  .list-view .hf-dc .hf-dc__art{width:100%;flex:none;aspect-ratio:16/10;min-height:0;
    position:relative}
  .list-view .hf-dc .btn-wishlist.hf-dc__fav{top:10px;right:10px;left:auto}
  .list-view .hf-dc .hf-dc__feat{top:44px;left:12px;right:auto}
  /* phones: logo stays ON THE CARD (body top-right), never on the photo */
  .hf-dc .hf-dc__logo,
  .list-view .hf-dc .hf-dc__logo{top:12px;right:12px;bottom:auto;left:auto}
  [dir="rtl"] .hf-dc .hf-dc__logo,
  [dir="rtl"] .list-view .hf-dc .hf-dc__logo{right:auto;left:12px}
  .hf-dc .hf-dc__body{padding-right:66px}
  /* RTL: the logo sits on the LEFT, so the clearance must be on the left too —
     otherwise the Arabic title runs straight under it */
  [dir="rtl"] .hf-dc .hf-dc__body{padding-right:18px;padding-left:66px}
  .list-view .hf-dc .hf-dc__body,
  .list-view .hf-dc.is-feat .hf-dc__body{padding:16px 18px 18px}
  [dir="rtl"] .list-view .hf-dc.product-default{flex-direction:column !important}
  [dir="rtl"] .list-view .hf-dc .btn-wishlist.hf-dc__fav{right:auto;left:10px}
  [dir="rtl"] .list-view .hf-dc .hf-dc__feat{left:auto;right:12px}
  [dir="rtl"] .list-view .hf-dc .hf-dc__logo{right:auto;left:12px}
  [dir="rtl"] .list-view .hf-dc .hf-dc__badge{left:auto;right:12px}
}

@media(max-width:575px){
  .hf-dc__title{font-size:16px}
  .hf-dc__price{font-size:20px}
  .hf-dc__specs{gap:12px}
}
/* === END HF CARD STYLE === */

/* === HF NAV TEAL (patch_nav_teal) === */
:root{--hf-nav-ink:#14535F}   /* same teal as the Dilmun heart; --el-teal is the alternative */

/* desktop bar */
.main-navbar .navbar-nav > .nav-item > .nav-link,
.header-area .navbar-nav > .nav-item > .nav-link,
.header-area .main-navbar .nav-link{color:var(--hf-nav-ink) !important}

/* ⚠️ DO NOT colour .dropdown-menu items here. The Login / Language menus have a
   DARK TEAL #255056 background and their anchors are already white; painting
   them --hf-nav-ink made them teal-on-teal at contrast 1.03 — invisible.
   Only the top-level bar links get the teal. */
.header-area .navbar-collapse > .navbar-nav > .nav-item > .nav-link,
.mobile-menu > .nav-item > .nav-link{color:var(--hf-nav-ink) !important}

/* keep the existing coral hover / active affordance */
.main-navbar .navbar-nav > .nav-item > .nav-link:hover,
.main-navbar .navbar-nav > .nav-item > .nav-link.active,
.header-area .navbar-nav > .nav-item > .nav-link:hover{color:var(--el-coral) !important}

/* RTL uses the same markup — no direction-specific rule needed, but the Arabic
   face renders lighter, so hold the weight so the teal does not look washed out */
[dir="rtl"] .main-navbar .navbar-nav > .nav-item > .nav-link{font-weight:600}
/* === END HF NAV TEAL === */

/* === HF BRAND ORANGE (patch_brand_orange) === */
/* Original brand orange restored. --el-coral was #F27846 (coral); 34 rules in
   this sheet reference the token, so re-pointing it here converts every button,
   pill and accent in one place. Matches the DB's --color-primary (#FF9400).
   The Dilmun cards are unaffected — they use --dc-terra. */
:root{--el-coral:#FF9400}
/* === END HF BRAND ORANGE === */

/* === HF MOBILE PROPS (patch_mobile_props) === */
/* A. RTL: Bootstrap's .form-select arrow stays right and covers the value.
      Put it on the left and swap the padding so the text is never under it. */
[dir="rtl"] .form-select,
html[dir="rtl"] .form-select{
  background-position:left .75rem center !important;
  padding-right:.75rem !important;
  padding-left:2.25rem !important}

/* B. Re-scope the listing grid to REAL breakpoints. The page's inline rules are
      unscoped and the last one (33%) wins everywhere; these are 3-class
      selectors so they out-specify the 2-class inline ones. */
@media (max-width:767.98px){
  .row.properties:not(.list-view) .col-lg-4{width:100% !important;max-width:100% !important;flex:0 0 100% !important}
}
@media (min-width:768px) and (max-width:991.98px){
  .row.properties:not(.list-view) .col-lg-4{width:50% !important;max-width:50% !important;flex:0 0 50% !important}
}
@media (min-width:992px){
  .row.properties:not(.list-view) .col-lg-4{width:33.333333% !important;max-width:33.333333% !important;flex:0 0 33.333333% !important}
}

/* C. Phones: no Grid View button (grid is already one full-width column there) */
@media (max-width:767.98px){
  .view-mode-buttons .view-mode-btn[data-view="grid"]{display:none !important}
  .view-mode-buttons{justify-content:center !important}
}
/* === END HF MOBILE PROPS === */

/* === HF FOOTER TEAL (patch_footer_teal) === */
/* Gulf Teal footer. Overrides the footer rule only — `--el-teal-ink` is left
   alone because .newsletter-area also uses it. */
:root{--hf-footer-teal:#14535F}
.footer-area.border,
footer.footer-area,
.footer-area{background:var(--hf-footer-teal) !important}

/* Gulf Teal is lighter than the old #1A2C29, so the muted link grey dropped to
   4.38 contrast — under the 4.5 accessibility floor, and these are the MAIN
   footer links (About Us, FAQ, Contact, Privacy, Terms, phone), not decoration.
   Nudge them lighter; hover keeps the brand orange.
   The existing rule is `.footer-area .footer-links li a` (0,2,2) with
   !important, so a plain `.footer-area a` (0,1,1) loses even when it comes
   later — these selectors are deliberately one step more specific. */
footer.footer-area .footer-widget a,
footer.footer-area .footer-widget li a,
footer.footer-area .footer-widget p,
footer.footer-area .footer-links li a,
footer.footer-area .copy-right-content p,
footer.footer-area .copy-right-content a{color:#C9DBD6 !important}
footer.footer-area .footer-widget a:hover,
footer.footer-area .footer-links li a:hover{color:var(--el-coral) !important}

/* Newsletter band -> light mint (--el-mint #E8EEE6). Inverting the background
   means re-inking the white headings and the white-on-transparent input. */
.newsletter-area{background:var(--el-mint) !important}
.newsletter-area h2,
.newsletter-area h3,
.newsletter-area .subtitle,
.newsletter-area .color-white,
.newsletter-area p,
.newsletter-area span,
.newsletter-area label{color:var(--el-ink) !important}
.newsletter-area input.form-control{
  background:#fff !important;
  border:1px solid rgba(34,51,47,.16) !important;
  color:var(--el-ink) !important}
.newsletter-area input.form-control::placeholder{color:#8A968F !important}
/* the CTA is already brand orange on light — leave it, just hold the label dark */
.newsletter-area .btn-primary{color:#22332F !important}
/* === END HF FOOTER TEAL === */


/* ═══ HF PROPERTY DETAILS ══════════════════════════════════════════════════
   The card frame below was added here in an earlier pass WITHOUT padding, so
   every section (header, description, amenities, map) ran flush to the border,
   and the header .row's negative Bootstrap gutters pushed it 11px OUTSIDE it.
   Padding on the card fixes the header, the description, the amenities and the
   map in one go — they are all direct children of it.
   Note the .row keeps its negative gutters: -11px of row + 12px of column
   padding lands column content within 1px of the other sections. Left alone
   deliberately, so the two columns keep their gutter.                        */
.product-single-details{ padding: clamp(18px, 2.4vw, 32px); }

/* The lifted kicker strip sits above the title/price row. */
.product-single-details > .hf-pd-kicker{ margin-bottom: 6px; }
.product-single-details > .hf-featured-badge{ margin-bottom: 10px; }

/* Type: match the identity the property cards already use — Plus Jakarta Sans
   was never in the site's font link, so these headings were falling back to
   raw system sans-serif rather than to any designed face.                    */
.product-single-details h1,
.product-single-details h2,
.product-single-details h3,
.product-single-details h4,
.product-single-details h5,
.product-single-details h6,
.product-single-details .product-title,
.product-single-details .product-title a{
  font-family:'Bricolage Grotesque', var(--el-disp);
}
.product-single-details .product-price .new-price,
.product-single-details .new-price{
  font-family:'Bricolage Grotesque', var(--el-disp);
}
.product-single-details .product-category,
.product-single-details .product-category a,
.product-single-details .product-info,
.product-single-details .product-info span{
  font-family:'Figtree', var(--el-body);
}
/* Arabic needs its own face — same rule the cards use. */
[dir="rtl"] .product-single-details h1,
[dir="rtl"] .product-single-details h2,
[dir="rtl"] .product-single-details h3,
[dir="rtl"] .product-single-details h4,
[dir="rtl"] .product-single-details h5,
[dir="rtl"] .product-single-details h6,
[dir="rtl"] .product-single-details .product-title,
[dir="rtl"] .product-single-details .product-title a{
  font-family:'Noto Kufi Arabic','Bricolage Grotesque',sans-serif;
}
/* ═══ END HF PROPERTY DETAILS ═════════════════════════════════════════════ */


/* ═══ HF AMENITY CHIPS ═════════════════════════════════════════════════════
   The chips sit in a 3-column grid, so a row is as tall as its tallest chip.
   With the .d-inline-block utility removed from the markup, the stylesheet's
   `display:flex; align-items:center` finally applies and a single-line label
   centres instead of sitting at the top of a 64px cell with 34px of dead space
   under it. Centred horizontally too, so a short label like "Gym" reads as a
   deliberate card rather than text abandoned in the corner, and given a floor
   height so a wrapped row is not dramatically taller than a single-line one. */
.product-featured .featured-list > li{
  justify-content:center;
  text-align:center;
  min-height:52px;
}
/* the icon must not squash when a long label wraps beside it */
.product-featured .featured-list > li i{ flex:0 0 auto; }

/* Gulf Teal chips: solid #14535F, white label, white icon. Supersedes both the
   mint rule higher up in this file (same specificity, later source order wins)
   and the theme's white-card / orange-icon treatment in hf-frontend-modern.css.
   White on #14535F measures 8.6:1 — comfortably AAA. */
.product-featured .featured-list > li{
  background:#14535F;
  border:0;
  color:#fff;
}
.product-featured .featured-list > li span{ color:#fff; }
/* Icons in the BRAND orange #FF9400 (--el-coral, the same orange the property
   cards use) — deliberately not var(--color-primary), which resolves to the
   #F27846 terracotta the owner has rejected before. #FF9400 on #14535F is
   3.9:1, which clears the 3:1 WCAG bar for non-text graphics. */
.product-featured .featured-list > li i{ color:var(--el-coral, #FF9400); }
/* ═══ END HF AMENITY CHIPS ════════════════════════════════════════════════ */


/* ═══ HF RELATED CARDS ═════════════════════════════════════════════════════
   .product-inline .product-img is flex:0 0 90px and stretches to the row
   height (measured 90x171), but the anchor inside is a 1:1 ratio box — so the
   photo rendered 90x90 and sat at the top with 81px of dead space under it.
   The theme also flips this component between row and column across several
   breakpoints in responsive.css, so it only stranded at some widths.
   One deterministic card at every width instead: a 4:3 photo banner with the
   details beneath — a compact echo of the main property cards.            */
.widget-recent .product-inline{
  flex-direction:column;
  align-items:stretch;
  padding:0;
  background:#fff;
  border:1px solid var(--el-line);
  border-radius:14px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.widget-recent .product-inline:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(26,44,41,.12);
  border-color:rgba(20,83,95,.30);
}
/* photo: full width, 4:3, cover-cropped. flex/max-width are reset because the
   theme pins them to 90px in row mode. */
.widget-recent .product-inline .product-img{
  flex:0 0 auto;
  width:100%;
  max-width:100%;
  margin:0;
}
.widget-recent .product-inline .product-img > a{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  border-radius:0;
  position:relative;
}
.widget-recent .product-inline .product-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.widget-recent .product-inline:hover .product-img img{ transform:scale(1.04); }
/* details sit under the photo */
.widget-recent .product-inline .product-details{
  flex:1 1 auto;
  max-width:100%;
  padding:11px 14px 13px;
  padding-inline-start:14px;
}
.widget-recent .product-inline .product-title{
  font-family:'Bricolage Grotesque', var(--el-disp);
  font-size:15px;
  line-height:1.3;
  margin:0 0 4px;
}
.widget-recent .product-inline .product-price .new-price{
  font-family:'Bricolage Grotesque', var(--el-disp);
  font-size:16px;
  color:#14535F;
}
.widget-recent .product-inline .product-location{ font-size:12.5px; }
[dir="rtl"] .widget-recent .product-inline .product-title{
  font-family:'Noto Kufi Arabic','Bricolage Grotesque',sans-serif;
}
/* ═══ END HF RELATED CARDS ════════════════════════════════════════════════ */


/* ═══ HF AGENT RIBBON ══════════════════════════════════════════════════════
   Gulf Teal band across the top of the agent contact card, label in Sand.
   The card is padding:30px 20px, so the ribbon cancels that with matching
   negative margins to reach the edges; overflow:hidden on the card lets the
   ribbon's corners clip to the card's OWN radius instead of hard-coding a
   value here that would drift if the card's radius ever changes.
   Sand #F5EEE1 on teal #14535F is 11.5:1 — AAA.                            */
.widget-form{ overflow:hidden; }
.widget-form .hf-agent-ribbon{
  margin:-30px -20px 24px;
  padding:13px 18px;
  background:#14535F;
  color:#F5EEE1;
  font-family:'Bricolage Grotesque', var(--el-disp);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.03em;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.widget-form .hf-agent-ribbon i{
  font-size:15px;
  color:#F5EEE1;
  opacity:.85;
  flex:0 0 auto;
}
/* Arabic sets its own face and does not want latin letter-spacing */
[dir="rtl"] .widget-form .hf-agent-ribbon{
  font-family:'Noto Kufi Arabic','Bricolage Grotesque',sans-serif;
  letter-spacing:0;
  font-size:13.5px;
}
/* ═══ END HF AGENT RIBBON ═════════════════════════════════════════════════ */