/*
 * Stili per il flusso di Prenotazione (Booking)
 */

.booking-modal {
  /* Estende .modal-content */
  display: flex;
  flex-direction: column;
  height: 80vh;
  max-height: 800px;
}

/* Indicatore di progresso a step */
.booking-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  position: relative;
}
.booking-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-wood-300);
  z-index: 0;
}
.step-indicator {
  background: var(--color-black-100);
  border: 2px solid var(--color-wood-200);
  color: var(--color-text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-vintage);
  z-index: 1;
  transition: all var(--transition-fast);
}
.step-indicator.active {
  border-color: var(--color-brass-base);
  color: var(--color-brass-base);
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.4);
}
.step-indicator.completed {
  background: var(--color-green-200);
  border-color: var(--color-green-100);
  color: var(--color-text-cream);
}

/* Area del contenuto del passo corrente */
.step-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: var(--spacing-sm); /* Spazio per scrollbar */
}

/* Selettore dei servizi e barbieri */
.servizio-selector, .barbiere-selector {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.selectable-item {
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.selectable-item.selected {
  border-color: var(--color-green-100);
  background-color: rgba(45, 90, 63, 0.2);
}

/* Griglia Calendario e Slot Orari */
.calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}
.calendario-giorno {
  padding: var(--spacing-sm);
  background: var(--color-black-100);
  border: 1px solid var(--color-wood-300);
  cursor: pointer;
}
.calendario-giorno:hover { background: var(--color-wood-200); }
.calendario-giorno.disabled { opacity: 0.3; cursor: not-allowed; }

.slot-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--spacing-sm);
}
.orario-slot {
  padding: var(--spacing-sm);
  text-align: center;
  background: var(--color-black-100);
  border: 1px solid var(--color-brass-dark);
  color: var(--color-brass-light);
  cursor: pointer;
  font-family: var(--font-typewriter);
}
.orario-slot.unavailable { background: var(--color-black-300); color: var(--color-text-muted); border-color: var(--color-black-200); cursor: not-allowed; }
.orario-slot.selected { background: var(--color-green-100); color: var(--color-text-cream); }

/* Riepilogo */
.booking-riepilogo {
  background: var(--color-black-300);
  padding: var(--spacing-md);
  border: 1px dashed var(--color-brass-dark);
  margin-bottom: var(--spacing-md);
}

/* Navigazione */
.booking-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-wood-300);
}