/* La barra son dos piezas: la rejilla de campos y el botón, al lado o debajo. */
.av-search-bar__form {
  background: rgba(240, 240, 240, 0.9);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  width: 100%;
}

.av-search-bar__campos {
  flex: 1 1 auto;

  /* Sin esto una rejilla flexible no baja de su contenido y la barra se sale */
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items: center;
}

.av-search-bar__campo {
  min-width: 0;
  padding: 5px 15px;
  display: flex;
  flex-direction: column;

  /* El bloque de edades de los niños se coloca respecto a su campo */
  position: relative;

  border-right: var(--av-sb-sep-ancho, 1px) solid var(--av-sb-sep-color, #ccc);
  border-bottom: var(--av-sb-sep-ancho, 1px) solid var(--av-sb-sep-color, #ccc);
}

/* Interruptor "Field Separators" del panel. A la variable y no a los bordes: el
   reparto de líneas lo emite el widget con el mismo peso de selector */
.av-search-bar--sin-separadores {
  --av-sb-sep-ancho: 0px;
}

.av-search-bar__campo label {
  font-size: 13px;
  font-weight: 600;
  color: #1a2b49;
  margin-bottom: 5px;
  text-transform: capitalize;
}

/* Rótulos ocultos (control "Hide Labels" del panel). */
.av-search-bar--sin-labels .av-search-bar__campo > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.av-search-bar__campo input,
.av-search-bar__campo select {
  border: none;
  background: transparent;
  font-size: 14px;
  color: #4a5568;
  padding: 0;
  outline: none;
  cursor: pointer;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/*
 * El texto de las fechas es el placeholder hasta que se elige el rango, y un
 * placeholder no hereda el `color` de arriba: trae el suyo del navegador. El
 * opacity es por Firefox, que lo apaga a 0.54.
 */
.av-search-bar__campo input::placeholder {
  color: #4a5568;
  opacity: 1;
}

.av-search-bar__enviar {
  padding-left: 15px;
  display: flex;
  align-items: center;
}

.av-search-bar {
  width: 100%;
}

/*
 * Dos clases a propósito: con más, estos valores ganarían a los controles de estilo
 * del panel, que Elementor genera como `.elementor-element-xxx .clase`.
 */
.av-search-bar__form .av-search-bar__boton {
  border: none;
  padding: 12px 25px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

/*
 * -------------------------------------------------------------------------- EDADES
 * DE LOS NIÑOS El bloque cuelga del campo de niños, no del formulario, para que
 * caiga a su altura aunque la barra cambie de ancho o de orden.
 */

.av-search-bar__edades {
  position: absolute;

  /* Debajo del campo, o encima si ahí no cabe (lo decide el JS al abrirlo) */
  top: 100%;
  margin-top: 12px;

  /* Centrado sobre el campo de niños, y corrido lo justo para no salirse de la
     pantalla cuando el campo cae en un extremo (--av-desvio lo pone el JS) */
  left: 50%;
  margin-left: var(--av-desvio, 0px);
  transform: translateX(-50%);
  width: 430px;
  max-width: calc(100vw - 20px);
  padding: 20px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* Dos niños por fila; el título y el botón ocupan la fila entera */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;

  /* El panel del calendario va con z-index 100 */
  z-index: 101;
}

.av-search-bar__edades--arriba {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 12px;
}

/* El pico que lo une con el campo de niños. Va en position:absolute, así que no
   ocupa celda de la rejilla */
.av-search-bar__edades::after {
  content: '';
  position: absolute;

  /* Deshace el corrimiento del bloque: el pico se queda sobre el campo */
  left: calc(50% - var(--av-desvio, 0px));

  bottom: 100%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom-color: #fff;
}

.av-search-bar__edades--arriba::after {
  top: 100%;
  bottom: auto;
  border-top-color: #fff;
  border-bottom-color: transparent;
}

/* El `hidden` del HTML lo pone el navegador con display:none, y eso no le gana
   por sí solo al display de las reglas de aquí */
.av-search-bar__edades[hidden],
.av-search-bar__edad[hidden] {
  display: none;
}

.av-search-bar__edades-titulo {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  color: #1a2b49;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.av-search-bar__edad {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.av-search-bar__campo .av-search-bar__edad label {
  margin-bottom: 0;
  white-space: nowrap;
}

/*
 * Los campos de la barra van sin marco y sin flecha; aquí sí llevan los dos, que
 * sobre el fondo blanco del bloque nada indicaría que se pueden desplegar.
 */
.av-search-bar__campo .av-search-bar__edad select {
  width: 100%;
  padding: 9px 32px 9px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a5568' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

/* La barra apaga el `outline` de sus campos; dentro del bloque hay cuatro o seis
   desplegables seguidos y hace falta ver en cuál se está */
.av-search-bar__campo .av-search-bar__edad select:focus {
  border-color: #1a2b49;
  box-shadow: 0 0 0 2px rgba(26, 43, 73, 0.15);
}

/*
 * Dos clases, como el botón de buscar: lo justo para ganarle al botón del tema sin
 * ganarle a los controles de estilo del panel.
 */
.av-search-bar__form .av-search-bar__edades-ok {
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* En una pantalla estrecha no caben dos desplegables por fila */
@media (max-width: 480px) {
  .av-search-bar__edades {
    grid-template-columns: 1fr;
  }
}

/*
 * --------------------------------------------------------------------------
 * CALENDARIO (Litepicker) Litepicker cuelga su panel de <body>, fuera del widget:
 * por eso estos selectores no van bajo {{WRAPPER}} y por eso le entran los estilos
 * globales del tema.
 */

.litepicker {
  /*
   * El color de marca del cliente: el color global "Primary" del kit (Ajustes del
   * sitio -> Colores globales). El kit declara sus variables en el <body>, y el
   * panel de Litepicker cuelga también del <body>, así que le llegan por herencia
   * aunque quede fuera del widget. El azul de antes se queda de respaldo para un
   * sitio sin kit de Elementor.
   */
  --av-cal-primario: var(--e-global-color-primary, #1a2b49);

  /* Viene con el azul de Material (#2196f3) y el rojo del día de hoy */
  --litepicker-day-color: #4a5568;
  --litepicker-day-color-hover: var(--av-cal-primario);
  --litepicker-month-header-color: var(--av-cal-primario);
  --litepicker-month-weekday-color: #8895a7;
  --litepicker-is-start-color-bg: var(--av-cal-primario);
  --litepicker-is-end-color-bg: var(--av-cal-primario);
  --litepicker-is-today-color: var(--av-cal-primario);
  --litepicker-button-prev-month-color-hover: var(--av-cal-primario);
  --litepicker-button-next-month-color-hover: var(--av-cal-primario);

  /* El intervalo entre entrada y salida: el mismo primario, muy aclarado. Se
     aclara abajo, en un @supports; aquí queda el gris de siempre por si acaso */
  --litepicker-is-in-range-color: #e8ebf0;

  font-family: inherit;
  font-size: 14px;

  /* El panel va en position:absolute y el bundle no le pone z-index */
  z-index: 100;
}

/*
 * Aclarar un color que llega dentro de una variable solo se puede con color-mix.
 * Va aparte porque una custom property con un valor que el navegador no entiende
 * no cae al valor anterior: se queda sin valor y el intervalo se quedaría sin
 * fondo. Con el @supports, quien no lo soporte conserva el gris de arriba.
 */
@supports (color: color-mix(in srgb, red 50%, white)) {
  .litepicker {
    --litepicker-is-in-range-color: color-mix(in srgb, var(--av-cal-primario) 15%, #fff);
  }
}

/* toLocaleString devuelve el mes en minúscula en francés, español, italiano,
   ruso... (es lo correcto en esos idiomas, pero en un calendario se prefiere
   con mayúscula inicial) */
.litepicker .month-item-name {
  text-transform: capitalize;
}

/* Los meses anterior/siguiente son <button>: sin esto se llevan el fondo, el
   relleno y el color de marca de los botones del tema */
.litepicker .month-item-header button {
  background: none;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 2px 6px;
  font-size: inherit;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

.litepicker .month-item-header button:hover,
.litepicker .month-item-header button:focus {
  background: none;
  box-shadow: none;
}

/* Litepicker pone cursor:default en los días y en las flechas de mes. Su CSS va
   dentro del JS y se inyecta después de esta hoja, así que hay que superar su
   especificidad, no igualarla: de ahí el :not() y el button delante de la clase.
   Los días bloqueados se quedan en default, que no se pueden pinchar. */
.litepicker .container__days .day-item:not(.is-locked) {
  cursor: pointer;
}

.litepicker .container__months .month-item-header button.button-previous-month,
.litepicker .container__months .month-item-header button.button-next-month {
  cursor: pointer;
}

/*
 * Respaldo para el reparto automático de campos: si caben en una fila, el botón va
 * a su lado, y si no, no cabe y se baja.
 */
@media (max-width: 767px) {
  .av-search-bar__campo {
    padding: 10px 5px;
  }

  .av-search-bar__enviar {
    flex: 0 0 100%;
    padding-left: 0;
    padding-top: 15px;
  }

  .av-search-bar__boton {
    width: 100%;
  }
}