/* ============================================================
   ut2sb-  ·  Puerto 1:1 de .ut3-searcher-wrap (la base real que
   compartiste en html.htm / su CSS) al widget real #tabsBusqueda.
   Mismos valores exactos, clases nuevas, IDs intactos.
   ============================================================ */

:root{
  --ut2sb-amarillo:   #EDD149;
  --ut2sb-amarillo-d: #D4B828;
  --ut2sb-navy:       #1A3869;
  --ut2sb-navy-dark:  #0F2347;
  --ut2sb-coral:      #C4441A;
  --ut2sb-tinta:      #111827;
  --ut2sb-tinta-f:    #9CA3AF;
}

#tabsBusqueda,
#tabsBusqueda *{
  box-sizing: border-box !important;
}

/* ---------- Contenedor: igual a .ut3-searcher-wrap ---------- */
#tabsBusqueda{
  background: var(--ut2sb-amarillo) !important;
  box-shadow: 0 8px 40px -8px rgba(237,209,73,0.5), 0 -2px 0 rgba(212,184,40,0.4) inset !important;
  font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif !important;
  padding: 0 32px !important;
}
@media only screen and (max-width: 767px){
  #tabsBusqueda{
    padding: 0 16px !important;
  }
}

/* ================= TABS: igual a .ut3-s-tabs ================= */
#tabsBusqueda .ut2sb-tabs{
  display: flex !important;
  gap: 0 !important;
  border-bottom: 2px solid rgba(26,56,105,0.12) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: visible !important;
}
@media only screen and (max-width: 767px){
  #tabsBusqueda .ut2sb-tabs{
    overflow-x: auto !important;
  }
}

#tabsBusqueda .ut2sb-tab{
  float: none !important;
  flex-shrink: 0 !important;
}

#tabsBusqueda .ut2sb-tab__link{
  background: transparent !important;
  border: none !important;
  padding: 16px 22px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: rgba(26,56,105,0.5) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
@media only screen and (max-width: 767px){
  #tabsBusqueda .ut2sb-tab__link{
    padding: 14px 16px 12px !important;
  }
}
#tabsBusqueda .ut2sb-tab__link::after{
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: transparent !important;
  transition: background 0.2s !important;
}
#tabsBusqueda .ut2sb-tab__link:hover{
  color: var(--ut2sb-navy) !important;
  text-decoration: none !important;
}
#tabsBusqueda .ut2sb-tab.active .ut2sb-tab__link{
  color: var(--ut2sb-navy-dark) !important;
}
#tabsBusqueda .ut2sb-tab.active .ut2sb-tab__link::after{
  background: var(--ut2sb-navy-dark) !important;
}

#tabsBusqueda .ut2sb-tab__icon{
  width: 15px !important;
  height: 15px !important;
  display: inline-flex !important;
  opacity: 0.55 !important;
}
#tabsBusqueda .ut2sb-tab.active .ut2sb-tab__icon{
  opacity: 1 !important;
}
#tabsBusqueda .ut2sb-tab__icon img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
#tabsBusqueda .ut2sb-tab__label{
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  color: inherit !important;
}

/* ================= BODY: igual a .ut3-s-body / .ut3-s-panel ================= */
#tabsBusqueda .ut2sb-panels{
  padding: 20px 0 22px !important;
}
#tabsBusqueda .ut2sb-panel{
  display: none !important;
}
#tabsBusqueda .ut2sb-panel.active{
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
}
@media only screen and (max-width: 767px){
  #tabsBusqueda .ut2sb-panel.active{
    flex-wrap: wrap !important;
  }
}

/* fila principal del formulario de vuelos */
.ut2sb-panel-row{
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}
.ut2sb-contents,
.ut2sb-contents > div,
.ut2sb-contents .clearfix,
.ut2sb-trip{
  display: contents !important;
}
.ut2sb-trip--extra{
  display: flex !important;
  flex-basis: 100% !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px dashed rgba(26,56,105,0.2) !important;
}

