/* ======================= HEADER (logo + search + buttons + hamburger) ======================= */

/* Ensure header/search uses Inter everywhere (Results + Swiper + WebView) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Offset page content so the fixed header doesn't overlap it */
body{ padding-top: var(--topbar-h); }

/* Mobile web: use the same header height knob as the app overlay */
html.is-mobile-web{
  /* Mobile web currently renders the compact search-pill header by default. */
  --mw-topbar-expanded: calc(106px + env(safe-area-inset-top));
  --mw-topbar-compact:  calc(68px + env(safe-area-inset-top));
  --topbar-h: var(--mw-topbar-compact);
  /* iOS Safari (viewport-fit=cover): the area above fixed header uses html background */
  background: var(--brand-dark);
}

html.is-mobile-web body{
  transition: padding-top .22s ease;
  /* Ensure safe-area behind header matches header color */
  background: var(--brand-dark);
}

/* Mobile web: subtle divider under the fixed header */
html.is-mobile-web .topbar.topbar--brand{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

html.is-mobile-web.mw-header-compact{
  --topbar-h: var(--mw-topbar-compact);
}

/* Defaults for top bar */
.topbar, .topbar--brand { 
  background: var(--brand-dark);
  color: #fff;
  border-bottom: none;
  /* was: position: sticky; top: 0; z-index: 100; */
  min-height: var(--topbar-h);
}

/* Lock header typography to Inter (avoid page-to-page font fallback differences) */
.topbar, .topbar *{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Home header layout (center the middle column, white header on homepage) */
.topbar.topbar--brand{
  position: fixed;            /* make header stay at the top on scroll */
  top: 0; left: 0; right: 0;  /* pin to viewport edges */
  z-index: 1000;

  display:grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);   /* middle column auto-width, centered */
  align-items:center;
  gap:12px;
  padding:16px 16px 16px 16px;
  background: linear-gradient(to bottom, #1f1f1f 0%, #1f1f1f 92%, rgba(31, 31, 31, 0) 100%);
  color:#ffffff;
  border-bottom:0px solid #e6e6e6;
  box-sizing:border-box; width:100%; overflow:visible;
}

/* left + right header cells */
.topbar .brand{
  display:flex; align-items:center; gap:8px;
  padding-left:16px;
  justify-self:start;
  min-width: 0;
  position: relative; top: var(--header-optical-nudge); /* tiny raise */
}
.hamburger{
  justify-self:end; margin-right:16px;
  position: relative; top: var(--header-optical-nudge);
}

/* Logo sizes */
.brand-logo{ height:40px; width:auto; display:block; border-radius:0; }

/* Search row goes in the center column */
.mast-search{
  grid-column: 2;                         /* use the middle column */
  justify-self: center;
  display:flex; align-items:center; gap:10px; margin:0;
  width:min(100%, clamp(320px, 42vw, 600px));
  max-width: 600px;
  min-width: 0;
  position: relative; top: var(--header-optical-nudge);
}
.desktop-header-actions{
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 16px;
  min-width: 0;
  position: relative;
  top: var(--header-optical-nudge);
}
.header-shortcut-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  height:44px;
  padding:0 16px;
  border-radius:12px;
  background:#3a3a3a;
  color:#ffffff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:none;
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.header-shortcut-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
.header-shortcut-btn--ai{
  background:linear-gradient(90deg,#ffd700,#ffed4e,#fff8dc);
  color:#111111;
}

/* Location autocomplete wrapper should behave like the input */
.mast-locwrap{
  flex: 1 1 auto;
  min-width: 0; /* allow shrinking in flex containers */
  display: flex;
  align-items: center;
}
.mast-locwrap .mast-input{
  width: 100%;
  flex: 1 1 auto;
}

/* INPUT — Light gray background with white text */
.mast-input{
  flex:1;
  height:24px;
  padding:8px 18px;
  font-size: var(--search-font-size);
  border: 1px solid transparent;
  border-radius:12px;
  background:#3a3a3a !important;
  color:#ffffff;
  box-shadow: 0 0 0 0 rgba(255,215,0,0);
  transition: box-shadow 0.25s ease;
}
.mast-input::placeholder { color: #999; }
.mast-input:hover,
.mast-input:focus { 
  outline: none;
  border: 1px solid transparent;
  box-shadow: none;
  background:#3a3a3a !important;
}

/* Autocomplete dropdown */
.loc-suggest{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 6px);
  background:#1f1f1f;
  border:1px solid #333;
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  max-height:280px;
  overflow:auto;
  z-index:5000;
}
.loc-suggest-item{
  padding:10px 12px;
  cursor:pointer;
  color:#f5f5f5;
  border-bottom:1px solid #2a2a2a;
  font-size:14px;
  line-height:1.2;
}
.loc-suggest-item:last-child{ border-bottom:0; }
.loc-suggest-item:hover,
.loc-suggest-item.is-active{
  background:#2a2a2a;
}
.loc-suggest-error{
  margin-top:6px;
  padding:8px 10px;
  border-radius:10px;
  background:#2a1f00;
  border:1px solid #b8860b;
  color:#ffed4e;
  font-size:12px;
  font-weight:700;
}
/* Override autocomplete styling */
.mast-input:-webkit-autofill,
.mast-input:-webkit-autofill:hover,
.mast-input:-webkit-autofill:focus,
.mast-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #3a3a3a inset !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #3a3a3a inset !important;
  transition: background-color 5000s ease-in-out 0s;
}
.mast-input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #3a3a3a inset !important;
  box-shadow: 0 0 0 1000px #3a3a3a inset !important;
}
.mast-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #3a3a3a inset !important;
  box-shadow: 0 0 0 1000px #3a3a3a inset !important;
}

