/* =============================================================
   ETBS - Buscador Simple
   Pildora con dropdown flotante de resultados (uno arriba de otro).
   Variantes: glass (efecto cristal) y blanco (limpio).
   ============================================================= */

.etbs-section,
.etbs-section *,
.etbs-section *::before,
.etbs-section *::after {
  box-sizing: border-box;
}

.etbs-section {
  --etbs-radius:      14px;
  --etbs-radius-sm:   10px;
  --etbs-line:        #e6e6ea;
  --etbs-line-soft:   #f0f0f3;
  --etbs-muted:       #6b6b72;
  --etbs-muted-2:     #AFAFAF;
  --etbs-text:        #101010;
  --etbs-active:      #132060;
  --etbs-price:       #e11d2e;
  --etbs-bg-soft:     #f8f8fb;

  position: relative;
  display: block;
  width: 100%;
  /* OJO: sin max-width fijo aqui para que herede el ancho del contenedor
     padre (util cuando se inserta dentro de un header con ancho controlado). */
  margin: 0 auto;
  padding: 0;
  color: var(--etbs-text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  z-index: 1;
}

/* Cuando hay header (titulo/subtitulo), si no, este wrapper no anade altura. */
.etbs-section .etbs-header {
  text-align: center;
  margin: 0 auto 18px;
  padding: 0 12px;
  max-width: 820px;
}

.etbs-section .etbs-header-title {
  margin: 0 0 10px !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #090909 !important;
}

.etbs-section .etbs-header-subtitle {
  margin: 0 !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--etbs-muted-2) !important;
  font-weight: 400 !important;
}

/* ---------- Wrap (relative para posicionar el dropdown) ---------- */
.etbs-section .etbs-search-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ---------- Input (pildora) ---------- */
.etbs-section .etbs-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 60px;
  padding: 0 22px 0 54px;
  border-radius: 999px;
  cursor: text;
  transition: box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
}

.etbs-section .etbs-search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--etbs-muted);
  pointer-events: none;
}

.etbs-section .etbs-search-input {
  flex: 1;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--etbs-text);
  padding: 0;
}

.etbs-section .etbs-search-input::placeholder {
  color: var(--etbs-muted);
  opacity: 1;
}

.etbs-section .etbs-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: rgba(0, 0, 0, .08);
  color: var(--etbs-text);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 160ms ease;
}

.etbs-section .etbs-search-clear:hover {
  background: rgba(0, 0, 0, .18);
}

.etbs-section .etbs-search-clear[hidden] { display: none; }

/* ---------- Variante: Glass ---------- */
.etbs-section.etbs-variante-glass .etbs-search {
  background: rgba(217, 217, 217, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .16),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

.etbs-section.etbs-variante-glass .etbs-search:focus-within {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .22),
              inset 0 1px 0 rgba(255, 255, 255, .5);
}

