/* ============================================================================
   Predictive Search Dropdown — 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--glass   | sp-style--sidebar | sp-style--magazine

   Tenant-facing color knobs (set as inline custom properties on the root
   element, falling back to the defaults below): --sp-bg, --sp-text, --sp-accent.
   Everything else is DERIVED from those three via color-mix() so a tenant
   picking odd colors can't break contrast/consistency across styles.
   ============================================================================ */

:root {
  /* Kept only as a safety net for any usage outside .sp-dropdown; the real
     tenant-facing values + derived tones now live on .sp-dropdown itself,
     see below — that's the only place the inline tenant override lands. */
  --sp-bg: #ffffff;
  --sp-text: #1f2937;
  --sp-accent: #0a59c2;
}

/* =============================================================================
   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;

  padding: 5px 15px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16);
  border-radius: 4px;
}

/* 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. */
.sp-searchform[data-sp-expand] ~ #sp-dropdown {
  margin-top: 8px;
}

/* Dimming overlay shown behind the expanded search (below header z-index). */
.sp-search-overlay {
  visibility: hidden;
  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.58s ease;
}
.sp-search-overlay.sp-search-overlay--visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* 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 {
  /* Base tenant-facing vars (fallback defaults — overridden per-tenant via
     inline style="--sp-bg:...; --sp-text:...; --sp-accent:...;" on this
     same element from _Partial.Navigation.SearchResults.cshtml). */
  --sp-bg: #ffffff;
  --sp-text: #1f2937;
  --sp-accent: #0a59c2;

  /* ---- derived, NOT tenant-facing ----
     IMPORTANT: these must be declared HERE (on .sp-dropdown), not on :root.
     A custom property's color-mix() formula is resolved using the value of
     its dependencies AT THE ELEMENT WHERE IT'S DECLARED, then the *result*
     is what descendants inherit — it does not re-evaluate per descendant.
     Since the tenant override also lands on this element (inline style),
     declaring the formulas here guarantees they pick up the override. */
  --sp-text-soft: color-mix(in srgb, var(--sp-text) 60%, transparent);
  --sp-line: color-mix(in srgb, var(--sp-text) 12%, var(--sp-bg));
  --sp-hover: color-mix(in srgb, var(--sp-accent) 8%, var(--sp-bg));
  --sp-accent-soft: color-mix(in srgb, var(--sp-accent) 14%, var(--sp-bg));
  --sp-mark-bg: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-bg));
  --sp-accent-tint-1: color-mix(in srgb, var(--sp-accent) 14%, var(--sp-bg));
  --sp-accent-tint-2: color-mix(in srgb, var(--sp-accent) 24%, var(--sp-bg));
  --sp-accent-tint-3: color-mix(in srgb, var(--sp-accent) 34%, var(--sp-bg));

  position: absolute;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sp-bg);
  color: var(--sp-text);
  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 and cap the
   height so the panel never reaches the bottom of the viewport — otherwise
   the tap-outside-to-close overlay becomes unreachable on small screens. */
@media (max-width: 720px) {
  .sp-dropdown {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-width: none;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
.sp-dropdown[hidden] {
  display: none;
}
.sp-dropdown-inner {
  padding: 12px;
}
.sp-loading,
.sp-empty {
  padding: 16px;
  color: var(--sp-text-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-text-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: var(--sp-text-soft);
}
.sp-item-text mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
  padding: 0;
}

/* Fallback message shown in place of Marcas/Categorías when a typed query
   has zero direct matches (see the isFallback branch in searchSuggestions.js).
   Spans the 2 tracks that would normally hold those columns, and centers
   both horizontally and vertically within that combined area.
   grid-column has no effect on the flex-based .sp-style--stacked layout
   (see the dedicated override further below), so this single rule is safe
   to share across all grid-based styles. */
.sp-column--message {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--sp-text-soft);
  font-size: 13px;
  padding: 1rem;
}

/* ===========================================================================
   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-text-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);
  color: var(--sp-text);
}
.sp-style--classic .sp-item-text mark {
  color: var(--sp-accent);
}

/* ===========================================================================
   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 var(--sp-line);
  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-accent-tint-1);
  color: var(--sp-accent);
}
.sp-style--stacked .sp-column[data-sp-section="brands"] .sp-column-title {
  background: var(--sp-accent-tint-2);
  color: var(--sp-accent);
}
.sp-style--stacked .sp-column[data-sp-section="categories"] .sp-column-title {
  background: var(--sp-accent-tint-3);
  color: var(--sp-accent);
}
.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);
  color: var(--sp-text);
}
.sp-style--stacked .sp-item-text mark {
  background: var(--sp-mark-bg);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 600;
}

/* Stacked is a single vertical flex column (no side-by-side tracks) —
   "spanning 2 columns" doesn't apply here, so just render the message
   as another full-width stacked block, consistent with the other sections. */
.sp-style--stacked .sp-column--message {
  grid-column: auto;
  border-top: 1px solid var(--sp-line);
  padding-top: 10px;
  justify-content: flex-start;
  text-align: left;
}

/* ===========================================================================
   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-accent);
  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-accent-soft);
  border-left-color: var(--sp-accent);
  padding-left: 12px;
  color: var(--sp-text);
}
.sp-style--divided .sp-item:hover .sp-item-icon,
.sp-style--divided .sp-item.is-active .sp-item-icon {
  color: var(--sp-accent);
}
.sp-style--divided .sp-item-text mark {
  color: var(--sp-accent);
}

/* ===========================================================================
   STYLE 4 — SOFT GLASS  (frosted translucent panel, airy spacing)
   =========================================================================== */
.sp-style--glass {
  /*border: 1px solid rgba(255, 255, 255, 0.6);*/
  border-radius: 16px;
  background: color-mix(in srgb, var(--sp-bg) 78%, transparent);
  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-accent);
  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: var(--sp-accent-soft);
  transform: translateX(2px);
  color: var(--sp-text);
}
.sp-style--glass .sp-item-text mark {
  color: var(--sp-accent);
}

