.kruh-booking-page {
  color: #143342;
  scroll-margin-top: 150px;
}
.calendar-brand-frame:has(.kruh-booking-page) { padding: clamp(1rem, 2.5vw, 2rem); }

.kruh-booking-heading { margin-bottom: 2rem; }
.kruh-booking-heading > a {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: .85rem;
  font-weight: 700;
  text-underline-offset: 4px;
}
.kruh-booking-heading .eyebrow { display: block; width: fit-content; color: #925d47; }
.kruh-booking-heading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .82fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.public-site .kruh-booking-heading h1 {
  margin: .6rem 0;
  max-width: none;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1;
}
.kruh-booking-description { max-width: 40rem; line-height: 1.6; }
.kruh-booking-description > :first-child { margin-top: 0; }
.kruh-booking-description > :last-child { margin-bottom: 0; }
.kruh-booking-heading figure {
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #f4d9c3;
}
.kruh-booking-heading img { width: 100%; height: 100%; object-fit: cover; }
.kruh-booking-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 1.5rem;
}
.kruh-date-picker, .kruh-time-picker {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid #dfd9d1;
  border-radius: 24px;
  background: #fffdf8;
}
.kruh-date-picker { background: #f7f0e7; }
.kruh-booking-layout h2 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.25rem;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.kruh-booking-layout h2 > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid #ccc0b1;
  border-radius: 50%;
  font-size: .85rem;
}
.kruh-month-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.5rem 0 1rem; }
.kruh-month-heading h3 { margin: 0; font-size: 1.7rem; }
.kruh-month-heading > div { display: flex; gap: .3rem; }
.kruh-month-heading button {
  width: 40px;
  height: 40px;
  border: 1px solid #d3c7b7;
  border-radius: 50%;
  color: #143342;
  background: transparent;
  cursor: pointer;
}
.kruh-month-heading button:disabled { opacity: .3; cursor: default; }
.kruh-weekdays, .kruh-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kruh-weekdays { margin-bottom: .5rem; text-align: center; font-size: .7rem; font-weight: 800; color: #646c70; }
.kruh-date {
  display: flex;
  min-width: 0;
  min-height: 56px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: #94918b;
}
.kruh-date strong { font-size: 1rem; }
.kruh-date small { font-size: .6rem; line-height: 1; }
.kruh-date.is-available { border-color: #ce9e7d; background: #f4d9c3; color: #673d25; cursor: pointer; }
.kruh-date.is-available:hover { background: #edc5a4; }
.kruh-date.is-selected { border-color: #143342; background: #143342; color: #fff; }
.kruh-date.is-selected:hover { background: #234c60; }
.kruh-date[aria-current="date"] strong { text-decoration: underline; text-underline-offset: 3px; }
.kruh-booking-page button:focus-visible, .kruh-booking-page a:focus-visible { outline: 3px solid #143342; outline-offset: 3px; }
.kruh-date-hint { margin: 1rem 0 0; font-size: .8rem; line-height: 1.5; color: #626b6e; }
.kruh-date-picker > .button { margin-top: 1rem; }
.kruh-time-picker { scroll-margin-top: 150px; }
.kruh-selected-date { margin: -.3rem 0 1.4rem; font-weight: 750; }
.kruh-time-picker .wheel-slots-section,
.kruh-time-picker .wheel-calendar-day-detail,
.kruh-time-picker .wheel-calendar-lane,
.kruh-time-picker .wheel-calendar-window {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kruh-time-picker .wheel-calendar-day-detail > header,
.kruh-time-picker .wheel-calendar-lane > header,
.kruh-time-picker .self-service-resource-note,
.kruh-time-picker .self-service-checkout-choice { display: none; }
.kruh-time-picker .wheel-calendar-lanes { grid-template-columns: minmax(0, 1fr); }
.kruh-time-picker .wheel-calendar-lane:has(.wheel-checkout-panel:not([hidden])) { grid-column: auto; }
.kruh-time-picker .wheel-calendar-windows { gap: 1.5rem; padding: 0; }
.kruh-time-picker .wheel-checkout-panel { padding: 1rem 0 0; }
.kruh-time-picker .wheel-access-card,
.kruh-time-picker .wheel-agreement-card { margin: 1.25rem 0 0; padding: 1.25rem; box-shadow: none; border-radius: 16px; }
.kruh-time-picker .wheel-access-card h2,
.kruh-time-picker .wheel-agreement-card h2 { max-width: none; font-size: 1.35rem; }
.kruh-time-picker .wheel-step { margin-bottom: .6rem; }
.kruh-time-picker .wheel-empty { padding: 1rem 0; }
.kruh-empty { line-height: 1.6; }
@media (max-width: 900px) {
  .kruh-booking-heading-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .kruh-booking-heading figure { order: -1; }
  .kruh-booking-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .kruh-booking-heading { margin-bottom: 1.4rem; }
  .kruh-date-picker, .kruh-time-picker { padding: 1.2rem; }
  .kruh-date { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .kruh-booking-page { scroll-behavior: auto; }
}