/* ============================================================
   HERO SEARCH BAR + LOCATION PICKER
   The home hero markup (index.php) was never given its own style
   block when the pages were split out of the .html originals, so the
   glass search bar and the location dropdown rendered unstyled. These
   rules live here because header.php loads this file on every page.
   ============================================================ */

/* The hero row holds four controls: search input, divider, location button and
   the Compare Now button. They must sit on ONE pill on desktop. The previous
   `flex-wrap: wrap` plus a 240px flex-basis on the input overflowed the 36rem
   form by ~56px, so Compare Now was pushed onto its own line. Desktop is now
   `nowrap` and the input absorbs the leftover space; below 640px the bar
   stacks, which is the intended mobile layout. */
.glass-search-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 8px 8px 8px 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  position: relative;
}
@media (min-width: 640px) {
  .glass-search-bar {
    border-radius: 999px;
    padding: 8px 8px 8px 20px;
    flex-direction: row;
    align-items: center;
  }
}

/* Give the hero bar enough room for input + location + button on one line.
   The hero-left column spans 7 of 12 grid tracks, so there is space to use. */
.hero-left .search-form { max-width: 44rem; }

.glass-search-bar .search-query {
  display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0;
}
.glass-search-bar .search-query input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; color: #0f172a; padding: 8px 0;
}
.glass-search-bar .search-query input::placeholder { color: #94a3b8; }

.glass-search-bar .divider {
  width: 1px; align-self: stretch; background: #e2e8f0; margin: 4px 0;
}
@media (max-width: 639px) { .glass-search-bar .divider { display: none; } }

/* ---- location button + dropdown ---------------------------------- */
.loc-btn { position: relative; flex: 0 0 auto; }
.loc-btn > button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(241, 245, 249, 0.7); border: 1px solid #e2e8f0;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #334155; transition: background 0.2s; max-width: 190px;
}
@media (min-width: 640px) { .loc-btn > button { border-radius: 999px; } }
.loc-btn > button:hover { background: rgba(226, 232, 240, 0.5); }
.loc-btn .pin { color: #f43f5e; display: inline-flex; flex-shrink: 0; }

.loc-select {
  position: absolute; left: 0; top: calc(100% + 8px);
  width: 300px; max-width: min(88vw, 340px); z-index: 60;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px; border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  padding: 10px 0 8px; text-align: left;
}
.loc-select .title {
  padding: 2px 14px 8px; font-size: 11px; font-weight: 700;
  color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;
}

.loc-search-wrap {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 8px; padding: 7px 10px;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
}
.loc-search-wrap input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 12.5px; color: #0f172a;
}
.loc-search-wrap input::placeholder { color: #94a3b8; }

#locList { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
#locList::-webkit-scrollbar { width: 8px; }
#locList::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

.loc-group {
  padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700;
  color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em;
  position: sticky; top: 0; background: rgba(255, 255, 255, 0.98);
}
.loc-group .loc-back { padding: 0; font-size: 11px; font-weight: 700; color: #1d4ed8; }

.loc-row {
  width: 100%; padding: 8px 14px; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px;
}
.loc-row:hover { background: #f0fdfa; }
.loc-row .loc-name { color: #0f172a; font-weight: 500; }
.loc-row:hover .loc-name { color: #079F34; }
.loc-row .loc-sub {
  color: #94a3b8; font-size: 11px; font-weight: 500;
  text-align: right; flex-shrink: 0; max-width: 46%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loc-empty { padding: 16px 14px; font-size: 12px; color: #94a3b8; }

.compare-now {
  padding: 12px 24px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(90deg, #1d4ed8, #1e40af, #079F34); color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.25); transition: all 0.3s;
  flex: 0 0 auto;
}
/* Stacked mobile layout: location + button each take a full row. */
@media (max-width: 639px) {
  .glass-search-bar .loc-btn > button,
  .compare-now { width: 100%; max-width: none; }
  .compare-now { margin-top: 2px; }
}
@media (min-width: 640px) { .compare-now { border-radius: 999px; } }
.compare-now:hover { transform: scale(1.02); }

.chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.chips-row .lbl { font-weight: 600; color: #64748b; margin-right: 4px; }
.chip {
  padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.7);
  color: #334155; font-weight: 500; border: 1px solid rgba(226, 232, 240, 0.7);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.chip:hover { background: #fff; color: #079F34; transform: scale(1.05); }