/* ================= TRIPROW: igual a .ut3-s-triprow (Solo ida / Equipaje / Vuelos directos) ================= */
.ut2sb-triprow{
  width: 100% !important;
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
.ut2sb-triprow > div{
  position: relative !important;
}
.ut2sb-triprow > div input{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
}
.ut2sb-triprow > div label{
  background: transparent !important;
  border: 1.5px solid rgba(26,56,105,0.25) !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(26,56,105,0.55) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.ut2sb-triprow > div input:checked + label{
  background: var(--ut2sb-navy-dark) !important;
  border-color: var(--ut2sb-navy-dark) !important;
  color: #fff !important;
}

/* ================= CAMPOS: igual a .ut3-sf ================= */
.ut2sb-sf,
.ut2sb-trip__row .ut2sb-sf{
  flex: 1 !important;
  min-width: 140px !important;
  background: rgba(255,255,255,0.75) !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  padding: 13px 16px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
  position: relative !important;
}
.ut2sb-sf:hover{
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(26,56,105,0.2) !important;
}
.ut2sb-sf:focus-within{
  background: #fff !important;
  border-color: var(--ut2sb-navy) !important;
  box-shadow: 0 0 0 4px rgba(26,56,105,0.12) !important;
}
.ut2sb-sf--narrow{
  flex: 0.7 !important;
  min-width: 110px !important;
}
.ut2sb-sf--pax{
  flex: 0.65 !important;
  min-width: 120px !important;
}
.ut2sb-sf label{
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ut2sb-navy) !important;
  margin-bottom: 5px !important;
  opacity: 0.7 !important;
}
.ut2sb-sf input,
.ut2sb-sf select{
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ut2sb-tinta) !important;
  padding: 0 !important;
  outline: none !important;
  font-family: inherit !important;
}
.ut2sb-sf input::placeholder{
  color: var(--ut2sb-tinta-f) !important;
  font-weight: 400 !important;
}
.ut2sb-sf select option{
  background: #fff !important;
  color: var(--ut2sb-tinta) !important;
}
.ut2sb-sf__pin{
  display: none !important;
}
.ut2sb-trip__title{
  display: none !important;
}
.ut2sb-trip--extra .ut2sb-trip__title{
  display: block !important;
  flex-basis: 100% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ut2sb-navy-dark) !important;
}

@media only screen and (max-width: 767px){
  .ut2sb-sf,
  .ut2sb-sf--narrow,
  .ut2sb-sf--pax{
    flex-basis: calc(50% - 5px) !important;
  }
}

/* ================= BOTON BUSCAR: igual a .ut3-btn-search-main ================= */
.ut2sb-btn-search{
  flex-shrink: 0 !important;
  min-width: 160px !important;
  background: var(--ut2sb-navy-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.25s !important;
  box-shadow: 0 8px 24px -6px rgba(15,35,71,0.5) !important;
}
.ut2sb-btn-search:hover{
  background: var(--ut2sb-coral) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -6px rgba(196,68,26,0.55) !important;
}
@media only screen and (max-width: 767px){
  .ut2sb-btn-search{
    min-width: 100% !important;
    padding: 16px !important;
  }
}

/* ================= ACCIONES: agregar/eliminar tramo + otras opciones ================= */
#pasajeros.ut2sb-actions{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 10px 0 0 !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.ut2sb-actions__group{
  display: flex !important;
  gap: 16px !important;
}
#pasajeros a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--ut2sb-navy-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
#pasajeros a:hover{
  color: var(--ut2sb-coral) !important;
  text-decoration: none !important;
}

/* ================= OTRAS OPCIONES (collapse) ================= */
.ut2sb-advanced{
  overflow: hidden !important;
  margin: 0 !important;
  height: auto !important;
}
.ut2sb-advanced.in,
.ut2sb-advanced.collapsing{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(26,56,105,0.12) !important;
}
.ut2sb-advanced .ut2sb-sf{
  flex: 1 !important;
  min-width: 160px !important;
  background: rgba(255,255,255,0.6) !important;
}

#tabsBusqueda label{
  cursor: pointer !important;
}