/* Webmo — Reservation booking UI (reservation/index.php only)
   Loaded AFTER reservation.css. No changes to data retrieval / booking conditions.
*/
.reservation-page--index {
  --booking-accent: var(--reservation-accent, var(--color-primary, #d982e9));
  --booking-ink: var(--reservation-ink, var(--color-text, #283142));
  --booking-line: color-mix(in srgb, var(--booking-accent) 16%, #e8eaf0);
  --booking-tint: color-mix(in srgb, var(--booking-accent) 5%, white);
}

/* Clean up the booking CTA without altering payment/booking components */
.reservation-page--index #bookingForm .reservation-confirm-note {
  margin: 22px 0 0;
}
.reservation-page--index #bookingForm .reservation-confirm-note > label {
  display: block;
  margin: 0 0 9px;
  color: var(--booking-ink);
  font-size: 13px;
  font-weight: 700;
}
.reservation-page--index #bookingForm .reservation-confirm-note textarea {
  display: block;
  width: 100%;
  min-height: 98px;
  padding: 13px 14px;
  border: 1px solid var(--booking-line);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  color: var(--booking-ink);
}
.reservation-page--index #bookingForm .reservation-confirm-note textarea:focus-visible {
  outline: 2px solid var(--booking-accent);
  outline-offset: 2px;
}

.reservation-page--index #bookingForm .reservation-final-summary {
  margin-top: 20px;
  border: 1px solid var(--booking-line);
  border-radius: 19px;
  background: linear-gradient(155deg, #fff 0%, #fff 54%, var(--booking-tint) 100%);
  box-shadow: 0 14px 36px rgba(31, 30, 41, .045);
  padding: 24px 26px;
  color: var(--booking-ink);
}
.reservation-page--index #bookingForm .reservation-final-summary__top {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--booking-line);
}
.reservation-page--index #bookingForm .reservation-final-summary__eyebrow {
  color: var(--booking-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
}
.reservation-page--index #bookingForm .reservation-final-summary__top > strong {
  color: var(--booking-ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
}
.reservation-page--index #bookingForm .reservation-final-summary__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}
.reservation-page--index #bookingForm .reservation-final-summary__price-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.reservation-page--index #bookingForm .reservation-final-summary__price-copy > span {
  display: block;
  color: #777481;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}
.reservation-page--index #bookingForm #pricePreview.price {
  margin: 5px 0 0 !important;
  color: var(--booking-ink) !important;
  font-size: clamp(23px, 3vw, 31px) !important;
  font-weight: 850 !important;
  letter-spacing: -.03em;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}
.reservation-page--index #bookingForm .reservation-final-summary__price-icon {
  flex: 0 0 51px;
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--booking-accent) 11%, white);
  color: var(--booking-accent);
  font-size: 28px;
  font-weight: 600;
}
.reservation-page--index #bookingForm .reservation-final-summary__note {
  margin: 8px 0 0;
  color: #747583;
  font-size: 12px;
  line-height: 1.7;
  min-height: 1em;
}
.reservation-page--index #bookingForm .reservation-final-summary__action {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.reservation-page--index #bookingForm #reservationPrimarySubmit.reservation-submit {
  width: min(100%, 430px) !important;
  min-height: 61px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 13px 22px !important;
  margin: 0 !important;
  background: linear-gradient(120deg, var(--booking-accent), color-mix(in srgb, var(--booking-accent) 83%, #fff)) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: #fff !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--booking-accent) 20%, transparent) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.55;
  letter-spacing: .03em;
  white-space: normal;
  text-align: center;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.reservation-page--index #bookingForm #reservationPrimarySubmit.reservation-submit:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  filter: brightness(1.025);
  box-shadow: 0 17px 30px color-mix(in srgb, var(--booking-accent) 29%, transparent) !important;
}
.reservation-page--index #bookingForm #reservationPrimarySubmit.reservation-submit:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--booking-accent) 48%, white) !important;
  outline-offset: 3px;
}
.reservation-page--index #bookingForm .reservation-final-summary__action-icon {
  display: inline-grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border: 1px solid #ffffffa0;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: transform .22s ease;
}
.reservation-page--index #bookingForm #reservationPrimarySubmit:hover .reservation-final-summary__action-icon {
  transform: translateX(3px);
}
.reservation-page--index #bookingForm .reservation-policy-inline {
  margin: 15px 0 0;
  color: #767382;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
}
.reservation-page--index #bookingForm .reservation-policy-inline a {
  color: color-mix(in srgb, var(--booking-accent) 78%, #282739);
  font-weight: 800;
  text-underline-offset: 3px;
}
.reservation-page--index #bookingForm .reservation-final-summary__login-note {
  margin: 7px 0 0;
  color: #85818e;
  font-size: 11px;
  text-align: center;
  line-height: 1.65;
}

