/*
 * RecLite Facilities — list + detail styles.
 *
 * Uses the theme's global design tokens declared in themes/reclite/style.css:
 *   --reclite-color-primary          (brand primary, ACF-driven)
 *   --reclite-color-primary-hover
 *   --color-primary-blue / -green / -white / -yellow
 *   --color-neutral-black / -neutral-gray / --color-text / --color-bg-light-gray
 *   --fs-20 / --p-size / --h2-size / --body-base
 *
 * Backgrounds use color-mix(in srgb, var(--reclite-color-primary) N%, transparent)
 * so the module tints with the tenant's brand colour without hard-coding a palette.
 */

.rl-facilities,
.rl-facility {
  --rl-fac-primary: var(--reclite-color-primary, #002d72);
  --rl-fac-primary-hover: var(--reclite-color-primary-hover, #1251b2);
  /* Secondary brand — driven by the theme's ACF Branding group via
   * --reclite-color-secondary (default green). Used sparingly (badges,
   * accents, "today" markers) so the page reads as multi-tonal instead
   * of a wall of primary tint. */
  --rl-fac-secondary: var(
    --reclite-color-secondary,
    var(--color-primary-green, #00662c)
  );
  --rl-fac-secondary-hover: var(--reclite-color-secondary-hover, #0db26f);
  --rl-fac-accent-warm: var(--color-primary-yellow, #ffd66a);
  --rl-fac-text: var(--color-text, #000000);
  --rl-fac-text-muted: var(--color-neutral-gray, #808080);
  --rl-fac-heading: var(--color-neutral-black, #3c3c3c);
  --rl-fac-surface: color-mix(in srgb, var(--rl-fac-primary) 6%, transparent);
  --rl-fac-surface-2: color-mix(
    in srgb,
    var(--rl-fac-primary) 10%,
    transparent
  );
  --rl-fac-surface-3: color-mix(
    in srgb,
    var(--rl-fac-primary) 14%,
    transparent
  );
  --rl-fac-line: color-mix(in srgb, var(--rl-fac-primary) 22%, transparent);
  --rl-fac-btn-bg: var(--color-btn-blue, var(--rl-fac-primary));
  --rl-fac-btn-fg: var(--color-btn-blue-text, #ffffff);
  --rl-fac-accent: var(--color-primary-green, #00662c);
  --rl-fac-danger: #b32d2e;
  --rl-fac-focus: var(--rl-fac-primary);

  /* Slot palette — kept explicit and independent of the tenant's brand
   * tokens. Availability status is semantic (green = go, red = busy,
   * amber = held) and must read the same on every tenant; threading
   * these through --color-primary-green / --color-primary-blue would
   * repaint them whenever a district's ACF branding changes colour. */
  --rl-slot-open: #16803a;
  --rl-slot-booked: #b32d2e;
  --rl-slot-held: #c88500;
  --rl-slot-buffer: #1a4dab;
  --rl-slot-excluded: #808080;
  --rl-slot-out: #b7b7b7;

  background: transparent;
  color: var(--rl-fac-text);
  padding: 1.5rem clamp(0.75rem, 3vw, 2rem);
  line-height: 1.55;
  font-size: var(--p-size, 16px);
}
.rl-facility.rl-wrap {
  background-color: #fff;
  border: 1px solid #acacac;
  max-width: none;
}
/* Facilities LIST — sit flush inside the theme's own container instead of the
 * shared .rl-wrap card. The base .rl-wrap adds a green primary-tinted
 * background, a 1500px max-width, centering and 35px side padding; the theme's
 * .reclite_container already provides the page gutter, so here we drop the
 * green tint + card chrome and let every section span the theme's content
 * width. (Specificity 0,2,0 beats the base .rl-wrap 0,1,0.) */
.rl-facilities.rl-wrap {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* ============================================================
 * Theme bullet reset
 * ------------------------------------------------------------
 * The parent theme adds a decorative "::before" bullet to <li>
 * elements inside a handful of container classes (transparent_container,
 * reclite_event_details, etc.). Our lists are purely structural and
 * carry their own visual language (chips, cards, key-value rows), so
 * we neutralise the pseudo-element inside our scoped roots. The
 * doubled selector `.rl-facilities.rl-facilities` bumps specificity
 * so the reset wins over the theme's `.container.container` pattern
 * without needing !important.
 * ========================================================== */
.rl-facilities.rl-facilities ul > li::before,
.rl-facilities.rl-facilities ol > li::before,
.rl-facility.rl-facility ul > li::before,
.rl-facility.rl-facility ol > li::before {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.rl-facilities.rl-facilities ul,
.rl-facilities.rl-facilities ol,
.rl-facility.rl-facility ul,
.rl-facility.rl-facility ol {
  list-style: none;
  padding-left: 0;
}
.rl-facilities.rl-facilities li,
.rl-facility.rl-facility li {
  padding-left: 0;
}

/* ============================================================
 * Utilities
 * ========================================================== */

.rl-facilities .rl-sr-only,
.rl-facility .rl-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rl-facilities :focus-visible,
.rl-facility :focus-visible {
  outline: 3px solid var(--rl-fac-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.rl-facilities .rl-btn,
.rl-facility .rl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  /* padding: 0.55em 1.2em; */
  background: var(--rl-fac-btn-bg);
  color: var(--rl-fac-btn-fg);
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
}
.rl-facilities .rl-btn:hover,
.rl-facility .rl-btn:hover {
  background: var(--rl-fac-primary-hover);
}
.rl-facilities .rl-btn[disabled],
.rl-facility .rl-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.rl-facilities .rl-btn-secondary,
.rl-facility .rl-btn-secondary {
  background: transparent;
  color: var(--rl-fac-primary);
  border-color: var(--rl-fac-primary);
}
.rl-facilities .rl-btn-secondary:hover,
.rl-facility .rl-btn-secondary:hover {
  background: color-mix(in srgb, var(--rl-fac-primary) 8%, transparent);
  color: var(--rl-fac-primary-hover);
  border-color: var(--rl-fac-primary-hover);
}

.rl-facilities .rl-back-link,
.rl-facility .rl-back-link {
  color: var(--rl-fac-primary);
  text-decoration: none;
  font-weight: 500;
}
.rl-facilities .rl-back-link:hover,
.rl-facility .rl-back-link:hover {
  color: var(--rl-fac-primary-hover);
  text-decoration: underline;
}
.rl-facility-cal-controls .rl-btn.calender_nxt_prv_btn {
  padding: 0.55em 1.2em;
}
.rl-skel-line,
.rl-skel-img {
  display: block;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rl-fac-primary) 6%, transparent) 0%,
    color-mix(in srgb, var(--rl-fac-primary) 14%, transparent) 40%,
    color-mix(in srgb, var(--rl-fac-primary) 6%, transparent) 80%
  );
  background-size: 200% 100%;
  animation: rlShimmer 1.4s linear infinite;
  border-radius: 4px;
}
.rl-skel-line {
  height: 1em;
  margin: 0.4em 0;
}
.rl-skel-line.w-40 {
  width: 40%;
}
.rl-skel-line.w-60 {
  width: 60%;
}
.rl-skel-line.w-70 {
  width: 70%;
}
.rl-skel-line.w-80 {
  width: 80%;
}
.rl-skel-line.w-90 {
  width: 90%;
}
.rl-skel-img {
  width: 100%;
  height: 200px;
  border-radius: 6px;
}

@keyframes rlShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rl-skel-line,
  .rl-skel-img {
    animation: none;
  }
}

/* ============================================================
 * List view
 * ========================================================== */

.rl-fac-header {
  margin-bottom: 1.5rem;
}
.rl-fac-title {
  margin: 0 0 0.25em;
  color: var(--rl-fac-heading);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}
.rl-fac-sub {
  margin: 0;
  color: var(--rl-fac-text-muted);
}

.rl-fac-filters {
  background: var(--rl-fac-surface);
  border: 1px solid var(--rl-fac-line);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
/* Field grid — mirrors the Programs filter layout */
.rl-fac-filters .rl-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.rl-fac-filters .rl-filter-row:last-child {
  margin-bottom: 0;
}
.rl-fac-filters .rl-filter-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.rl-fac-filters select,
.rl-fac-filters input[type="search"],
.rl-fac-filters input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #bcbcbc;
  border-radius: 6px;
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-text);
  font: inherit;
  font-size: 15px;
  min-height: 48px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  /* Native chevron for selects — reuses the theme's dark ink for consistency. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%233c3c3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 52px;
}
.rl-fac-filters input[type="search"],
.rl-fac-filters input[type="text"] {
  background-image: none;
  padding-right: 16px;
}
.rl-fac-filters select:focus,
.rl-fac-filters input:focus {
  outline: none;
  border-color: var(--rl-fac-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
}

/* Buttons — no local styling. All CTA buttons inside the module use the
 * theme's own `.reclite_primary_btn` class (and `.reclite_secondary_btn`
 * modifier for the green variant), so they inherit the theme's pill +
 * arrow-in-circle look and its hover/focus states out of the box.
 *
 * A handful of small utility <button>s (pagination page numbers, picker
 * "Clear/Today" links) are NOT in the theme's opt-out list, so the theme
 * would otherwise paint them as full pill+arrow buttons. Suppress the
 * theme's ::before/::after pseudo-elements on those. */
.rl-facilities .rl-fac-page-btn::before,
.rl-facilities .rl-fac-page-btn::after,
.rl-facility .rl-fac-picker-quick::before,
.rl-facility .rl-fac-picker-quick::after,
.rl-facilities .rl-fac-picker-quick::before,
.rl-facilities .rl-fac-picker-quick::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ghost variant — no border, just the arrow circle. Good for compact
 * icon-nav (calendar prev/next). */
.rl-facilities .rl-fac-icon-btn,
.rl-facility .rl-fac-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--rl-fac-primary);
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-primary);
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.rl-facilities .rl-fac-icon-btn:hover,
.rl-facility .rl-fac-icon-btn:hover {
  background: var(--rl-fac-primary);
  color: var(--color-primary-white, #ffffff);
}

@media (max-width: 640px) {
  .rl-fac-filters .rl-filter-row {
    grid-template-columns: 1fr;
  }
  .rl-fac-filters .rl-filter-row-actions {
    flex-direction: column;
  }
  .rl-fac-filters .rl-fac-btn {
    width: 100%;
    justify-content: space-between;
  }
}

.rl-fac-meta {
  margin: 0.75rem 0 1rem;
  color: var(--rl-fac-text-muted);
  font-size: 0.95em;
}

/* ------------------------------------------------------------
 * Facility list cards.
 *
 * Structure inspired by the reference layout: two-column split, image on
 * one side, content + CTA on the other. Visual styling is entirely driven
 * by the theme's tokens — light surface, theme heading + text colours,
 * and a CTA that mirrors .reclite_primary_btn (white pill with the brand
 * arrow-in-circle). No hard-coded palette.
 * ---------------------------------------------------------- */
.rl-fac-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  /* Vertical top-image cards (image over content), matching the programs,
   * activities and memberships listings. Responsive auto-fill grid. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.rl-fac-card {
  background: var(--color-primary-white, #ffffff);
  border: 1px solid var(--rl-fac-line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.rl-fac-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rl-fac-primary) 45%, transparent);
  box-shadow: 0 12px 32px
    color-mix(in srgb, var(--rl-fac-primary) 18%, transparent);
}
.rl-fac-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.rl-fac-card-link:focus-visible {
  outline: 3px solid var(--rl-fac-focus);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Image (top) */
.rl-fac-card-img {
  background: var(--rl-fac-surface-2);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}
.rl-fac-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.rl-fac-card:hover .rl-fac-card-img img {
  transform: scale(1.03);
}
/* No-photo placeholder — themed SVG glyph on a two-colour diagonal wash
 * (primary → secondary). The dual-colour gradient breaks up the monotony
 * of a card list where several facilities lack photos. */
.rl-fac-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--rl-fac-primary) 14%, transparent),
    color-mix(in srgb, var(--rl-fac-secondary) 10%, transparent) 70%,
    color-mix(in srgb, var(--rl-fac-secondary) 6%, transparent)
  );
  color: color-mix(in srgb, var(--rl-fac-primary) 55%, transparent);
}
.rl-fac-card-img-svg {
  width: 40%;
  max-width: 96px;
  height: auto;
  opacity: 0.75;
}

/* Content (below image) — theme colours */
.rl-fac-card-body {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: var(--rl-fac-text);
  flex: 1 1 auto;
}
.rl-fac-card-title {
  margin: 0 0 0.15em;
  color: var(--rl-fac-heading);
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
  line-height: 1.2;
  font-weight: 700;
}
.rl-fac-card:hover .rl-fac-card-title {
  color: var(--rl-fac-primary);
}
.rl-fac-card-meta {
  margin: 0 0 0.35em;
  color: var(--rl-fac-primary);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
/* Icon + text meta rows (type, location). */
.rl-fac-card-meta-icon {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.rl-fac-card-meta-glyph {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.rl-fac-card-meta-glyph svg {
  display: block;
}
.rl-fac-card-meta-txt {
  min-width: 0;
}
/* Location reads as plain text (not an uppercase label) so a "City, ST"
 * line doesn't compete with the type label above it. */
.rl-fac-card-loc {
  color: var(--rl-fac-text-muted);
  font-size: 0.85em;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 600;
}
.rl-fac-card-loc .rl-fac-card-meta-glyph {
  color: var(--rl-fac-primary);
}
.rl-fac-card-desc {
  margin: 0 0 0.5em;
  color: var(--rl-fac-text-muted);
  font-size: 0.95em;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "N bookable spaces inside" — prominent filled chip so it reads at a
 * glance. Uses the secondary brand colour so it visually separates from
 * the primary-toned rest of the card (which already carries the CTA in
 * primary). */
.rl-fac-card-spaces-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  align-self: flex-start;
  margin: 0.15em 0 0;
  padding: 0.35em 0.85em;
  background: color-mix(in srgb, var(--rl-fac-secondary) 14%, transparent);
  color: var(--rl-fac-secondary);
  border: 1px solid color-mix(in srgb, var(--rl-fac-secondary) 32%, transparent);
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rl-fac-card-spaces-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.rl-fac-card-spaces-lbl {
  line-height: 1;
}
.rl-fac-card-status {
  margin: 0;
  align-self: flex-start;
  padding: 0.2em 0.7em;
  background: color-mix(in srgb, var(--rl-fac-primary) 12%, transparent);
  color: var(--rl-fac-primary);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* CTA — mirrors .reclite_primary_btn structure. Visual only (whole card
 * is the link); keyboard focus lands on the outer <a>. */
.rl-fac-card-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 22px;
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-primary);
  border: 1.5px solid var(--rl-fac-primary);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 42px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.08);
}
.rl-fac-card-cta-lbl {
  line-height: 1;
}
.rl-fac-card-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rl-fac-primary);
  color: var(--color-primary-white, #ffffff);
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
/* Hover flips the CTA to the SECONDARY brand colour (not primary) so the
 * card gets an extra colour beat when the user engages with it. The pill
 * border/label live in primary at rest; on hover both fill switches to
 * secondary and the arrow-circle inverts to white → secondary. */
.rl-fac-card:hover .rl-fac-card-cta {
  background: var(--rl-fac-secondary);
  border-color: var(--rl-fac-secondary);
  color: var(--color-primary-white, #ffffff);
}
.rl-fac-card:hover .rl-fac-card-cta-arrow {
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-secondary);
  transform: translateX(2px);
}

/* Mobile: tighten spacing (cards are already vertical top-image) */
@media (max-width: 640px) {
  .rl-fac-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .rl-fac-card-body {
    padding: 1.15rem 1.25rem 1.35rem;
    gap: 0.4em;
  }
  .rl-fac-card-title {
    font-size: 1.25rem;
  }
}

.rl-fac-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  flex-wrap: wrap;
}
.rl-fac-page-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.35em 0.75em;
  background: transparent;
  color: var(--rl-fac-primary);
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.rl-fac-page-btn[aria-current="page"] {
  background: var(--rl-fac-primary);
  color: var(--color-primary-white, #ffffff);
  border-color: var(--rl-fac-primary);
  font-weight: 600;
}
.rl-fac-page-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.rl-fac-noscript,
.rl-fac-empty {
  background: color-mix(in srgb, #b32d2e 8%, transparent);
  border: 1px solid color-mix(in srgb, #b32d2e 32%, transparent);
  color: #7a1e1f;
  padding: 1rem;
  border-radius: 6px;
}
/* Neutral empty-state (shared .rl-emptystate lives in reclite-headless.css) —
   this just makes the <li> span the full grid width. */
.rl-fac-emptystate {
  grid-column: 1 / -1;
  list-style: none;
}

/* ============================================================
 * Detail view
 * ========================================================== */

.rl-facility-crumb {
  margin: 0 0 1rem;
  color: var(--rl-fac-text-muted);
}
.rl-facility-crumb a {
  color: var(--rl-fac-primary);
  text-decoration: none;
}
.rl-facility-crumb a:hover {
  text-decoration: underline;
  color: var(--rl-fac-primary-hover);
}
.rl-facility-crumb-parent[hidden] {
  display: none;
}

/* Sub-space grid on the detail page — reuses `.rl-fac-grid` + `.rl-fac-card`
 * from the listing page. This override tightens the min-column width because
 * a two-space parent (like Greenwood) looks better as two side-by-side cards
 * instead of one wide card that hits the 480px lower bound. */
.rl-facility-spaces-grid {
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  margin: 0.75rem 0 0;
}
.rl-facility-spaces-grid .rl-fac-card-body {
  padding: 1.25rem 1.4rem;
}
.rl-facility-spaces-grid .rl-fac-card-title {
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
}

.rl-facility-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 720px) {
  .rl-facility-hero {
    /* Give the body column more room now that About lives there. */
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }
}
.rl-facility-hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--rl-fac-surface-2);
  border-radius: 10px;
  overflow: hidden;
  /* Enables the shared .rl-fac-card-img-empty placeholder styling to work
   * inside the hero without extra classes on the JS side. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-facility-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder — when the hero has no photo, .rl-fac-card-img-empty is
 * applied by fillCardImage() and this rule paints the same themed
 * gradient the list-card placeholders use. */
.rl-facility-hero-media.rl-fac-card-img-empty {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--rl-fac-primary) 14%, transparent),
    color-mix(in srgb, var(--rl-fac-secondary) 12%, transparent)
  );
  color: color-mix(in srgb, var(--rl-fac-primary) 60%, transparent);
}
.rl-facility-hero-media .rl-fac-card-img-svg {
  width: 30%;
  max-width: 140px;
  height: auto;
  opacity: 0.85;
  position: relative;
}
.rl-facility-hero-body {
  padding: 0.5rem 0;
}
.rl-facility-type-badge {
  display: inline-block;
  /* Uses the secondary brand colour so the badge stands out against the
   * mostly-primary page. On the default theme this reads as green pill on
   * a primary-tinted body, giving the hero a bit of colour separation. */
  background: color-mix(in srgb, var(--rl-fac-secondary) 16%, transparent);
  color: var(--rl-fac-secondary);
  border: 1px solid color-mix(in srgb, var(--rl-fac-secondary) 30%, transparent);
  padding: 0.25em 0.9em;
  border-radius: 999px;
  font-size: 0.82em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.rl-facility-type-badge:empty {
  display: none;
}
.rl-facility-title {
  margin: 0;
  color: var(--rl-fac-heading);
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  line-height: 1.15;
}
.rl-facility-status {
  margin: 0.5em 0 0;
  color: var(--rl-fac-text-muted);
}

/* About sits inside .rl-facility-hero-body, below the title/type/status. */
.rl-facility-hero-body .rl-facility-desc {
  margin-top: 0.85rem;
  color: var(--rl-fac-text);
  font-size: 0.98em;
  line-height: 1.6;
  max-width: 62ch;
}
.rl-facility-hero-body .rl-facility-desc :first-child {
  margin-top: 0;
}
.rl-facility-hero-body .rl-facility-desc :last-child {
  margin-bottom: 0;
}
.rl-facility-hero-body .rl-facility-desc p {
  margin: 0.4em 0;
}

.rl-facility-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .rl-facility-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

/* ------- Section nav — single-line inline strip, sticky ------- */
.rl-facility-secnav {
  /* Opaque so content scrolling behind isn't visible through the strip when
	 * it's stuck. Uses --color-primary-white with a subtle brand tint via
	 * a linear-gradient overlay so it still reads as part of the module. */
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--rl-fac-primary) 6%, transparent),
      color-mix(in srgb, var(--rl-fac-primary) 6%, transparent)
    ),
    var(--color-primary-white, #ffffff);
  border: 1px solid var(--rl-fac-line);
  border-radius: 10px;
  margin-bottom: 1rem;
  position: sticky;
  /* Offset accounts for a possible sticky theme header — the site's header
	 * height is unknown to this module, so we use a value that clears most
	 * WP admin bar / theme header stacks and can be overridden via
	 * --rl-fac-sticky-top on the outer element. */
  top: var(--rl-fac-sticky-top, 8rem);
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 2px 8px
    color-mix(in srgb, var(--rl-fac-primary) 14%, transparent);
}
/* WordPress admin bar: push down when logged-in. The 32px/46px offsets match
 * the WP admin-bar heights on desktop/mobile respectively. */
.admin-bar .rl-facility-secnav {
  top: 8rem;
}
@media (max-width: 782px) {
  .admin-bar .rl-facility-secnav {
    top: 8rem;
  }
}
.rl-facility-secnav-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.rl-facility-secnav-inner a {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.55em 0.95em;
  color: var(--rl-fac-primary);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92em;
  font-weight: 500;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.rl-facility-secnav-inner a:hover {
  background: color-mix(in srgb, var(--rl-fac-primary) 10%, transparent);
}
/* Active section pill uses the SECONDARY brand colour so it pops against
 * the primary-tinted secnav surface — the nav stays primary-toned overall
 * but the "you are here" marker is visually distinct. */
.rl-facility-secnav-inner a[aria-current="location"] {
  background: var(--rl-fac-secondary);
  color: var(--color-primary-white, #ffffff);
  font-weight: 600;
}

.rl-facility-section {
  background: var(--rl-fac-surface);
  border: 1px solid var(--rl-fac-line);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  scroll-margin-top: 5rem;
}
.rl-facility-section h2 {
  margin: 0 0 0.75em;
  color: var(--rl-fac-heading);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  padding-left: 12px;
  position: relative;
}
/* Small secondary-colour accent bar next to each section heading. Reuses
 * the theme's secondary token so the page has a colour rhythm — primary
 * pane surface + secondary marker — instead of pure primary tint everywhere. */
.rl-facility-section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--rl-fac-secondary);
}
.rl-facility-section h3.rl-facility-subh {
  margin: 1.25rem 0 0.5em;
  color: var(--rl-fac-heading);
  font-size: var(--fs-20, 18px);
}

.rl-facility-desc :last-child {
  margin-bottom: 0;
}
.rl-facility-desc :first-child {
  margin-top: 0;
}

.rl-facility-amenities.rl-facility-amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rl-facility-amenities.rl-facility-amenities li {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0.95em;
  /* background: var(--color-primary-white, #ffffff); */
  border: 1px solid var(--rl-fac-line);
  border-radius: 999px;
  font-size: 0.95em;
}
.rl-facility-amen-note {
  color: var(--rl-fac-text-muted);
  margin-top: 0.75rem;
}

.rl-facility-pricing table,
.rl-facility-hours {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0;
}
.rl-facility-pricing th,
.rl-facility-pricing td,
.rl-facility-hours th,
.rl-facility-hours td {
  padding: 0.6em 0.85em;
  border-bottom: 1px solid var(--rl-fac-line);
  text-align: left;
  color: var(--rl-fac-text);
}
.rl-facility-pricing thead th,
.rl-facility-hours thead th {
  color: var(--rl-fac-text-muted);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Rate columns (Per hour / Per day) — right-align the amounts. */
.rl-facility-pricing th:not(:first-child),
.rl-facility-pricing td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rl-facility-hours .rl-facility-hours-closed {
  color: var(--rl-fac-text-muted);
  font-style: italic;
}

/* ------------------------------------------------------------------
 * Deposit + refund policy cards (Details & Pricing, under the rates).
 *
 * Both answer a money question the renter has before booking, so they
 * sit side by side as cards instead of trailing the table as fine
 * print. auto-fit collapses them to a single column under ~520px.
 * ------------------------------------------------------------------ */
.rl-facility-policies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
/* A lone card (deposit only, no refund policy configured) shouldn't stretch
 * the full content width — cap it so it still reads as a card. */
.rl-facility-policies:has(> :only-child) {
  grid-template-columns: minmax(240px, 26rem);
}
.rl-facility-policy {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rl-fac-line);
  border-radius: 10px;
  background: var(--rl-fac-surface);
}
.rl-facility-policy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--color-primary-white, #ffffff);
  border: 1px solid var(--rl-fac-line);
  color: var(--rl-fac-primary);
}
.rl-facility-policy-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.rl-facility-policy-lbl {
  color: var(--rl-fac-text-muted);
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rl-facility-policy-val {
  color: var(--rl-fac-heading);
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.rl-facility-policy-note {
  color: var(--rl-fac-text-muted);
  font-size: 0.875em;
  line-height: 1.45;
}

/* Refund card leans on the secondary brand tone so the pair reads as
 * two distinct facts rather than one repeated block. */
.rl-facility-policy[data-policy="refund"] {
  background: color-mix(in srgb, var(--rl-fac-secondary) 8%, transparent);
  border-color: color-mix(in srgb, var(--rl-fac-secondary) 25%, transparent);
}
.rl-facility-policy[data-policy="refund"] .rl-facility-policy-icon {
  color: var(--rl-fac-secondary);
  border-color: color-mix(in srgb, var(--rl-fac-secondary) 25%, transparent);
}

/* "No deposit required" — true but not a highlight; drop the tint so it
 * doesn't compete with the facts that cost the renter something. */
.rl-facility-policy.is-muted {
  background: transparent;
}
.rl-facility-policy.is-muted .rl-facility-policy-icon,
.rl-facility-policy.is-muted .rl-facility-policy-val {
  color: var(--rl-fac-text-muted);
}


/* Today's row on the main Details & Pricing hours table.
 * Left border in secondary + bold weight + soft secondary-tinted background
 * so users can lock onto today at a glance. */
.rl-facility-hours tbody tr.is-today {
  background: color-mix(in srgb, var(--rl-fac-secondary) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--rl-fac-secondary);
}
.rl-facility-hours tbody tr.is-today th,
.rl-facility-hours tbody tr.is-today td {
  color: var(--rl-fac-secondary);
  font-weight: 700;
}
/* Same treatment on the sidebar hours list. */
.rl-facility-sb-hours li.is-today {
  background: color-mix(in srgb, var(--rl-fac-secondary) 10%, transparent);
  border-radius: 6px;
  padding: 0.3em 0.5em;
  border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--rl-fac-secondary);
}
.rl-facility-sb-hours li.is-today .rl-facility-sb-day,
.rl-facility-sb-hours li.is-today .rl-facility-sb-range,
.rl-facility-sb-hours li.is-today .rl-facility-sb-closed {
  color: var(--rl-fac-secondary);
  font-weight: 700;
  font-style: normal;
}

/* Availability */

.rl-facility-avail-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.rl-facility-avail-form input[type="date"] {
  padding: 0.55em 0.75em;
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-text);
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  font: inherit;
  min-height: 44px;
}
.rl-facility-avail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  font-size: 0.85em;
  color: var(--rl-fac-text-muted);
  margin-bottom: 0.75rem;
  align-items: center;
}
.rl-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 0.25em;
  vertical-align: -1px;
}
.rl-legend-open {
  background: var(--rl-slot-open);
}
.rl-legend-booked {
  background: var(--rl-slot-booked);
}
.rl-legend-held {
  background: var(--rl-slot-held);
}
.rl-legend-buffer {
  background: var(--rl-slot-buffer);
}
.rl-legend-excluded {
  background: var(--rl-slot-excluded);
}
.rl-legend-out {
  background: var(--rl-slot-out);
}

