/* ============================================================================
   Predictive Search Dropdown — 5 interchangeable styles
   ----------------------------------------------------------------------------
   Every style keeps the SAME DOM contract your searchSuggestions.js relies on:
     [data-search-suggestions-root]
       [data-sp-loading]
       [data-sp-columns]
         [data-sp-section="terms|brands|categories"]
           .sp-column-title
           .sp-column-items  -> JS appends <a class="sp-item">
             .sp-item-text (with <mark> highlight) + optional .sp-item-meta
       [data-sp-empty]

   To switch styles in the MVC app, just change the modifier class on the root:
     sp-style--classic | sp-style--stacked | sp-style--divided
     sp-style--cards   | sp-style--minimal | sp-style--compact
     sp-style--boxed   | sp-style--glass   | sp-style--sidebar
     sp-style--magazine
   ============================================================================ */

:root {
  --sp-brand: #0a59c2;
  --sp-brand-soft: #e8f0fb;
  --sp-ink: #1f2937;
  --sp-ink-soft: #6b7280;
  --sp-line: #e5e7eb;
  --sp-hover: #f3f4f6;
  --sp-amber-bg: #fef3c7;
  --sp-amber-ink: #92400e;
  --sp-green-bg: #e7f6ee;
  --sp-green-ink: #047857;
  --sp-mark: #fff3a8;
}

/* =============================================================================
   EXPANDING SEARCH — optional mode
   -----------------------------------------------------------------------------
   Activated by adding data-sp-expand to the <form> element.

   The form keeps its natural width in the layout flow (acts as the "slot").
   Inside it, .sp-search-box is absolutely positioned and expands from BOTH
   sides symmetrically using left:50% + translateX(-50%) + width transition.
   When the form has the .sp-search-active class (added by JS on focus),
   the box grows to 830px (matching the suggestions panel max-width).

   The suggestions dropdown is a sibling of the form (rendered by the results
   partial) and is already centered with left:50%+translateX(-50%) on the form,
   so it naturally aligns with the expanded input.
   ============================================================================= */

/* Slot: the form itself keeps its natural width in the header flow. */
.sp-searchform[data-sp-expand] {
  position: relative;   /* positioning context for .sp-search-box */
}

/* The expanding box sits absolutely inside the slot. */
.sp-searchform[data-sp-expand] .sp-search-box {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;          /* collapsed = matches the slot width */
  z-index: 50;
  transition: width 0.28s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Expanded state — grows symmetrically to match the suggestions panel. */
.sp-searchform[data-sp-expand].sp-search-active .sp-search-box {
  width: 830px;
}

/* The input fills the expanding box. */
.sp-searchform[data-sp-expand] .sp-search-box .inputbox {
  width: 100%;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

/* When expanded, the input switches to a white background (matches the
   suggestions panel background so input + dropdown read as one piece). */
.sp-searchform[data-sp-expand].sp-search-active .sp-search-box .inputbox ,
.sp-searchform[data-sp-expand].sp-search-active .sp-search-box #search-input-header.inputbox {
  background: #ffffff !important;
  color: #1f2937 !important;
  padding: 8px;
  border-radius: 5px;
}
.sp-searchform[data-sp-expand].sp-search-active .sp-search-box .inputbox::placeholder {
  color: #6b7280;
}
/* Hide the themed background span behind the input while expanded so the
   white background is not overlaid by the dark header field background. */
.sp-searchform[data-sp-expand].sp-search-active .sp-search-box .kl-field-bg {
  display: none;
}

/* ----- Dropdown alignment in expand mode -----
   The dropdown is a sibling of the form and is centered on the form's midline
   (left:50% + translateX(-50%)). The expanding .sp-search-box is also centered
   on the form's midline, so horizontal alignment is automatic.
   The form keeps the collapsed input's natural height (the expanding box is
   absolutely positioned out of flow). Because the .sp-search-box is anchored
   at top:0 of the form and shares the input's height, top:100% of the form
   already equals the bottom of the expanded box — so no overlap occurs.
   We just add a little extra breathing room while expanded. */
/*#search-input-header[expanded='true'] {
  background: #ffffff !important;
  color: #1f2937 !important;
}*/
  
.sp-searchform[data-sp-expand] ~ #sp-dropdown {
  margin-top: 8px;
}

/* Dimming overlay shown behind the expanded search (below header z-index). */
.sp-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;          /* below .sp-search-box (50) and .sp-dropdown (9999) */
  opacity: 0;
  transition: opacity 0.28s ease;
}
.sp-search-overlay.sp-search-overlay--visible {
  display: block;
  opacity: 1;
}