/* Date headings: compact two-line layout in the weekly grid only. */
.reservation-page--index #weeklyTable .reservation-week-date {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  line-height: 1.1;
  white-space: nowrap;
}
.reservation-page--index #weeklyTable .reservation-week-date__number {
  font-weight: 800;
}
.reservation-page--index #weeklyTable .reservation-week-date__day {
  font-size: .88em;
  font-weight: 650;
}

@media (max-width: 760px) {
  .reservation-page--index .reservation-booking.reservation-index-matched {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .reservation-page--index .reservation-booking .reservation-booking-panel {
    padding: 12px !important;
    min-width: 0;
  }
  .reservation-page--index #bookingForm {
    min-width: 0;
  }
  .reservation-page--index #bookingForm #reservationWeeklySection {
    padding: 13px 8px 16px !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .reservation-page--index #reservationWeeklySection .reservation-step-title {
    padding: 0 5px;
    gap: 9px;
  }
  .reservation-page--index #reservationWeeklySection .reservation-step-title small {
    font-size: 10px;
    line-height: 1.5;
  }
  .reservation-page--index #reservationWeeklySection .reservation-weekly-actions {
    gap: 6px;
    margin: 13px 2px 12px;
  }
  .reservation-page--index #reservationWeeklySection .reservation-weekly-actions > button {
    flex: 0 0 auto;
    min-width: 0;
    padding: 9px 9px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    line-height: 1.3;
    white-space: normal;
  }
  .reservation-page--index #reservationWeeklySection #weekTitle {
    min-width: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
  }
  .reservation-page--index #weeklyBookingView .reservation-calendar-legend {
    margin: 7px 1px 10px;
    font-size: 10px;
    line-height: 1.75;
    color: #6c7380;
  }
  /* All 7 days plus the time column fit within the available mobile width. */
  .reservation-page--index #weeklyBookingView .reservation-weekly-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    border: 1px solid #dfe6eb;
    border-radius: 11px;
    box-sizing: border-box;
  }
  .reservation-page--index #weeklyTable.reservation-weekly-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
  }
  .reservation-page--index #weeklyTable.reservation-weekly-table tr {
    width: 100%;
  }
  .reservation-page--index #weeklyTable.reservation-weekly-table th,
  .reservation-page--index #weeklyTable.reservation-weekly-table td {
    width: auto;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
    overflow: hidden;
    padding: 3px 1px !important;
    font-size: 10px !important;
    line-height: 1.25;
    white-space: normal !important;
    vertical-align: middle;
  }
  .reservation-page--index #weeklyTable.reservation-weekly-table tr > :first-child {
    width: 41px !important;
    min-width: 41px !important;
    max-width: 41px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    font-weight: 700;
  }
  .reservation-page--index #weeklyTable thead th {
    height: 49px;
    background: #f3f6f8;
  }
  .reservation-page--index #weeklyTable .reservation-week-date {
    gap: 3px;
    font-size: 10px;
    letter-spacing: -.04em;
  }
  .reservation-page--index #weeklyTable .reservation-week-date__day {
    font-size: 10px;
    letter-spacing: 0;
  }
  .reservation-page--index #weeklyTable tbody td {
    height: 37px;
  }
  .reservation-page--index #weeklyTable .reservation-week-cell {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 33px !important;
    min-height: 33px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 750;
  }
  .reservation-page--index #weeklyTable .reservation-week-cell.is-selected {
    box-shadow: inset 0 0 0 2px var(--booking-accent) !important;
  }
  .reservation-page--index #bookingForm .reservation-final-summary {
    padding: 19px 16px;
    border-radius: 16px;
  }
  .reservation-page--index #bookingForm .reservation-final-summary__top > strong {
    font-size: 17px;
  }
  .reservation-page--index #bookingForm .reservation-final-summary__price-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 12px;
    font-size: 23px;
  }
  .reservation-page--index #bookingForm #pricePreview.price {
    font-size: 25px !important;
  }
  .reservation-page--index #bookingForm #reservationPrimarySubmit.reservation-submit {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 370px) {
  .reservation-page--index .reservation-booking .reservation-booking-panel { padding: 9px !important; }
  .reservation-page--index #bookingForm #reservationWeeklySection { padding: 11px 5px 13px !important; }
  .reservation-page--index #weeklyTable.reservation-weekly-table tr > :first-child {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    font-size: 8px !important;
  }
  .reservation-page--index #weeklyTable.reservation-weekly-table th,
  .reservation-page--index #weeklyTable.reservation-weekly-table td { padding: 2px 0 !important; }
  .reservation-page--index #weeklyTable .reservation-week-date { font-size: 9px; }
  .reservation-page--index #weeklyTable .reservation-week-date__day { font-size: 9px; }
  .reservation-page--index #weeklyTable .reservation-week-cell { font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reservation-page--index #bookingForm #reservationPrimarySubmit.reservation-submit,
  .reservation-page--index #bookingForm .reservation-final-summary__action-icon { transition: none !important; }
}