.rl-facility-avail-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.35rem;
}
.rl-fac-slot {
  background: var(--color-primary-white, #ffffff);
  border: 1px solid var(--rl-fac-line);
  border-left: 4px solid var(--rl-slot-open);
  border-radius: 4px;
  padding: 0.4em 0.6em;
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.rl-fac-slot-time {
  font-weight: 600;
  color: var(--rl-fac-text);
}
.rl-fac-slot-label {
  color: var(--rl-fac-text-muted);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rl-fac-slot.rl-fac-slot-open {
  border-left-color: var(--rl-slot-open);
}
.rl-fac-slot.rl-fac-slot-booked {
  border-left-color: var(--rl-slot-booked);
}
.rl-fac-slot.rl-fac-slot-held {
  border-left-color: var(--rl-slot-held);
}
.rl-fac-slot.rl-fac-slot-buffer {
  border-left-color: var(--rl-slot-buffer);
}
.rl-fac-slot.rl-fac-slot-excluded {
  border-left-color: var(--rl-slot-excluded);
}
.rl-fac-slot.rl-fac-slot-out_of_hours {
  border-left-color: var(--rl-slot-out);
  opacity: 0.7;
}

.rl-fac-avail-empty,
.rl-fac-avail-error {
  color: var(--rl-fac-text);
  background: var(--rl-fac-surface-2);
  border: 1px dashed var(--rl-fac-line);
  padding: 0.75rem;
  border-radius: 6px;
}
.rl-fac-avail-error {
  color: #7a1e1f;
  border-color: color-mix(in srgb, #b32d2e 40%, transparent);
  background: color-mix(in srgb, #b32d2e 8%, transparent);
}

/* Calendar */

.rl-facility-cal-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.rl-facility-cal-label {
  flex: 1 1 auto;
  font-weight: 600;
  text-align: center;
  color: var(--rl-fac-heading);
}
.rl-facility-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--rl-fac-line);
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  overflow: hidden;
}
.rl-fac-cal-dow {
  background: var(--rl-fac-surface-2);
  padding: 0.4em 0.5em;
  font-size: 0.85em;
  text-align: center;
  color: var(--rl-fac-text-muted);
  font-weight: 600;
}
.rl-fac-cal-cell {
  background: var(--color-primary-white, #ffffff);
  padding: 0.4em 0.5em;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 0.85em;
}
.rl-fac-cal-cell-empty {
  background: var(--rl-fac-surface);
}
.rl-fac-cal-day {
  font-weight: 600;
  color: var(--rl-fac-heading);
}
.rl-fac-cal-today .rl-fac-cal-day {
  color: var(--rl-fac-secondary);
  position: relative;
}
.rl-fac-cal-today .rl-fac-cal-day::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rl-fac-secondary);
}
.rl-fac-cal-event {
  display: block;
  padding: 0.15em 0.35em;
  border-radius: 3px;
  font-size: 0.82em;
  background: var(--rl-fac-surface-2);
  color: var(--rl-fac-text);
  border-left: 3px solid var(--rl-slot-buffer);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-fac-cal-event-closed {
  border-left-color: var(--rl-slot-excluded);
  font-style: italic;
}
.rl-fac-cal-event-reservation {
  border-left-color: var(--rl-slot-booked);
}
.rl-fac-cal-event-activity {
  border-left-color: var(--rl-slot-held);
}

/* Photos */

.rl-facility-photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.rl-facility-photos li {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--rl-fac-surface-2);
  border-radius: 6px;
  overflow: hidden;
}
.rl-facility-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rl-facility-address {
  font-style: normal;
  color: var(--rl-fac-text);
  line-height: 1.55;
  margin: 0 0 0.75rem;
}

.rl-facility-map {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--rl-fac-surface-2);
  border: 1px solid var(--rl-fac-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5rem 0 0.75rem;
}
.rl-facility-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Sidebar */

.rl-facility-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Sticky behaviour tuned so the user sees the full sidebar before it
   * pins. The JS helper `stickifySidebar` (facilities.js) computes the
   * correct top offset from the sidebar's own height:
   *   - Sidebar SHORTER than viewport → sticks at top: 8rem (visible top).
   *   - Sidebar TALLER than viewport → sticks with its bottom pinned near
   *     the viewport bottom (via a negative top offset). The user scrolls
   *     the main content past the sidebar's END before it pins, so nothing
   *     is hidden behind an internal scrollbar.
   *
   * The CSS default of `top: 8rem` is the short-sidebar case; JS overrides
   * with a `--rl-fac-sticky-top` custom property when the sidebar is too
   * tall to fit. Both cases use align-self:start so grid stretch doesn't
   * fight the sticky calculation. */
  position: sticky;
  top: var(--rl-fac-sidebar-top, 8rem);
  align-self: start;
}
.rl-facility-card {
  background: var(--rl-fac-surface);
  border: 1px solid var(--rl-fac-line);
  /* Coloured spine on the left — gives the whole sidebar column a visual
   * rhythm that echoes the primary+secondary theme without repainting
   * the whole card surface. 4px is enough to register at a glance;
   * left-padding is bumped to compensate for the extra visual weight. */
  border-left: 4px solid var(--rl-fac-secondary);
  border-radius: 10px;
  /* Contain any unbreakable content (long emails, URLs) so it can't push
   * the whole sidebar wider than its 320px grid column. */
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 1rem 1.25rem 1rem 1.15rem;
}
.rl-facility-card h3 {
  margin: 0 0 0.5em;
  color: var(--rl-fac-heading);
  font-size: var(--fs-20, 18px);
  padding-left: 10px;
  position: relative;
}
.rl-facility-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 2px;
  background: var(--rl-fac-secondary);
}
.rl-facility-sb-hours,
.rl-facility-sb-contact,
.rl-facility-sb-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-size: 0.95em;
}
.rl-facility-sb-hours li {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  border-bottom: 1px dashed var(--rl-fac-line);
  padding-bottom: 0.35em;
}
.rl-facility-sb-hours li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.rl-facility-sb-hours .rl-facility-sb-day {
  color: var(--rl-fac-text-muted);
}
.rl-facility-sb-hours .rl-facility-sb-range {
  color: var(--rl-fac-text);
  font-weight: 500;
}
.rl-facility-sb-hours .rl-facility-sb-closed {
  color: var(--rl-fac-text-muted);
  font-style: italic;
}
.rl-facility-sb-lbl {
  color: var(--rl-fac-text-muted);
  font-weight: 500;
}
.rl-facility-sb-contact a {
  color: var(--color-tertiary, #1b6ca8);
}
.rl-facility-sb-contact a:hover {
  color: var(--color-tertiary-hover, #155688);
}
/* Long emails / phone strings have no whitespace and would otherwise
 * overflow the 320px sidebar card. `overflow-wrap: anywhere` lets the
 * browser break at any character when it must, and `word-break: break-word`
 * is the equivalent safety-net for older engines. `min-width: 0` on the
 * <li> defeats the flex-item min-width rule that otherwise refuses to
 * shrink below the intrinsic content width. */
.rl-facility-sb-contact li {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rl-facility-sb-contact a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------- Quote form ------- */
.rl-facility-quote {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem 1.15rem;
  background: color-mix(in srgb, var(--rl-fac-primary) 5%, transparent);
  border: 1px solid var(--rl-fac-line);
  border-radius: 8px;
}
.rl-facility-quote h3 {
  margin-top: 0;
  color: var(--rl-fac-heading);
}
.rl-facility-help {
  margin: 0.25rem 0 0.85rem;
  color: var(--rl-fac-text-muted);
  font-size: 0.92em;
}

.rl-facility-quote-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 0.75rem;
}
.rl-facility-quote-field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.rl-facility-quote-lbl {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--rl-fac-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rl-facility-quote-form select,
.rl-facility-quote-form input[type="date"],
.rl-facility-quote-form input[type="time"] {
  padding: 0.55em 0.75em;
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-text);
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  font: inherit;
  min-height: 44px;
}
.rl-facility-quote-form fieldset {
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  padding: 0.5rem 0.85rem 0.75rem;
  margin: 0 0 0.75rem;
}
.rl-facility-quote-form fieldset legend {
  padding: 0 0.35em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--rl-fac-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rl-facility-quote-blockset {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.rl-facility-quote-blockset label {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.35em 0;
  cursor: pointer;
}
.rl-facility-quote-blockset input[type="checkbox"] {
  transform: scale(1.1);
  accent-color: var(--rl-fac-primary);
}
.rl-facility-quote-blockset .rl-facility-quote-block-meta {
  color: var(--rl-fac-text-muted);
  font-size: 0.9em;
}

.rl-facility-quote-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.rl-facility-quote-result {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--color-primary-white, #ffffff);
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
}
.rl-facility-quote-result h4 {
  margin: 0 0 0.5em;
  color: var(--rl-fac-heading);
  font-size: var(--fs-20, 18px);
}
.rl-facility-quote-result table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.35rem 0 0.75rem;
  font-size: 0.95em;
}
.rl-facility-quote-result th,
.rl-facility-quote-result td {
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--rl-fac-line);
  text-align: left;
}
.rl-facility-quote-result th {
  color: var(--rl-fac-text-muted);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rl-facility-quote-result td.rl-num {
  /* text-align: right; */
  font-variant-numeric: tabular-nums;
}
.rl-facility-quote-result tfoot td {
  font-weight: 700;
  color: var(--rl-fac-heading);
  border-bottom: 0;
  border-top: 2px solid var(--rl-fac-line);
}
/* Total row — secondary-tinted background + heavier weight so the final
 * figure is unmistakable at a glance. */
.rl-facility-quote-result tfoot tr.is-total td {
  background: color-mix(in srgb, var(--rl-fac-secondary) 12%, transparent);
  color: var(--rl-fac-secondary);
  font-size: 1.05em;
  border-top: 2px solid var(--rl-fac-secondary);
}
.rl-facility-quote-notes {
  color: var(--rl-fac-text-muted);
  font-size: 0.9em;
  margin: 0.4rem 0 0;
}
.rl-facility-quote-error {
  background: color-mix(in srgb, #b32d2e 8%, transparent);
  border-color: color-mix(in srgb, #b32d2e 40%, transparent);
  color: #7a1e1f;
}

.rl-facility-quote-contact {
  margin: 0.85rem 0 0;
  color: var(--rl-fac-text-muted);
  font-size: 0.9em;
}

/* ============================================================
 * ICS calendar subscribe (Flow F)
 * ------------------------------------------------------------
 * Sits at the bottom of the Calendar section. Hidden until the
 * detail response ships a feed URL.
 * ========================================================== */
.rl-facility-ics {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem 1.15rem;
  background: color-mix(in srgb, var(--rl-fac-secondary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-fac-secondary) 22%, transparent);
  border-radius: 8px;
}
.rl-facility-ics .rl-facility-subh {
  margin-top: 0;
}
.rl-facility-ics-help {
  margin: 0.25rem 0 0.75rem;
  color: var(--rl-fac-text-muted);
  font-size: 0.92em;
}
.rl-facility-ics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0.5rem;
}
.rl-facility-ics-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 14px;
  border: 1.5px solid #bcbcbc;
  border-radius: 6px;
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-text);
  font: inherit;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 48px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.rl-facility-ics-input:focus {
  outline: none;
  border-color: var(--rl-fac-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
}
.rl-facility-ics-copied {
  margin: 0 0 0.5rem;
  color: var(--rl-fac-secondary);
  font-size: 0.9em;
  font-weight: 600;
}

.rl-facility-ics-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.rl-facility-ics-app {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.95em;
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-primary);
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 30%, transparent);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 600;
  min-height: 40px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.rl-facility-ics-app:hover {
  background: var(--rl-fac-primary);
  color: var(--color-primary-white, #ffffff);
  border-color: var(--rl-fac-primary);
}
.rl-facility-ics-app-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

@media (max-width: 640px) {
  .rl-facility-ics-input {
    flex: 1 1 100%;
  }
  .rl-facility-ics-apps {
    flex-direction: column;
    align-items: stretch;
  }
  .rl-facility-ics-app {
    justify-content: center;
  }
}

/* ============================================================
 * Photo lightbox
 * ------------------------------------------------------------
 * Full-screen modal with big image + prev/next/close controls.
 * The lightbox is `position: fixed` at the page root so it escapes
 * any theme container transforms/overflow. All internal buttons are
 * neutralised against the theme's global button pill styling via the
 * `::before`/`::after` overrides below.
 * ========================================================== */
.rl-fac-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-fac-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  cursor: pointer;
}
.rl-fac-lightbox-stage {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rl-fac-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.rl-fac-lightbox-caption {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  max-width: 720px;
}
.rl-fac-lightbox-counter {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Close / prev / next — flat icon buttons over the backdrop. Sizes match
 * WCAG 2.5.5 target-size minimum (44×44). */
.rl-fac-lightbox-close,
.rl-fac-lightbox-nav {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.rl-fac-lightbox-close:hover,
.rl-fac-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}
.rl-fac-lightbox-close:focus-visible,
.rl-fac-lightbox-nav:focus-visible {
  outline: 3px solid var(--rl-fac-focus);
  outline-offset: 3px;
}
.rl-fac-lightbox-close {
  top: max(env(safe-area-inset-top, 0px), 16px);
  right: max(env(safe-area-inset-right, 0px), 16px);
}
.rl-fac-lightbox-prev {
  left: max(env(safe-area-inset-left, 0px), 16px);
}
.rl-fac-lightbox-next {
  right: max(env(safe-area-inset-right, 0px), 16px);
}

/* Neutralise the theme's global button::before/::after (pill background
 * circles) on lightbox controls — they'd otherwise appear as coloured
 * blobs floating over the backdrop. */
.rl-fac-lightbox-close::before,
.rl-fac-lightbox-close::after,
.rl-fac-lightbox-nav::before,
.rl-fac-lightbox-nav::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Thumbnail = <button> so the whole tile is one keyboard-focusable
 * activator. Overrides the theme's global button styling for our
 * gallery tiles specifically. */
.rl-facility-photo-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.rl-facility-photo-btn::before,
.rl-facility-photo-btn::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}
.rl-facility-photo-btn img {
  transition: transform 0.35s ease;
}
.rl-facility-photo-btn:hover img,
.rl-facility-photo-btn:focus-visible img {
  transform: scale(1.05);
}
.rl-facility-photo-btn:focus-visible {
  outline: 3px solid var(--rl-fac-focus);
  outline-offset: -3px;
}

/* Small-screen tweaks — pull nav buttons closer to the image on phones */
@media (max-width: 640px) {
  .rl-fac-lightbox-close,
  .rl-fac-lightbox-nav {
    width: 40px;
    height: 40px;
  }
  .rl-fac-lightbox-img {
    max-height: 72vh;
  }
  .rl-fac-lightbox-prev {
    left: 8px;
  }
  .rl-fac-lightbox-next {
    right: 8px;
  }
  .rl-fac-lightbox-close {
    top: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-facility-photo-btn img {
    transition: none;
  }
}

/* ============================================================
 * Date + Time picker
 * ------------------------------------------------------------
 * Custom popover replacing the native <input type="date"|type="time">
 * pickers. The trigger is a <span class="rl-fac-picker-field"> wrapping
 * a readonly <input> + an icon <button>. Clicking anywhere on the field
 * (or the icon) opens the popover. Popover UI matches the reference
 * screenshots — calendar grid with month/year header, or two-column
 * hour/minute lists for time.
 * ========================================================== */
.rl-fac-picker-field {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 100%;
}
.rl-fac-picker-field input[data-rl-picker-input] {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  padding-right: 44px !important;
  background-image: none !important;
}
.rl-fac-picker-field input[data-rl-picker-input]:focus {
  outline: none;
  border-color: var(--rl-fac-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
}
.rl-fac-picker-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--rl-fac-primary);
  cursor: pointer;
  padding: 0;
}
.rl-fac-picker-icon:hover {
  background: color-mix(in srgb, var(--rl-fac-primary) 8%, transparent);
}
.rl-fac-picker-icon:focus-visible {
  outline: 3px solid var(--rl-fac-focus);
  outline-offset: 2px;
}

/* Popover */
.rl-fac-picker {
  position: absolute;
  z-index: 40;
  background: var(--color-primary-white, #ffffff);
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 15%, transparent);
  border-radius: 12px;
  box-shadow: 0 12px 40px
    color-mix(in srgb, var(--rl-fac-primary) 22%, transparent);
  padding: 14px;
  min-width: 280px;
  color: var(--rl-fac-text);
  font-size: 14px;
}
.rl-fac-picker[hidden] {
  display: none;
}

/* --- Calendar ------------------------------------------------ */
.rl-fac-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.rl-fac-picker-monthlbl {
  font-weight: 700;
  color: var(--rl-fac-heading);
  font-size: 15px;
  padding: 6px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rl-fac-picker-navbtn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--rl-fac-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rl-fac-picker-navbtn:hover {
  color: var(--rl-fac-primary);
  background: color-mix(in srgb, var(--rl-fac-primary) 8%, transparent);
}
.rl-fac-picker-nav {
  display: inline-flex;
  gap: 2px;
}

.rl-fac-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.rl-fac-picker-dow {
  text-align: center;
  font-size: 12px;
  color: var(--rl-fac-text-muted);
  font-weight: 600;
  padding: 6px 0 4px;
}
.rl-fac-picker-day {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--rl-fac-text);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.rl-fac-picker-day:hover:not([disabled]) {
  background: color-mix(in srgb, var(--rl-fac-primary) 10%, transparent);
  color: var(--rl-fac-primary);
}
.rl-fac-picker-day.is-out {
  color: var(--rl-fac-text-muted);
  opacity: 0.55;
}
.rl-fac-picker-day.is-today {
  outline: 1.5px solid var(--rl-fac-primary);
  outline-offset: -1.5px;
  font-weight: 700;
}
.rl-fac-picker-day.is-selected,
.rl-fac-picker-day.is-selected:hover {
  background: var(--color-tertiary, #1b6ca8);
  color: #ffffff;
  font-weight: 700;
}
.rl-fac-picker-day[disabled] {
  color: color-mix(in srgb, var(--rl-fac-text-muted) 60%, transparent);
  cursor: not-allowed;
}

.rl-fac-picker-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid
    color-mix(in srgb, var(--rl-fac-primary) 12%, transparent);
}
.rl-fac-picker-quick {
  border: 0;
  background: transparent;
  color: var(--rl-fac-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.rl-fac-picker-quick:hover {
  background: color-mix(in srgb, var(--rl-fac-primary) 8%, transparent);
}

/* --- Time --------------------------------------------------- */
.rl-fac-picker-time {
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-height: 220px;
}
.rl-fac-picker-timecol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  max-height: 220px;
  gap: 4px;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--rl-fac-primary) 35%, transparent)
    transparent;
}
.rl-fac-picker-timeitem {
  border: 0;
  background: transparent;
  color: var(--rl-fac-text);
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  min-height: 36px;
}
.rl-fac-picker-timeitem:hover {
  background: color-mix(in srgb, var(--rl-fac-primary) 10%, transparent);
}
.rl-fac-picker-timeitem.is-selected {
  background: var(--color-tertiary, #1b6ca8);
  color: var(--color-primary-white, #ffffff);
  font-weight: 700;
}
.rl-fac-picker-timesep {
  align-self: center;
  color: var(--rl-fac-text-muted);
  font-weight: 700;
}

@media (max-width: 480px) {
  .rl-fac-picker {
    min-width: 260px;
  }
  .rl-fac-picker-day {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .rl-fac-picker-time {
    min-height: 200px;
  }
  .rl-fac-picker-timecol {
    max-height: 200px;
  }
}

/* ============================================================
 * Aggregate calendar (Flow F)
 * ------------------------------------------------------------
 * Reuses the .rl-facility-cal grid + .rl-fac-cal-* cell classes
 * from the per-facility calendar. Adds a day-detail modal for
 * when a cell has more events than fit inline.
 * ========================================================== */
.rl-facilities-aggcal .rl-fac-header {
  margin-bottom: 1rem;
}
.rl-aggcal-filters {
  margin-bottom: 0.75rem;
}
.rl-aggcal-controls {
  justify-content: center;
  margin-bottom: 0.75rem;
}
.rl-aggcal-grid {
  min-height: 320px;
}
.rl-aggcal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--rl-fac-surface);
  border: 1px solid var(--rl-fac-line);
  border-radius: 8px;
}
.rl-aggcal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rl-aggcal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  color: var(--rl-fac-text-muted);
}
.rl-aggcal-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  border-left: 3px solid transparent;
}
.rl-aggcal-legend-reservation {
  border-left-color: var(--rl-slot-booked);
  background: color-mix(
    in srgb,
    var(--rl-slot-booked) 20%,
    var(--color-primary-white, #fff)
  );
}
.rl-aggcal-legend-activity {
  border-left-color: var(--rl-slot-held);
  background: color-mix(
    in srgb,
    var(--rl-slot-held) 22%,
    var(--color-primary-white, #fff)
  );
}
.rl-aggcal-legend-closed {
  border-left-color: var(--rl-slot-excluded);
  background: color-mix(
    in srgb,
    var(--rl-slot-excluded) 18%,
    var(--color-primary-white, #fff)
  );
}
.rl-aggcal-count {
  margin: 0;
  color: var(--rl-fac-text-muted);
  font-size: 0.9em;
}

/* Reservation events on the aggregate grid are <a> links; give them the
 * standard cursor + hover. .rl-aggcal-more is a <button> that opens the
 * day-detail modal. */
.rl-aggcal-grid a.rl-fac-cal-event,
.rl-aggcal-more {
  cursor: pointer;
  border: 0;
  font: inherit;
  color: var(--rl-fac-text);
  text-decoration: none;
}
.rl-aggcal-more {
  background: color-mix(in srgb, var(--rl-fac-primary) 8%, transparent);
  color: var(--rl-fac-primary);
  font-weight: 600;
}
.rl-aggcal-more::before,
.rl-aggcal-more::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}
.rl-aggcal-grid a.rl-fac-cal-event:hover {
  filter: brightness(0.92);
}

/* Day-detail modal (opened by the "+N more" chip). */
.rl-aggcal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rl-aggcal-modal {
  background: var(--color-primary-white, #ffffff);
  color: var(--rl-fac-text);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}
.rl-aggcal-modal-title {
  margin: 0 0 1rem;
  padding-right: 40px;
  color: var(--rl-fac-heading);
  font-size: 1.15rem;
}
.rl-aggcal-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rl-fac-line);
  background: transparent;
  color: var(--rl-fac-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rl-aggcal-modal-close::before,
.rl-aggcal-modal-close::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}
.rl-aggcal-modal-close:hover {
  background: var(--rl-fac-surface-2);
}
.rl-aggcal-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rl-aggcal-modal-list li {
  margin: 0;
  padding: 0;
}
.rl-aggcal-modal-event {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--rl-fac-surface);
  color: var(--rl-fac-text);
  text-decoration: none;
  border-left: 3px solid var(--rl-slot-buffer);
  white-space: normal;
}
.rl-aggcal-modal-event:hover {
  background: var(--rl-fac-surface-2);
}
.rl-aggcal-modal-event.rl-fac-cal-event-reservation {
  border-left-color: var(--rl-slot-booked);
}
.rl-aggcal-modal-event.rl-fac-cal-event-activity {
  border-left-color: var(--rl-slot-held);
}
.rl-aggcal-modal-event.rl-fac-cal-event-closed {
  border-left-color: var(--rl-slot-excluded);
  font-style: italic;
}
.rl-aggcal-modal-time {
  color: var(--rl-fac-text-muted);
  font-size: 0.9em;
}

/* ============================================================
 * Responsive
 * ========================================================== */

/* Tablets and small laptops (≤ 899px): sidebar drops below main. */
@media (max-width: 899px) {
  .rl-facility-layout {
    gap: 1rem;
  }
  .rl-facility-sidebar {
    order: 2;
    /* Once the sidebar stacks below, sticky positioning has no room to work —
     * disable it so the sidebar scrolls normally with the page. */
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
    /* Sidebar hours can go wide on tablets — cap width so it doesn't stretch. */
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .rl-facility-main {
    order: 1;
  }
}

/* Phones (≤ 640px) */
@media (max-width: 640px) {
  .rl-facilities,
  .rl-facility {
    padding: 1rem 0.75rem;
  }

  .rl-fac-header {
    margin-bottom: 1rem;
  }
  .rl-fac-title {
    font-size: clamp(1.4rem, 5vw, 1.75rem);
  }

  .rl-fac-filters {
    padding: 0.85rem;
    margin-bottom: 1rem;
  }
  .rl-fac-chipset {
    margin-bottom: 0.75rem;
  }
  .rl-fac-legend {
    font-size: 1rem;
  }

  .rl-fac-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .rl-facility-hero {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .rl-facility-hero-body {
    padding: 0.25rem 0;
  }
  .rl-facility-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .rl-facility-section {
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
  }
  .rl-facility-section h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5em;
  }
  .rl-facility-section h3.rl-facility-subh {
    font-size: 1rem;
    margin: 1rem 0 0.4em;
  }

  .rl-facility-secnav {
    border-radius: 8px;
    margin-bottom: 0.75rem;
  }
  .rl-facility-secnav-inner {
    padding: 0.4rem;
    gap: 0.2rem;
  }
  .rl-facility-secnav-inner a {
    padding: 0.5em 0.75em;
    font-size: 0.88em;
  }

  /* Availability slots — 2 per row minimum on tight screens */
  .rl-facility-avail-slots {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.3rem;
  }

  /* Calendar — smaller cells so 7 columns fit without horizontal scroll */
  .rl-fac-cal-cell {
    min-height: 58px;
    padding: 0.3em 0.35em;
    font-size: 0.78em;
  }
  .rl-fac-cal-dow {
    padding: 0.3em 0.25em;
    font-size: 0.75em;
  }
  .rl-fac-cal-event {
    font-size: 0.75em;
    padding: 0.1em 0.3em;
  }

  /* Sub-space cards — single column on phones */
  .rl-facility-spaces-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .rl-facility-spaces-grid .rl-fac-card-link {
    grid-template-columns: 1fr;
  }
  .rl-facility-spaces-grid .rl-fac-card,
  .rl-facility-spaces-grid .rl-fac-card-img {
    min-height: 0;
  }
  .rl-facility-spaces-grid .rl-fac-card-img {
    aspect-ratio: 16 / 9;
  }

  /* Sidebar cards */
  .rl-facility-card {
    padding: 0.85rem 1rem;
  }

  /* Photos — 2 per row on phones */
  .rl-facility-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  /* Pagination — smaller buttons */
  .rl-fac-page-btn {
    min-width: 40px;
    padding: 0.3em 0.55em;
  }

  /* Card body compacter */
  .rl-fac-card-body {
    padding: 0.75rem 0.85rem 0.85rem;
    gap: 0.25em;
  }
  .rl-fac-card-title {
    font-size: 1.05rem;
  }

  /* Map — a bit taller on mobile so labels are readable */
  .rl-facility-map {
    aspect-ratio: 4 / 3;
  }

  /* Hero media stacks first */
  .rl-facility-hero-media {
    aspect-ratio: 16 / 10;
  }
}

/* Small phones (≤ 380px) — extra polish so nothing overflows */
@media (max-width: 380px) {
  .rl-fac-slot {
    font-size: 0.85em;
    padding: 0.35em 0.5em;
  }
  .rl-fac-cal-cell {
    min-height: 50px;
  }
  .rl-facility-avail-legend {
    font-size: 0.78em;
    gap: 0.5em;
  }
  .rl-facility-avail-form input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
  .rl-facilities .rl-btn,
  .rl-facility .rl-btn,
  .rl-facility-secnav-inner a[aria-current="location"] {
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }
  .rl-fac-slot {
    border-left-width: 6px;
  }
}

/* ============================================================
   Reservations — space switcher, tri-state slots, booking form
   ============================================================
   Guide reference: reservations-headless-api-guide.md §§B, C, D.
   Colours here are tuned for WCAG 2.1 AA contrast against the
   card background (see --rl-fac-surface / --rl-fac-surface-2).
*/

:root {
  /* Tri-state slot colours dedicated to the reservations endpoint.
     These are SEMANTIC status colours — availability signals the same
     thing on every tenant, so we deliberately do NOT thread these
     through the theme's brand tokens (--reclite-color-secondary is
     an amber on some tenants which would paint "Available" orange).
     Fixed hex values verified for WCAG 1.4.11 contrast (≥ 3:1) on
     white backgrounds and as background-mix tints. */
  --rl-slot-available: #16803a; /* "go" green */
  --rl-slot-occupied: #8a1f21; /* red-brown */
}

/* Space switcher --------------------------------------------------- */

.rl-facility-space-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--rl-fac-surface-2, #f5f5f5);
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
}
.rl-facility-space-switch-lbl {
  font-weight: 600;
  color: var(--rl-fac-text);
}
.rl-facility-space-select {
  min-height: 44px; /* WCAG 2.5.5 target size on mobile           */
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text);
  font: inherit;
  min-width: 0;
  flex: 1 1 220px;
}
.rl-facility-space-select:focus {
  outline: 2px solid var(--color-primary-green, #00662c);
  outline-offset: 2px;
}

/* Legend ---------------------------------------------------------- */

.rl-facility-avail-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--rl-fac-text);
}
.rl-legend-available {
  background: var(--rl-slot-available);
}
.rl-legend-occupied {
  background: var(--rl-slot-occupied);
}

/* Slot statuses --------------------------------------------------- */

/* Green tint over white so an "available" slot reads as GO at a glance
 * — colour alone isn't accessible, so the text label still says
 * "Available" (WCAG 1.4.1), but the tint speeds up scanning.
 *
 * Specificity note: the base <button class="rl-fac-slot"> rule at line
 * ~2740 uses `button.rl-fac-slot` (0,1,1), and its `:hover` uses
 * `button.rl-fac-slot:hover` (0,2,1). A plain
 * `.rl-fac-slot.rl-fac-slot-available` (0,2,0) wins the base cascade
 * but LOSES on :hover — the green tint would revert to white on
 * hover. We repeat the rule with `button.rl-fac-slot.rl-fac-slot-available`
 * (0,2,1) and its hover/active/focus variants (0,3,1) to hold the
 * green through every interaction state. */
.rl-fac-slot.rl-fac-slot-available,
button.rl-fac-slot.rl-fac-slot-available,
button.rl-fac-slot.rl-fac-slot-available:hover,
button.rl-fac-slot.rl-fac-slot-available:active,
button.rl-fac-slot.rl-fac-slot-available:focus,
button.rl-fac-slot.rl-fac-slot-available:focus-visible {
  border-left-color: var(--rl-slot-available);
  background: color-mix(
    in srgb,
    var(--rl-slot-available) 12%,
    var(--color-primary-white, #fff)
  );
  color: var(--rl-fac-heading, #3c3c3c);
}
/* Slightly darker on hover so interaction is visible while keeping the
 * green language consistent. */
button.rl-fac-slot.rl-fac-slot-available:hover,
button.rl-fac-slot.rl-fac-slot-available:active {
  background: color-mix(
    in srgb,
    var(--rl-slot-available) 20%,
    var(--color-primary-white, #fff)
  );
}
.rl-fac-slot.rl-fac-slot-available .rl-fac-slot-label,
button.rl-fac-slot.rl-fac-slot-available .rl-fac-slot-label {
  color: var(--rl-slot-available);
  font-weight: 700;
}
.rl-fac-slot.rl-fac-slot-occupied {
  border-left-color: var(--rl-slot-occupied);
  /* Slight tint so occupied reads as "unavailable" even without colour
     perception — a background shift plus the label text. */
  background: color-mix(
    in srgb,
    var(--rl-slot-occupied) 6%,
    var(--color-primary-white, #fff)
  );
}
.rl-fac-slot.rl-fac-slot-held {
  border-left-color: var(--rl-slot-held);
  background: color-mix(
    in srgb,
    var(--rl-slot-held) 6%,
    var(--color-primary-white, #fff)
  );
}

.rl-facility-avail-note {
  margin: 0.75rem 0 0;
  font-style: italic;
}

/* Booking form ---------------------------------------------------- */

.rl-facility-book {
  margin-top: 1.25rem;
}
.rl-facility-book-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.rl-facility-book-row-2 {
  flex-direction: row;
  flex-wrap: wrap;
}
.rl-facility-book-row-2 .rl-facility-quote-field {
  flex: 1 1 220px;
  min-width: 0;
}
.rl-facility-book-form textarea {
  width: 100%;
  min-height: 5.5em;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text);
  font: inherit;
  resize: vertical;
}
.rl-facility-book-form input[type="text"],
.rl-facility-book-form input[type="number"] {
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text);
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.rl-facility-book-form input:focus,
.rl-facility-book-form textarea:focus {
  outline: 2px solid var(--color-primary-green, #00662c);
  outline-offset: 2px;
}
.rl-facility-book-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.rl-facility-book-actions .reclite_primary_btn {
  min-height: 44px;
  min-width: 44px;
}
.rl-required-mark {
  color: #b32d2e;
  margin-right: 0.15em;
}

.rl-facility-book-errors {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, #b32d2e 8%, transparent);
  border: 1px solid color-mix(in srgb, #b32d2e 40%, transparent);
  border-radius: 6px;
  color: #7a1e1f;
}
.rl-facility-book-errors ul {
  margin: 0;
  padding-left: 1.1em;
}
.rl-facility-book-errors:focus {
  outline: 2px solid #b32d2e;
  outline-offset: 2px;
}

/* Sign-in inline card -------------------------------------------- */

.rl-facility-book-signin {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--rl-fac-surface-2, #f5f5f5);
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
}
.rl-facility-book-signin-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.rl-facility-book-signin-row .rl-facility-quote-field {
  flex: 1 1 220px;
}
.rl-facility-book-signin input {
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--rl-fac-line);
  border-radius: 6px;
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text);
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.rl-facility-book-signin input:focus {
  outline: 2px solid var(--color-primary-green, #00662c);
  outline-offset: 2px;
}
.rl-facility-book-signin-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.rl-facility-book-signin-alt {
  color: var(--rl-fac-text);
  text-decoration: underline;
}
.rl-facility-book-signin-alt:focus {
  outline: 2px solid var(--color-primary-green, #00662c);
  outline-offset: 2px;
}
.rl-facility-book-signin-err {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  color: #7a1e1f;
  background: color-mix(in srgb, #b32d2e 8%, transparent);
  border: 1px solid color-mix(in srgb, #b32d2e 40%, transparent);
  border-radius: 6px;
}

/* Conflicts / retry / confirm panels ---------------------------- */

.rl-facility-book-conflicts,
.rl-facility-book-retry {
  margin-top: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, #b32d2e 6%, transparent);
  border: 1px solid color-mix(in srgb, #b32d2e 45%, transparent);
  border-radius: 6px;
  color: var(--rl-fac-text);
}
.rl-facility-book-conflicts:focus {
  outline: 2px solid #b32d2e;
  outline-offset: 2px;
}
.rl-facility-book-conflict-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1em;
}

.rl-facility-book-confirm {
  margin-top: 1rem;
  padding: 1rem;
  background: color-mix(
    in srgb,
    var(--color-primary-green, #00662c) 6%,
    transparent
  );
  border: 1px solid
    color-mix(in srgb, var(--color-primary-green, #00662c) 45%, transparent);
  border-radius: 6px;
  color: var(--rl-fac-text);
}
.rl-facility-book-confirm:focus {
  outline: 2px solid var(--color-primary-green, #00662c);
  outline-offset: 2px;
}
.rl-facility-book-confirm-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0;
}
.rl-facility-book-confirm-dl dt {
  font-weight: 600;
  color: var(--rl-fac-text-muted);
}
.rl-facility-book-confirm-dl dd {
  margin: 0;
}
.rl-facility-book-charges {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.rl-facility-book-charges th,
.rl-facility-book-charges td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--rl-fac-line);
  text-align: left;
}
.rl-facility-book-confirm-next {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Mobile ---------------------------------------------------------- */

@media (max-width: 480px) {
  .rl-facility-book-row-2 {
    flex-direction: column;
  }
  /* In the column layout the base `flex: 1 1 220px` becomes a 220px VERTICAL
     basis (+ grow), ballooning each field into a tall block with dead space
     below its input. Pin fields to their content height when stacked. */
  .rl-facility-book-row-2 .rl-facility-quote-field {
    flex: 0 0 auto;
  }
  .rl-facility-book-signin-row {
    flex-direction: column;
  }
  .rl-facility-book-signin-row .rl-facility-quote-field {
    flex: 0 0 auto;
  }
  .rl-facility-space-switch {
    flex-direction: column;
    align-items: stretch;
  }
  /* The select's `flex: 1 1 220px` would become a 220px VERTICAL basis in the
     column layout, making the dropdown 220px tall. Pin it to its 44px height. */
  .rl-facility-space-select {
    flex: 0 0 auto;
  }
}

/* Windows High Contrast Mode — reservations extras */
@media (forced-colors: active) {
  .rl-facility-book-conflicts,
  .rl-facility-book-confirm,
  .rl-facility-book-signin,
  .rl-facility-book-retry {
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }
  .rl-facility-space-select,
  .rl-facility-book-form input,
  .rl-facility-book-form textarea,
  .rl-facility-book-signin input {
    border: 2px solid CanvasText;
  }
}

/* ============================================================
   Selectable slots + selection bar + booking modal
   ============================================================
   The availability grid uses <button role="option"> for each
   available slot. Non-available slots stay as decorative <div>s.
*/

/* Slot buttons — strip the native <button> chrome so they read as
   cards, not form controls, while remaining fully interactive +
   keyboard-focusable. `appearance: none` handles WebKit / mobile
   Safari; the explicit resets cover everything the theme's global
   `button` rules might inject. */
button.rl-fac-slot {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
  min-height: 44px; /* WCAG 2.5.5 */
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  /* Base border already comes from .rl-fac-slot; make sure nothing
     from theme resets overrides it. */
  border-style: solid;
  /* Kill iOS tap-highlight so the card doesn't flash blue when tapped. */
  -webkit-tap-highlight-color: transparent;
  /* Some themes force button width to auto or max-content — the slot
     grid uses grid-template-columns to size cards, so let those win. */
  width: auto;
  margin: 0;
}
/* When any global theme rule tries to reassert (hover / active), keep
   the card-like presentation instead of the standard button-fill. */
button.rl-fac-slot:active,
button.rl-fac-slot:hover {
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text);
  text-decoration: none;
}
button.rl-fac-slot:hover {
  box-shadow:
    0 0 0 1px var(--rl-slot-available),
    0 1px 4px rgba(0, 0, 0, 0.08);
  border-color: var(--rl-slot-available);
}
button.rl-fac-slot:focus-visible {
  /* Pinned to --rl-slot-available (semantic green) so the focus ring
   * doesn't inherit the tenant's branded secondary colour. */
  outline: 2px solid var(--rl-slot-available);
  outline-offset: 2px;
}
/* Selected state — filled green with a bold left border and a ✓ glyph
 * top-right so colour isn't the sole signal (WCAG 1.4.1). Selector chain
 * `button.rl-fac-slot.rl-fac-slot-available.is-selected` (0,3,1) beats
 * both the base `.rl-fac-slot-available` rules (0,2,1) AND the
 * `:hover` rule (0,3,1 → same, later source wins — we place these AFTER
 * the hover block in the file). All colours pinned to --rl-slot-available
 * so tenant branding can't repaint them. */
button.rl-fac-slot.rl-fac-slot-available.is-selected,
button.rl-fac-slot.rl-fac-slot-available.is-selected:hover,
button.rl-fac-slot.rl-fac-slot-available.is-selected:active,
button.rl-fac-slot.rl-fac-slot-available.is-selected:focus {
  border-color: var(--rl-slot-available);
  border-left-color: var(--rl-slot-available);
  border-left-width: 6px;
  background: color-mix(
    in srgb,
    var(--rl-slot-available) 28%,
    var(--color-primary-white, #fff)
  );
  color: var(--rl-fac-heading, #3c3c3c);
  position: relative;
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--rl-slot-available) 40%, transparent);
}
button.rl-fac-slot.rl-fac-slot-available.is-selected .rl-fac-slot-label {
  color: var(--rl-slot-available);
  font-weight: 700;
}
button.rl-fac-slot.rl-fac-slot-available.is-selected::before {
  content: "\2713"; /* ✓ */
  position: absolute;
  top: 6px;
  right: 8px;
  font-weight: 700;
  color: var(--rl-slot-available);
  font-size: 1em;
  line-height: 1;
}

/* Non-available slots visually dim + not-allowed cursor. */
.rl-fac-slot[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.85;
}

/* Selection summary + CTA row shown once at least one slot is selected. */
.rl-facility-avail-selection {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: color-mix(
    in srgb,
    var(--color-primary-green, #00662c) 8%,
    transparent
  );
  border: 1px solid
    color-mix(in srgb, var(--color-primary-green, #00662c) 45%, transparent);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.rl-facility-avail-selection-summary {
  margin: 0;
  font-weight: 600;
  color: var(--rl-fac-text);
  flex: 1 1 260px;
}
.rl-facility-avail-selection-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rl-facility-avail-selection-actions .reclite_primary_btn {
  min-height: 44px;
}

/* Booking modal — a wider variant of the shared rl-modal shell.
   Roomier width + padding so form rows breathe on desktop. */
.rl-modal.rl-modal-booking {
  max-width: 860px;
  width: min(92vw, 860px);
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
.rl-modal.rl-modal-booking .rl-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--rl-fac-line);
  gap: 12px;
}
.rl-modal.rl-modal-booking .rl-modal-title {
  margin: 0;
  font-size: 1.25rem;
}
.rl-modal.rl-modal-booking .rl-modal-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--rl-fac-text-muted);
  padding: 4px 10px;
  min-height: 44px;
  min-width: 44px;
}
.rl-modal.rl-modal-booking .rl-modal-close:hover,
.rl-modal.rl-modal-booking .rl-modal-close:focus-visible {
  color: var(--rl-fac-text);
  outline: 2px solid var(--color-primary-green, #00662c);
  outline-offset: 2px;
  border-radius: 4px;
}
.rl-modal.rl-modal-booking .rl-modal-body {
  padding: 22px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.rl-modal-booking-actions {
  padding: 16px 28px;
  border-top: 1px solid var(--rl-fac-line);
  gap: 10px;
  background: var(--rl-fac-surface-2, #f5f5f5);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.rl-modal-booking-actions .reclite_primary_btn,
.rl-modal-booking-actions .rl-btn {
  min-height: 44px;
}

/* Sign-in inside the modal — reuse rl-facility-book-signin styles from
   the earlier block, but drop the outer background wrapper (modal body
   already provides that). */
.rl-booking-signin {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

@media (max-width: 480px) {
  .rl-modal.rl-modal-booking {
    max-height: 100vh;
    border-radius: 0;
  }
  .rl-modal-booking-actions {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: stretch;
  }
  .rl-modal-booking-actions .rl-btn,
  .rl-modal-booking-actions .reclite_primary_btn {
    flex: 1 1 auto;
  }
  .rl-facility-avail-selection {
    flex-direction: column;
    align-items: stretch;
    /* Stack top-aligned: the base rule's space-between is for the horizontal
       row layout and would otherwise spread these three blocks apart. */
    justify-content: flex-start;
  }
  .rl-facility-avail-selection-summary {
    /* In the column layout the base `flex: 1 1 260px` becomes a 260px VERTICAL
       basis that also grows, ballooning the "Selected …" line into a tall empty
       block. Pin it to its content height instead. */
    flex: 0 0 auto;
  }
}

@media (forced-colors: active) {
  button.rl-fac-slot.is-selected {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
  .rl-modal.rl-modal-booking {
    border: 2px solid CanvasText;
  }
}

/* ==================================================================
 * Duration-first availability (guide Flow B) — duration/block picker,
 * lawful start windows, day-at-a-glance occupancy grid, eligibility
 * reasons, and the Finance pay-link CTA. Status is always conveyed via
 * TEXT as well as colour (WCAG 1.4.1); a forced-colors fallback lives
 * at the bottom of this block.
 * ================================================================== */

/* Duration + Date sit as equal-width columns that bottom-align their
   controls, so the select never looks larger than the date field. */
.rl-facility-avail-form { align-items: flex-end; }
.rl-facility-avail-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  flex: 1 1 240px;
  min-width: 200px;
}
.rl-facility-avail-label {
  font-weight: 600;
  color: var(--rl-fac-heading, #3c3c3c);
}
/* Same box model + height on both controls so they read as a matched set. */
.rl-facility-avail-field select,
.rl-facility-avail-form .rl-fac-picker-field input[data-rl-picker-input] {
  box-sizing: border-box;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 30%, transparent);
  border-radius: 8px;
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text, #000);
  font: inherit;
}
.rl-facility-avail-field select {
  padding: 0.4rem 0.6rem;
}
.rl-facility-avail-form .rl-fac-picker-field input[data-rl-picker-input] {
  padding: 0.4rem 44px 0.4rem 0.6rem; /* room for the calendar icon */
}

.rl-facility-avail-blocks {
  /* Always drop onto its own full-width row, directly below the date field
     (the duration/rate-basis controls are hidden in block mode). */
  flex: 1 1 100%;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
  border-radius: 10px;
}
.rl-facility-avail-blocks legend {
  padding: 0 0.35rem;
}
.rl-facility-avail-blockset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}

/* Selectable rental-block card. A visually-hidden checkbox holds the real
   state; the whole card is the click/tap/label target. */
.rl-facility-avail-block {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid color-mix(in srgb, var(--rl-fac-primary) 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--rl-fac-primary) 3%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.rl-facility-avail-block:hover {
  border-color: color-mix(in srgb, var(--rl-fac-primary) 45%, transparent);
  background: color-mix(in srgb, var(--rl-fac-primary) 7%, transparent);
}
/* Body takes the free space; the check badge is a fixed-size flex item beside
   it (not overlapping), so a long block name simply wraps within the body. */
.rl-facility-avail-block-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.rl-facility-avail-block-name {
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rl-facility-avail-block-meta {
  color: color-mix(in srgb, var(--rl-fac-text) 62%, transparent);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
}

/* Check badge — an empty ring by default, a filled green tick when selected.
   An in-flow flex item on the right (no longer absolutely positioned). */
.rl-facility-avail-block-check {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--rl-fac-primary) 35%, transparent);
  background: transparent;
  flex: 0 0 auto;
  align-self: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rl-facility-avail-block-check::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

/* Selected state (drives off the hidden checkbox). */
.rl-facility-avail-block:has(.rl-facility-avail-block-cb:checked) {
  border-color: var(--rl-fac-primary);
  background: color-mix(in srgb, var(--rl-fac-primary) 12%, transparent);
  box-shadow: 0 0 0 1px var(--rl-fac-primary) inset;
}
.rl-facility-avail-block:has(.rl-facility-avail-block-cb:checked) .rl-facility-avail-block-check {
  background: var(--rl-fac-primary);
  border-color: var(--rl-fac-primary);
}
.rl-facility-avail-block:has(.rl-facility-avail-block-cb:checked) .rl-facility-avail-block-check::after {
  content: "\2713"; /* ✓ */
}

/* Keyboard focus ring on the hidden checkbox → highlight its card. */
.rl-facility-avail-block:focus-within {
  outline: 2px solid var(--rl-fac-primary);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .rl-facility-avail-block {
    border: 1px solid ButtonText;
  }
  .rl-facility-avail-block:has(.rl-facility-avail-block-cb:checked) {
    border: 2px solid Highlight;
    box-shadow: none;
  }
  .rl-facility-avail-block-check {
    border: 1px solid ButtonText;
  }
  .rl-facility-avail-block:has(.rl-facility-avail-block-cb:checked) .rl-facility-avail-block-check {
    background: Highlight;
  }
  .rl-facility-avail-block:has(.rl-facility-avail-block-cb:checked) .rl-facility-avail-block-check::after {
    color: HighlightText;
  }
}

/* noFitReason — a plain-language sentence when nothing fits. */
.rl-facility-avail-nofit {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--rl-slot-held, #c88500);
  background: color-mix(
    in srgb,
    var(--rl-slot-held) 8%,
    var(--color-primary-white, #fff)
  );
  color: var(--rl-fac-heading, #3c3c3c);
  border-radius: 0 6px 6px 0;
}

.rl-facility-avail-slots-h {
  margin: 1rem 0 0.5rem;
}

/* Day-at-a-glance occupancy grid (grid[]). Informational only. */
.rl-facility-avail-gridwrap {
  margin-top: 1.25rem;
}
.rl-facility-avail-grid {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.4rem;
}
.rl-facility-avail-grid-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left: 4px solid var(--rl-slot-excluded, #808080);
  border-radius: 0 6px 6px 0;
  background: color-mix(
    in srgb,
    var(--rl-slot-excluded) 6%,
    var(--color-primary-white, #fff)
  );
}
.rl-facility-avail-grid-time {
  font-variant-numeric: tabular-nums;
  color: var(--rl-fac-heading, #3c3c3c);
}
.rl-facility-avail-grid-status {
  font-size: 0.85em;
  font-weight: 600;
}
.rl-facility-avail-grid-cell.rl-grid-open {
  border-left-color: var(--rl-slot-open, #16803a);
  background: color-mix(
    in srgb,
    var(--rl-slot-open) 8%,
    var(--color-primary-white, #fff)
  );
}
.rl-facility-avail-grid-cell.rl-grid-booked {
  border-left-color: var(--rl-slot-booked, #b32d2e);
  background: color-mix(
    in srgb,
    var(--rl-slot-booked) 8%,
    var(--color-primary-white, #fff)
  );
}
.rl-facility-avail-grid-cell.rl-grid-held {
  border-left-color: var(--rl-slot-held, #c88500);
  background: color-mix(
    in srgb,
    var(--rl-slot-held) 8%,
    var(--color-primary-white, #fff)
  );
}
.rl-facility-avail-grid-cell.rl-grid-buffer {
  border-left-color: var(--rl-slot-buffer, #1a4dab);
  background: color-mix(
    in srgb,
    var(--rl-slot-buffer) 8%,
    var(--color-primary-white, #fff)
  );
}
.rl-facility-avail-grid-cell.rl-grid-excluded,
.rl-facility-avail-grid-cell.rl-grid-out_of_hours {
  border-left-color: var(--rl-slot-excluded, #808080);
}
.rl-legend-out {
  background: var(--rl-slot-out, #b7b7b7);
}

/* Selected lawful start window (single-select) — solid green fill, white
 * text, so it reads as "chosen" at a glance and matches the strip band. */
.rl-fac-slot.is-selected,
button.rl-fac-slot.is-selected,
button.rl-fac-slot.is-selected:hover,
button.rl-fac-slot.is-selected:active,
button.rl-fac-slot.is-selected:focus,
button.rl-fac-slot.is-selected:focus-visible {
  border-color: var(--color-primary-green, #00662c);
  border-left-color: var(--color-primary-green, #00662c);
  background: var(--color-primary-green, #00662c);
  color: var(--color-primary-white, #fff);
  outline: 2px solid var(--color-primary-green, #00662c);
  outline-offset: 1px;
}
.rl-fac-slot.is-selected .rl-fac-slot-time,
button.rl-fac-slot.is-selected .rl-fac-slot-time {
  color: var(--color-primary-white, #fff);
}

/* Eligibility reasons (guide Flow C). */
.rl-facility-avail-eligibility {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--rl-slot-held, #c88500);
  background: color-mix(
    in srgb,
    var(--rl-slot-held) 8%,
    var(--color-primary-white, #fff)
  );
  border-radius: 0 6px 6px 0;
}
.rl-facility-avail-eligibility.is-blocking {
  border-left-color: var(--rl-fac-danger, #b32d2e);
  background: color-mix(
    in srgb,
    var(--rl-fac-danger) 8%,
    var(--color-primary-white, #fff)
  );
}
.rl-facility-avail-reasons {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--rl-fac-heading, #3c3c3c);
}

/* Finance pay-link CTA (guide Flow F). */
.rl-facility-book-pay {
  margin-top: 1rem;
}
.rl-facility-book-pay-btn {
  display: inline-block;
}
.rl-facility-book-total {
  margin: 0.75rem 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rl-fac-heading, #3c3c3c);
}

/* Hold-then-pay priced total breakdown (guide Flow F, RL-1049). A right-aligned
   money list; the Total-due-now row is emphasised with a top border. */
.rl-facility-book-pricing {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 0.2rem 0.75rem;
  margin: 0.75rem 0 0;
}
.rl-facility-book-pricing dt {
  color: var(--rl-fac-text-muted);
}
.rl-facility-book-pricing dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rl-facility-book-pricing .rl-facility-book-total-lbl,
.rl-facility-book-pricing dd.rl-facility-book-total {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--rl-fac-line);
  font-weight: 700;
}
.rl-facility-book-hold-note {
  margin-top: 0.5rem;
}
.rl-facility-book-release {
  margin-top: 1rem;
}

/* Transaction-window countdown timer (guide Flow F hold window, RL-1049). */
.rl-facility-book-timer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rl-fac-line);
  border-radius: 8px;
  background: var(--reclite-color-surface-alt, #f5f7fb);
}
.rl-facility-book-timer-lbl {
  font-weight: 600;
  color: var(--rl-fac-text-muted);
}
.rl-facility-book-timer-clock {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rl-fac-heading, #3c3c3c);
}
.rl-facility-book-timer.is-urgent {
  border-color: #b42318;
  background: #fef3f2;
}
.rl-facility-book-timer.is-urgent .rl-facility-book-timer-clock {
  color: #b42318;
}
.rl-facility-book-timer.is-expired .rl-facility-book-timer-clock {
  color: var(--rl-fac-text-muted);
}

/* In-app pay options (dev gateway / simulator). */
.rl-facility-book-pay-lead {
  margin: 0.5rem 0 0.15rem;
  font-weight: 700;
  color: var(--rl-fac-heading, #3c3c3c);
}
.rl-facility-book-pay-alt {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rl-fac-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.rl-facility-book-pay-alt-lbl {
  margin: 0;
  width: 100%;
  font-size: 0.85rem;
  color: var(--rl-fac-text-muted);
}
.rl-facility-book-result {
  margin-top: 0.75rem;
}
.rl-facility-book-result-msg {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
}
.rl-facility-book-result-msg.is-ok {
  color: #067647;
  background: #ecfdf3;
  border: 1px solid #067647;
}
.rl-facility-book-result-msg.is-err {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #b42318;
}
@media (forced-colors: active) {
  .rl-facility-book-timer,
  .rl-facility-book-result-msg {
    border: 1px solid CanvasText;
  }
}

@media (forced-colors: active) {
  .rl-facility-avail-grid-cell,
  .rl-facility-avail-nofit,
  .rl-facility-avail-eligibility {
    border: 1px solid CanvasText;
    border-left-width: 4px;
  }
  .rl-fac-slot.is-selected,
  button.rl-fac-slot.is-selected {
    outline: 3px solid Highlight;
    forced-color-adjust: none;
  }
}

/* ==================================================================
 * Day-at-a-glance TIMELINE strip (proportional). Replaces the old
 * labelled-cell list (now sr-only). Each segment is positioned by its
 * share of the operating day; the chosen window is mirrored as a green
 * band with a "Selected" callout, kept in sync with the start chips.
 * ================================================================== */

.rl-facility-avail-strip-note {
  margin: 0.75rem 0 0;
}
.rl-facility-avail-strip {
  position: relative;
  height: 30px;
  /* Top room for the callout bubble; overflow visible so it can sit above. */
  margin: 2.9rem 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
  border-radius: 6px;
  background: var(--color-primary-white, #fff);
  overflow: visible;
}
.rl-strip-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border-right: 1px solid
    color-mix(in srgb, var(--rl-fac-primary) 10%, transparent);
}
.rl-strip-seg.rl-grid-open {
  background: color-mix(
    in srgb,
    var(--rl-slot-open) 22%,
    var(--color-primary-white, #fff)
  );
}
.rl-strip-seg.rl-grid-booked {
  background: color-mix(
    in srgb,
    var(--rl-slot-booked) 34%,
    var(--color-primary-white, #fff)
  );
}
.rl-strip-seg.rl-grid-held {
  background: color-mix(
    in srgb,
    var(--rl-slot-held) 30%,
    var(--color-primary-white, #fff)
  );
}
.rl-strip-seg.rl-grid-buffer {
  background: color-mix(
    in srgb,
    var(--rl-slot-buffer) 26%,
    var(--color-primary-white, #fff)
  );
}
.rl-strip-seg.rl-grid-excluded,
.rl-strip-seg.rl-grid-out_of_hours {
  background: color-mix(
    in srgb,
    var(--rl-slot-excluded) 26%,
    var(--color-primary-white, #fff)
  );
}

/* The chosen window, mirrored from the chip selection. */
.rl-strip-selected {
  position: absolute;
  top: -2px;
  bottom: -2px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--rl-slot-open) 55%, transparent);
  border: 2px solid var(--color-primary-green, #00662c);
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
}
.rl-strip-callout {
  position: absolute;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--color-primary-green, #00662c);
  color: var(--color-primary-white, #fff);
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
}
.rl-strip-callout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-primary-green, #00662c);
}
/* Hover peek — neutral dark bubble so it's clearly distinct from the green
   "Selected" callout. Follows the pointer across the timeline segments. */
.rl-strip-callout-hover {
  background: #2b333c;
  z-index: 3;
}
.rl-strip-callout-hover::after { border-top-color: #2b333c; }
.rl-strip-callout-time {
  font-variant-numeric: tabular-nums;
}
.rl-strip-callout-tag {
  font-weight: 600;
  opacity: 0.92;
}

@media (forced-colors: active) {
  .rl-facility-avail-strip,
  .rl-strip-seg {
    border: 1px solid CanvasText;
  }
  .rl-strip-selected {
    border: 2px solid Highlight;
    forced-color-adjust: none;
  }
  .rl-strip-callout {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
}

/* -----------------------------------------------------------------
 * Rate-basis picker (Flow N / RL-831) + recurring series (RL-662)
 * booking-modal additions.
 * ----------------------------------------------------------------- */
/* Rate-basis picker sits in the availability form (drives slots + duration
   visibility). Reset the fieldset so it aligns with the other avail controls. */
.rl-facility-avail-ratebasis {
  border: 0;
  padding: 0;
  margin: 0 0 0.25rem;
  min-width: 0;
  /* Own full-width row so Date + Rental duration wrap side by side below it. */
  flex: 0 0 100%;
}
.rl-facility-avail-ratebasis-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 0.3rem;
}
.rl-facility-avail-ratebasis-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  white-space: nowrap;
}

.rl-facility-book-recurring {
  border-top: 1px dashed color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
  padding-top: 0.8rem;
}
.rl-facility-book-recurring-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
}
.rl-facility-book-recurring-fields {
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
  border-radius: 8px;
  padding: 0.8rem;
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.rl-facility-book-recurring-dow,
.rl-facility-book-recurring-fields > .rl-facility-quote-field {
  margin: 0;
  border: 0;
  padding: 0;
}
.rl-facility-book-recurring-dow-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 0.35rem;
}
.rl-facility-book-recurring-dow-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.rl-facility-book-recurring-help {
  margin: 0;
  font-size: 0.85em;
}
.rl-facility-book-occurrences {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  max-height: 11rem;
  overflow-y: auto;
  font-variant-numeric: tabular-nums;
}

/* Recurring series controls in the availability section (moved out of the
   booking popup). */
.rl-facility-avail-recurring {
  margin: 0.9rem 0 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px dashed color-mix(in srgb, var(--rl-fac-primary) 22%, transparent);
}
.rl-facility-avail-recurring-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--rl-fac-text);
}
.rl-facility-avail-recurring-fields {
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
  border-radius: 10px;
  padding: 0.85rem;
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rl-facility-avail-recurring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}
.rl-facility-avail-recurring-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  min-width: 0;
}
.rl-facility-avail-recurring-field select,
.rl-facility-avail-recurring-field input {
  box-sizing: border-box;
  height: 44px;
  padding: 0.4rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 30%, transparent);
  border-radius: 8px;
  background: var(--color-primary-white, #fff);
  color: var(--rl-fac-text, #000);
  font: inherit;
}
.rl-facility-avail-recurring-dow {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.rl-facility-avail-recurring-dow-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 0.35rem;
}
.rl-facility-avail-recurring-dow-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.rl-facility-avail-recurring-help {
  margin: 0;
  font-size: 0.85em;
}

/* ------------------------------------------------------------------
 * Skip-dates picker — the dates the pattern generates, each one a
 * togglable chip. Ticked = booked, unticked = skipped, so the default
 * state (everything ticked) matches "book the whole series".
 * ------------------------------------------------------------------ */
.rl-facility-avail-skip {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.rl-facility-avail-skip-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.45rem;
  /* A 366-day span can produce ~50 weekly dates (or ~370 daily ones) —
   * scroll rather than pushing the Book button off the page. */
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
  border-radius: 8px;
  background: var(--rl-fac-surface);
}
.rl-facility-avail-skip-month-lbl {
  margin: 0 0 0.35rem;
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rl-fac-text-muted);
}
.rl-facility-avail-skip-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.rl-facility-avail-skip-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 30%, transparent);
  border-radius: 999px;
  background: var(--color-primary-white, #fff);
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1.2;
  user-select: none;
}
.rl-facility-avail-skip-opt:hover {
  border-color: var(--rl-fac-primary);
}
.rl-facility-avail-skip-dow {
  color: var(--rl-fac-text-muted);
}
.rl-facility-avail-skip-day {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* A skipped date stays legible (it's still information) but reads as
 * struck off rather than merely dim. */
.rl-facility-avail-skip-opt.is-skipped {
  background: transparent;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--rl-fac-primary) 20%, transparent);
}
.rl-facility-avail-skip-opt.is-skipped .rl-facility-avail-skip-dow,
.rl-facility-avail-skip-opt.is-skipped .rl-facility-avail-skip-day {
  color: var(--rl-fac-text-muted);
  text-decoration: line-through;
}
/* Keyboard focus lands on the checkbox; ring the whole chip. */
.rl-facility-avail-skip-opt:focus-within {
  outline: 2px solid var(--rl-fac-focus);
  outline-offset: 2px;
}
.rl-facility-avail-skip-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
}
.rl-facility-avail-skip-count {
  margin: 0;
  font-size: 0.85em;
  color: var(--rl-fac-text-muted);
}
.rl-facility-avail-skip-reset {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.85em;
  color: var(--rl-fac-primary);
  text-decoration: underline;
  cursor: pointer;
}
@media (forced-colors: active) {
  .rl-facility-avail-skip-opt.is-skipped { border-style: dashed; }
}
@media (forced-colors: active) {
  .rl-facility-avail-recurring-fields { border: 1px solid CanvasText; }
}

/* Price preview (Flow Q). */
.rl-facility-book-quote {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--rl-fac-primary) 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--rl-fac-primary) 4%, transparent);
}
.rl-facility-book-quote-h {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.rl-facility-book-quote-loading {
  margin: 0;
  color: var(--rl-fac-text-muted);
}
.rl-facility-book-quote-note {
  margin: 0;
  color: var(--rl-fac-text-muted);
  font-size: 0.9em;
}
.rl-facility-book-quote-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.rl-facility-book-quote-list dt { margin: 0; color: var(--rl-fac-text); }
.rl-facility-book-quote-list dd { margin: 0; text-align: right; color: var(--rl-fac-text); }
.rl-facility-book-quote-list dt.is-total,
.rl-facility-book-quote-list dd.is-total {
  border-top: 1px solid color-mix(in srgb, var(--rl-fac-primary) 25%, transparent);
  padding-top: 0.4rem;
  margin-top: 0.15rem;
  font-weight: 700;
}
.rl-facility-book-quote-fine {
  margin: 0.6rem 0 0;
  font-size: 0.82em;
  color: var(--rl-fac-text-muted);
}

@media (forced-colors: active) {
  .rl-facility-book-quote { border: 1px solid CanvasText; }
}

@media (forced-colors: active) {
  .rl-facility-book-recurring-fields {
    border: 1px solid CanvasText;
  }
}

/* Ultra-wide (1920px+): cap the facilities listing at 5 columns and keep the
   grid centred so cards don't stretch edge-to-edge on large monitors. */
@media (min-width: 1920px) {
  .rl-fac-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 1900px;
    margin-inline: auto;
  }
}