/* appointment-online.css — the PMS-backed public booking page.
   Scoped to .book-* so it cannot collide with appointment.html's .appt-frame-wrap
   (the two pages run side by side during the transition — see PublicBookingController). */

.hidden { display: none !important; }

.book-wrap {
  max-width: 32rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.book-card {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
}

.book-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.book-sub {
  color: var(--muted-foreground, #667);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.book-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.book-hint {
  color: var(--muted-foreground, #667);
  font-size: 0.85rem;
}

.book-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.5rem;
}

.book-slot-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.book-slot-btn:hover { border-color: var(--primary); }
.book-slot-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}

.book-submit-btn { width: 100%; margin-top: 0.5rem; }

.book-success-icon {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: color-mix(in oklch, var(--primary) 15%, white);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.book-success-icon svg { width: 1.5rem; height: 1.5rem; }
#book-success { text-align: center; }