/* ============================================
   schedule.css — Schedule / booking page
   ============================================ */

/* ── Utility: JS-controlled visibility ────── */
.is-hidden {
  display: none !important;
}

/* ── Booking confirmed sidebar banner ──── */
.booking-done-banner {
  display: none;
}
.booking-done-banner.show {
  display: flex;
  animation: slideDown 0.4s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Calendar grid ─────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-header {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #AAAAAA;
  padding-bottom: 8px;
  font-family: 'Inter', sans-serif;
}

.cal-day {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px solid transparent;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1;
}

.cal-day-past {
  color: #2E3F5C;
  cursor: not-allowed;
}

.cal-day-available {
  color: #EDF2FF;
}
.cal-day-available:hover {
  background: rgba(254, 123, 205, 0.14);
  border-color: rgba(254, 123, 205, 0.45);
  color: #FE7BCD;
  transform: scale(1.12);
}

.cal-day-today {
  border-color: #FE7BCD;
  color: #FE7BCD;
  font-weight: 700;
}

.cal-day-selected {
  background: linear-gradient(135deg, #FE7BCD, #D64A9E) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(254, 123, 205, 0.4);
}

/* ── Calendar nav buttons ─────────── */
.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  color: #EDF2FF;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
.cal-nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  border-color: #1E2A44;
}
.cal-nav-disabled,
.cal-nav-btn:disabled {
  color: #2E3F5C;
  cursor: not-allowed;
}

/* ── Times panel reveal ─────────────── */
/* Remove & re-add the class to re-trigger the animation on each date pick */
.times-animate {
  animation: timesIn 0.22s ease both;
}

@keyframes timesIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ── Time chips ───────────────────── */
.time-chip {
  padding: 0.55rem 0.4rem;
  border-radius: 8px;
  border: 1.5px solid #1A2438;
  background: rgba(8, 9, 26, 0.80);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #7A99C2;
  cursor: pointer;
  text-align: center;
  width: 100%;
  transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.time-chip:hover:not(.time-chip-selected) {
  border-color: rgba(254, 123, 205, 0.45);
  background: rgba(254, 123, 205, 0.08);
  color: #FE7BCD;
  transform: translateY(-2px);
}
.time-chip-selected {
  background: linear-gradient(135deg, #FE7BCD, #D64A9E);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(254, 123, 205, 0.35);
}
.time-chip-booked {
  border-color: #111827;
  background: rgba(8, 9, 26, 0.40);
  color: #2E3F5C;
  cursor: not-allowed;
  opacity: 0.55;
  text-decoration: line-through;
}

/* ── Booking summary reveal ─────────── */
.summary-animate {
  animation: summaryUp 0.25s ease both;
}

@keyframes summaryUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Confirm button states ─────────── */
#confirm-btn:not(:disabled):hover {
  box-shadow: 0 12px 32px rgba(254, 123, 205, 0.45);
  transform: translateY(-2px) scale(1.01);
  transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}