/* =======================================================
   HN Searchbar – Paquete completo, autónomo y listo para producción
   - Sin dependencias de hn-front.css (evita colisiones)
   - Respeta controles Elementor: gap, radius, botón (bg/texto/borde)
   - Funciona en Editor y Front (usa variables sobrescribibles)
   - Accesible: focus-visible, aria, contrastes
   - Compatible con tema oscuro y reduced-motion
   ======================================================= */

/* Defaults del componente (pueden ser sobreescritos por Elementor vía {{WRAPPER}}) */
.hn-searchbar{
  /* Layout controlado por widget */
  --hn-sb-gap: 12px;
  --hn-sb-radius: 10px;

  /* Paleta local (usa kit si existe, con fallbacks) */
  --ui-text: var(--e-global-color-text, #0f172a);
  --ui-primary: var(--e-global-color-primary, #1A56DB);
  --ui-secondary: var(--e-global-color-secondary, #ffffff);
  --ui-accent: var(--e-global-color-accent, #f59e0b);
  --ui-border: color-mix(in srgb, var(--ui-text) 14%, #fff);
  --ui-surface: #fff;

  /* Botón (controlados por el widget) */
  --hn-sb-btn-bg: var(--ui-primary);
  --hn-sb-btn-color: var(--ui-secondary);
  --hn-sb-btn-border: var(--hn-sb-btn-bg);

  /* Tabs activos (opcional cambiar desde theme) */
  --hn-sb-tab-active-bg: var(--ui-primary);

  display:block; width:100%;
  padding: 18px 18px 18px;
  border-radius: 3px;
  background: var(--ui-surface);
  box-shadow: 0 8px 30px rgba(2,6,23,.08);
  border: 1px solid color-mix(in srgb, var(--ui-text) 6%, #fff);
}

/* ===================== Tabs (pestañas principales) ===================== */
.hn-searchbar .tabs-wrap{ overflow: visible; }
.hn-searchbar .tabs-head{
  position: relative;
  display:flex; justify-content:center;
  margin-top:-68px; margin-bottom:16px;
}
.hn-searchbar .tabs{
  display:flex; gap:6px; background: transparent; padding: 0;
}
.hn-searchbar .tabs-pill .tab-item{
  border: 0px solid var(--ui-border);
  background: #fff;
}
.hn-searchbar .tab-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ui-text);
  transition: all .2s ease;
  min-width: 100px;
  margin: 1px 2px 0px 1px;
  border-radius: 3px 3px 0px 0px;
}
.hn-searchbar .tab-item.is-active{
  background: var(--hn-sb-tab-active-bg);
  color: #fff;
  border-color: var(--hn-sb-tab-active-bg);
}
.hn-searchbar .tab-item:not(.is-active):hover{ filter: brightness(.97); }
.hn-searchbar .tab-item.is-muted{ opacity:.6; cursor: default; pointer-events:none; }

/* ===== Tabs móvil — scroll horizontal ===== */
.hn-searchbar .tabs-head{
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0 12px 8px;
}
.hn-searchbar .tabs-head::-webkit-scrollbar{ display:none; }
.hn-searchbar .tabs{
  flex-wrap: nowrap;
  gap: 8px;
  min-width: max-content;
  justify-content: center;
  height: 50px;
}
.hn-searchbar .tabs .tab-item{
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ===================== Grid inferior ===================== */
.hn-searchbar .sb-row{
  display:grid;
  gap: var(--hn-sb-gap);
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.hn-searchbar .cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.hn-searchbar .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.hn-searchbar .cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hn-searchbar .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.hn-searchbar .cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.hn-searchbar .cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }

@media (max-width:1024px){
  .hn-searchbar .t-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .hn-searchbar .t-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hn-searchbar .t-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hn-searchbar .t-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hn-searchbar .t-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .hn-searchbar .t-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}

@media (max-width:767px){
  .hn-searchbar .m-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .hn-searchbar .m-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hn-searchbar .m-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hn-searchbar .m-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hn-searchbar .m-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .hn-searchbar .m-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}

/* ===================== Campos ===================== */
.hn-searchbar .sb-field{ display:flex; flex-direction: column; gap:6px; }
.hn-searchbar .sb-lbl{
  font-size:13px; line-height:1.2; color: color-mix(in srgb, var(--ui-text) 65%, #fff);
}
.hn-searchbar .sb-input{
  display:block; width:100%; min-height:40px;
  padding:10px 12px; border: 1px solid var(--ui-border);
  border-radius: var(--hn-sb-radius);
  background: #fff;
  color: var(--ui-text);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.hn-searchbar .sb-input:focus{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 28%, transparent);
  border-color: var(--ui-primary);
}

/* ===================== Acciones / botón ===================== */
.hn-searchbar .sb-actions{
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.hn-searchbar .sb-btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: var(--hn-sb-radius);
  background: var(--hn-sb-btn-bg);
  color: var(--hn-sb-btn-color);
  border:1px solid var(--hn-sb-btn-border);
  cursor:pointer; width:100%;
  font-weight: 700; justify-content: center;
  transition: filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hn-searchbar .sb-btn:hover{ filter: brightness(.96); }
.hn-searchbar .sb-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hn-sb-btn-bg) 35%, transparent);
}

/* ===================== A11y + preferencias usuario ===================== */
@media (prefers-reduced-motion: reduce){
  .hn-searchbar .sb-input,
  .hn-searchbar .sb-btn,
  .hn-searchbar .tab-item{
    transition: none;
  }
}

/* ===================== Tema oscuro (opcional) ===================== */
@media (prefers-color-scheme: dark){
  .hn-searchbar{
    --ui-surface: #0b1220;
    --ui-text: #e5e7eb;
    --ui-border: color-mix(in srgb, var(--ui-text) 16%, #000);
    background: var(--ui-surface);
    border-color: var(--ui-border);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
  }
  .hn-searchbar .tabs-pill .tab-item{ background:#0f172a; }
  .hn-searchbar .tab-item{ color: var(--ui-text); }
  .hn-searchbar .sb-input{
    background:#0f172a; border-color: var(--ui-border); color: var(--ui-text);
  }
}

/* ===================== Utilidades mínimas del componente ===================== */
.hn-searchbar .screen-reader-text{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}