/* ===========================================================================
   STYLE 5 — 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-accent-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-text-soft);
  margin: 0 0 10px;
}
.sp-style--sidebar .sp-column[data-sp-section="terms"] .sp-column-title {
  color: var(--sp-accent);
}
.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: color-mix(in srgb, var(--sp-bg) 70%, transparent);
  color: var(--sp-text);
}
.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);
  color: var(--sp-text);
}
.sp-style--sidebar .sp-item-text mark {
  color: var(--sp-accent);
}

/* The categories column normally has a left divider; since the fallback
   message spans into that same track, keep the divider so the panel
   doesn't look like it lost a seam. */
.sp-style--sidebar .sp-column--message {
  border-left: 1px solid var(--sp-line);
}

/* ===========================================================================
   STYLE 5b — SIDEBAR BOLD  (same layout as sidebar, solid accent first column)
   =========================================================================== */
.sp-style--sidebar-bold {
  /*border: 1px solid var(--sp-line);*/
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.15);
  overflow: hidden;

  /* Contrasting text for the solid-accent column: falls back to near-black
     or near-white depending on the accent's own lightness, so any tenant
     accent stays readable without a dedicated tenant color input. */
  --sp-accent-contrast: white;
}
.sp-style--sidebar-bold .sp-dropdown-inner {
  padding: 0;
}
.sp-style--sidebar-bold .sp-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.sp-style--sidebar-bold .sp-column {
  padding: 14px;
}
.sp-style--sidebar-bold .sp-column[data-sp-section="terms"] {
  background: var(--sp-accent);
  color: var(--sp-accent-contrast);
}
.sp-style--sidebar-bold .sp-column[data-sp-section="categories"] {
  border-left: 1px solid var(--sp-line);
}
.sp-style--sidebar-bold .sp-column-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-text-soft);
  margin: 0 0 10px;
}
.sp-style--sidebar-bold .sp-column[data-sp-section="terms"] .sp-column-title {
  color: var(--sp-accent-contrast);
  opacity: 0.85;
}
.sp-style--sidebar-bold .sp-item {
  padding: 7px 8px;
  border-radius: 6px;
}
.sp-style--sidebar-bold .sp-column[data-sp-section="terms"] .sp-item {
  color: var(--sp-accent-contrast);
}
.sp-style--sidebar-bold .sp-column[data-sp-section="terms"] .sp-item:hover,
.sp-style--sidebar-bold .sp-column[data-sp-section="terms"] .sp-item.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--sp-accent-contrast);
}
.sp-style--sidebar-bold .sp-column:not([data-sp-section="terms"]) .sp-item:hover,
.sp-style--sidebar-bold .sp-column:not([data-sp-section="terms"]) .sp-item.is-active {
  background: var(--sp-hover);
  color: var(--sp-text);
}
.sp-style--sidebar-bold .sp-column[data-sp-section="terms"] .sp-item-text mark {
  color: var(--sp-accent-contrast);
  text-decoration: underline;
}
.sp-style--sidebar-bold .sp-item-text mark {
  color: var(--sp-accent);
}
.sp-style--sidebar-bold .sp-column--message {
  border-left: 1px solid var(--sp-line);
}

/* ===========================================================================
   STYLE 6 — MAGAZINE  (large headings, accent-tinted meta 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-text);
  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-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-style--magazine .sp-item-meta {
  font-weight: 700;
  color: var(--sp-accent);
  background: var(--sp-accent-soft);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
}
.sp-style--magazine .sp-item-text mark {
  color: var(--sp-accent);
}

/* ---------- Responsive: collapse multi-column styles on small screens ---------- */
@media (max-width: 720px) {
  .sp-style--classic .sp-columns,
  .sp-style--divided .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--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--sidebar .sp-column:first-child {
    border-top: 0;
  }
  .sp-column--message {
    grid-column: auto;
  }
}