.etbs-section.etbs-variante-glass .etbs-search-icon  { color: #ffffff; }
.etbs-section.etbs-variante-glass .etbs-search-input { color: #ffffff; }
.etbs-section.etbs-variante-glass .etbs-search-input::placeholder { color: rgba(255,255,255,.72); }
.etbs-section.etbs-variante-glass .etbs-search-clear {
  background: rgba(255, 255, 255, .25);
  color: #ffffff;
}
.etbs-section.etbs-variante-glass .etbs-search-clear:hover {
  background: rgba(255, 255, 255, .42);
}
.etbs-section.etbs-variante-glass .etbs-header-title    { color: #ffffff !important; }
.etbs-section.etbs-variante-glass .etbs-header-subtitle { color: rgba(255,255,255,.78) !important; }

/* ---------- Variante: Blanco ---------- */
.etbs-section.etbs-variante-blanco .etbs-search {
  background: #ffffff;
  border: 1px solid var(--etbs-line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.etbs-section.etbs-variante-blanco .etbs-search:focus-within {
  border-color: var(--etbs-active);
  box-shadow: 0 8px 22px rgba(19, 32, 96, .18);
}

/* =============================================================
   Dropdown flotante: NO empuja el contenido (position: absolute).
   ============================================================= */
.etbs-section .etbs-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 360px);
  max-width: 560px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--etbs-line);
  border-radius: var(--etbs-radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
}

.etbs-section .etbs-dropdown[hidden] { display: none; }

/* Scrollbar suave dentro del dropdown */
.etbs-section .etbs-dropdown::-webkit-scrollbar {
  width: 8px;
}
.etbs-section .etbs-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.etbs-section .etbs-dropdown::-webkit-scrollbar-thumb {
  background: #d6d6dc;
  border-radius: 8px;
}

/* ---------- Status (texto "X tours encontrados") ---------- */
.etbs-section .etbs-status {
  margin: 4px 8px 8px !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--etbs-muted) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.etbs-section .etbs-status:empty { display: none; }

/* ---------- Resultados: stack vertical (uno arriba de otro) ---------- */
.etbs-section .etbs-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- Card horizontal (tipo "notificacion") ---------- */
.etbs-section .etbs-card {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--etbs-radius-sm);
  background: var(--etbs-bg-soft);
  text-decoration: none !important;
  color: inherit;
  border: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  min-width: 0;
}

.etbs-section .etbs-card[hidden] { display: none; }

.etbs-section .etbs-card:hover {
  background: #ffffff;
  border-color: var(--etbs-line);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.etbs-section .etbs-card-image-wrap {
  display: block;
  width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  flex: 0 0 110px;
}

.etbs-section .etbs-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
   Cuerpo: orden visual = titulo > meta > precio.
   `min-width: 0` es clave para que el truncate funcione cuando el titulo
   es largo (evita que la columna se estire e invada otras).
*/
.etbs-section .etbs-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.etbs-section .etbs-card-title {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--etbs-text);
  /* truncar a 2 lineas y permitir partir palabras muy largas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.etbs-section .etbs-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--etbs-muted);
  min-width: 0;
}

.etbs-section .etbs-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etbs-section .etbs-card-meta-item i {
  font-size: 11px;
  color: #888;
  flex: 0 0 auto;
}

.etbs-section .etbs-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.etbs-section .etbs-card-price-prefix {
  font-size: 12px;
  font-weight: 600;
  color: var(--etbs-muted);
}

.etbs-section .etbs-card-price-current {
  font-size: 15px;
  font-weight: 800;
  color: var(--etbs-price);
}

.etbs-section .etbs-card-price-old {
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
  text-decoration: line-through;
}

.etbs-section .etbs-card-arrow {
  font-size: 13px;
  color: var(--etbs-muted);
  flex: 0 0 auto;
  padding-right: 6px;
  transition: transform 180ms ease, color 180ms ease;
}

.etbs-section .etbs-card:hover .etbs-card-arrow {
  color: var(--etbs-active);
  transform: translateX(2px);
}

/* ---------- Empty state ---------- */
.etbs-section .etbs-empty {
  padding: 24px 12px;
  text-align: center;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--etbs-muted);
}

.etbs-section .etbs-empty strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--etbs-text);
  margin-bottom: 4px;
}

/* ---------- Responsive ---------- */
/*
   Breakpoint tablet: dropdown se ajusta al ancho del input, no expande.
   Esto evita que se "desborde" del contenedor padre (header).
*/
@media (max-width: 760px) {
  .etbs-section .etbs-dropdown {
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
  }
}

@media (max-width: 620px) {
  .etbs-section .etbs-search { height: 54px; padding-left: 48px; padding-right: 18px; }
  .etbs-section .etbs-search-icon { left: 20px; font-size: 15px; }
  .etbs-section .etbs-search-input { font-size: 15px; }

  .etbs-section .etbs-dropdown {
    max-height: 60vh;
    padding: 8px;
  }

  /* Cards: imagen un poco menor + meta debajo si no entra el titulo */
  .etbs-section .etbs-card {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px;
  }
  .etbs-section .etbs-card-image-wrap {
    width: 84px;
    flex-basis: 84px;
    border-radius: 8px;
  }
  .etbs-section .etbs-card-title { font-size: 14.5px; }
  .etbs-section .etbs-card-meta  { font-size: 12px; gap: 4px 10px; }
  .etbs-section .etbs-card-price-current { font-size: 14px; }
  .etbs-section .etbs-card-arrow { padding-right: 2px; }

  .etbs-section .etbs-header-title    { font-size: 22px !important; }
  .etbs-section .etbs-header-subtitle { font-size: 15px !important; }
}

@media (max-width: 380px) {
  /* Pantallas muy pequenas: imagen aun mas pequena para dejar espacio al texto */
  .etbs-section .etbs-card {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .etbs-section .etbs-card-image-wrap {
    width: 72px;
    flex-basis: 72px;
  }
  .etbs-section .etbs-card-title { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .etbs-section .etbs-card,
  .etbs-section .etbs-card-arrow {
    transition: none !important;
  }
}