.global-search{position:relative}
.global-search-toggle.is-active{color:#fff;background:#008c82;border-color:#008c82}
.global-search-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:400;width:340px;max-width:calc(100vw - 24px);background:#fff;border-radius:16px;box-shadow:0 18px 48px rgba(15,45,42,.18);border:1px solid #e3ece9;overflow:hidden}
.global-search-panel[hidden]{display:none}
.global-search-form{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #eef3f2}
.global-search-form svg{width:18px;height:18px;flex:0 0 auto;stroke:#6b8582;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.global-search-form input{flex:1;border:0;outline:0;font-size:14px;color:#0f2d2a;background:transparent;position:relative;z-index:1}

/* Animated placeholder: "Search: " stays fixed, the example word after it
   rotates every ~1.5s (see global-search.js). A real placeholder can't
   animate part of its text, so this sits visually on top of the (now
   placeholder-less) input and hides itself the moment there's real input,
   via :placeholder-shown -- exactly like a native placeholder would. */
.global-search-anim-placeholder{position:absolute;left:38px;right:34px;top:50%;transform:translateY(-50%);z-index:0;display:flex;align-items:center;gap:4px;font-size:14px;color:#8aa19d;overflow:hidden;white-space:nowrap;pointer-events:none}
.global-search-anim-placeholder b{font-weight:600;color:#6b9490;display:inline-block;transition:transform .3s ease,opacity .3s ease}
.global-search-anim-placeholder.is-swapping b{transform:translateY(-8px);opacity:0}
.global-search-form input:not(:placeholder-shown) ~ .global-search-anim-placeholder{display:none}
.global-search-mobnav .global-search-anim-placeholder{left:34px}
.global-search-close{flex:0 0 auto;border:0;background:none;font-size:18px;line-height:1;color:#8aa19d;cursor:pointer;padding:2px 4px}
.global-search-filter-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:26px;border-left:1px solid #e3ece9;margin-left:8px;padding-left:10px;color:#087f78}
.global-search-filter-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.global-search-filter-btn:hover{color:#0a6d63}

/* Desktop header: always-visible pill search bar (replaces the old
   icon-only toggle) so "Search properties, 1 RK, 2 BHK…" shows inline in
   the header on every page, not just when clicked open. Suggestions +
   Advance Search stay a dropdown that opens on focus. */
.global-search-inline{width:300px;flex:0 1 320px;margin-right:4px}
.global-search-inline .global-search-form{border:1px solid #e3ece9;background:#f7faf9;border-radius:999px;padding:9px 16px;border-bottom:1px solid #e3ece9;transition:border-color .15s ease,background .15s ease}
.global-search-inline .global-search-form:focus-within{border-color:#0a6d63;background:#fff}
.global-search-inline .global-search-panel{top:calc(100% + 10px);left:0;right:0;width:auto}

@media (max-width:1250px){.global-search-inline{width:220px;flex-basis:220px}.global-search-inline .global-search-panel{left:auto;width:320px;max-width:calc(100vw - 24px)}}
@media (max-width:1080px){.global-search-inline{width:160px;flex-basis:160px}}
@media (max-width:990px){.global-search-inline{width:130px;flex-basis:130px}.global-search-inline .global-search-anim-placeholder{display:none}}
.global-search-results{max-height:360px;overflow-y:auto}
.global-search-section-label{padding:10px 14px 4px;font-size:11px;font-weight:800;letter-spacing:.06em;color:#8aa19d;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
.global-search-clear-history{border:0;background:none;color:#087f78;font-weight:700;font-size:11px;cursor:pointer;text-transform:none;letter-spacing:normal}
.global-search-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:0;background:none;text-align:left;cursor:pointer;text-decoration:none;color:#0f2d2a}
.global-search-item:hover{background:#f1f8f7}
.global-search-item svg{width:16px;height:16px;flex:0 0 auto;stroke:#8aa19d;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.global-search-item-copy{min-width:0}
.global-search-item-copy strong{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.global-search-item-copy small{display:block;font-size:11.5px;color:#6b8582;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.global-search-empty{padding:22px 14px;text-align:center;color:#8aa19d;font-size:13px}

@media (max-width:700px){
  .global-search-panel{position:fixed;top:64px;left:10px;right:10px;width:auto;max-width:none}

  /* This instance replaces the plain "Search" tab already built into the
     site's existing bottom nav (.mob-nav, in footer.html) -- match that
     bar's own item styling exactly instead of introducing a new look, and
     open the panel upward from above the bar (which sits fixed at the
     bottom with its own raised FAB) rather than downward off-screen. */
  .global-search-mobnav{display:flex;flex-direction:column;align-items:center;color:#aaa;padding:8px 0;flex:1}
  .global-search-mobnav .global-search-toggle{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0;color:inherit;font:inherit}
  .global-search-mobnav .global-search-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .global-search-mobnav .global-search-toggle span{font-size:11px;font-weight:700}
  .global-search-mobnav .global-search-toggle.is-active{background:none;color:var(--primary)}
  .global-search-mobnav .global-search-panel{position:fixed;left:10px;right:10px;bottom:calc(158px + env(safe-area-inset-bottom,0px));top:auto;width:auto;max-width:none}
}