/* Griglia responsive */

.time-slots-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Si adatta automaticamente */

  gap: 10px;

  margin-top: 14px;

  margin-bottom: 10px;

}



/* Stile base del pulsante orario */

.time-slot-btn {

  padding: 10px 5px;

  border: 1px solid #ccc;

  border-radius: 8px;

  background-color: #fff;

  color: #333;

  font-size: 14px;

  cursor: pointer;

  transition: all 0.2s ease;

  font-weight: 500;

}



.time-slot-btn:hover {

  border-color: #ff6b35; /* Colore di accento (arancione) */

  background-color: #fff5f0;

}



/* Stato selezionato (come nell'immagine del cliente) */

.time-slot-btn.selected {

  background-color: #ff6b35;

  color: white;

  border-color: #ff6b35; 

  box-shadow: 0 2px 5px rgba(255, 107, 53, 0.4);

}



/* Disabilitato (es. orari passati) */

.time-slot-btn:disabled {

  opacity: 0.5;

  cursor: not-allowed;

  background-color: #f0f0f0;

  color: #999;

}





.fascia-buttons {

  display: flex;

  gap: 10px;

  margin-bottom: 15px;

}



.fascia-btn {

  flex: 1;

  padding: 8px;

  border: 2px solid #ddd;

  border-radius: 8px;

  background: #fff;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

  font-size: 16px;

}



.fascia-btn.active {

  border-color: #e67e22;

  background-color: #fff5f0;

  color: #e67e22; /* #ff6b35 */

  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);

}



.fascia-btn:hover:not(.active) {

  border-color: #e67e22;

  background-color: #fafafa;

}





/* Responsive: su schermi molto piccoli, forza 2 o 3 colonne */

@media (max-width: 480px) {

  .time-slots-grid {

    grid-template-columns: repeat(3, 1fr); /* 3 colonne su mobile */

  }

}