/* Booking pages on the family kit. Only the look changes: every id, class and state the booking
   script uses (hidden, active, selected, visible, past, available, today, empty) keeps its meaning. */
.book-wrap { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 96px); }
.book-page { display: grid; gap: 28px; }
.book-crumb { font-size: 0.9rem; color: #a9a9a3; }
.book-page-title { margin: 0; }
.book-page-sub { color: #a9a9a3; max-width: 56ch; margin: 0; }

.meeting-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #f3f2ee; }
.meeting-card { display: grid; gap: 14px; align-content: start; padding: 32px 40px 36px 0; cursor: pointer; }
.meeting-card + .meeting-card { padding-left: 40px; padding-right: 0; border-left: 1px solid #2e2e2e; }
.card-label { font-size: 0.86rem; color: #a9a9a3; }
.card-title { font-family: Newsreader, Georgia, serif; font-weight: 380; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; }
.card-desc { color: #d9d8d2; max-width: 48ch; }
.card-note { font-size: 0.92rem; color: #a9a9a3; border-left: 2px solid #9fcfe7; padding-left: 12px; max-width: 48ch; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.92rem; color: #a9a9a3; padding-top: 4px; }
.card-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.card-meta-dot { width: 7px; height: 7px; border-radius: 50%; background: #9fcfe7; display: inline-block; }
.card-cta { justify-self: start; margin-top: 8px; }
.meeting-card:hover .card-cta { background: #9fcfe7; border-color: #9fcfe7; color: #06222f; }

.cards-view.hidden { display: none; }
.schedule-view { display: none; }
.schedule-view.active { display: grid; gap: 26px; }
.sched-back { justify-self: start; }
.sched-icon { display: none; }
.sched-header { border-top: 1px solid #f3f2ee; padding-top: 24px; }
.sched-title { font-family: Newsreader, Georgia, serif; font-weight: 380; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.015em; }
.sched-sub { color: #a9a9a3; margin-top: 8px; }
.sched-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border: 1px solid #2e2e2e; }
.cal-wrap { padding: 24px; border-right: 1px solid #2e2e2e; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-month { font-family: Newsreader, Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.cal-arrows { display: flex; gap: 8px; }
.cal-arr { width: 44px; height: 44px; border: 1px solid #6d6d68; background: transparent; color: #f3f2ee; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.cal-arr:hover { border-color: #9fcfe7; color: #9fcfe7; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 0.78rem; color: #a9a9a3; text-align: center; padding: 6px 0 10px; }
.cal-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 0.98rem; border: 1px solid transparent; user-select: none; }
.cal-day.empty { visibility: hidden; }
.cal-day.past { color: #5c5c57; }
.cal-day.available { color: #f3f2ee; border-color: #2e2e2e; cursor: pointer; }
.cal-day.available:hover { border-color: #9fcfe7; color: #9fcfe7; }
.cal-day.today { position: relative; }
.cal-day.today::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #9fcfe7; }
.cal-day.selected { background: #f3f2ee; color: #000000; border-color: #f3f2ee; }
.cal-day.today.selected::after { background: #000000; }
.time-panel { padding: 24px; display: flex; flex-direction: column; min-height: 0; }
.time-label { font-family: Newsreader, Georgia, serif; font-size: 1.35rem; margin-bottom: 14px; }
.time-slots { display: grid; gap: 8px; overflow-y: auto; align-content: start; padding-right: 4px; }
.time-slot { min-height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid #6d6d68; cursor: pointer; font-size: 0.98rem; }
.time-slot:hover { border-color: #9fcfe7; color: #9fcfe7; }
.time-slot.selected { background: #f3f2ee; color: #000000; border-color: #f3f2ee; }
.time-empty, .time-loading { color: #a9a9a3; font-size: 0.95rem; padding: 8px 0; }

.confirmation { display: none; border-top: 1px solid #f3f2ee; padding-top: 30px; }
.confirmation.active { display: grid; gap: 12px; justify-items: start; }
.conf-title { font-family: Newsreader, Georgia, serif; font-weight: 380; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.015em; }
.conf-detail { font-size: 1.1rem; }
.conf-meet { margin-top: 8px; }
.conf-note { color: #a9a9a3; max-width: 52ch; }

.modal-overlay { display: none; position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.74); align-items: flex-start; justify-content: flex-end; }
.modal-overlay.active { display: flex; }
.modal { width: min(560px, 100vw); height: 100vh; height: 100dvh; overflow-y: auto; background: #111111; color: #f3f2ee; border-left: 1px solid #2e2e2e; padding: 22px clamp(20px, 4vw, 36px) 40px; display: grid; gap: 18px; align-content: start; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #2e2e2e; }
.modal-title { font-family: Newsreader, Georgia, serif; font-weight: 380; font-size: 1.9rem; line-height: 1.1; }
.modal-subtitle { color: #a9a9a3; margin-top: 6px; font-size: 0.95rem; }
.modal-close { min-height: 44px; padding: 8px 16px; border: 1px solid #6d6d68; background: transparent; color: inherit; font: inherit; font-size: 0.92rem; cursor: pointer; flex: none; }
.modal-close:hover { border-color: #9fcfe7; color: #9fcfe7; }
.modal-summary { display: grid; gap: 4px; }
.modal-summary-item { display: flex; gap: 12px; align-items: baseline; font-size: 1.05rem; }
.modal-summary-icon { font-size: 0.86rem; color: #a9a9a3; min-width: 3.2em; }
.modal-body { display: grid; gap: 6px; }
.modal-body label { font-size: 0.9rem; font-weight: 550; margin-top: 12px; }
.modal-body label .req { color: #9fcfe7; margin-left: 2px; }
.modal-body label .opt { color: #a9a9a3; font-weight: 400; margin-left: 4px; }
.modal-body input, .modal-body textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #6d6d68; background: transparent; color: inherit; font: inherit; font-size: 1rem; border-radius: 0; }
.modal-body textarea { min-height: 110px; resize: vertical; }
.modal-body input:focus, .modal-body textarea:focus { outline: 2px solid #9fcfe7; outline-offset: 0; border-color: #9fcfe7; }
.confirm-btn { margin-top: 20px; justify-self: start; }
.confirm-btn:disabled { opacity: 0.6; cursor: wait; }
.api-error { display: none; border-left: 2px solid #ff9c94; color: #ff9c94; padding: 8px 0 8px 12px; }
.api-error.visible { display: block; }
.book-help { color: #a9a9a3; font-size: 0.95rem; }
.book-help a { text-decoration: underline; text-decoration-color: #9fcfe7; text-underline-offset: 0.22em; }

@media (max-width: 860px) {
  .meeting-cards { grid-template-columns: 1fr; }
  .meeting-card, .meeting-card + .meeting-card { padding: 28px 0 30px; border-left: 0; }
  .meeting-card + .meeting-card { border-top: 1px solid #2e2e2e; }
  .sched-layout { grid-template-columns: 1fr; }
  .cal-wrap { border-right: 0; border-bottom: 1px solid #2e2e2e; padding: 18px; }
  .time-panel { padding: 18px; max-height: none !important; }
  .time-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
}
@media (max-width: 400px) { .cal-wrap { padding: 12px; } .cal-grid { gap: 2px; } .cal-day { font-size: 0.92rem; } }
@media (max-width: 760px) { .book-crumb, .book-help, .card-meta, .card-note, .modal-summary-icon, .time-empty, .time-loading { font-size: 1rem; } .cal-dow { font-size: 0.86rem; } }