/* Zazai Living · Reservas y filtros
   Solo comportamiento y estados. Los colores y las tipografías son los
   que ya usa el sitio: #FAF7F2 #E7E0D6 #5B5E4A #A6866A #222221. */

/* --- Campos reales del buscador de disponibilidad ----------------- */
.zz-campo {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  padding: 0;
  margin: 0;
  min-height: 28px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* El tema pinta borde y relleno en todos los input/select: aqui se
   anulan para que el campo quede alineado bajo su etiqueta, igual que
   estaba el titulo que sustituye. */
input.zz-campo,
select.zz-campo,
.elementor-widget-heading input.zz-campo,
.elementor-widget-heading select.zz-campo {
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
}

.zz-campo:focus-visible {
  outline: 2px solid #A6866A;
  outline-offset: 4px;
}

/* El icono del datepicker en Chrome es oscuro por defecto: sobre el
   fondo oscuro de la barra no se veía. */
.zz-campo-fecha::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}

.zz-campo-fecha::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.zz-campo-fecha:invalid,
.zz-campo-fecha:not(:valid) {
  color: inherit;
}

.zz-campo-select {
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A6866A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 11px 7px;
}

.zz-campo-select option {
  color: #222221;
  background: #FAF7F2;
}

/* --- Filtros ------------------------------------------------------ */
.zz-oculto {
  display: none !important;
}

/* Los cuatro filtros parten del mismo estilo de contorno y el activo se
   rellena. Antes «Todas» venía relleno de forma fija desde Elementor y
   seguía pareciendo el seleccionado aunque hubiera otro activo.
   Se usan solo colores que ya tiene el sitio. */
.zz-filtro .elementor-button {
  background-color: transparent !important;
  color: #5B5E4A !important;
  border: 1px solid rgba(91, 94, 74, 0.32) !important;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.zz-filtro .elementor-button:hover {
  border-color: rgba(91, 94, 74, 0.65) !important;
}

.zz-filtro.zz-filtro-activo .elementor-button {
  background-color: #5B5E4A !important;
  color: #FAF7F2 !important;
  border-color: #5B5E4A !important;
}

.elementor-widget-button .elementor-button {
  transition: opacity 0.2s ease;
}

/* --- Aviso de datos traspasados al formulario --------------------- */
.zz-aviso-prefill {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 2px solid #5B5E4A;
  background: rgba(91, 94, 74, 0.07);
  color: #5B5E4A;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* --- Desplazamiento suave al anclar una habitación ---------------- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Barra de filtros: evitar solapes ------------------------------
   En la galería, «Habitaciones» y «Espacios» se montaban uno encima del
   otro porque las columnas de Elementor no reservan hueco entre sí. */
.zz-filtro {
  margin-right: 8px;
}

.zz-filtro .elementor-button {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .zz-filtro {
    margin-right: 6px;
    margin-bottom: 8px;
  }
}