/* ========================================================= 
   ANMILE RESERVAS – Estilos con paleta y tipografías Anmile
   Paleta:
   --forest:     #213F32  (primario títulos/acentos)
   --moss:       #6B8B6E  (hover/acento suave)
   --sand:       #D8C4A0  (bordes/divisores)
   --warm:       #F8F7F4  (fondo cálido)
   --walnut:     #3A2E25  (texto)
   --terracotta: #C07A45  (CTA)
   ========================================================= */

:root {
  --forest: #213F32;
  --moss: #6B8B6E;
  --sand: #D8C4A0;
  --warm: #F8F7F4;
  --walnut: #3A2E25;
  --terracotta: #C07A45;
  --terracotta-hover: #A96539;
  --font-title: 'Petrona', Georgia, serif;
  --font-body: 'Rubik', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ========== Caja de reserva en la ficha de producto ========== */

.anmile-reservas-box {
  padding: 10px 16px;
  border: 1px solid var(--sand);
  border-radius: 14px;
  margin: 16px 0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  color: var(--walnut);
  font-family: var(--font-body);
}

.anmile-reservas-box label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--forest);
  font-family: var(--font-title);
  letter-spacing: .2px;
}

.anmile-reservas-box .input-text {
  width: 100%;
  background: var(--warm);
  border: 1px solid var(--sand);
  color: var(--walnut);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
}

.anmile-reservas-box .input-text:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(107,139,110,.25);
}

.anmile-reservas-box .form-row {
  width: 48%;
  float: left;
}

.anmile-reservas-box .clear { clear: both; }

.anmile-help {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
  font-family: var(--font-body);
}

#anmile_total_preview.anmile-preview {
  margin-top: 10px;
  font-weight: 700;
  color: var(--forest);
  font-family: var(--font-body);
  line-height: 1.4;
}
#anmile_total_preview.anmile-preview span {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
}

/* Acciones (Cambiar / Eliminar del carrito) */
.anmile-reservas-box .anmile-actions {
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.anmile-reservas-box .anmile-actions .button {
  flex:1;
  text-align:center;
}

/* Botón primario Woo (CTA Reservar) */
.single-product .summary .single_add_to_cart_button{
  background: var(--terracotta) !important;
  border: 1px solid var(--terracotta) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  padding: 12px 14px !important;
  font-family: var(--font-body);
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
  width:100%;
  display:block;
}
.single-product .summary .single_add_to_cart_button:hover{
  background: var(--terracotta-hover) !important;
  border-color: var(--terracotta-hover) !important;
}
.single-product .summary .single_add_to_cart_button:active{
  transform: translateY(1px);
}
.single-product .summary .single_add_to_cart_button:focus-visible{
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* Botón secundario (Eliminar del carrito) */
.anmile-btn-secondary{
  background: #fff !important;
  border: 1px solid var(--sand) !important;
  color: var(--walnut) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
  font-family: var(--font-body);
  transition: border-color .15s ease, color .15s ease;
  width:100%;
  text-align:center;
}
.anmile-btn-secondary:hover{
  border-color: var(--moss) !important;
  color: var(--forest) !important;
}

/* ========== Datepicker Skin Anmile ========== */

.ui-datepicker {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 8px;
  color: var(--walnut);
  font-family: var(--font-body);
  z-index: 9999 !important;
  width: auto;
  min-width: 260px;
  max-width: 300px;
}

.ui-datepicker .ui-datepicker-header {
  background: var(--warm);
  border: 1px solid var(--sand);
  border-radius: 10px;
  color: var(--forest);
  font-family: var(--font-title);
  font-weight: 700;
  margin-bottom: 8px;
  padding: 6px 10px;
  position: relative;
  text-align:center;
  font-size: 15px;
  line-height: 1.3;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  color: var(--forest);
  position:absolute;
  top:6px;
  width:20px;
  height:20px;
  line-height:20px;
  text-align:center;
  font-size:14px;
  font-weight:600;
}
.ui-datepicker .ui-datepicker-prev { left:6px; }
.ui-datepicker .ui-datepicker-next { right:6px; }

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  color: var(--moss);
}

.ui-datepicker .ui-datepicker-title {
  padding: 0 24px; /* deja aire entre las flechas y el título */
  font-size: 15px;
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--forest);
}