/* On narrow screens the box just fills the slot — no expansion needed. */
@media (max-width: 720px) {
  .sp-searchform[data-sp-expand] .sp-search-box {
    position: static;
    transform: none;
    width: 100%;
    transition: none;
  }
  .sp-searchform[data-sp-expand].sp-search-active .sp-search-box {
    width: 100%;
  }
  .sp-search-overlay {
    display: none !important;
  }
}

/* ---------- Shared base (positioning + reset) ----------
   The dropdown is wider than the search input (max-width 830px) but must stay
   CENTERED against the input. The dropdown is positioned by its nearest
   positioned ancestor (the search form / header wrapper). By anchoring it to
   the horizontal center (left:50% + translateX(-50%)) and letting it grow up
   to its max-width, it visually overflows the input equally on both sides,
   keeping the input centered relative to the results panel.
   ------------------------------------------------------- */
.sp-dropdown {
  position: absolute;
  z-index: 9999;
  /*top: 100%;*/
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--sp-ink);
  margin-top: 6px;
  width: 100%;
  max-width: 830px;
  box-sizing: border-box;
  text-align: left;
}

/* On narrow screens, fall back to full-width under the input. */
@media (max-width: 720px) {
  .sp-dropdown {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-width: none;
  }
}
.sp-dropdown[hidden] {
  display: none;
}
.sp-dropdown-inner {
  padding: 12px;
}
.sp-loading,
.sp-empty {
  padding: 16px;
  color: var(--sp-ink-soft);
  font-size: 13px;
  text-align: center;
}
.sp-column[hidden],
.sp-stack-section[hidden],
.sp-columns[hidden] {
  display: none;
}
.sp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
}
.sp-item-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--sp-ink-soft);
  display: none; /* only some styles opt in */
}
.sp-item-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-item-meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: #9ca3af;
}
.sp-item-text mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
  padding: 0;
}

/* ===========================================================================
   STYLE 1 — CLASSIC  (clean 3-column, your current look refined)
   =========================================================================== */
.sp-style--classic {
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.sp-style--classic .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sp-style--classic .sp-column-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-ink-soft);
  margin: 0 6px 8px;
}
.sp-style--classic .sp-item {
  padding: 7px 8px;
  border-radius: 6px;
}
.sp-style--classic .sp-item:hover,
.sp-style--classic .sp-item.is-active {
  background: var(--sp-hover);
}
.sp-style--classic .sp-item-text mark {
  color: var(--sp-brand);
}

/* ===========================================================================
   STYLE 2 — STACKED PILLS  (narrow single column, great for mobile / right edge)
   =========================================================================== */
.sp-style--stacked {
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  max-width: 420px;
}
.sp-style--stacked .sp-columns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-style--stacked .sp-column {
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
}
.sp-style--stacked .sp-column:first-child {
  border-top: 0;
  padding-top: 0;
}
.sp-style--stacked .sp-column-title {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin: 2px 6px 6px;
  background: var(--sp-brand-soft);
  color: var(--sp-brand);
}
.sp-style--stacked .sp-column[data-sp-section="brands"] .sp-column-title {
  background: var(--sp-amber-bg);
  color: var(--sp-amber-ink);
}
.sp-style--stacked .sp-column[data-sp-section="categories"] .sp-column-title {
  background: var(--sp-green-bg);
  color: var(--sp-green-ink);
}
.sp-style--stacked .sp-item {
  padding: 9px 10px;
  border-radius: 8px;
}
.sp-style--stacked .sp-item:hover,
.sp-style--stacked .sp-item.is-active {
  background: var(--sp-hover);
}
.sp-style--stacked .sp-item-text mark {
  background: var(--sp-mark);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}

/* ===========================================================================
   STYLE 3 — DIVIDED  (3 columns separated by rules, item icons + slide hover)
   =========================================================================== */