/* ===== 2026-10-19: compact event date selection =====
   Scoped to reservation/index.php. The catalog, date/period selection,
   server-side availability and submission logic are unchanged. */
.reservation-page--index .reservation-booking #eventList.reservation-events {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch;
  margin-top: 12px;
}
.reservation-page--index .reservation-booking #eventList.reservation-events .event {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 43px 15px 16px !important;
  grid-template-columns: none !important;
  background: #fff !important;
  border: 1px solid #e9e0eb !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 17px rgba(35, 28, 43, .035) !important;
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
  overflow: visible !important;
  cursor: pointer;
}
.reservation-page--index .reservation-booking #eventList.reservation-events .event:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--color-primary, #d887e8) 45%, white) !important;
  box-shadow: 0 9px 20px color-mix(in srgb, var(--color-primary, #d887e8) 12%, transparent) !important;
}
.reservation-page--index .reservation-booking #eventList.reservation-events .event:has(input:checked) {
  background: color-mix(in srgb, var(--color-primary, #d887e8) 6%, white) !important;
  border: 1.5px solid var(--color-primary, #d887e8) !important;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--color-primary, #d887e8) 13%, transparent) !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-main > b {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-datetime {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  color: #49505e !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-datetime time {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: baseline !important;
  gap: 3px 8px !important;
  white-space: normal;
  line-height: 1.4 !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-datetime time strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4d4a55 !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-datetime time span {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #222b39 !important;
  font-variant-numeric: tabular-nums;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-venue {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #77808c !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-stock {
  display: inline-flex !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--color-primary, #d887e8) 10%, white) !important;
  color: color-mix(in srgb, var(--color-primary, #d887e8) 65%, #333) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-stock strong {
  font-size: inherit !important;
}
.reservation-page--index .reservation-booking #eventList .event > input[type="radio"] {
  position: absolute !important;
  top: 17px !important;
  right: 15px !important;
  width: 19px !important;
  height: 19px !important;
  accent-color: var(--color-primary, #d887e8) !important;
}
/* Cards beyond the initial 6 (or 3 on mobile) are hidden until requested. */
.reservation-page--index .reservation-booking #eventList .event.is-event-collapsed,
.reservation-page--index .reservation-booking #eventList .event.hidden,
.reservation-page--index .reservation-booking #eventList .reservation-event-date[hidden] {
  display: none !important;
}
.reservation-page--index .reservation-booking #eventList .event.is-event-revealing {
  animation: reservationEventSlideIn .42s cubic-bezier(.2,.75,.2,1) both;
  animation-delay: var(--event-reveal-delay, 0ms);
}
@keyframes reservationEventSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.reservation-page--index .reservation-booking .reservation-event-more {
  display: flex;
  justify-content: center;
  margin: 18px auto 4px;
}
.reservation-page--index .reservation-booking .reservation-event-more[hidden] {
  display: none !important;
}
.reservation-page--index .reservation-booking .reservation-event-more__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 19px;
  border: 1px solid color-mix(in srgb, var(--color-primary, #d887e8) 45%, white);
  border-radius: 999px;
  background: #fff;
  color: color-mix(in srgb, var(--color-primary, #d887e8) 73%, #30303e);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--color-primary, #d887e8) 10%, transparent);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.reservation-page--index .reservation-booking .reservation-event-more__button:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-primary, #d887e8) 8%, white);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary, #d887e8) 15%, transparent);
}
.reservation-page--index .reservation-booking .reservation-event-more__button:focus-visible {
  outline: 2px solid var(--color-primary, #d887e8);
  outline-offset: 3px;
}
.reservation-page--index .reservation-booking .reservation-event-more__count {font-size: 11px; opacity: .85;}
.reservation-page--index .reservation-booking .reservation-event-more__icon {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}
.reservation-page--index .reservation-booking #eventList.reservation-events[hidden] {
  display: none !important;
}
.reservation-page--index .reservation-booking #eventList .reservation-event-date {
  grid-column: 1 / -1;
  margin: 10px 0 0 !important;
  padding: 0 0 5px !important;
}
@media (max-width: 1000px) and (min-width: 761px) {
  .reservation-page--index .reservation-booking #eventList.reservation-events {grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
}
@media (max-width: 760px) {
  .reservation-page--index .reservation-booking .reservation-booking-heading {
    margin-bottom: 14px !important;
    padding: 0 2px 12px !important;
  }
  .reservation-page--index .reservation-booking .reservation-booking-heading h2 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    letter-spacing: .01em !important;
  }
  .reservation-page--index .reservation-booking #bookingForm .reservation-step-panel {
    padding: 13px 12px !important;
    margin: 12px 0 !important;
  }
  .reservation-page--index .reservation-booking #bookingForm .reservation-step-title {
    gap: 9px !important;
    margin-bottom: 10px !important;
  }
  .reservation-page--index .reservation-booking #bookingForm .reservation-step-title > span {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    font-size: 11px !important;
  }
  .reservation-page--index .reservation-booking #bookingForm .reservation-step-title strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .reservation-page--index .reservation-booking #bookingForm .reservation-step-title small {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  .reservation-page--index .reservation-booking #eventList.reservation-events {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 10px;
  }
  .reservation-page--index .reservation-booking #eventList.reservation-events .event {
    padding: 12px 40px 12px 13px !important;
    border-radius: 12px !important;
  }
  .reservation-page--index .reservation-booking #eventList .reservation-event-main {
    gap: 5px !important;
  }
  .reservation-page--index .reservation-booking #eventList .reservation-event-main > b {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .reservation-page--index .reservation-booking #eventList .reservation-event-datetime time strong {
    font-size: 11px !important;
  }
  .reservation-page--index .reservation-booking #eventList .reservation-event-datetime time span {
    font-size: 12px !important;
  }
  .reservation-page--index .reservation-booking #eventList .reservation-event-venue {
    font-size: 10px !important;
  }
  .reservation-page--index .reservation-booking #eventList .event > input[type="radio"] {
    top: 13px !important;
    right: 13px !important;
    width: 18px !important;
    height: 18px !important;
  }
  .reservation-page--index .reservation-booking .reservation-event-more {margin-top: 13px;}
}
@media (prefers-reduced-motion: reduce) {
  .reservation-page--index .reservation-booking #eventList .event.is-event-revealing {animation: none !important;}
  .reservation-page--index .reservation-booking .reservation-event-more__button {transition: none !important;}
}


