/* ---------- FLOATING SEARCH BUTTON (desktop only) ---------- */
/* Independent class prefix (.cs-search-flyout) to avoid colliding with the
   brand's own .contact-flyout classes (which style a different dark contact
   panel from carsystem.org's app.css). The contact button below the search
   keeps the original .contact-flyout-icon brand class as before. */
.cs-search-flyout {
  position: fixed; right: 22px; bottom: 92px; z-index: 1100;
  /* The wrapper itself has zero size — it just anchors the icon and panel
     to the right edge. Visual size comes from the children. */
}
.cs-search-flyout__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cs-red); color: #fff; border: 0; cursor: pointer;
  font-size: 22px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.cs-search-flyout__btn:hover { background: #b21f15; }

/* Expanded panel: sits above the icon, anchored to the right edge of the
   wrapper (which is itself pinned to the viewport right). */
.cs-search-flyout__panel {
  position: absolute; right: 0; bottom: 62px;
  display: flex; align-items: center; gap: 0;
  background: #fff; border-radius: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  padding: 6px 6px 6px 18px;
  min-width: 300px;
}
.cs-search-flyout__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 15px; color: #222; padding: 6px 0;
}
.cs-search-flyout__submit {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cs-red); color: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.cs-search-flyout__submit:hover { background: #b21f15; }
.cs-search-flyout.is-open .cs-search-flyout__btn {
  background: #333; /* dimmed to show the panel is open */
}

/* ---------- MOBILE SEARCH IN THE HEADER ---------- */
/* Visible only on small screens (d-lg-none utility hides it on desktop).
   Mirrors the carsystem.org pattern where the search bar lives inside the
   collapsed mobile nav. */
.search-bar {
  display: flex; align-items: center; gap: 0;
  margin: 14px 0 6px; padding: 0 14px;
}
.search-bar__input {
  flex: 1 1 auto; min-width: 0;
  height: 42px; padding: 0 14px;
  border: 1px solid #ccc; border-right: 0;
  border-radius: 6px 0 0 6px;
  font-size: 15px; color: #222; background: #fff;
  outline: none;
}
.search-bar__input:focus { border-color: var(--cs-red); }
.search-bar__btn {
  height: 42px; width: 48px;
  border: 1px solid var(--cs-red); background: var(--cs-red);
  color: #fff; border-radius: 0 6px 6px 0;
  cursor: pointer; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-bar__btn:hover { background: #b21f15; border-color: #b21f15; }

/* ---------- SEARCH RESULTS PAGE ---------- */
.cs-search-form {
  display: flex; gap: 0; margin: 18px 0 24px;
}
.cs-search-form__input {
  flex: 1 1 auto; min-width: 0;
  height: 48px; padding: 0 18px;
  border: 1px solid #ccc; border-right: 0;
  border-radius: 6px 0 0 6px;
  font-size: 16px; color: #222; background: #fff; outline: none;
}
.cs-search-form__input:focus { border-color: var(--cs-red); }
.cs-search-form__btn {
  height: 48px; padding: 0 22px;
  border: 1px solid var(--cs-red); background: var(--cs-red);
  color: #fff; border-radius: 0 6px 6px 0;
  cursor: pointer; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.cs-search-form__btn:hover { background: #b21f15; border-color: #b21f15; }
.cs-search-summary { color: #555; font-size: 14px; margin: 0 0 18px; }
.cs-search-empty, .cs-search-hint {
  background: #f7f7f7; border-radius: 10px; padding: 24px;
  color: #444; line-height: 1.55;
}
.cs-search-empty code {
  background: #eee; padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cs-search-truncated { color: #888; font-size: 13px; margin-top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}