/* ============================================
   SPLASH TIMETABLE — extends the shared .sab-root
   tokens from booking.css with table-specific
   styles. Loaded together, in that order.
   ============================================ */

.sab-tt-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sab-tt-date-row .sab-date-input {
  max-width: 200px;
}

.sab-tt-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sab-muted);
}
.sab-tt-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sab-tt-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.sab-tt-dot-green { background: var(--sab-green); }
.sab-tt-dot-gold { background: var(--sab-gold); }
.sab-tt-dot-pink { background: var(--sab-pink); }

.sab-tt-experience {
  margin-bottom: 32px;
}
.sab-tt-experience-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sab-tt-experience-header img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--sab-radius);
  flex-shrink: 0;
}
.sab-tt-experience-header h3 {
  font-family: var(--sab-font-heading) !important;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: 0;
}

.sab-tt-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.sab-tt-slot {
  border: 2px solid var(--sab-border-strong);
  border-radius: var(--sab-radius);
  padding: 12px 14px;
  background: var(--sab-card-bg);
  border-left-width: 5px;
}
.sab-tt-slot.sab-tt-status-green { border-left-color: var(--sab-green); }
.sab-tt-slot.sab-tt-status-gold { border-left-color: var(--sab-gold); }
.sab-tt-slot.sab-tt-status-pink { border-left-color: var(--sab-pink); }

.sab-tt-slot-time {
  font-family: var(--sab-font-heading) !important;
  font-size: 1rem;
  margin-bottom: 6px;
}
.sab-tt-slot-detail {
  font-size: 0.78rem;
  color: var(--sab-muted);
  line-height: 1.5;
}
.sab-tt-slot-detail strong {
  color: var(--sab-ink);
}
.sab-tt-slot-status {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
}
.sab-tt-status-green .sab-tt-slot-status { background: rgba(52,211,153,0.15); color: var(--sab-green); }
.sab-tt-status-gold .sab-tt-slot-status { background: rgba(255,207,58,0.15); color: var(--sab-gold); }
.sab-tt-status-pink .sab-tt-slot-status { background: rgba(255,20,147,0.15); color: var(--sab-pink); }

.sab-tt-book-btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 0.76rem;
}

.sab-tt-empty {
  color: var(--sab-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 40px 0;
}