.sp-style--divided {
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
}
.sp-style--divided .sp-dropdown-inner {
  padding: 0;
}
.sp-style--divided .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sp-style--divided .sp-column {
  padding: 14px 14px 16px;
  border-left: 1px solid var(--sp-line);
}
.sp-style--divided .sp-column:first-child {
  border-left: 0;
}
.sp-style--divided .sp-column-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-brand);
  margin: 0 0 10px;
}
.sp-style--divided .sp-item-icon {
  display: inline-block;
}
.sp-style--divided .sp-item {
  padding: 7px 8px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background 0.12s ease, padding-left 0.12s ease,
    border-color 0.12s ease;
}
.sp-style--divided .sp-item:hover,
.sp-style--divided .sp-item.is-active {
  background: var(--sp-brand-soft);
  border-left-color: var(--sp-brand);
  padding-left: 12px;
}
.sp-style--divided .sp-item:hover .sp-item-icon,
.sp-style--divided .sp-item.is-active .sp-item-icon {
  color: var(--sp-brand);
}
.sp-style--divided .sp-item-text mark {
  color: var(--sp-brand);
}

/* ===========================================================================
   STYLE 4 — CARDS  (each section is a soft tinted card)
   =========================================================================== */
.sp-style--cards {
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  background: #f8fafc;
}
.sp-style--cards .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sp-style--cards .sp-column {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}
.sp-style--cards .sp-column-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 10px;
  margin: -10px -10px 8px;
  background: var(--sp-brand-soft);
  color: var(--sp-brand);
}
.sp-style--cards .sp-column[data-sp-section="brands"] .sp-column-title {
  background: var(--sp-amber-bg);
  color: var(--sp-amber-ink);
}
.sp-style--cards .sp-column[data-sp-section="categories"] .sp-column-title {
  background: var(--sp-green-bg);
  color: var(--sp-green-ink);
}
.sp-style--cards .sp-item {
  padding: 7px 8px;
  border-radius: 6px;
}
.sp-style--cards .sp-item:hover,
.sp-style--cards .sp-item.is-active {
  background: var(--sp-hover);
}
.sp-style--cards .sp-item-text mark {
  color: var(--sp-brand);
}

/* ===========================================================================
   STYLE 5 — MINIMAL  (borderless, underlined titles, pill hover)
   =========================================================================== */
.sp-style--minimal {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.sp-style--minimal .sp-dropdown-inner {
  padding: 16px 18px;
}
.sp-style--minimal .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.sp-style--minimal .sp-column-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-ink);
  padding-bottom: 6px;
  margin: 0 0 8px;
  border-bottom: 2px solid var(--sp-brand);
  display: inline-block;
}
.sp-style--minimal .sp-item {
  padding: 8px 12px;
  border-radius: 999px;
}
.sp-style--minimal .sp-item:hover,
.sp-style--minimal .sp-item.is-active {
  background: var(--sp-brand);
  color: #fff;
}
.sp-style--minimal .sp-item:hover .sp-item-meta,
.sp-style--minimal .sp-item.is-active .sp-item-meta {
  color: rgba(255, 255, 255, 0.8);
}
.sp-style--minimal .sp-item-text mark {
  color: var(--sp-brand);
}
.sp-style--minimal .sp-item:hover .sp-item-text mark,
.sp-style--minimal .sp-item.is-active .sp-item-text mark {
  color: #fff;
  text-decoration: underline;
}

/* ===========================================================================
   STYLE 6 — COMPACT LIST  (dense, tight rows for power users / lots of results)
   =========================================================================== */
.sp-style--compact {
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
.sp-style--compact .sp-dropdown-inner {
  padding: 6px;
}
.sp-style--compact .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sp-style--compact .sp-column-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-ink-soft);
  padding: 4px 8px;
  margin: 0;
  background: #fafafa;
  border-bottom: 1px solid var(--sp-line);
}
.sp-style--compact .sp-item {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 0;
}
.sp-style--compact .sp-item:hover,
.sp-style--compact .sp-item.is-active {
  background: var(--sp-brand-soft);
}
.sp-style--compact .sp-item-meta {
  font-size: 10px;
}
.sp-style--compact .sp-item-text mark {
  color: var(--sp-brand);
}

/* ===========================================================================
   STYLE 7 — BOXED BRAND  (full brand-colored header bar per section)
   =========================================================================== */
.sp-style--boxed {
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(10, 89, 194, 0.2);
  overflow: hidden;
}
.sp-style--boxed .sp-dropdown-inner {
  padding: 0;
}
.sp-style--boxed .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sp-style--boxed .sp-column {
  border-left: 1px solid var(--sp-line);
}
.sp-style--boxed .sp-column:first-child {
  border-left: 0;
}
.sp-style--boxed .sp-column-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sp-brand);
  padding: 10px 14px;
  margin: 0;
}
.sp-style--boxed .sp-column[data-sp-section="brands"] .sp-column-title {
  background: #b45309;
}
.sp-style--boxed .sp-column[data-sp-section="categories"] .sp-column-title {
  background: #047857;
}
.sp-style--boxed .sp-column-items {
  padding: 8px;
}
.sp-style--boxed .sp-item {
  padding: 8px 10px;
  border-radius: 6px;
}
.sp-style--boxed .sp-item:hover,
.sp-style--boxed .sp-item.is-active {
  background: var(--sp-hover);
}
.sp-style--boxed .sp-item-text mark {
  background: var(--sp-mark);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}

