/* ================================================================
   RESERVA-LIGHT.CSS — Entrada liviana del home (la tarjeta del cotizador)
   -----------------------------------------------------------------
   REGLA: el estilo de la sección de index.html MANDA.
   · El esqueleto y las recetas son las del sitio: .reserva-form,
     .form-row, .form-group, .form-note, .btn — todas de estilos.css.
   · Acá va SÓLO lo que el motor aporta y index no tiene: el combo de
     lugares, el equipaje, el stepper y la escalada.
   · Es autosuficiente a propósito: el home y su copia de trabajo (index-2)
     NO cargan la hoja del armador (css/reservar.css), porque esa hoja
     pinta .sec-reservas con el degradado oscuro del cotizador y cambiaría la
     sección entera.
   ================================================================ */

/* El motor no trae color-scheme acá, pero se fija por las dudas: los
   input date/time nativos tienen que pintarse claros. */
#gtBooking { color-scheme: light; }

/* El atributo [hidden] del desplegable tiene que poder ganarle a cualquier
   display que pongamos. */
#gtBooking [hidden] { display: none !important; }

/* ---------- 1 · Rótulo del campo ---------- */
#gtBooking .gt-light__labelrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 18px;
}
#gtBooking .gt-light__labelrow label { margin: 0; }
/* OJO: acá NO va precio ni "ida y vuelta". El home captura; el cotizador
   (reservar.html) cotiza y expone el estimado y la vuelta. */

/* ---------- 2 · Extremos del tramo (uno abajo del otro) ---------- */
/* Cada extremo ocupa la fila completa, así el rótulo tiene lugar para el
   interruptor y el precio sin apretar el campo. */
#gtBooking .gt-light__end { grid-column: 1 / -1; }
/* Una sola caja por campo: adentro va el buscador (o el valor resuelto),
   el inversor y la ×. El borde vive acá, no en el input. */
#gtBooking .gt-light__field {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 43px;
  padding: 0 8px 0 14px;
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  background: var(--bg);
  transition: border-color var(--t);
}
#gtBooking .gt-light__field:focus-within { border-color: var(--vm); }
#gtBooking .gt-light__field .gt-loc { flex: 1 1 auto; min-width: 0; }
#gtBooking .gt-light__field .gt-loc__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}
#gtBooking .gt-light__field .gt-loc__input:focus { border: none; }
#gtBooking .gt-light__valtxt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gtBooking .gt-light__inv {
  appearance: none;
  cursor: pointer;
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--vm);
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
}
#gtBooking .gt-light__inv:hover { background: var(--vc); color: var(--vp); }
#gtBooking .gt-light__ic {
  appearance: none;
  cursor: pointer;
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tx2);
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
}
#gtBooking .gt-light__ic:hover { color: var(--vp); background: rgba(8, 80, 65, 0.07); }
#gtBooking .gt-light__ic--del:hover { color: #b3261e; background: rgba(179, 38, 30, 0.07); }

/* ---------- 3 · Combo de lugares (base + piel del sitio) ---------- */
#gtBooking .gt-loc { position: relative; min-width: 0; }
#gtBooking .gt-loc__input,
#gtBooking .gt-loc__value {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  font-family: 'DM Sans', sans-serif;
  /* 16px evita el zoom automático de iOS al enfocar; a 0.92rem (la receta
     literal de index) el campo se ve igual pero el móvil hace zoom. */
  font-size: 16px;
  color: var(--tx);
  background: var(--bg);
  transition: border-color var(--t);
}
#gtBooking .gt-loc__input { cursor: text; }
#gtBooking .gt-loc__input:focus {
  outline: none;
  border-color: var(--vm);
}
#gtBooking .gt-loc__input::placeholder { color: var(--tx2); opacity: 0.75; }
#gtBooking .gt-loc__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gtBooking .gt-loc__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: none;
}
#gtBooking .gt-loc__ic {
  appearance: none;
  cursor: pointer;
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tx2);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#gtBooking .gt-loc__ic:hover { color: var(--vp); background: rgba(8, 80, 65, 0.07); }
#gtBooking .gt-loc__ic--del:hover { color: #b3261e; }

