/* Site-wide styles — moved out of fh_header() in the old _common.php. */
  * { box-sizing: border-box; }
  body { margin:0; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; background:#f7f8fa; color:#1f2937; overflow-x:hidden; }
  a { text-decoration:none; color:inherit; }
  /* iOS Safari auto-zooms into any input/select/textarea with font-size
     below 16px — this is iOS's own behavior, not something JS can override
     directly. Forcing 16px here (site-wide, once) stops the zoom without
     needing to touch every individual form field. */
  input, select, textarea { font-size: 16px; }
  .fh-topbar-wrap { position:sticky; top:0; z-index:50; }
  @media (max-width:640px) {
    /* While a full-screen filter panel (Location/Property Type/Filter) is
       open, hide the site header entirely instead of trying to out-stack
       it with z-index — a hidden element can never visually overlap
       anything, sidestepping stacking-context bugs entirely. */
    body.lf-panel-active .fh-topbar-wrap {
      display: none;
    }
  }
  .fh-topbar { background:#fff; border-bottom:1px solid #e5e7eb; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
  .fh-logo { font-weight:800; font-size:1.3rem; color:#2563EB; }

  /* Profile dropdown — shown instead of the plain Login link once the
     visitor is signed in, matching coalisting.com's topbar-user pattern. */
  .fh-user-wrap { position:relative; display:inline-flex; }
  .fh-user { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
  .fh-user img, .fh-user-fallback { width:36px; height:36px; border-radius:50%; object-fit:cover; }
  .fh-user-fallback { background:#2563EB; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.95rem; }
  .fh-user-info { display:flex; flex-direction:column; line-height:1.2; }
  .fh-user-name { font-weight:700; font-size:0.85rem; color:#12101A; }
  .fh-user-role { font-size:0.72rem; color:#9ca3af; }
  .fh-user-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,0.1); min-width:180px; overflow:hidden; z-index:200; }
  .fh-user-menu.open { display:block; }
  .fh-user-menu a { display:block; padding:10px 14px; font-size:0.85rem; font-weight:600; color:#12101A; text-decoration:none; }
  .fh-user-menu a:hover { background:#f9fafb; }
  .fh-user-menu a + a { border-top:1px solid #f3f4f6; }
  .fh-logo span { color:#12101A; }
  .fh-nav { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
  .fh-nav a { font-size:0.92rem; font-weight:600; color:#374151; }
  .fh-nav a.active, .fh-nav a:hover { color:#2563EB; }
  .fh-nav-dropdown { position:relative; display:inline-block; }
  .fh-nav-dropdown-menu {
    display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #e5e7eb;
    border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); min-width:200px; padding:6px; z-index:50;
  }
  .fh-nav-dropdown:hover .fh-nav-dropdown-menu { display:block; }
  .fh-nav-dropdown-menu a { display:block; padding:8px 12px; font-size:0.88rem; border-radius:6px; white-space:nowrap; }
  .fh-nav-dropdown-menu a:hover { background:#f9fafb; }
  .fh-post-btn { background:#FFC845; color:#12101A; font-weight:800; padding:10px 20px; border-radius:8px; }
  .fh-login-link { display:flex; font-size:0.85rem; font-weight:700; color:#374151; padding:10px 8px; white-space:nowrap; }
  .fh-login-link:hover { color:#2563EB; }
  .fh-hamburger { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; padding:4px 8px; color:#12101A; }
  .fh-mobile-menu { display:none; flex-direction:column; background:#fff; border-bottom:1px solid #e5e7eb; padding:8px 20px 14px; }
  .fh-mobile-menu.open { display:flex; }
  .fh-mobile-menu a { padding:10px 4px; font-size:0.95rem; font-weight:600; color:#374151; border-bottom:1px solid #f3f4f6; }
  .fh-mobile-menu a.active { color:#2563EB; }
  .fh-mobile-menu-group { border-bottom:1px solid #f3f4f6; }
  .fh-mobile-menu-group summary { padding:10px 4px; font-size:0.95rem; font-weight:600; color:#374151; cursor:pointer; list-style:none; }
  .fh-mobile-menu-group summary::-webkit-details-marker { display:none; }
  .fh-mobile-menu-group summary::after { content:'\25BE'; float:right; }
  .fh-mobile-menu-group[open] summary::after { content:'\25B4'; }
  .fh-mobile-menu-group a { display:block; padding-left:16px; border-bottom:none; }
  .fh-hero { background:linear-gradient(135deg,rgba(18,16,26,0.88),rgba(43,38,64,0.88)), url('/hero-bg.jpg') center/cover no-repeat; color:#fff; padding:30px 150px 30px; text-align:left; }
  .fh-hero h1 { margin:0 0 8px; font-size:clamp(1.3rem, 5vw, 2rem); white-space:nowrap; }
  .fh-hero p { color:#cbd5e1; margin:0 0 24px; }
  .fh-search-box { max-width:760px; margin:0 auto; background:#fff; border-radius:12px; padding:14px; display:flex; gap:10px; flex-wrap:wrap; box-shadow:0 8px 24px rgba(0,0,0,0.25); }
  .fh-search-box input, .fh-search-box select { flex:1; min-width:140px; padding:12px; border:1px solid #d1d5db; border-radius:8px; font-size:16px; }
  .fh-search-box button { background:#2563EB; color:#fff; border:none; padding:12px 28px; border-radius:8px; font-weight:700; cursor:pointer; }
  .fh-cta-row { display:flex; gap:14px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
  .fh-cta-row a { padding:10px 22px; border-radius:8px; font-weight:700; }
  .fh-cta-sell { background:#FFC845; color:#12101A; }
  .fh-cta-find { background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.3); }
  .fh-container { max-width:1200px; margin:0 auto; padding:5px 20px; }
  .fh-section-title { font-size:1.3rem; font-weight:800; margin:0 0 18px; display:flex; justify-content:space-between; align-items:center; }
  .fh-section-title a { font-size:0.85rem; font-weight:700; color:#2563EB; }
  .fh-tabs { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
  .fh-tab { padding:8px 18px; border-radius:20px; background:#fff; border:1px solid #e5e7eb; font-weight:700; font-size:0.85rem; color:#374151; }
  .fh-tab.active { background:#12101A; color:#fff; border-color:#12101A; }
  .fh-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; }
  .fh-card { background:#fff; border-radius:0; overflow:hidden; border:1px solid #e5e7eb; transition:box-shadow 0.15s; display:block; width:100%; }
  @media (max-width:640px) {
    /* Mobile naturally fits only 1 column per row — the 320px cap (meant
       to stop a LONE card from stretching huge on wide desktop) instead
       makes cards look small/not-full-width here, since 320px is often
       narrower than the actual mobile viewport. Remove the cap so cards
       genuinely fill the available width on phones. */
    .fh-card-wrap { max-width:none !important; justify-self:stretch !important; }
  }
  .fh-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.1); }
  .fh-card-thumb { position:relative; aspect-ratio:4/3; background:linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size:400% 100%; animation:fh-shimmer 1.4s ease-in-out infinite; }
  .fh-card-thumb img { position:relative; z-index:1; }
  @keyframes fh-shimmer { 0% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
  .fh-faq-item { border-bottom:1px solid #e5e7eb; padding:14px 0; }
  .fh-faq-item summary { cursor:pointer; font-weight:600; font-size:0.95rem; color:#1f2937; list-style:none; position:relative; padding-right:24px; }
  .fh-faq-item summary::-webkit-details-marker { display:none; }
  .fh-faq-item summary::after { content:'+'; position:absolute; right:0; top:0; font-size:1.2rem; color:#2563EB; font-weight:700; }
  .fh-faq-item[open] summary::after { content:'\2212'; }
  .fh-faq-item p { color:#6b7280; font-size:0.88rem; line-height:1.6; margin:10px 0 0; }
  .fh-faq-item a { color:#2563EB; font-weight:600; }
  .fh-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .fh-source-badge { position:absolute; top:8px; left:8px; font-size:0.68rem; font-weight:800; padding:3px 8px; border-radius:6px; }
  .fh-source-owner { background:#FFC845; color:#12101A; }
  .fh-source-agent { background:#12101A; color:#fff; }
  .fh-card-badges-topleft { position:absolute; top:8px; left:8px; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
  .fh-compare-toggle { position:absolute; bottom:8px; left:8px; z-index:3; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.9); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#374151; padding:0; }
  .fh-compare-toggle.active { background:#2563EB; color:#fff; }
  .fh-compare-toggle.active .fh-compare-icon-empty { display:none; }
  .fh-compare-toggle.active .fh-compare-icon-checked { display:block !important; }
  .fh-compare-toggle-detail.active { background:#2563EB; color:#fff; }
  .fh-compare-toggle-detail.active .fh-compare-icon-empty { display:none; }
  .fh-compare-toggle-detail.active .fh-compare-icon-checked { display:inline-block !important; }
  @media (max-width:640px) {
    /* On mobile, the compare popup becomes a full page instead of a
       centered dialog — easier to read a comparison table on a small
       screen without the extra backdrop/margins eating into space. */
    .fh-compare-modal { padding:0 !important; align-items:stretch !important; }
    .fh-compare-modal-inner { border-radius:0 !important; max-width:100% !important; width:100% !important; max-height:100vh !important; height:100vh !important; }
    .fh-compare-modal-body { padding:14px !important; }
  }
  .fh-featured-star { position:relative; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fef3c7; border:1px solid #fcd34d; font-size:0.85rem; cursor:pointer; padding:0; }
  .fh-featured-star .fh-featured-tooltip { left:auto; right:0; }
  .fh-featured-star-source { margin-left:auto; }
  @media (min-width:641px) {
    .fh-featured-star-price { display:none; }
  }
  @media (max-width:640px) {
    .fh-featured-star-source { display:none; }
  }
  .fh-featured-badge { font-size:0.68rem; font-weight:800; padding:3px 8px; border-radius:6px; background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
  .fh-featured-tooltip { display:none; position:absolute; top:calc(100% + 6px); left:0; background:#1f2937; color:#fff; font-size:0.72rem; font-weight:600; padding:6px 10px; border-radius:6px; white-space:nowrap; z-index:50; }
  .fh-featured-star:hover .fh-featured-tooltip, .fh-featured-star.fh-tooltip-active .fh-featured-tooltip { display:block; }
  .fh-save-tooltip { left:auto; right:0; }
  .fh-save-btn:hover .fh-save-tooltip, .fh-save-btn.fh-tooltip-active .fh-save-tooltip { display:block; }
  .fh-rent-badge { font-size:0.68rem; font-weight:800; padding:3px 8px; border-radius:6px; background:#1d4ed8; color:#fff; }
  .fh-sale-badge { font-size:0.68rem; font-weight:800; padding:3px 8px; border-radius:6px; background:#15803d; color:#fff; }
  @media (max-width:640px) {
    .fh-breadcrumb-last, .fh-breadcrumb-last-sep { display:none; }
  }
  .fh-status-badge { font-size:0.68rem; font-weight:800; padding:3px 8px; border-radius:6px; color:#fff; }
  .fh-status-sold { background:#b91c1c; }
  .fh-status-booked { background:#c2410c; }
  .fh-status-kiv { background:#6b7280; }
  .fh-status-expired { background:#374151; }
  .fh-photo-count-badge { position:absolute; bottom:8px; right:8px; z-index:3; background:rgba(0,0,0,0.6); color:#fff; font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:6px; }
  .fh-coa-chip { background:#fff7ed; color:#c2410c; font-size:0.55rem; font-weight:600; padding:2px 6px; border-radius:999px; border:1px solid #fde4c8; white-space:nowrap; flex-shrink:0; }
  .fh-card-chips { font-size:0.78rem; font-weight:700; color:#374151; margin:8px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fh-card-source { display:flex; align-items:center; gap:10px; font-size:0.75rem; color:#6b7280; margin:12px -12px -12px; padding:12px; border-top:1px solid #f3f4f6; background:#fafafa; }
  .fh-card-agent-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#f7f8fa; }
  .fh-card-agent-avatar-fallback { width:40px; height:40px; border-radius:50%; background:#e5e7eb; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
  .fh-card-agent-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
  .fh-card-agent-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.85rem; color:#1f2937; }
  .fh-card-agent-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.72rem; color:#6b7280; }
  .fh-card-listed-date { font-size:0.68rem; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .fh-coa-badge { position:absolute; top:8px; right:44px; font-size:0.68rem; font-weight:800; padding:3px 8px; border-radius:6px; background:#fff7ed; color:#c2410c; border:1px solid #fdba74; }
  .fh-card-body { padding:12px; }
  .fh-card-price { font-size:1.15rem; font-weight:800; color:#1f2937; margin:0 0 4px; }
  .fh-card-old-price-row { display:block; margin:0 0 1px; }
  .fh-card-old-price { color:#9ca3af; font-weight:400; font-size:0.72rem; text-decoration:line-through; }
  .fh-card-price-drop-pct { display:inline-block; background:#fef2f2; color:#dc2626; font-weight:800; font-size:0.68rem; padding:1px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; }
  .fh-card-title { font-size:0.95rem; font-weight:600; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .fh-card-loc { font-size:0.85rem; color:#6b7280; margin:0 0 6px; }
  .fh-card-specs { font-size:0.78rem; color:#6b7280; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fh-card-wrap { position:relative; max-width:320px; width:100%; justify-self:start; }
  .fh-save-btn { position:absolute; top:8px; right:8px; z-index:5; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.9); border:none; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#374151; }
  .fh-save-btn.saved { color:#2563EB; }

  /* List view — single-column list of WIDE horizontal cards (image left,
     details right), matching Mudah.my's search-results style. Desktop only
     (min-width:768px) — mobile ALWAYS keeps the existing vertical card
     layout regardless of this class being present, since none of these
     overrides apply below that width. */
  .fh-grid-list { display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:768px) {
    .fh-grid-list .fh-card-wrap { max-width:none; justify-self:stretch; }
    .fh-grid-list .fh-card { display:flex; flex-direction:row; }
    .fh-grid-list .fh-card-thumb { width:280px; flex-shrink:0; aspect-ratio:4/3; }
    .fh-grid-list .fh-card-body { flex:1; padding:16px; min-width:0; }
    .fh-grid-list .fh-card-title { font-size:1.05rem; -webkit-line-clamp:2; }
    .fh-grid-list .fh-card-source { margin:12px -16px -16px; padding:12px 16px; }
  }

  /* Search-results 2-column layout: main results (3/4) + sticky ad sidebar
     (1/4). Sidebar only exists on desktop — mobile shows results full-width
     with no ad column at all, not just a hidden/collapsed one. */
  .fh-search-2col { display:flex; gap:24px; }
  .fh-search-main { flex:1; min-width:0; }
  .fh-search-sidebar { display:none; }
  @media (min-width:900px) {
    .fh-search-sidebar { display:block; width:300px; flex-shrink:0; }
    .fh-search-sidebar-sticky { position:sticky; top:80px; display:flex; flex-direction:column; gap:16px; }
    .fh-sidebar-ad { display:block; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb; }
    .fh-sidebar-ad img { width:100%; height:auto; display:block; }
  }
  .fh-save-btn.saved::before { content:'\2665'; }
  .fh-cat-row { display:flex; gap:14px; overflow-x:auto; padding:4px 0 8px; }
  .fh-cat-item { flex:0 0 auto; text-align:center; padding:14px 18px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; min-width:90px; }
  .fh-cat-item span { display:block; font-size:1.6rem; margin-bottom:6px; }
  .fh-cat-item p { margin:0; font-size:0.78rem; font-weight:700; color:#374151; }
  .fh-footer { background:#12101A; color:#cbd5e1; margin-top:40px; padding:24px 20px; text-align:center; font-size:0.85rem; line-height:1.8; }
  .fh-footer a { color:#9ca3af; }
  .fh-footer a:hover { color:#fff; }
  .fh-footer-top { max-width:1200px; margin:0 auto; padding:36px 20px 24px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; }
  .fh-footer-col { display:flex; flex-direction:column; gap:8px; }
  .fh-footer-col a { color:#cbd5e1; font-size:0.88rem; }
  .fh-footer-col a:hover { color:#fff; }
  .fh-footer-brand { font-weight:800; font-size:1.15rem; color:#fff; margin:0 0 6px; }
  .fh-footer-brand span { color:#2563EB; }
  .fh-footer-tagline { font-size:0.85rem; color:#9ca3af; margin:0 0 10px; line-height:1.5; }
  .fh-footer-trust { font-size:0.82rem; color:#86efac; margin:0; font-weight:600; }
  .fh-footer-heading { font-weight:800; color:#fff; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; margin:0 0 4px; }
  .fh-footer-bottom { border-top:1px solid rgba(255,255,255,0.1); text-align:center; padding:16px 20px; font-size:0.78rem; color:#6b7280; }
  .fh-first-section { margin-top:28px; }
  .fh-forsale-top { padding-top:24px; }

  .fh-empty { text-align:center; padding:60px 20px; color:#9ca3af; }
  .fh-mobile-break { display: none; }
  .fh-listing-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  @media (max-width: 640px) {
    .fh-listing-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
    .fh-tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
    .fh-tab { text-align:center; padding:8px 6px; font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* Pagination borrows .fh-tab's base look (colors, active state,
       border-radius) but needs a roomier tap target than the All/Owner/
       Agent tabs — those sit in a row that must fit 3 labels on one
       line, pagination doesn't have that constraint. */
    .fh-page-link { padding:11px 14px; }
    .fh-section-title { flex-direction:column; align-items:flex-start; gap:6px; }
    .fh-mobile-break { display: inline; }
    .fh-nav { display:none; }
    .fh-login-link { display:none; }
    .fh-post-btn-loggedin { display:none; }
    .fh-lang-desktop-only { display:none; }
    .fh-user-name { max-width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .fh-hamburger { display:block; }
    .fh-topbar { flex-wrap:nowrap; }
    .fh-logo {
      flex:1;
      min-width:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .fh-post-btn { font-weight:700; font-size:0.8rem; padding:6px 12px; }
    .fh-hero { padding:16px 14px 20px; }
    .fh-card-title { font-size:12px; }
    .fh-card-loc { font-size:11px; }
    .fh-specs-word { display:none; }
    .fh-first-section { margin-top:8px; }
    .fh-forsale-top { padding-top:0; }
    .fh-hero h1 { font-size:clamp(1.1rem, 6vw, 1.5rem); line-height:1.3; margin-bottom:8px; white-space:nowrap; }
    .fh-hero p { font-size:1.1rem; padding:0 4px; margin-bottom:16px; white-space:nowrap; }
    .fh-search-box { padding:8px; gap:6px; border-radius:10px; }
    .fh-search-box input, .fh-search-box select { padding:9px 10px; font-size:16px; min-width:100%; }
    .fh-search-box button { padding:9px 16px; font-size:0.82rem; width:100%; }
    .fh-cta-row { flex-direction:row; align-items:stretch; margin-top:12px; gap:8px; }
    .fh-cta-row a { flex:1; text-align:center; padding:9px 10px; font-size:0.8rem; }
    .fh-footer-top { grid-template-columns:1fr; padding:28px 20px 16px; gap:20px; text-align:left; }
  }

  /* Tablet range (iPad Air/10th gen at 820px, etc.) — the full desktop nav
     doesn't have room to breathe at this width without feeling cramped,
     so it switches to the same hamburger menu mobile uses. Deliberately
     capped at 900px so iPad Pro (1024px+) keeps the desktop nav, which
     has enough room there. */
  @media (max-width: 900px) {
    .fh-nav { display:none; }
    .fh-login-link { display:none; }
    .fh-post-btn-loggedin { display:none; }
    .fh-lang-desktop-only { display:none; }
    .fh-hamburger { display:block; }
    .fh-topbar { flex-wrap:nowrap; }
  }

  /* Same tablet range — the secondary filter row (Min/Max Price, Tenure,
     Land Title, More Filter) needs 5 items to fit on one line here; the
     desktop min-width (150px each) leaves no room for More Filter, so it
     wraps to its own 3rd row. Narrowing each field box slightly reclaims
     enough space to keep all 5 on one row, matching desktop's layout. */
  @media (min-width: 769px) and (max-width: 900px) {
    .lf-field-box { min-width: 120px; flex: 1 1 120px; }
    .lf-more-filter-wrap .lf-pill-btn { padding-left: 10px; padding-right: 10px; font-size: 0.85rem; }
  }

/* ---------- Shared listing filter bar (Buy/Rent tabs, Location checkbox
   tree, Property Type/Price/Tenure/Land/Status pills) — listing_filter.php ---------- */
.lf-wrap { margin-bottom: 10px; }
.lf-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: none; border-radius: 10px 10px 0 0; overflow: hidden; background: #e5edff; }
.lf-tab {
  padding: 10px 28px;
  border-radius: 0;
  background: #e5edff;
  color: #374151;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
}
.lf-tab.active { background: #2563eb; color: #fff; }
.lf-tab:hover:not(.active) { background: #dbeafe; }
.lf-tab:not(:last-child) { border-right: 1px solid #d1d5db; }
.fh-search-banner { display: block; margin-bottom: 14px; border-radius: 12px; overflow: hidden; }
.fh-search-banner img { width: 100%; display: block; }
.fh-search-banner-mobile { display: none; }
.fh-ai-label-break { display: none; }
@media (max-width: 768px) {
  .fh-ai-label-break { display: block; }
}
.lf-tab-static {
  background: #f3f4f6;
  color: #6b7280;
  cursor: default;
}
.lf-tab-cta {
  background: #FFC845;
  color: #12101A;
  text-decoration: none;
  font-weight: 700;
}

.lf-form { background: #eef4ff; border-radius: 0 0 14px 14px; padding: 16px; }
.lf-main-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.lf-secondary-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.lf-search-wrap {
  flex: 1 1 260px;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: stretch;
}
.lf-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.lf-search-input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 14px 0 38px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.92rem;
  background: #fff;
  transition: padding-right 0.1s ease;
}
/* Only reserve room for the Go button once it's actually visible — with
   it hidden (the common case, nothing typed/selected yet), the full width
   is free for the placeholder text instead of leaving 70px permanently
   blocked off for a button that isn't there, which was especially
   noticeable on narrow mobile screens truncating the placeholder. */
.lf-search-wrap.has-go-btn .lf-search-input {
  padding-right: 70px;
}
.lf-search-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #b91c1c;
  border: 1px solid #d1d5db;
  padding: 0 18px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.88rem;
}

.lf-dropdown { position: relative; }
.lf-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 14px;
  height: 44px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.lf-pill-btn.active {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.lf-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lf-location-btn { justify-content: flex-start; }
.lf-caret { font-size: 0.7rem; color: #9ca3af; }
.lf-pill-btn.active .lf-caret { color: #dc2626; }
.lf-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 2px;
}
.lf-clear-all {
  font-size: 0.85rem;
  color: #dc2626;
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}
.lf-clear-all-mobile-slot:empty { display: none; }

/* "More Filter" reveal — desktop: hidden until toggled, then shows inline
   as extra pills in the same row (wraps naturally). Mobile: irrelevant on
   its own since the WHOLE secondary row is already hidden/shown as one
   unit by the mobile Filter toggle — this just needs to not add an extra
   layer of hiding on top of that. */
.lf-more-filters {
  display: none;
}
.lf-more-filters.lf-more-open {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.lf-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 14px;
  min-width: 240px;
}
.lf-panel.open { display: block; }
.lf-panel label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  margin: 8px 0 4px;
}
.lf-panel label:first-child { margin-top: 0; }
.lf-panel select {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.85rem;
}
.lf-panel-actions { display: flex; gap: 8px; margin-top: 12px; }
.lf-panel-clear {
  background: #f3f4f6; border: none; color: #374151; font-size: 0.85rem;
  font-weight: 700; cursor: pointer; padding: 8px 18px; border-radius: 8px;
  flex: 1;
}
.lf-panel-done {
  background: #dc2626; color: #fff; border: none; border-radius: 8px;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 8px 18px;
  flex: 1;
}
.lf-panel-mobile-header { display: none; }
.lf-panel-search-row { display: flex; align-items: center; gap: 8px; }
.lf-panel-search-row .lf-loc-search { flex: 1; margin-bottom: 0; }

/* ---- Simple labeled native-select fields (Min/Max Price, Bedrooms,
   Bathrooms, Tenure Type, Land Title, Status) — the field shows its own
   current value directly and opens as an ordinary browser <select>, no
   custom JS panel needed. Matches the "label above, value below" look. ---- */
@media (min-width: 641px) {
  .lf-more-filters .lf-dropdown {
    min-width: 150px;
  }
}
.lf-field-box {
  position: relative;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  min-width: 150px;
  flex: 1 1 150px;
  height: 44px;
  display: flex;
  align-items: center;
}
.lf-field-box.has-value {
  background: #fef2f2;
  border-color: #fecaca;
}
.lf-field-box label {
  display: none;
  position: absolute;
  top: 5px; left: 12px;
  font-size: 0.64rem;
  color: #6b7280;
  font-weight: 700;
  pointer-events: none;
}
.lf-field-box.has-value label { display: block; color: #dc2626; }
.lf-field-box .lf-placeholder {
  position: absolute;
  left: 12px; right: 28px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-field-box.has-value .lf-placeholder { display: none; }
.lf-field-box select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: transparent; /* native text hidden by default — .lf-placeholder shows the field name instead */
  padding: 0 28px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.lf-field-box.has-value select {
  color: #dc2626; /* real selected value now visible, red like other active filters */
  padding-top: 13px; /* room for the floating label above it */
}
.lf-field-box::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.lf-field-box.has-value::after {
  border-right-color: #dc2626;
  border-bottom-color: #dc2626;
}

/* ---- Location checkbox tree ---- */
.lf-panel-scroll { width: 300px; padding: 10px; }
.lf-loc-search {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.lf-loc-tree { max-height: 320px; overflow-y: auto; }
.lf-loc-state { border-bottom: 1px solid #f3f4f6; }
.lf-loc-state-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; text-align: left; }
.lf-loc-checkbox-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; color: #1f2937; cursor: pointer; flex: 1;
  text-align: left;
}
.lf-loc-checkbox-label span,
.lf-loc-checkbox-label { justify-content: flex-start; }
.lf-loc-checkbox-label input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: #2563eb; }
.lf-loc-expand {
  background: none; border: none; cursor: pointer; color: #6b7280;
  font-size: 0.75rem; padding: 6px 8px; transition: transform 0.15s;
}
.lf-loc-state.expanded .lf-loc-expand { transform: rotate(180deg); }
.lf-loc-districts { display: none; padding: 0 4px 8px 26px; background: #f9fafb; }
.lf-loc-state.expanded .lf-loc-districts { display: block; }
.lf-loc-district-label { padding: 5px 0; font-size: 0.84rem; }

/* Property Type only — show just the first 3 types per category by
   default (mobile especially looked overwhelming showing everything at
   once); a "+ See More" link reveals the rest. Location's tree is
   untouched (different class scope). */
.lf-category-tree .lf-loc-districts .lf-loc-district-label:nth-of-type(n+4) {
  display: none;
}
.lf-category-tree .lf-loc-districts.lf-show-all .lf-loc-district-label {
  display: flex;
}
.lf-see-more-btn {
  display: block;
  background: none;
  border: none;
  color: #2563eb;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
}

/* ---- Mobile-only "Filter" toggle for the secondary row ---- */
.lf-mobile-filter-toggle { display: none; }
.lf-mobile-sort-toggle { display: none; }
.lf-mobile-save-search { display: none; }

/* Sort bottom sheet — slides up from the bottom, matching Mudah.my's
   mobile sort UI. Base rule keeps it hidden on ALL viewports by default
   (only ever opened via JS from the mobile-only Sort button, which is
   itself desktop-hidden above) — this must NOT live inside the mobile
   media query, or desktop loses its "hidden by default" state entirely
   and the sheet's contents render as plain inline text instead. Desktop
   keeps its own separate dropdown-style sort menu built directly into
   for-sale.php/for-rent.php; this sheet is the mobile-only equivalent. */
.lf-sort-sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1200; align-items: flex-end; justify-content: center; }
.lf-sort-sheet { background: #fff; width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; padding: 12px 0 20px; }
.lf-sort-sheet-handle { width: 40px; height: 4px; background: #d1d5db; border-radius: 999px; margin: 0 auto 16px; }
.lf-sort-sheet h3 { margin: 0 20px 8px; font-size: 1.2rem; }
.lf-sort-sheet-option { display: block; width: 100%; text-align: left; padding: 16px 20px; border: none; background: #fff; font-size: 1rem; color: #1f2937; cursor: pointer; font-family: inherit; }
.lf-sort-sheet-option.active { background: #fce7f0; font-weight: 700; }
.lf-mobile-filter-header { display: none; }
.lf-mobile-filter-search { display: none; }

@media (max-width: 1024px) {
  /* iOS Safari auto-zooms the page when focusing any input/select with
     font-size under 16px — force 16px minimum on every field here so
     typing/tapping a dropdown doesn't trigger that zoom. */
  .lf-search-input,
  .lf-field-box select,
  .lf-loc-search,
  .lf-panel select {
    font-size: 16px;
  }
  .lf-form { padding: 10px; border-radius: 0 0 10px 10px; }
  .lf-tab { padding: 8px 20px; font-size: 0.85rem; text-align: center; flex: 0 0 30%; box-sizing: border-box; }
  .lf-tab-ai { flex: 0 0 40%; white-space: nowrap; }
  .lf-main-row { gap: 8px; }
  /* Row 1: Search box (88%, with the Go button living INSIDE it now —
     absolutely positioned, not a separate flex sibling) + Save Search
     icon (12%) — one gap (8px) between the two items. */
  .lf-main-row .lf-search-wrap { flex: 0 1 calc(88% - 8px); order: 1; height: 42px; }
  .lf-main-row .lf-search-btn { padding: 0 12px; font-size: 0.76rem; }
  .lf-mobile-save-search { order: 1; flex: 0 1 calc(12% - 4px); display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; color: #374151; cursor: pointer; padding: 0; }
  /* Row 2: Location + Property Type (35% each) + Filter (15%) + Sort (15%)
     all share one row — three gaps (24px total) between the four items. */
  .lf-main-row .lf-dropdown { order: 2; flex: 0 1 calc(35% - 14px); min-width: 0; }
  .lf-main-row .lf-dropdown-location { flex: 0 1 calc(28% - 11px); }
  .lf-main-row .lf-dropdown-category { flex: 0 1 calc(42% - 17px); }
  .lf-main-row .lf-dropdown .lf-pill-btn { width: 100%; font-size: 0.8rem; padding-left: 8px; padding-right: 8px; }
  .lf-mobile-filter-toggle { order: 2; flex: 0 1 calc(15% - 8px); min-width: 0; padding: 6px 2px; font-size: 0.68rem; flex-direction: column; gap: 2px; background: #eef4ff; border: none; border-radius: 0; }
  .lf-mobile-sort-toggle { order: 2; flex: 0 1 calc(15% - 8px); min-width: 0; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; background: #eef4ff; border: none; border-radius: 0; font-weight: 700; font-size: 0.68rem; color: #374151; cursor: pointer; font-family: inherit; padding: 6px 2px; }
  .lf-clear-all-mobile-slot {
    order: 6;
    flex: 1 1 100%;
    text-align: center;
    margin-top: 4px;
  }

  .fh-desktop-sort-only { display: none; }
  .fh-search-banner-desktop { display: none; }
  .fh-search-banner-mobile { display: block; }
  .lf-pill-icon { display: none; }

  /* Filter toggle reveals the secondary row (Min/Max Price, Bedrooms,
     etc.) in place — no popup, no duplicated fields. */
  .lf-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #eef4ff;
    border: none;
    border-radius: 0;
    padding: 0 12px;
    height: 44px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
  }
  .lf-secondary-row {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
  }
  .lf-secondary-row.lf-mobile-open {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: #fff;
    margin-top: 0;
    padding: 0 16px 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .lf-mobile-filter-header {
    display: none;
  }
  .lf-panel.open .lf-panel-mobile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    background: #fff;
    padding: 16px 0 16px 16px;
    margin: 0 -16px 12px;
    border-bottom: 1px solid #f3f4f6;
  }
  .lf-secondary-row.lf-mobile-open .lf-mobile-filter-header {
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    background: #fff;
    padding: 16px 0;
    margin: 0 -16px 4px;
    padding-left: 16px;
    border-bottom: 1px solid #f3f4f6;
    order: -2;
  }
  .lf-mobile-filter-back {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #1f2937;
    padding: 4px;
  }
  .lf-mobile-filter-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
  }
  .lf-mobile-filter-search {
    display: none;
  }
  .lf-secondary-row.lf-mobile-open .lf-mobile-filter-search {
    display: block;
    position: sticky;
    bottom: 0;
    width: 100%;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin-top: auto;
  }
  .lf-secondary-row .lf-dropdown { width: 100%; }
  .lf-secondary-row .lf-pill-btn { width: 100%; justify-content: space-between; height: 42px; }
  .lf-secondary-row .lf-field-box,
  .lf-secondary-row .lf-more-filters { width: 100%; }
  .lf-secondary-row .lf-field-box {
    flex: 0 0 auto;
    height: 44px;
    min-width: 0;
  }
  .lf-more-filter-wrap { display: none; }
  .lf-more-filters { display: flex !important; flex-direction: column; gap: 14px; width: 100%; }

  /* Location/Property Type panels — TRUE full-screen takeover on mobile.
     Deliberately NOT using percentage-based centering (top:X%, translateX,
     etc.) since that math depends on the trigger button's own size/position
     and easily ends up pushing content (like the search box at the top of
     the list) off-screen or behind other elements. Filling the whole
     viewport sidesteps all of that — guaranteed visible regardless of
     content height or which button opened it. */
  .lf-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 0;
    z-index: 600;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: none;
  }
  .lf-panel.open { display: flex; flex-direction: column; }
  .lf-panel-scroll { width: 100%; }
  .lf-loc-tree { flex: 1 1 auto; max-height: none; }
  .lf-panel-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 10px;
    margin-top: auto;
  }
  .lf-clear-all { text-align: center; width: 100%; margin-top: 4px; }
}

/* ---------- Tab row spacing for for-sale/for-rent/home mobile ---------- */
@media (max-width: 640px) {
  /* Buy/Rent tabs were sitting flush against the sticky header with no
     breathing room. */
  .lf-tabs { margin-top: 14px; }
}

/* ---------- 2-column mobile grid for listing cards (home/for-sale/for-rent) ----------
   Previously broke because the Open COA chip (badge next to price) didn't
   fit well in a narrower 2-column card — now that the chip is removed from
   the card entirely, 2-column fits cleanly. */
@media (max-width:640px) {
  .fh-grid.fh-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .fh-grid.fh-grid-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .fh-container-2col {
    padding: 5px 10px !important;
  }
}