/* =========================================================
   Dhaka Dental PC — Home Hero Searchbar (fixed for your index.php)
   File: assets/css/searchbar.css

   ✅ Works with your hero:
      <section class="hero hero-video"> ... <div class="container">...</div> </section>

   ✅ Fixes:
   - Searchbar stays TOP-CENTER in hero (NOT left / flex affected)
   - Non-overlap on mobile (Safari + Chrome) by reserving space (JS sets CSS var)
   ========================================================= */

:root{
  --hs-primary: var(--color-primary, #112D43);
  --hs-secondary: var(--color-secondary, #5F93CC);
  --hs-muted: var(--color-muted, #6a7d98);
  --hero-searchbar-space: 0px; /* JS sets this */
}

/* hero should be relative for absolute positioning */
.hero, .hero-video{ position: relative; }

/* ===== Searchbar position: TOP CENTER (fixes your screenshot) ===== */
.home-hero-search{
  width: min(980px, 92vw);
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 999;
  pointer-events: auto;
}

/* Reserve space (ONLY on mobile) so hero cards never overlap searchbar */
@media (max-width: 768px){
  .hero.hero-has-searchbar .container,
  .hero-video.hero-has-searchbar .container{
    margin-top: calc(var(--hero-searchbar-space, 62px) + 14px);
  }
}

/* ===== Pill UI (same design) ===== */
.home-hero-search__form{
  display:flex;
  align-items:center;
  gap: 0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* Focus style (Safari safe; no :has()) */
.home-hero-search__form.is-focus{
  box-shadow: 0 22px 55px rgba(0,0,0,.24);
  border-color: rgba(95,147,204,.45);
}

/* left label segment */
.home-hero-search__label{
  display:flex;
  align-items:center;
  padding: 14px 18px;
  background: rgba(12, 39, 56, .92);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  white-space: nowrap;
  text-transform: lowercase;
}

/* middle input segment */
.home-hero-search__field{
  flex: 1;
  display:flex;
  align-items:center;
  padding: 6px 10px;
  background: rgba(120, 135, 155, .92);
}

.home-hero-search__field input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f8fafc;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 10px;
}

.home-hero-search__field input::placeholder{
  color: rgba(248,250,252,.85);
  font-weight: 700;
}

/* right circle button */
.home-hero-search__btn{
  border: 0;
  width: 56px;
  height: 56px;
  display:grid;
  place-items:center;
  cursor: pointer;
  background: #ffffff;
  color: #0b2a3d;
  transition: transform .12s ease, filter .12s ease;
}

.home-hero-search__btn:hover{ transform: translateY(-1px); filter: brightness(.98); }
.home-hero-search__btn:active{ transform: translateY(0); }

/* Dropdown */
.home-hero-search__dropdown{
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17,45,67,0.12);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  position: relative;
  z-index: 1000;
}

.home-hero-search__item{
  display:block;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,45,67,0.06);
  text-decoration: none;
}
.home-hero-search__item:last-child{ border-bottom: 0; }

.home-hero-search__item strong{
  display:block;
  color: var(--hs-primary);
  font-weight: 900;
}
.home-hero-search__item span{
  display:block;
  color: var(--hs-muted);
  font-size: .92rem;
  margin-top: 3px;
  font-weight: 700;
}
.home-hero-search__item:hover{ background: rgba(95,147,204,.08); }

/* Mobile: hide label + adjust top */
@media (max-width: 640px){
  .home-hero-search{
    width: min(960px, 94vw);
    top: 12px;
  }
  .home-hero-search__label{ display:none; }
  .home-hero-search__btn{ width: 54px; height: 54px; }
  .home-hero-search__field input{ font-size: 15px; }
}