/*
 * Estilos para dos pasos del formulario de reserva de LatePoint:
 * - "Datos de los Pasajeros" (Latepoint Custom Fields By Attendees, de MikeAnor)
 * - "Información Cliente" (paso nativo de LatePoint: nombre/apellido/teléfono/email/documento)
 * Reutiliza las clases y variables que ya trae LatePoint por defecto
 * (os-form-group, os-form-control, os-col-12, --latepoint-brand-primary, etc.)
 * asi que respeta el esquema de color elegido en Settings > Booking Form Styles.
 */

/* LatePoint deja el color de foco de los inputs de texto hardcodeado en azul
   (#5779ef) en vez de usar su propia variable --latepoint-brand-primary (sí la usa
   para el campo de teléfono, pero no para el resto). Lo corregimos para todo el
   formulario de reserva, no solo para estos pasos, para que quede consistente.
   Duplicamos la clase del wrapper para igualar/superar la especificidad de esa
   regla (también usa varias clases + !important) sin depender del orden de carga. */
.latepoint-w.latepoint-w .os-form-group.os-form-textfield-group .os-form-control:focus,
.latepoint-w.latepoint-w .os-form-group.os-form-select-group .os-form-control:focus {
  border-color: var(--latepoint-brand-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--latepoint-brand-primary), transparent 85%) !important;
}

/* ============================================================
   Look unificado entre los dos pasos (igual a la maqueta): mismo
   tamaño/peso/color de label, mismo fondo y radio de los inputs.
   "Datos de los Pasajeros" hasta ahora venía con el look nativo de
   LatePoint (label 15px/400, fondo blanco, radio 8px); lo llevamos
   a los mismos valores que ya usa "Información Cliente".
   Duplicamos la clase del wrapper para superar la especificidad de
   las reglas propias de LatePoint sin depender del orden de carga. */
.step-custom-fields-for-booking-w.step-custom-fields-for-booking-w .os-form-group.os-form-group-simple.os-form-textfield-group label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  color: #6b7590 !important;
}
.step-custom-fields-for-booking-w.step-custom-fields-for-booking-w .os-form-group.os-form-group-simple.os-form-textfield-group .os-form-control {
  background-color: #fbfbfd !important;
  border-radius: 10px !important;
}
.step-custom-fields-for-booking-w.step-custom-fields-for-booking-w .os-form-group.os-form-group-simple.os-form-textfield-group .os-form-control:focus {
  background-color: #fff !important;
}

/* ============================================================
   Paso "Datos de los Pasajeros"
   ============================================================ */

.step-custom-fields-for-booking-w .os-row {
  row-gap: 14px;
}

/* Cartel de aviso arriba de las tarjetas ("revisá bien el email"). El
   row-gap de arriba ya separa este cartel de la primera tarjeta; el
   margin lateral es el mismo que usa .lp-attendee-card, para que ambos
   arranquen alineados (si no, el cartel queda pegado al borde y las
   tarjetas 7px más adentro, y se ve corrido). */
.step-custom-fields-for-booking-w .lp-form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eef4ff;
  border: 1px solid #d3e2fb;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 7px 0;
}
.step-custom-fields-for-booking-w .lp-form-notice svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: #3d6fd1;
}
.step-custom-fields-for-booking-w .lp-form-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #2f4d7a;
}
.step-custom-fields-for-booking-w .lp-form-notice strong {
  color: #1f3a63;
  font-weight: 700;
}