/* Tabla días */
.ui-datepicker table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  border: 0;
  table-layout: fixed;
}

/* Encabezado L Ma Mi ... */
.ui-datepicker th {
  color: var(--forest);
  font-weight: 600;
  font-size: 12px;
  line-height:1.2;
  text-align: center;
  font-family: var(--font-body);
  padding-bottom: 2px;
}

/* Cada celda del calendario */
.ui-datepicker td {
  position: relative;
  vertical-align: top;
  padding: 0;
  text-align: center;
  /* altura fija y uniforme */
  height: 48px;
  width: 40px;
  min-width: 36px;
}

/* Contenido principal del da (el número clickeable) */
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 42px;
  border-radius: 10px;
  background: var(--warm);
  border: 1px solid var(--sand);
  color: var(--walnut);
  font-size: 13px;
  line-height: 1.2;
  font-family: var(--font-body);
  font-weight: 500;
  padding-top: 6px;      /* espacio arriba para el número */
  padding-bottom: 16px;  /* dejamos un "piso" para el precio */
  box-sizing: border-box;
  overflow: hidden;
}

.ui-datepicker td a.ui-state-default:hover {
  border-color: var(--moss);
}

/* Día seleccionado (activo) */
.ui-datepicker .ui-state-active {
  background: var(--terracotta) !important;
  border-color: var(--terracotta) !important;
  color: #fff !important;
}

/* Día "resaltado" por jQuery UI (hoy) */
.ui-datepicker .ui-state-highlight {
  background: #fff6f0 !important;
  border-color: var(--terracotta) !important;
  color: var(--terracotta) !important;
  font-weight: 600;
}

/* Días de otros meses que igual se ven */
.ui-datepicker .ui-datepicker-other-month .ui-state-default {
  opacity: .7;
  cursor: pointer;
}

/* Día deshabilitado en general */
.ui-datepicker .ui-state-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* ========= Precio mini dentro de la celda ========= */

/* Inyectado por JS como <div class="anmile-dayprice"> */
.anmile-dayprice {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  text-align: center;
  font-size: 5px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--walnut);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--sand);
  border-radius: 6px;
  padding: 2px 3px;
  box-sizing: border-box;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 8px);
  margin: 0 auto;
  font-family: var(--font-body);
}

/* ========= Estados especiales ========= */

/* Noche ocupada (no puedes dormir ahí). Se muestra tachado y apagado.
   El JS NO agrega precio en estas celdas. */
.anmile-dia-ocupado {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--terracotta);
  opacity: .5;
  color: var(--terracotta);
  font-weight: 600;
}

/* fallback si la clase va al <td> y no al <a> */
.ui-datepicker td.anmile-ocupado .ui-state-default,
.ui-datepicker td.anmile-outofrange .ui-state-default {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--terracotta);
  opacity: .45;
  background: #f8f2f0;
  border-color: var(--sand);
  color: var(--terracotta);
  font-weight:600;
  cursor:not-allowed;
}

/* Fechas fuera de rango de checkout permitido (en el picker de salida) */
.ui-datepicker td.anmile-outofrange .ui-state-default {
  filter: grayscale(1);
  opacity: .4;
}

/* Checkout límite:
   Este día está marcado como ocupado por otra reserva que entra ese día,
   PERO tú sí puedes salir esa mañana.
   JS añade ambas clases: "anmile-dia-ocupado anmile-checkout-limit".
   Aquí sobreescribimos la apariencia para que NO parezca bloqueado total.
*/
.anmile-checkout-limit {
  opacity: 1 !important;
  cursor: pointer !important;
  color: var(--terracotta) !important;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--terracotta);
  font-weight: 600;
}

/* Accesibilidad / reduce motion */
@media (prefers-reduced-motion: reduce){
  .single-product .summary .single_add_to_cart_button{ transition: none; }
}