/* An empty event step must always give an explanation rather than a blank panel. */
.reservation-page--index .reservation-booking .reservation-event-availability-note:not([hidden]) {
  padding: 12px 14px;
  margin: 10px 0 0;
  border: 1px solid color-mix(in srgb, var(--color-primary, #d887e8) 20%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary, #d887e8) 5%, white);
  color: #4c4456;
  font-size: 12px;
  line-height: 1.65;
}
.reservation-page--index .reservation-booking .reservation-event-availability-note[hidden] {
  display: none !important;
}

/* 2026-10-20: keep hover/focus/selection visible after selecting a menu. */
.reservation-page--index #weeklyTable .reservation-week-cell.is-open:hover,
.reservation-page--index #weeklyTable .reservation-week-cell.is-open:focus-visible {
  outline:2px solid var(--booking-accent,#d989e6)!important;
  outline-offset:-2px!important;
  background:color-mix(in srgb,var(--booking-accent,#d989e6) 13%,#fff)!important;
  cursor:pointer!important;
}
.reservation-page--index #weeklyTable .reservation-week-cell.is-open.is-selected,
.reservation-page--index #weeklyTable .reservation-week-cell.is-open.is-preview-selected {
  outline:2px solid var(--booking-accent,#d989e6)!important;
  outline-offset:-2px!important;
  background:color-mix(in srgb,var(--booking-accent,#d989e6) 21%,#fff)!important;
  color:var(--booking-accent,#d989e6)!important;
  box-shadow:inset 0 0 0 2px var(--booking-accent,#d989e6)!important;
}

.reservation-booker-db-profile,.reservation-attendee-entry{background:#f7fbfe;border:1px solid #dae9f0;border-radius:12px;padding:15px;margin:14px 0}
.reservation-profile-grid,.reservation-attendee-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reservation-attendee-card{margin:10px 0;padding:16px;background:white;border:1px solid #dce9f0;border-radius:12px}
.reservation-attendee-card h4{grid-column:1/-1;margin:0}.reservation-profile-grid label,.reservation-attendee-card label{display:grid;gap:6px;font-size:13px}.reservation-profile-grid input[readonly]{background:#ecf3f7;color:#30515c}
@media(max-width:600px){.reservation-profile-grid,.reservation-attendee-card{grid-template-columns:1fr}}

.reservation-booker-db-profile,.reservation-attendee-entry{grid-column:1/-1}

/* R3: hover is transient; confirmed click selection stays visibly pinned. */
.reservation-page--index #weeklyTable button.reservation-week-cell.is-open.is-selected,
.reservation-page--index #weeklyTable button.reservation-week-cell.is-open[aria-pressed="true"] {background:#e9bff3!important;color:#6e2087!important;outline:3px solid #aa43cd!important;outline-offset:-3px!important;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #bd61d8!important;position:relative;z-index:1}
.reservation-page--index #weeklyTable button.reservation-week-cell.is-open.is-selected::after {content:"✓";font-size:11px;position:absolute;right:6px;top:2px;color:#682484}

/* R5: persistent confirmed click selection (different from mouse hover). */
.reservation-page--index #weeklyTable button.reservation-week-cell[data-selected-slot="true"] {
  background:#bb53d9 !important; color:#fff !important;
  outline:3px solid #77318f !important; outline-offset:-3px !important;
  box-shadow:0 0 0 3px #f4e0fb, inset 0 0 0 1px #fff !important;
  font-weight:900 !important;position:relative;z-index:2;
}
.reservation-page--index #weeklyTable button.reservation-week-cell[data-selected-slot="true"]::after {
  content:"✓";position:absolute;right:4px;top:0;font-size:12px;color:#fff;
}
.reservation-page--index #weeklySelected:not(:empty){
  padding:11px 15px;margin:12px 0;border:2px solid #bb53d9;border-radius:10px;
  color:#663278;font-size:13px;font-weight:800;background:#fcf2ff;
}

/* R7: persistent selection after click; distinguish hover from confirmed slot. */
.reservation-page--index #weeklyTable button.reservation-week-cell.is-open[data-selected-slot="true"],
.reservation-page--index #weeklyTable button.reservation-week-cell.is-open[aria-pressed="true"] {
 background:#bd38d9!important;color:#fff!important;
 outline:3px solid #81219c!important;outline-offset:-3px!important;
 box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #de93ed!important;
 font-weight:900!important;position:relative;z-index:3!important;
}
.reservation-page--index #weeklyTable button.reservation-week-cell.is-open[data-selected-slot="true"]::after {
 content:"✓";position:absolute;right:4px;top:1px;color:#fff;font-size:12px;
}

/* R8: explicit selected-state only; a hover highlight alone is never a confirmation. */
#weeklyTable .reservation-week-cell.is-open[data-selected-slot="true"],
#weeklyTable .reservation-week-cell.is-open.is-selected {
 background-color:#bd38d9!important;
 color:#fff!important;
 outline:3px solid #85219a!important;
 outline-offset:-3px!important;
 box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #bd38d9!important;
 font-weight:900!important;
 position:relative!important;
 z-index:3!important;
}
#weeklyTable .reservation-week-cell.is-open[data-selected-slot="true"]::after,
#weeklyTable .reservation-week-cell.is-open.is-selected::after {
 content:"✓"!important;
 position:absolute!important;top:1px!important;right:5px!important;
 color:#fff!important;font-size:12px!important;font-weight:900!important;
}