@charset "UTF-8";
/* ====================== booking.css ====================== */

/* griglia slot */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
/* centro loader o messaggio */
.grid.loading,
.grid.empty {
  display: flex;              /* sovrascrive display:grid */
  justify-content: center;
  align-items: center;
  min-height: 160px;          /* garantisce un’altezza gradevole */
}

/* niente margine automatico */
.grid.loading .loader,
.grid.empty  .no-slots-message { margin: 0; }
/* toolbar responsive */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 576px) {
  .toolbar { flex-wrap: nowrap; }
}

/* legenda slot */
.legend {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex: 1 1 100%;
  margin-bottom: 0.5rem;
}
@media (min-width: 576px) {
  .legend { flex: 0 1 auto; margin-bottom: 0; margin-right: 1rem; }
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--sr-text);
}
.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.legend-color.available   { background: var(--booking-available-bg); }
.legend-color.booked      { background: var(--booking-booked-bg); }
.legend-color.unavailable { background: var(--booking-unavailable-bg); }
.legend-color.mine        { background: var(--booking-mine-bg); }

/* ==== card slot ==== */
.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #12304B;
  border-left: 6px solid transparent;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.slot.available   { border-color: var(--booking-available-bg); }
.slot.booked      { border-color: var(--booking-booked-bg);     cursor: not-allowed; }
.slot.unavailable { border-color: var(--booking-unavailable-bg); cursor: not-allowed; }
.slot.mine        { border-color: var(--booking-mine-bg);        cursor: pointer; }

/* hover effect */
.slot.available:hover,
.slot.mine:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* header: ora + durata (stacked vertically) */
.slot-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.slot-hour {
  font-size: 1.1rem;
  font-weight: 600;
}
.slot-duration {
  font-size: 0.75rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* campo: max due righe con ellissi */
.slot-court {
  font-size: 0.9rem;
  color: var(--sr-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* prezzo */
.slot-price {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: right;
  color: var(--sr-text);
}

/* modal full-screen */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
}
.modal.hidden { display: none; }
.modal-box {
  background: #12304B;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  max-width: 320px;
  width: 100%;
  box-shadow: var(--sr-shadow-deep);
}
.hidden { display: none !important; }

/* ─────────────────────────────────────────────── */
/* Spinner e messaggi “nessun slot”               */
/* ─────────────────────────────────────────────── */
.loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.loader {
  width: 48px;
  height: 48px;
  margin: 2rem auto;
  border: 6px solid rgba(255,255,255,.25);
  border-top-color: var(--sr-text);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.no-slots-message {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--sr-muted);
  font-weight: 500;
}