/*
 * Reservation date-picker styling (#3484 follow-up).
 *
 * Styles the calendar rendered by reservation-picker.js on the public reservation
 * pages. The page extends the published site's themed base, which declares a
 * normalized brand palette at :root — `--brand`, `--brand-contrast`, `--brand-soft`
 * — so the calendar adopts the SITE's colour (maroon on Nocrich, etc.). The green
 * values below are only fallbacks for a non-themed host where those vars are absent.
 *
 * Semantics: an AVAILABLE (but unselected) day must read as clearly clickable, the
 * SELECTED day as chosen, and past/unavailable days as plainly out of reach.
 */

.reservation-calendar-grid {
  table-layout: fixed;
  margin-bottom: 0.25rem;
}

.reservation-calendar-grid th {
  font-weight: 500;
  padding-bottom: 0.25rem;
}

.reservation-calendar-grid td {
  padding: 2px;
}

.reservation-day {
  width: 100%;
  padding: 0.4rem 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Available, not yet chosen — clearly clickable, tinted in the site's brand. */
.reservation-day.is-available {
  background-color: var(--brand-soft, #e8f6ec);
  border-color: color-mix(in srgb, var(--brand, #2e7d32) 45%, white);
  color: var(--brand, #1b5e20);
  font-weight: 600;
  cursor: pointer;
}

.reservation-day.is-available:hover,
.reservation-day.is-available:focus-visible {
  background-color: var(--brand, #2e7d32);
  border-color: var(--brand, #2e7d32);
  color: var(--brand-contrast, #fff);
  outline: none;
}

/* The chosen day. */
.reservation-day.is-selected {
  background-color: var(--brand, #1b5e20);
  border-color: var(--brand, #1b5e20);
  color: var(--brand-contrast, #fff);
  font-weight: 700;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #1b5e20) 30%, transparent);
  cursor: pointer;
}

/* Past / outside any availability window. */
.reservation-day.is-unavailable {
  background: transparent;
  border-color: transparent;
  color: #b6bcc4;
  cursor: not-allowed;
}

/* A day that already carries a scheduled session (an accent, not the brand). */
.reservation-busy-dot {
  color: #e8730c;
  font-size: 0.7rem;
  line-height: 0.3;
  margin-top: -2px;
}

.reservation-day.is-selected .reservation-busy-dot,
.reservation-day.is-available:hover .reservation-busy-dot {
  color: #ffd9b3;
}