/* Base button */
.btn{ display:inline-flex; align-items:center; gap:8px; border:none; padding:6px 14px; cursor:pointer; font-weight:600; line-height:1; box-sizing:border-box; }
.btn .icon{ display:block; }

/* FILTER button */
.btn-filter{
  background:#3a3a3a; color:#ffffff;
  height:42px; width:115px;
  border-radius:12px; padding:8px 16px;
  font-size: var(--filter-font-size);
  font-weight: 700;
}
.btn-filter .icon{ width:35px; height:35px; filter:none; }

/* SEARCH (magnify) button */
.btn-searchicon{
  width:36px; height:36px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#3a3a3a; color:#ffffff;
  padding:0;
}
.btn-searchicon .icon{ width:28px; height:28px; filter:none; }
/* Optional label inside the search button for mobile */
.btn-searchicon .label{ display:none; font-weight:700; }

/* Desktop-only: show the header Search submit button only on wider screens */
.mast-search .btn-searchicon--desktop{ display:none; }
@media (min-width: 900px){
  .mast-search .btn-searchicon--desktop{ display:inline-flex; }
}

/* Desktop popup-search mode: keep the regular desktop header layout,
   but style the shared overlay-trigger search pill like the app/mobile bar. */
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay{
  gap: 0;
}
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-locwrap{
  width: 100%;
}
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-inputwrap--app{
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  background: #3a3a3a;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  box-sizing: border-box;
  box-shadow: 0 0 0 0 rgba(255,215,0,0);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-inputwrap--app:hover,
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-inputwrap--app:focus-within{
  border-color: transparent;
  box-shadow: none;
}
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-icon{
  width: 18px;
  height: 18px;
  opacity: .88;
  flex: 0 0 auto;
}
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-input.mast-input--app{
  height: auto;
  min-height: 42px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.2;
}
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-input.mast-input--app:hover,
.topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay .mast-input.mast-input--app:focus{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (min-width: 901px){
  .topbar.topbar--brand:not(.topbar--app-search-overlay) .mast-search--app-overlay{
    width: clamp(380px, 34vw, 560px);
    min-width: 380px;
    max-width: 560px;
  }
}

/* Admin-only AI button: styled like magnify button, but gold text */
.btn-ai{
  width:44px; height:44px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#3a3a3a;
  padding:0;
  text-decoration:none;
}
.btn-ai .label{
  display:inline;
  font-weight:800;
  font-size:16px;
  background:linear-gradient(90deg, #ffd700 0%, #ffed4e 25%, #fff8dc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:.5px;
}

/* Subtle gold glow on hover/focus for Filter button only (match input) */
.btn-filter{ border:1px solid transparent; transition: box-shadow 0.25s ease; }
.btn-filter:hover, .btn-filter:focus-visible{
  box-shadow:
    0 0 1.2px 0.4px rgba(255,215,0,.92),
    0 0 2.4px 0.8px rgba(255,215,0,.16);
  outline: none;
}

/* Make the magnify button larger in this header */
.topbar.topbar--brand .mast-search .btn-searchicon{ width:44px; height:44px; }
.topbar.topbar--brand .mast-search .btn-searchicon .icon{ width:32px; height:32px; }
/* Keep magnifier and AI buttons perfectly round at all widths (avoid flex shrink) */
.topbar.topbar--brand .mast-search .btn-searchicon,
.topbar.topbar--brand .mast-search .btn-ai{
  flex: 0 0 auto;
  min-width: 44px;
  aspect-ratio: 1 / 1;
}

/* Tight desktop widths: hide the logo first so search + page shortcuts don't collide. */
@media (min-width: 901px) and (max-width: 1180px){
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay){
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .brand{
    display:none;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .mast-search{
    grid-column: 1;
    justify-self: center;
    width: clamp(300px, 54vw, 560px);
    max-width: calc(100vw - 330px);
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .desktop-header-actions{
    grid-column: 2;
    padding-right: 8px;
    gap: 8px;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .header-shortcut-btn{
    min-width: 76px;
    padding: 0 12px;
  }
}

/* Tablet and small laptop widths: let the center search truly flex. */
@media (max-width: 900px){
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay){
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .brand{
    display:none;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .mast-search{
    grid-column: 1;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .desktop-header-actions{
    grid-column: 2;
    display:flex;
    gap: 6px;
    padding-right: 0;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .header-shortcut-btn{
    min-width: 64px;
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .mast-input{
    min-width: 0;
  }
}

/* ===== Hamburger icon (3 visible bars in #3d1c00) ===== */
.hamburger{
  width: 34px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 8px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 40;
}
.hamburger::before,
.hamburger::after { content: none !important; }
.hamburger span{
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 2px;
  background: #3d1c00 !important;
  display: block !important;
  opacity: 1 !important;
}
.hamburger span:nth-of-type(1){ top: 0px; }   /* top */
.hamburger span:nth-of-type(2){ top: 8px; }  /* middle */
.hamburger span:nth-of-type(3){ top: 16px; }  /* bottom */
.hamburger:focus-visible{ outline: 2px solid #3d1c00; outline-offset: 3px; }
.hamburger[aria-expanded="true"] span:nth-of-type(1){ top:50%; transform: translateY(-50%) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-of-type(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-of-type(3){ top:50%; transform: translateY(-50%) rotate(-45deg); }
@media (max-width: 720px){
  .hamburger{ width: 38px; height: 28px; }
  .hamburger span:nth-of-type(1){ top: 6px; }
  .hamburger span:nth-of-type(2){ top: 14px; }
  .hamburger span:nth-of-type(3){ top: 22px; }
}

/* ===== Header font sizing hooks ===== */
.topbar.topbar--brand .mast-input{ font-size: var(--search-font-size); }
.topbar.topbar--brand .btn{ font-size: var(--fs-btn); }
.topbar.topbar--brand .btn-filter{ font-size: var(--filter-font-size); }

/* ===== Mobile header layout (phones) — web only ===== */
@media (max-width: 720px){
  /* Mobile knobs (web only). Keep the header a single row like desktop. */
  :root{
    --header-optical-nudge: 0px;
    --filter-font-size: 15px;
    --search-font-size: 16px;
    --topbar-h: 72px;
  }

  /* Single-row header: search | desktop actions */
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay){
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    gap: 8px;
    padding: 12px 12px;
    background: #1f1f1f; /* remove dissolve band on phones (cleaner) */
  }

  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .brand{
    display:none;
  }

  /* Search group in the middle column, same-row controls */
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .mast-search{
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    position: static;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .desktop-header-actions{
    grid-column: 2;
    display:flex;
    gap: 6px;
    padding-right: 0;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .header-shortcut-btn{
    min-width: 58px;
    height: 40px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 10px;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .mast-input{
    height: 40px;
    padding: 10px 12px;
    font-size: var(--search-font-size);
    border-radius: 12px;
  }

  /* Make Filter compact (icon-only) so the header matches "normal" web header */
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .btn-filter{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 0;
    justify-content: center;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .btn-filter span{ display:none; }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .btn-filter .icon{ width: 24px; height: 24px; }

  /* Make the Search/Map/List button compact + readable */
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .btn-searchicon{
    height: 44px !important;
    min-width: 84px;
    width: auto !important;
    border-radius: 12px !important;
    padding: 0 12px;
    display: inline-flex;
    justify-content: center;
    gap: 8px;
  }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .btn-searchicon .icon{ width: 20px; height: 20px; display:block; }
  .topbar.topbar--brand:not(.topbar--app):not(.topbar--app-search-overlay) .btn-searchicon .label{ display:inline; font-size: var(--filter-font-size); font-weight: 800; color:#ffffff; }
}

/* ===== App header layout (no logo / no profile; full-width Map button) ===== */
.topbar.topbar--brand.topbar--app{
  grid-template-columns: 1fr;
}
.topbar.topbar--brand.topbar--app .mast-search{
  grid-column: 1;
  justify-self: center;
  width: 100%;
  max-width: 900px;
}

/* App results header: give a bit more breathing room at the top without increasing overall height */
.topbar.topbar--brand.topbar--app{
  padding-top: 20px;
  padding-bottom: 12px;
}

/* ======================= App results/swiper header (Airbnb-style search) ======================= */
.topbar.topbar--brand.topbar--app-search-overlay{
  /* App header: solid dark (no dissolve) */
  background: #1f1f1f !important;
  background-image: none !important;
  min-height: 0 !important; /* allow responsive shrink on scroll */
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: 12px;
  position: fixed; /* ensure pseudo-element anchors correctly */
  overflow: visible !important; /* allow fade band to render below header */
  /* Force true centering in WebView: avoid any grid layout quirks */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Mobile web: match Kotlin app header spacing + pill sizing */
html.is-mobile-web .topbar.topbar--brand.topbar--app-search-overlay{
  /* allow our custom top row; keep overall header padding compact */
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: 8px;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: stretch;
  row-gap: 6px;
  transition: padding .22s ease;
}
html.is-mobile-web .topbar.topbar--brand.topbar--app-search-overlay .mast-search{
  width: min(92vw, 560px) !important;
  max-width: min(92vw, 560px) !important;
  transition: width .22s ease;
}

/* Mobile web top row (logo left, auth/profile right) */
html.is-mobile-web .mw-toprow{
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px 2px;
  box-sizing: border-box;
  transition: opacity .18s ease, transform .22s ease, max-height .22s ease, padding .22s ease;
  max-height: 44px;
}
html.is-mobile-web .mw-logo{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}
html.is-mobile-web .mw-logo img{
  height: 22px;
  width: auto;
  display: block;
  /* Optical centering vs the auth pill */
  transform: translateY(1px);
}
html.is-mobile-web .mw-authbtn{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
html.is-mobile-web .mw-profilebtn{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
}
html.is-mobile-web .mw-profileicon{
  width: 18px;
  height: 18px;
  background-image: url("profile.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .92;
}

/* Compact on scroll: hide top row + shrink pill */
html.is-mobile-web.mw-header-compact .mw-toprow{
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  padding-bottom: 0;
  pointer-events: none;
}
html.is-mobile-web.mw-header-compact .topbar.topbar--brand.topbar--app-search-overlay{
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: 8px;
  row-gap: 0;
}
html.is-mobile-web.mw-header-compact .topbar.topbar--brand.topbar--app-search-overlay .mast-search{
  width: min(92vw, 520px) !important;
  max-width: min(92vw, 520px) !important;
}
html.is-mobile-web.mw-header-compact .topbar.topbar--brand.topbar--app-search-overlay .mast-inputwrap--app{
  height: 46px;
  border-radius: 23px;
  box-shadow:
    0 0 8px rgba(0,0,0,.58),
    0 0 2px rgba(0,0,0,.46);
}
html.is-mobile-web.mw-header-compact .topbar.topbar--brand.topbar--app-search-overlay .mast-input.mast-input--app{
  line-height: 46px;
  font-size: 15px !important;
}

/* No dissolve band */
.topbar.topbar--brand.topbar--app-search-overlay::after{
  content: none !important;
}
.topbar.topbar--brand.topbar--app-search-overlay .mast-search{
  grid-column: 1 / -1;
  justify-self: center;
  /* App WebView: keep the pill as a centered block (not left-stretched). */
  /* Use 100% instead of 100vw to avoid subtle centering drift in Android WebView. */
  /* Target: ~90% of viewport width (≈5% gutters each side), responsive per device. */
  /* Keep a soft cap for very wide screens/tablets. */
  width: min(90vw, 900px) !important;
  max-width: min(90vw, 900px) !important;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  top: 0;
}
.topbar.topbar--brand.topbar--app-search-overlay .mast-locwrap{
  width: 100%;
  position: relative;
}
.topbar.topbar--brand.topbar--app-search-overlay .mast-inputwrap--app{
  height: 54px; /* bigger / easier to tap */
  border-radius: 26px; /* full pill */
  /* Match web input colors */
  background:#3a3a3a !important;
  border: 1px solid #555;
  /* Centered “stiff” shadow behind pill (no downward bias, low spread) */
  box-shadow:
    0 0 10px rgba(0,0,0,.62),
    0 0 3px rgba(0,0,0,.50);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* typical search pill: icon + text start from left */
  gap: 10px; /* 8–12px between icon and text */
  padding: 0 16px;
  box-sizing: border-box;
}
.topbar.topbar--brand.topbar--app-search-overlay .mast-icon{
  width: 20px;
  height: 20px;
  opacity: .9;
  flex: 0 0 auto;
  /* Android WebView: align icon to input text optical center */
  transform: translateY(1px);
}
.topbar.topbar--brand.topbar--app-search-overlay .mast-input.mast-input--app{
  /* Restore original full-width search field */
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent !important;
  /* Text (not pure white) */
  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;
  caret-color: rgba(255,255,255,.88) !important;
  /* Match Results/Swiper search text sizing in Android WebView */
  font-size: 16px !important;
  line-height: 54px; /* keep text vertically centered with icon */
  font-weight: 600;
  text-align: left;
  width: 100%;
  max-width: none;
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
}
.topbar.topbar--brand.topbar--app-search-overlay .mast-input.mast-input--app::placeholder{
  color: #999 !important;
  -webkit-text-fill-color: #999 !important;
  opacity: 1;
  font-weight: 500;
}
.topbar.topbar--brand.topbar--app-search-overlay .mast-inputwrap--app:focus-within{
  /* Keep the border visible in-app (no disappearing on focus) */
  border-color: #555;
  box-shadow: none;
}
.topbar.topbar--brand.topbar--app-search-overlay.is-scrolled{
  /* Don’t shrink header when scrolling (keep static look) */
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: 12px;
}
.topbar.topbar--brand.topbar--app-search-overlay.is-scrolled .mast-inputwrap--app{
  /* Keep pill styling identical while scrolling */
  border-color: #555;
  background:#3a3a3a !important;
}
@media (max-width: 720px){
  .topbar.topbar--brand.topbar--app{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 0;
  }
  .topbar.topbar--brand.topbar--app .mast-search{
    grid-column: 1 / -1;
    width: 100%;
    max-width: 720px;
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    transform: none;
  }
}

/* App header (results/swiper): ensure search wraps correctly */
.topbar.topbar--brand.topbar--app .mast-locwrap{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* ======================= App full-screen search overlay ======================= */
.mast-search-placeholder{ flex:1 1 auto; min-width:0; }

body.search-overlay-open{
  overflow-x: hidden !important;
  /* Make overlay safe-area vars available to ALL overlay elements (including the floating Search button,
     which is NOT inside `.search-overlay-panel` and therefore can't see vars defined there). */
  --overlay-sat: env(safe-area-inset-top);
  --overlay-sab: env(safe-area-inset-bottom);
  --overlay-safe-outer-top: 64px;
  /* Reduced ~15% from 120px */
  --overlay-safe-outer-bottom: 102px;
}
html.is-mobile-web body.search-overlay-open{
  --overlay-safe-outer-top: 20px;
  --overlay-safe-outer-bottom: 28px;
}
html.is-mobile-web .search-overlay-panel{
  --overlay-footer-h: 74px;
}

.search-overlay-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  /* Very dark tint + blur (keep the background mostly hidden) */
  background: rgba(0,0,0,.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 12000;
}
.search-overlay-backdrop.open{ display:block; }

.search-overlay-panel{
  --overlay-inset: 14px;
  /* Reserve area for the floating gold Search button + bottom gesture bar */
  --overlay-footer-h: 96px;
  /* Cache safe-area env values into vars so JS can read them reliably */
  --overlay-sat: var(--overlay-sat, env(safe-area-inset-top));
  --overlay-sab: var(--overlay-sab, env(safe-area-inset-bottom));
  /* OUTER safe areas (outside the panel): space above panel + space below gold Search button */
  --overlay-safe-outer-top: var(--overlay-safe-outer-top, 44px);
  --overlay-safe-outer-bottom: var(--overlay-safe-outer-bottom, 90px);
  position: fixed;
  display: none;
  z-index: 12001;
  overflow: hidden;
  overflow-x: hidden;
  background: #121212;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  box-sizing: border-box;
  max-width: calc(100vw - (var(--overlay-inset) * 2));
  /* Animated via inline styles (left/top/width/height/radius) */
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease, border-radius .22s ease;
}
.search-overlay-panel.open{ display:block; }

/* Overlay design system: normalize typography + controls (Android WebView friendly) */
.search-overlay-panel,
.search-overlay-panel *{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.search-overlay-panel button,
.search-overlay-panel input,
.search-overlay-panel select,
.search-overlay-panel textarea{
  font: inherit;
}
.search-overlay-panel button{
  -webkit-tap-highlight-color: transparent;
}
.search-overlay-panel a{
  color: inherit;
}

.search-overlay-inner{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  /* Inner padding should be normal; the "safe areas" requested are OUTSIDE this panel */
  padding: calc(8px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  /* Avoid “double scroll” (overlay + inner filter panel).
     Keep header/search/recents fixed, and let the filters area scroll. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity .18s ease;
}
.search-overlay-inner.ready{ opacity: 1; }

.search-overlay-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.search-overlay-title{
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.01em;
  font-size: 16px;
}
.search-overlay-searchrow{
  margin-bottom: 6px;
  display: block;
}
.search-overlay-form-mount{
  width: 100%;
  max-width: min(560px, calc(100vw - 32px));
  margin: 0 auto;
}
.search-overlay-radiusbtn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 0;
  max-width: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: #242424;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  font-family: inherit;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.search-overlay-radiusbtn.is-active{
  border-color: rgba(255,215,0,.58);
  background: rgba(255,215,0,.12);
  color: #fff8dc;
}
.search-overlay-radiusbtn:active{ transform: scale(0.99); }
.search-overlay-radiusbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,215,0,.16);
}
.search-overlay-close{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #333;
  background: #1f1f1f;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.search-overlay-close:active{ transform: scale(0.98); }
.search-overlay-close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,215,0,.12);
  border-color: rgba(255,215,0,.35);
}

/* When the header search form is moved into the overlay, make it full width */
.search-overlay-panel .mast-search{
  /* Keep the pill centered like the native header search pill */
  width: min(720px, calc(100% - 24px)) !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  position: static !important;
  top: auto !important;
}

/* In the overlay, darken field borders (filter.css uses var(--muted)) */
.search-overlay-panel{
  --muted: #2a2a2a;
}

/* Fullscreen overlay search (app): use the same premium input shell, not the old centered-pill style */
.search-overlay-panel .mast-inputwrap--app{
  height: 54px; /* match header pill */
  width: 100%;
  max-width: none;
  border-radius: 26px;
  background:#3a3a3a !important;
  border: 1px solid #555;
  /* Match header pill shadow (centered, low spread) */
  box-shadow:
    0 0 10px rgba(0,0,0,.62),
    0 0 3px rgba(0,0,0,.50);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* match header pill */
  gap: 9px;
  padding: 0 16px;
  box-sizing: border-box;
}
.search-overlay-panel .mast-icon{
  width: 20px;
  height: 20px;
  opacity: .9;
  flex: 0 0 auto;
  /* Android WebView: align icon to input text optical center */
  transform: translateY(1px);
}
.search-overlay-panel .mast-input.mast-input--app{
  /* Restore original full-width search field */
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent !important;
  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;
  caret-color: rgba(255,255,255,.88) !important;
  font-size: 16px;
  line-height: 54px; /* keep text vertically centered with icon */
  font-weight: 600;
  text-align: left;
  width: 100%;
  max-width: none;
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  box-shadow: none !important;
}
.search-overlay-panel .mast-input.mast-input--app::placeholder{
  color: #999 !important;
  -webkit-text-fill-color: #999 !important;
  opacity: 1;
  font-weight: 500;
}
.search-overlay-panel .mast-inputwrap--app:focus-within{
  /* Match the default search pill: keep the gray border, no gold focus ring */
  border-color: #555;
  box-shadow:
    0 0 10px rgba(0,0,0,.62),
    0 0 3px rgba(0,0,0,.50);
}

/* Legacy overlay input styling (non-app) */
.search-overlay-panel .mast-input:not(.mast-input--app){
  height: 36px;
  padding: 8px 14px;
  font-size: 15px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  border: none !important;
  background: #2a2a2a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* Android/WebKit */
  caret-color: #ffffff !important;
  box-shadow: none !important;
}
.search-overlay-panel .mast-input:not(.mast-input--app)::placeholder{
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  opacity: 1;
}
.search-overlay-panel .loc-suggest{
  z-index: 12005;
}

.search-overlay-quickactions{
  display:flex;
  justify-content:center;
  margin: 2px 0 6px;
}

.search-overlay-nearyoubtn{
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,0,.28);
  background: linear-gradient(90deg, rgba(255,215,0,.18), rgba(255,237,78,.12), rgba(255,248,220,.08));
  color: #fff8dc;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -.01em;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}
.search-overlay-nearyoubtn:active{ transform: scale(0.995); }
.search-overlay-nearyoubtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,215,0,.14);
  border-color: rgba(255,215,0,.44);
}

.radius-search-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 12020;
}
.radius-search-backdrop.open{ display:block; }

.radius-search-panel{
  position: fixed;
  left: 50%;
  top: calc(22px + env(safe-area-inset-top));
  transform: translateX(-50%);
  display: none;
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  z-index: 12021;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: #121212;
  color: #fff;
  box-shadow: 0 28px 90px rgba(0,0,0,.68);
}
.radius-search-panel.open{ display:block; }
.radius-search-head{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.radius-search-close{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: #1f1f1f;
  color: #fff;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.radius-search-title{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.03em;
}
.radius-search-subtitle{
  margin-top: 2px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.radius-search-status{
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}
.radius-search-status.is-error{
  background: none;
  border-color: transparent;
  color: inherit;
}
.radius-search-map{
  position: relative;
  width: 100%;
  height: min(46vh, 360px);
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,.10);
}
.radius-search-map .leaflet-control-attribution{
  font-size: 9px;
}
.radius-search-shape-overlay{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--radius-overlay-size, min(68%, calc(100% - 84px)));
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(205,160,0,.92);
  background: rgba(224,184,0,.26);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.16);
  z-index: 499;
  pointer-events: none;
  transition: border-radius .16s ease, background .16s ease;
}
.radius-search-shape-overlay--circle{
  border-radius: 999px;
}
.radius-search-shape-overlay--square{
  border-radius: 0;
}
.radius-search-map::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #ffd700;
  border: 3px solid #121212;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.8),
    0 8px 20px rgba(0,0,0,.42);
  z-index: 500;
  pointer-events: none;
}
.radius-search-controls{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.radius-search-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.radius-shape-btn{
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: #1f1f1f;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.radius-shape-btn.is-active{
  border-color: rgba(255,215,0,.62);
  background: rgba(255,215,0,.13);
  color: #fff8dc;
}
.radius-search-slider{
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 850;
}
.radius-search-slider span{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.radius-search-slider input{
  width: 100%;
  accent-color: #ffd700;
}
.radius-search-actions{
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
}
.radius-search-clear,
.radius-search-apply{
  min-height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}
.radius-search-clear{
  border: 1px solid rgba(255,255,255,.14);
  background: #1f1f1f;
  color: rgba(255,255,255,.86);
}
.radius-search-apply{
  border: 0;
  background: linear-gradient(90deg,#ffd700,#ffed4e,#fff8dc);
  color: #111;
  box-shadow: 0 12px 28px rgba(255,215,0,.18);
}
.radius-search-clear:active,
.radius-search-apply:active,
.radius-shape-btn:active,
.radius-search-close:active{
  transform: scale(.99);
}

@media (max-width: 520px){
  .search-overlay-searchrow{
    margin-bottom: 6px;
  }
  .search-overlay-radiusbtn{
    width: auto;
    max-width: none;
    min-height: 32px;
    padding: 7px 12px;
    font-size: 12px;
  }
  .radius-search-panel{
    top: calc(10px + env(safe-area-inset-top));
    width: calc(100vw - 16px);
    max-height: calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 12px;
    border-radius: 20px;
  }
  .radius-search-map{
    height: 38vh;
    min-height: 240px;
  }
  .radius-search-actions{
    grid-template-columns: 1fr;
  }
}

.search-overlay-section{ margin-top: 10px; }
.search-overlay-recent-section{
  position: relative;
  display: block;
  margin-top: 4px;
  z-index: 2;
}
.search-overlay-recent-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.search-overlay-slogan{
  margin: 10px auto 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  color: #ffffff;
  font-weight: 950;
  font-size: clamp(17px, 3.8vw, 28px);
  line-height: 1.15;
  letter-spacing: -.04em;
}
.search-overlay-slogan__line{
  max-width: 100%;
}
.search-overlay-section-title{
  font-weight: 800;
  color: #ffffff;
  margin: 2px 0 8px;
  letter-spacing: -.01em;
  font-size: 14px;
}
.search-overlay-section-title--row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.search-overlay-recent-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.search-overlay-recent-toggle.is-open{
  border-color: rgba(255,215,0,.45);
  background: rgba(255,215,0,.12);
  color: #fff8dc;
}
.search-overlay-recent-toggle:active{ transform: scale(0.99); }
.search-overlay-recent-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,215,0,.12);
}
.search-overlay-recent-popup{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(360px, calc(100vw - 44px));
  max-height: min(48vh, 420px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.13);
  background: #151515;
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
  z-index: 5;
}
.search-overlay-recent-popup[hidden]{
  display: none !important;
}
.search-overlay-recent-popup-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}
.search-overlay-recent-close{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: #202020;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.search-overlay-reset{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
}
.search-overlay-reset:active{ transform: scale(0.99); }
.search-overlay-reset:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,215,0,.12);
  border-color: rgba(255,215,0,.35);
}
.search-overlay-recent{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height: calc(min(48vh, 420px) - 50px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}
.search-overlay-recent-item{
  width:100%;
  text-align:left;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #f5f5f5;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 13px;
}
.search-overlay-recent-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
}
.search-overlay-recent-sub{
  margin-top: 3px;
  font-size: 11px;
  color: rgba(192,192,192,.92);
  font-weight: 600;
}
.search-overlay-empty{
  color:#c0c0c0;
  font-size: 14px;
  padding: 10px 2px;
}

/* Filters: reuse existing filter panel styles, but allow full width in overlay */
.search-overlay-filters{
  overflow-x: hidden;
  min-height: 0;
}
.search-overlay-section[aria-label="Filters"]{
  /* Fill remaining height so the footer buttons are always reachable */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.search-overlay-section[aria-label="Filters"] .search-overlay-filters{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.search-overlay-filters .panel{
  /* Override filter.css mobile rule `.panel{ width: 94vw; }` which can exceed our inset overlay */
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px;
  box-sizing: border-box;
  margin: 0 !important;
  /* Make it feel like a modern “sheet” */
  background: linear-gradient(180deg, #1a1a1a, #151515) !important;
  border: 1px solid #2a2a2a;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  color: #f5f5f5;
  /* Make the panel itself the scroller so its sticky footer stays visible */
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
  overflow-x: hidden !important; /* prevent sideways scroll if any label is long */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Panel height already stops above the floating Search button.
     Only keep a small bottom cushion for safe-area / comfort. */
  /* Important: give the scroller enough bottom padding so the last controls
     are never trapped behind the floating Search button on Android WebView. */
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom) + var(--overlay-footer-h, 96px)) !important;
  scroll-padding-bottom: calc(env(safe-area-inset-bottom) + var(--overlay-footer-h, 96px));
}

/* Fullscreen overlay: remove filter footer buttons entirely (we use the gold Search button below) */
.search-overlay-filters .sticky-bar{ display:none !important; }

/* ===== Fullscreen overlay filter UI polish (app) ===== */
.search-overlay-panel .panel h2{ display:none; } /* overlay already has a title */

.search-overlay-panel .panel .field{
  gap: 6px;
  margin-bottom: 14px;
}
.search-overlay-panel .panel .field > label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.82);
  letter-spacing: .01em;
}

.search-overlay-panel .panel input[type="number"],
.search-overlay-panel .panel input[type="text"],
.search-overlay-panel .panel select{
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2f2f2f;
  background: #121212;
  color: rgba(255,255,255,.92);
}
.search-overlay-panel .panel select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(255,255,255,0.72)' d='M5.6 7.6a1 1 0 0 1 1.4 0L10 10.6l3-3a1 1 0 1 1 1.4 1.4l-3.7 3.7a1 1 0 0 1-1.4 0L5.6 9a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
.search-overlay-panel .panel input[type="number"]:focus,
.search-overlay-panel .panel input[type="text"]:focus,
.search-overlay-panel .panel select:focus{
  outline: none;
  border-color: rgba(255,215,0,.55);
  box-shadow: 0 0 0 3px rgba(255,215,0,.10);
}

.search-overlay-panel .panel fieldset{
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
}
.search-overlay-panel .panel legend{
  padding: 0 8px;
  color: rgba(255,255,255,.86);
  font-weight: 900;
  letter-spacing: -.01em;
}
.search-overlay-panel .panel .toggle-option{
  color: rgba(255,255,255,.92);
}
.search-overlay-panel .panel .toggle-option .toggle-option__label{
  color: rgba(255,255,255,.92) !important;
}
.search-overlay-panel .panel .toggle-option:has(input:checked) .toggle-option__label{
  color: #fff9e8 !important;
}

/* Chips: modern tappable rows (works for both checkbox and radio chips) */
.search-overlay-panel .panel .chip{
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 9px 12px;
  border-radius: 14px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden; /* avoid horizontal scroll on long labels */
  font-weight: 900;
  color: rgba(255,255,255,.92);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 26px rgba(0,0,0,.25);
}
.search-overlay-panel .panel .chip:active{
  transform: scale(0.997);
}
.search-overlay-panel .panel .chip input{
  accent-color: #ffd700;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* Highlight selected chips (Chrome/WebView supports :has; harmless if not) */
.search-overlay-panel .panel .chip:has(input:checked){
  border-color: rgba(255,215,0,.50);
  background: linear-gradient(90deg, rgba(255,215,0,.16), rgba(255,237,78,.10), rgba(255,248,220,.06));
}
.search-overlay-panel .panel .chip:has(input:focus-visible){
  box-shadow: 0 0 0 3px rgba(255,215,0,.10);
}

/* Amenities lists: less “wall of checkboxes” */
.search-overlay-panel .panel .amenities,
.search-overlay-panel .panel .parking-list,
.search-overlay-panel .panel .nearby-list{
  columns: initial;
  column-gap: initial;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.search-overlay-panel .panel .amenities label,
.search-overlay-panel .panel .parking-list label,
.search-overlay-panel .panel .nearby-list label{
  break-inside: avoid;
}
.search-overlay-panel .panel .amenities label,
.search-overlay-panel .panel .parking-list label,
.search-overlay-panel .panel .nearby-list label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid #242424;
  background: #161616;
  font-weight: 800;
  color: rgba(255,255,255,.90);
  line-height: 1.15;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.search-overlay-panel .panel .amenities input,
.search-overlay-panel .panel .parking-list input,
.search-overlay-panel .panel .nearby-list input{
  margin-top: 2px;
  accent-color: #ffd700;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Floating gold Search button (outside the card, above blur) */
.search-overlay-floating{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* OUTER safe area: keep extra space below the gold Search button */
  bottom: calc(var(--overlay-inset, 14px) + var(--overlay-sab, env(safe-area-inset-bottom)) + var(--overlay-safe-outer-bottom, 24px));
  z-index: 12002;
  display: none;
  width: min(360px, calc(100vw - (var(--overlay-inset, 14px) * 2)));
  justify-content: center;
  pointer-events: none; /* allow clicks only on the button */
}
body.search-overlay-open .search-overlay-floating{
  display:flex;
  bottom: calc(var(--overlay-inset, 14px) + var(--overlay-sab, env(safe-area-inset-bottom)) + var(--overlay-safe-outer-bottom, 24px)) !important;
}
.search-overlay-searchbtn{
  pointer-events: auto;
  display:block;
  margin: 0 auto;
  width: min(260px, 70%);
  min-height: 42px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg,#ffd700,#ffed4e,#fff8dc);
  color: #111;
  font-weight: 900;
  font-size: 15px;
}
.search-overlay-searchbtn:active{ transform: scale(0.995); }
.search-overlay-searchbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,215,0,.18);
}

@media (min-width: 901px){
  body.search-overlay-open{
    --overlay-safe-outer-top: 28px;
    --overlay-safe-outer-bottom: 28px;
  }
  .search-overlay-panel{
    --overlay-inset: 28px;
    --overlay-footer-h: 84px;
  }
  .search-overlay-inner{
    padding: 16px 18px 18px;
  }
  .search-overlay-header{
    margin-bottom: 10px;
  }
  .search-overlay-title{
    font-size: 18px;
  }
  .search-overlay-searchrow{
    margin-bottom: 10px;
  }
  .search-overlay-form-mount{
    max-width: min(760px, calc(100vw - 180px));
  }
  .search-overlay-recent-actions{
    gap:10px;
  }
  .search-overlay-slogan{
    margin-top: 12px;
    font-size: clamp(22px, 2vw, 30px);
  }
  .search-overlay-radiusbtn{
    max-width: none;
    min-height: 32px;
    padding: 7px 14px;
    font-size: 12px;
  }
  .search-overlay-panel .mast-search{
    width: min(760px, 100%) !important;
  }
  .search-overlay-section{
    margin-top: 14px;
  }
  .search-overlay-section-title{
    font-size: 15px;
    margin-bottom: 10px;
  }
  .search-overlay-recent{
    gap: 8px;
  }
  .search-overlay-recent-item{
    min-height: 56px;
  }
  .search-overlay-filters .panel{
    border-radius: 20px;
    padding: 16px 16px calc(16px + var(--overlay-footer-h, 84px)) !important;
  }
  .search-overlay-panel .panel .field-row{
    gap: 14px;
  }
  .search-overlay-panel .panel .amenities,
  .search-overlay-panel .panel .parking-list,
  .search-overlay-panel .panel .nearby-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .search-overlay-floating{
    width: min(420px, calc(100vw - 120px));
  }
  .search-overlay-searchbtn{
    width: min(320px, 100%);
    min-height: 48px;
    font-size: 16px;
    box-shadow: 0 14px 30px rgba(0,0,0,.32);
  }
}

/* Confirm modal: override generic .btn styles to match overlay */
.search-overlay-confirm-modal,
.search-overlay-confirm-modal *{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.search-overlay-confirm-actions .btn{
  border-radius: 999px;
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 900;
}
.search-overlay-confirm-actions .btn:active{ transform: scale(0.995); }
.search-overlay-confirm-actions .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,215,0,.12);
}

/* Reset confirmation popup (inside overlay) */
.search-overlay-confirm-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 12010;
}
.search-overlay-confirm-backdrop.open{ display:block; }
.search-overlay-confirm-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 88vw);
  max-height: 70vh;
  overflow: auto;
  display: none;
  z-index: 12011;
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.search-overlay-confirm-modal.open{ display:block; }
.search-overlay-confirm-body{ padding: 16px; }
.search-overlay-confirm-title{ font-weight: 900; color: #fff; margin: 0 0 6px; font-size: 18px; }
.search-overlay-confirm-text{ color:#d0d0d0; margin: 0 0 14px; font-size: 14px; line-height: 1.4; }
.search-overlay-confirm-actions{ display:flex; gap: 10px; justify-content: flex-end; }
.search-overlay-confirm-actions .btn{ min-height: 44px; border-radius: 14px; font-weight: 800; }
.search-overlay-confirm-actions .btn{ min-height: 40px; font-size: 14px; }
.search-overlay-confirm-cancel{ background:#3a3a3a; color:#fff; }
.search-overlay-confirm-ok{ background: linear-gradient(90deg,#ffd700,#ffed4e,#fff8dc); color:#111; }