/* ===========================================================================
   STYLE 8 — SOFT GLASS  (frosted translucent panel, airy spacing)
   =========================================================================== */
.sp-style--glass {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
.sp-style--glass .sp-dropdown-inner {
  padding: 18px;
}
.sp-style--glass .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.sp-style--glass .sp-column-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-brand);
  margin: 0 0 10px;
}
.sp-style--glass .sp-item {
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.14s ease, transform 0.14s ease;
}
.sp-style--glass .sp-item:hover,
.sp-style--glass .sp-item.is-active {
  background: rgba(10, 89, 194, 0.1);
  transform: translateX(2px);
}
.sp-style--glass .sp-item-text mark {
  color: var(--sp-brand);
}

/* ===========================================================================
   STYLE 9 — SIDEBAR  (emphasized first column, supporting columns lighter)
   =========================================================================== */
.sp-style--sidebar {
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.sp-style--sidebar .sp-dropdown-inner {
  padding: 0;
}
.sp-style--sidebar .sp-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.sp-style--sidebar .sp-column {
  padding: 14px;
}
.sp-style--sidebar .sp-column[data-sp-section="terms"] {
  background: var(--sp-brand-soft);
  border-right: 1px solid var(--sp-line);
}
.sp-style--sidebar .sp-column[data-sp-section="categories"] {
  border-left: 1px solid var(--sp-line);
}
.sp-style--sidebar .sp-column-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-ink-soft);
  margin: 0 0 10px;
}
.sp-style--sidebar .sp-column[data-sp-section="terms"] .sp-column-title {
  color: var(--sp-brand);
}
.sp-style--sidebar .sp-item {
  padding: 7px 8px;
  border-radius: 6px;
}
.sp-style--sidebar .sp-item:hover,
.sp-style--sidebar .sp-item.is-active {
  background: rgba(255, 255, 255, 0.7);
}
.sp-style--sidebar .sp-column:not([data-sp-section="terms"]) .sp-item:hover,
.sp-style--sidebar .sp-column:not([data-sp-section="terms"]) .sp-item.is-active {
  background: var(--sp-hover);
}
.sp-style--sidebar .sp-item-text mark {
  color: var(--sp-brand);
}

/* ===========================================================================
   STYLE 10 — MAGAZINE  (large serif-like headings, accent number badges)
   =========================================================================== */
.sp-style--magazine {
  border: 1px solid var(--sp-line);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}
.sp-style--magazine .sp-dropdown-inner {
  padding: 18px 20px;
}
.sp-style--magazine .sp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.sp-style--magazine .sp-column-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sp-line);
}
.sp-style--magazine .sp-item {
  padding: 6px 0;
  border-radius: 0;
}
.sp-style--magazine .sp-item:hover .sp-item-text,
.sp-style--magazine .sp-item.is-active .sp-item-text {
  color: var(--sp-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-style--magazine .sp-item-meta {
  font-weight: 700;
  color: var(--sp-brand);
  background: var(--sp-brand-soft);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
}
.sp-style--magazine .sp-item-text mark {
  color: var(--sp-brand);
}

/* ---------- Responsive: collapse multi-column styles on small screens ---------- */
@media (max-width: 720px) {
  .sp-style--classic .sp-columns,
  .sp-style--divided .sp-columns,
  .sp-style--cards .sp-columns,
  .sp-style--minimal .sp-columns,
  .sp-style--compact .sp-columns,
  .sp-style--boxed .sp-columns,
  .sp-style--glass .sp-columns,
  .sp-style--sidebar .sp-columns,
  .sp-style--magazine .sp-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sp-style--divided .sp-column,
  .sp-style--boxed .sp-column,
  .sp-style--sidebar .sp-column {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--sp-line);
  }
  .sp-style--divided .sp-column:first-child,
  .sp-style--boxed .sp-column:first-child,
  .sp-style--sidebar .sp-column:first-child {
    border-top: 0;
  }
}