/* Estilos adicionales para modales y animaciones */

.modal {
  display: none;
}

.modal.active {
  display: flex;
}

#closeModal {
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

.animate-scaleIn {
  animation: scaleIn 0.3s ease-out;
}

/* Glassmorphism modal content */
.glass-modal {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ============================================================
   BOOKING WIZARD – Step Progress Indicator
   Uses data-state attributes so Tailwind JIT is not required.
   States: "future" | "active" | "complete"
   Pulse effect uses box-shadow so it is never clipped by overflow:hidden.
   ============================================================ */

@keyframes wizard-pulse-shadow {
  0%, 100% {
    box-shadow:
      0 0 0  6px oklch(0.55 0.12 320 / 0.35),
      0 0 0  0px oklch(0.55 0.12 320 / 0.0);
  }
  50% {
    box-shadow:
      0 0 0  6px oklch(0.55 0.12 320 / 0.15),
      0 0 0 12px oklch(0.55 0.12 320 / 0.05);
  }
}

@keyframes wizard-pop-in {
  0%   { transform: scale(0.7); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- Base icon circle ---------- */
.wizard-step-icon {
  width: 2.5rem;            /* 40px */
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #4b5563;
  font-size: 0.875rem;
  font-weight: 600;
  position: relative;
  transition:
    background-color 0.3s ease,
    border-color     0.3s ease,
    box-shadow       0.4s ease;
  color: #6b7280;
  background-color: transparent;
}

/* ---------- Checkmark overlay (hidden by default) ---------- */
.wizard-step-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.3s ease;
  opacity: 0;
  transform: rotate(160deg) scale(0.5);
  pointer-events: none;
}

/* ---------- Number overlay (visible by default) ---------- */
.wizard-step-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.3s ease;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: none;
}

/* ---------- Step label (in normal document flow, no absolute) ---------- */
.wizard-step-text {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.3s ease;
  color: #4b5563;
  text-align: center;
}
@media (max-width: 360px) {
  .wizard-step-text {
    font-size: 0.5rem;
    letter-spacing: 0;
  }
}

/* ---------- Segment fill line ---------- */
.wizard-segment-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-radius: 9999px;
  background-color: var(--color-primary-500);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

/* ======== FUTURE state ======== */
.wizard-step-icon[data-state="future"] {
  background-color: transparent;
  border-color: #374151;
  color: #6b7280;
  box-shadow: none;
}
.wizard-step-text[data-state="future"] {
  color: #4b5563;
}

/* ======== ACTIVE state ======== */
.wizard-step-icon[data-state="active"] {
  background-color: var(--color-primary-500);
  border-color:     var(--color-primary-500);
  color: #ffffff;
  animation: wizard-pop-in 0.35s ease forwards, wizard-pulse-shadow 2.2s ease-in-out 0.35s infinite;
}
.wizard-step-icon[data-state="active"] .wizard-step-num {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.wizard-step-icon[data-state="active"] .wizard-step-check {
  opacity: 0;
  transform: rotate(160deg) scale(0.5);
}
.wizard-step-text[data-state="active"] {
  color: #ffffff;
}

/* ======== COMPLETE state ======== */
.wizard-step-icon[data-state="complete"] {
  background-color: var(--color-primary-500);
  border-color:     var(--color-primary-500);
  color: #ffffff;
  box-shadow: none;
}
.wizard-step-icon[data-state="complete"] .wizard-step-check {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.wizard-step-icon[data-state="complete"] .wizard-step-num {
  opacity: 0;
  transform: rotate(-160deg) scale(0.5);
}
.wizard-step-text[data-state="complete"] {
  color: var(--color-primary-400, #a78bfa);
}

/* ============================================================
   BOOKING WIDGET ANIMATIONS
   Slide transitions for switching between calendar and times
   ============================================================ */

@keyframes booking-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes booking-slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-booking-slide-in-right {
  animation: booking-slide-in-right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-booking-slide-in-left {
  animation: booking-slide-in-left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}