/* Tarjeta por pasajero */
.step-custom-fields-for-booking-w .lp-attendee-card {
  border: 1px solid #e3e7ef;
  border-radius: 12px;
  padding: 18px 18px 4px;
  margin: 0 7px 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.step-custom-fields-for-booking-w .lp-attendee-card:hover,
.step-custom-fields-for-booking-w .lp-attendee-card:focus-within {
  border-color: color-mix(in srgb, var(--latepoint-brand-primary), #fff 40%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--latepoint-brand-primary), transparent 88%);
}

.step-custom-fields-for-booking-w .lp-attendee-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.step-custom-fields-for-booking-w .lp-attendee-badge {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background-color: var(--latepoint-brand-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-custom-fields-for-booking-w .lp-attendee-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #32373c;
}

/* Los campos ya vienen con .os-form-group.os-form-textfield-group.os-form-group-simple
   (label flotante) desde LatePoint. Solo removemos el margen negativo del grid anidado
   para que no se salga del padding de la tarjeta. */
.step-custom-fields-for-booking-w .lp-attendee-card-fields.os-row {
  margin-left: 0;
  margin-right: 0;
}

/* La tarjeta ya suma su propio padding lateral, así que los campos no necesitan el
   padding extra de columna que usan en el resto del formulario. */
.step-custom-fields-for-booking-w .lp-attendee-card-fields .os-col-6,
.step-custom-fields-for-booking-w .lp-attendee-card-fields .os-col-12 {
  padding-left: 7px;
  padding-right: 7px;
}

/* ============================================================
   Íconos compartidos: "Datos de los Pasajeros" (data-lp-icon, lo
   agrega el filtro PHP) e "Información Cliente" (:has(#id), campos
   fijos de LatePoint que no necesitan PHP porque su id no cambia).

   Van como background-image DEL INPUT directamente (no un ::before
   aparte posicionado a mano con "bottom:14px" asumiendo 44px de alto):
   así el navegador centra el ícono solo con background-position:center,
   usando la caja real de CADA input en cada plataforma. La versión
   anterior se veía bien en Chrome pero un poco corrida en iOS/Safari,
   porque esa altura de 44px no es idéntica en todos lados.
   ============================================================ */

/* LatePoint trae varias reglas propias para el padding de .os-form-control, todas
   con !important: una general (4 clases) y otra más específica para el tema "simple"
   (.os-form-group-simple, 5 clases). Para "Datos de los Pasajeros" encadenamos las
   3 clases reales del elemento para tener más especificidad de forma inequívoca.
   Para "Información Cliente" el :has(#id) ya gana solo (un id le gana a cualquier
   cantidad de clases), así que no hace falta encadenar nada ahí. */
.step-custom-fields-for-booking-w .os-form-group.os-form-group-simple.os-form-textfield-group[data-lp-icon="user"] .os-form-control,
.step-custom-fields-for-booking-w .os-form-group.os-form-group-simple.os-form-textfield-group[data-lp-icon="mail"] .os-form-control,
.step-customer-w .os-form-group:has(> #customer_first_name) .os-form-control,
.step-customer-w .os-form-group:has(> #customer_last_name) .os-form-control,
.step-customer-w .os-form-group:has(> #customer_email) .os-form-control {
  padding-left: 38px !important;
  background-repeat: no-repeat !important;
  background-position: left 12px center !important;
  background-size: 16px !important;
}

.step-custom-fields-for-booking-w .os-form-group.os-form-group-simple.os-form-textfield-group[data-lp-icon="user"] .os-form-control,
.step-customer-w .os-form-group:has(> #customer_first_name) .os-form-control,
.step-customer-w .os-form-group:has(> #customer_last_name) .os-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23afb8d6' stroke-width='1.8'%3E%3Cpath d='M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z'/%3E%3Cpath d='M14 14H10C7.23858 14 5 16.2386 5 19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19C19 16.2386 16.7614 14 14 14Z' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.step-custom-fields-for-booking-w .os-form-group.os-form-group-simple.os-form-textfield-group[data-lp-icon="mail"] .os-form-control,
.step-customer-w .os-form-group:has(> #customer_email) .os-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23afb8d6' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M2 6L8.91302 9.91697C11.4616 11.361 12.5384 11.361 15.087 9.91697L22 6'/%3E%3Cpath d='M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   Paso "Información Cliente"
   ============================================================ */

/* Fondo gris suave en reposo (como en la maqueta), blanco al enfocar. */
.step-customer-w .os-form-group.os-form-textfield-group .os-form-control,
.step-customer-w .os-form-group.os-form-select-group .os-form-control {
  background-color: #fbfbfd !important;
  border-radius: 10px !important;
}
.step-customer-w .os-form-group.os-form-textfield-group .os-form-control:focus,
.step-customer-w .os-form-group.os-form-select-group .os-form-control:focus {
  background-color: #fff !important;
}

/* "Tipo de Documento" y "Nro. Documento" son custom fields (no ids fijos como
   los 4 de arriba), pero necesitan el mismo tamaño/peso/color de label para
   que los 6 campos de este paso queden parejos entre sí. */
.step-customer-w.step-customer-w .os-form-group.os-form-group-simple.os-form-textfield-group label,
.step-customer-w .os-form-group.os-form-select-group label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  color: #6b7590 !important;
}

/* LatePoint le pone una altura fija (35px) al header de "ya sos cliente"
   (Información de Contacto / ¿No eres tú? / Cerrar Sesión) y a los tabs
   (Nuevo Cliente / ¿Ya tiene una cuenta?), pensada para el texto en inglés,
   más corto. En español se rompe: el texto no entra, se corta o se pisa.
   Dejamos que la altura crezca sola y que haga wrap si hace falta, en vez
   de depender de que el texto entre justo en 35px. */
.step-customer-w.step-customer-w .step-customer-logged-in-header-w,
.step-customer-w.step-customer-w .os-step-tabs {
  height: auto !important;
  min-height: 35px;
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Flechita custom para el select ("Tipo de Documento") en vez de la del navegador. */
.step-customer-w .os-form-group.os-form-select-group select.os-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-right: 34px !important;
}

/* Con el label flotante original, el borde del teléfono (puesto en TODO el grupo,
   label incluido) no se notaba porque el label quedaba invisible adentro. Ahora
   que lo dejamos fijo arriba, ese borde le quedaba encima. Lo movemos al mismo
   lugar donde LatePoint ya lo pone para el tema "simple": el propio contenedor
   de bandera+número (.lp_iti), no el grupo completo. */
.step-customer-w .os-form-group.os-form-phonefield-group:has(#customer_phone) {
  border: none !important;
}
.step-customer-w .os-form-group.os-form-phonefield-group:has(#customer_phone) .lp_iti {
  border: 1px solid #cad2e0 !important;
  border-radius: 10px !important;
  background-color: #fbfbfd !important;
  /* Estas dos, sin !important porque no compiten con nada, son las que
     faltaban copiar del tema "simple" original de LatePoint: sin ellas,
     Chrome y Firefox calculan la altura del contenedor flex de forma
     distinta (uno de los dos termina más alto/deforme). */
  align-items: stretch;
  gap: 5px;
  /* El input de adentro trae su propio border-radius asimétrico (solo
     redondeado del lado derecho) que no coincide con este borde redondeado
     parejo, y se notaba como un corte en la esquina derecha. Recortamos el
     contenido a la forma de este contenedor para que no se note. */
  overflow: hidden;
}
.step-customer-w .os-form-group.os-form-phonefield-group:has(#customer_phone) .lp_iti .lp_iti__selected-flag {
  padding: 0 0 0 12px;
}
.step-customer-w .os-form-group.os-form-phonefield-group:has(#customer_phone) .lp_iti .lp_iti__flag-container {
  display: flex;
}
/* El input trae fondo blanco propio, distinto al gris muy suave (#fbfbfd) del
   contenedor: se notaba como una costura junto al borde. Lo hacemos
   transparente para que siempre muestre el mismo fondo que el contenedor
   (incluido el blanco al enfocar, que ya lo pone la regla de :has(...:focus)). */
.step-customer-w .os-form-group.os-form-phonefield-group:has(#customer_phone) input.os-mask-phone {
  background-color: transparent !important;
}
.step-customer-w .os-form-group.os-form-phonefield-group:has(#customer_phone) .lp_iti:has(input:focus) {
  border-color: var(--latepoint-brand-primary) !important;
  background-color: #fff !important;
}

/* Estos campos usan el tema "transparent" de LatePoint, que por defecto hace
   flotar el label adentro del input (se achica y sube al tipear). El tema
   "simple" -que ya usa "Datos de los Pasajeros"- en cambio deja el label
   siempre estático arriba; replicamos esas mismas reglas (son de LatePoint,
   tal cual las trae para os-form-group-simple) para que ambos pasos se vean
   consistentes en vez de tener dos comportamientos de label distintos. */
.step-customer-w .os-form-group.os-form-textfield-group:has(#customer_first_name) label,
.step-customer-w .os-form-group.os-form-textfield-group:has(#customer_last_name) label,
.step-customer-w .os-form-group.os-form-textfield-group:has(#customer_phone) label,
.step-customer-w .os-form-group.os-form-textfield-group:has(#customer_email) label {
  opacity: 1 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  position: relative !important;
  margin-bottom: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #6b7590 !important;
}
.step-customer-w .os-form-group.os-form-textfield-group:has(#customer_first_name) .os-form-control,
.step-customer-w .os-form-group.os-form-textfield-group:has(#customer_last_name) .os-form-control,
.step-customer-w .os-form-group.os-form-textfield-group:has(#customer_email) .os-form-control {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
/* Esta la habíamos puesto solo para el estado .has-value, pero LatePoint la
   aplica siempre (con o sin valor) en el tema "simple" -así evitamos que el
   input salte de tamaño al escribir, y cubre el mismo caso en Firefox donde
   sin este padding explícito la altura se calculaba distinto que en Chrome-.
   Usamos 12px (no los 13px que trae LatePoint en su propia regla) para que
   mida exactamente los mismos 44px de alto que el resto de los campos: con
   13px quedaba 2px más alto y se notaba la diferencia entre campos. */
.step-customer-w .os-form-group.os-form-phonefield-group:has(#customer_phone) input.os-form-control.os-mask-phone {
  padding: 12px 8px 12px 0 !important;
}