.elementor .e-323a927{width:100%;min-height:40rem;padding:0em;margin:0px;background-image:url("https://casatlaquepaque.com.mx/wp-content/uploads/2025/08/Habitacion-Helio-1-1024x683.jpg"),linear-gradient(#00000040, #00000040);background-repeat:no-repeat,repeat;background-attachment:fixed,scroll;background-size:cover,auto auto;background-position:0% 0%;background-color:#030000;display:flex;flex-direction:column;gap:0px;justify-content:center;align-items:center;}.elementor .e-ddec560{width:50%;flex-direction:column;}.elementor .e-ad4a47e{flex-direction:row;justify-content:center;}.elementor .e-6dfca78{padding-inline-start:300px;padding-inline-end:300px;display:flex;flex-direction:column;}.elementor .e-375e1b1{padding-inline-start:300px;padding-inline-end:300px;flex-direction:column;}.elementor .e-0911275-cd5b26c{display:flex;flex-direction:row;justify-content:center;}.elementor .e-b4d39f7{padding-inline-start:300px;padding-inline-end:300px;flex-direction:row;/* ============================================================ */
/* 1. DISEÑO DEL FORMULARIO DE RESERVA (INPUTS Y BOTONES)       */
/* ============================================================ */

/* Contenedor general del formulario para darle respiro */
.mphb_sc_booking_form-wrapper {
  background-color: #fff;
  padding: 25px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Estilo de las etiquetas (Labels) */
.mphb_sc_booking_form-wrapper label {
  font-weight: 600;
  color: #4a4a4a;
  font-size: 14px;
  margin-bottom: 8px;
  display: inline-block;
}

/* Ocultar el texto de "Campos obligatorios" que ensucia el diseño */
.mphb-required-fields-tip {
  display: none !important;
}

/* Estilo de los campos de texto y selectores (Inputs & Selects) */
.mphb_sc_booking_form-wrapper input[type="text"],
.mphb_sc_booking_form-wrapper select {
  width: 100%;
  padding: 12px 15px;
  background-color: #fcfcfc;
  border: 1px solid #eaeaea;
  border-radius: 8px; /* Redondeo igual a tus tarjetas */
  font-size: 15px;
  color: #4a4a4a;
  box-sizing: border-box;
  transition: all 0.3s ease;
  margin-bottom: 15px;
}

/* Efecto al hacer clic en un campo (Focus) */
.mphb_sc_booking_form-wrapper input[type="text"]:focus,
.mphb_sc_booking_form-wrapper select:focus {
  border-color: #bfa170; /* Borde dorado al escribir */
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(191, 161, 112, 0.1);
}

/* Estilo del Botón Principal ("Comprobar disponibilidad") */
.mphb_sc_booking_form-wrapper input[type="submit"] {
  background-color: #bfa170 !important; /* Color dorado sólido */
  color: #fff !important; /* Texto blanco */
  border: none !important;
  border-radius: 8px !important;
  padding: 15px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: 100%; /* Botón de ancho completo */
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Efecto hover del botón */
.mphb_sc_booking_form-wrapper input[type="submit"]:hover {
  background-color: #a88d60 !important; /* Dorado un poco más oscuro */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(191, 161, 112, 0.3);
}

/* ============================================================ */
/* 2. DISEÑO DEL CALENDARIO (LIMPIEZA DE JQUERY UI)             */
/* ============================================================ */

/* Contenedor principal del calendario */
.mphb_sc_availability_calendar-wrapper .datepick {
  background-color: #fff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
  color: #4a4a4a !important;
  font-family: inherit !important;
  width: 100% !important; 
  max-width: 320px; /* Limita el ancho para que no se deforme */
  margin: 0 auto;
}

/* Cabecera del mes (Quitar el fondo negro y dejarlo limpio) */
.datepick-nav, 
.datepick-month-header {
  background-color: #fff !important;
  color: #333 !important;
  border-bottom: 1px solid #eaeaea;
  padding: 10px 0 !important;
}

/* Color de los selectores de mes/año y botones de siguiente/anterior */
.datepick-cmd, 
.datepick-month-year {
  color: #333 !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Días de la semana (Lu, Ma, Mi...) */
.datepick-month th {
  background-color: #fff !important;
  color: #bfa170 !important; /* Dorado para los nombres de los días */
  font-weight: bold;
  border-bottom: none !important;
  padding-top: 10px;
}

/* Días disponibles (Fondo muy sutil para indicar que se pueden clickear) */
.datepick-month td .mphb-available-date {
  background-color: #fdfaf6 !important; /* Dorado super claro */
  border: 1px solid #f2eadb !important;
  color: #4a4a4a !important;
  border-radius: 4px;
  font-weight: 500;
}

/* Hover de días disponibles */
.datepick-month td .mphb-available-date:hover {
  background-color: #bfa170 !important;
  color: #fff !important;
  border-color: #bfa170 !important;
}
/* ============================================================ */
/* 2. CALENDARIO ULTRA-MODERNO (CORRECCIÓN DE DESBORDAMIENTO)   */
/* ============================================================ */

/* Forzar al contenedor a ignorar el ancho pequeño de MotoPress */
.mphb_sc_availability_calendar-wrapper .datepick {
  background-color: #fff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
  padding: 20px 15px !important;
  width: 100% !important; /* Ignora los 219px inyectados por JS */
  min-width: 280px !important; 
  max-width: 350px !important;
  margin: 0 auto;
  box-sizing: border-box !important;
}

/* Reparar la tabla para que los días no se salgan de la caja */
.datepick-month {
  width: 100% !important;
}
.datepick-month table {
  width: 100% !important;
  table-layout: fixed !important; /* Obliga a las 7 columnas a medir exactamente lo mismo */
  border-collapse: collapse !important;
}
.datepick-month th, 
.datepick-month td {
  border: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
  text-align: center !important;
}

/* Cabecera (Controles de Ant/Sig y Selectores) */
.datepick-nav {
  background: transparent !important;
  border: none !important;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px !important;
}
.datepick-nav a, .datepick-cmd-clear {
  color: #bfa170 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 1px;
}

/* Selector de Mes y Año */
.datepick-month-header {
  background: transparent !important;
  border: none !important;
  padding-bottom: 15px !important;
}
.datepick-month-header select {
  border: 1px solid #eaeaea !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-weight: 600 !important;
  color: #4a4a4a !important;
  background-color: #fcfcfc !important;
  margin: 0 3px;
  outline: none;
}

/* Días de la semana (Lu, Ma, Mi) */
.datepick-month th {
  color: #a0a0a0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  padding-bottom: 10px !important;
}

/* DISEÑO DE LOS NÚMEROS (Círculos ajustados para caber perfecto) */
.datepick-month td a, 
.datepick-month td span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;  /* Reducido para que la semana completa quepa bien */
  height: 32px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  transition: all 0.2s ease-in-out;
  background-image: none !important; /* Destruye el degradado feo (ej. día 14) de MotoPress */
}

/* Días Disponibles */
.datepick-month td .mphb-available-date {
  background-color: transparent !important;
  color: #4a4a4a !important;
  border: 1px solid #eaeaea !important; /* Un círculo muy sutil para saber que es clickeable */
}

/* Hover de días disponibles */
.datepick-month td .mphb-available-date:hover {
  background-color: #fdfaf6 !important;
  color: #bfa170 !important;
  border-color: #bfa170 !important;
  transform: scale(1.08);
}

/* Días Seleccionados */
.datepick-month td .datepick-selected,
.datepick-month td .mphb-date-cell.datepick-highlight {
  background-color: #bfa170 !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 8px rgba(191, 161, 112, 0.4) !important;
  border-color: #bfa170 !important;
}

/* Días Pasados / No disponibles (Desaturados) */
.datepick-month td .mphb-past-date, 
.datepick-month td .datepick-disabled,
.datepick-month td .datepick-other-month {
  color: #dcdcdc !important;
  background: transparent !important;
  border: none !important;
  cursor: default !important;
}

/* Barra inferior del calendario (Limpiar fechas) */
.datepick-ctrl {
  background: transparent !important;
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 12px !important;
  margin-top: 10px !important;
  border-radius: 0 !important;
  color: #777 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}\n}