/* A continuous clay frame surrounds the complete booking page. */
body.tck-page {
  background: #612f23;
}

body.tck-page .tck-app {
  min-height: 100vh;
  padding: clamp(10px, 1.25vw, 24px);
  background: #612f23;
}

body.tck-page .calendar-section {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 48px);
  margin: 0;
  padding: clamp(32px, 3.5vw, 72px);
  background: #fff6eb;
  border: 2px solid #a7583b;
  box-shadow: inset 0 0 0 6px #eed5c1, 0 18px 48px #32180f30;
}

.booking-layout {
  grid-template-columns: minmax(0, 1fr) clamp(310px, 22vw, 390px);
  gap: clamp(18px, 1.5vw, 30px);
}

.calendar-panel {
  background: #fffbf5;
  box-shadow: 0 12px 28px #633b2712;
}

.booking-panel {
  border: 2px solid #ad6145;
  box-shadow: 0 12px 28px #633b2724;
}

/* Booking details get their own lines, especially in the seven-day view. */
.week-table tbody tr { height: 46px; }
.calendar-grid.is-day .week-table tbody tr { height: 46px; }

.reservation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 8px;
}

.reservation strong,
.reservation .reservation-type,
.reservation .reservation-name,
.reservation .reservation-time {
  display: block;
  width: 100%;
  margin: 0;
}

.reservation .reservation-type {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  max-height: 2.3em;
}

.reservation .reservation-name {
  color: #4a241b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  max-height: 2.3em;
}

.reservation .reservation-time {
  margin-top: auto;
}

.booking-short .reservation { gap: 0; padding: 3px 5px; }
.booking-short .reservation strong { font-size: 7px; line-height: 1; }
.booking-short .reservation .reservation-type,
.booking-short .reservation .reservation-name { font-size: 9px; line-height: 1; white-space: nowrap; }
.booking-short .reservation .reservation-time { font-size: 8px; line-height: 1; }

@media (max-width: 850px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  body.tck-page .tck-app { padding: 8px; }
  body.tck-page .calendar-section {
    min-height: calc(100vh - 16px);
    padding: 30px 18px 56px;
    border-width: 1px;
    box-shadow: inset 0 0 0 3px #eed5c1;
  }
}