/* Desplegable de sugerencias */
#gtBooking .gt-loc__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 90;
  background: #fff;
  border: 1px solid var(--bo);
  border-radius: var(--rs);
  box-shadow: var(--shh);
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}
#gtBooking .gt-loc__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--tx);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
#gtBooking .gt-loc__item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gtBooking .gt-loc__item:hover,
#gtBooking .gt-loc__item--active { background: var(--vc); border-color: rgba(29, 158, 117, 0.25); }
#gtBooking .gt-loc__item-type { flex: none; color: var(--tx2); font-size: 0.75rem; }
#gtBooking .gt-loc__empty { padding: 10px; color: var(--tx2); font-size: 0.85rem; }
/* Texto libre: lo cotiza el equipo, no el catálogo */
#gtBooking .gt-loc__item--free {
  margin-top: 6px;
  border-color: rgba(200, 164, 90, 0.55);
  background: rgba(200, 164, 90, 0.08);
}
#gtBooking .gt-loc__item--free .gt-loc__item-type { color: #8a6d2f; }

/* ---------- 4 · Pasajeros: el stepper vestido de campo ---------- */
#gtBooking .gt-light__qty {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  background: var(--bg);
  overflow: hidden;
}
#gtBooking .gt-light__qty .gt-qty__btn {
  flex: none;
  width: 40px;
  height: 42px;
  border: none;
  background: transparent;
  color: var(--vp);
  font-family: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t);
}
#gtBooking .gt-light__qty .gt-qty__btn:hover { background: var(--vc); }
#gtBooking .gt-light__qty .gt-qty__val {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tx);
}

/* ---------- 5 · Equipaje (condicional) ---------- */
#gtBooking .gt-meta__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
#gtBooking .gt-meta__label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#gtBooking .gt-equip { position: relative; }
#gtBooking .gt-equip__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  color: var(--tx);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: border-color var(--t);
}
#gtBooking .gt-equip__btn:hover { border-color: var(--vm); }
#gtBooking .gt-equip__sum {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gtBooking .gt-equip__btn .fa-chevron-down { flex: none; color: var(--tx2); font-size: 0.75rem; }
#gtBooking .gt-equip__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 95;
  display: none;
  min-width: 240px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--bo);
  border-radius: var(--rs);
  box-shadow: var(--shh);
}
#gtBooking .gt-equip__panel.is-open { display: grid; gap: 10px; }
#gtBooking .gt-equip__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#gtBooking .gt-equip__name { font-size: 0.9rem; color: var(--tx); white-space: nowrap; }
#gtBooking .gt-equip__panel .gt-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  background: var(--bg);
  overflow: hidden;
}
#gtBooking .gt-equip__panel .gt-qty__btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--vp);
  font-family: inherit;
  cursor: pointer;
}
#gtBooking .gt-equip__panel .gt-qty__btn:hover { background: var(--vc); }
#gtBooking .gt-equip__panel .gt-qty__val {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tx);
}

/* ---------- 6 · Escalada ---------- */
/* "Opcionales" va como texto plano A PROPÓSITO: sin subrayado ni cursor de
   ayuda. Prometían una interacción que en táctil no existe (no hay hover) y
   además competían con los dos enlaces de abajo, que sí son acciones. El
   detalle de qué opcionales hay sigue en el title (info de escritorio). */
#gtBooking .gt-light__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#gtBooking .gt-light__more button {
  appearance: none;
  background: none;
  border: none;
  padding: 4px 2px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vm);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: color var(--t);
}
#gtBooking .gt-light__more button:hover { color: var(--vp); }

/* Los dos enlaces de escalada son el portón al armador, donde está el precio.
   Sólo existen en las páginas beta (data-gt-escalate): el home en vivo no los
   tiene, por eso este arreglo de contraste puede ser de beta. En --vm quedaban
   en 3,39:1; con el verde oscuro del sitio pasan a 9,4:1. */
#gtBooking[data-gt-escalate] .gt-light__more button { color: var(--vp); }
#gtBooking[data-gt-escalate] .gt-light__more button:hover { color: var(--tx); }

/* ---------- Aviso del motor, en colores del sitio ---------- */
.gt-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  max-width: min(90vw, 460px);
  padding: 12px 18px;
  background: var(--vp);
  color: #fff;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.gt-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Campo marcado con error por el motor ---------- */
/* Por ejemplo una hora anterior a la del tramo previo: el motor le pone
   .gt-err y hay que sacudirlo con colores del sitio. */
@keyframes gtShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
#gtBooking .gt-err {
  animation: gtShake 0.4s ease;
  border-color: #b3261e !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.22) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  #gtBooking .gt-equip__panel { left: auto; right: 0; max-width: min(80vw, 300px); }
}

/* En el teléfono, fecha y hora comparten fila: son datos cortos y el
   formulario gana una fila entera. Pasajeros queda abajo, a lo ancho. */
@media (max-width: 480px) {
  #gtBooking .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gtBooking .form-row > .form-group:last-child { grid-column: 1 / -1; }
}