/* ==========================================================================
   Booking page. design.md 4.2 (desktop 1440) and 4.5 (mobile 390).
   Breakpoints per section 7: single column below 768, two column 768 to
   1180, full desktop above 1180.
   ========================================================================== */

.booking { background: var(--muted); padding-block-end: 64px; }

/* --- Breadcrumb ---------------------------------------------------------- */

.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 40px 28px;
  font-size: 14px;
  color: var(--ink-300);
}
.crumb a:hover { color: var(--green-600); }
.crumb__sep { color: var(--border); }
.crumb__here { color: var(--ink-700); }

/* The separator is a slash in both directions; it is punctuation between
   two labels, not a directional arrow, so section 6 leaves it alone. */

/* --- Two column shell ---------------------------------------------------- */

.booking__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  align-items: start;
}

.booking__left  { display: flex; flex-direction: column; gap: 20px; }
.booking__right { display: flex; flex-direction: column; gap: 16px; position: sticky; inset-block-start: 104px; }

@media (max-width: 1180px) {
  .booking__cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
}
@media (max-width: 900px) {
  .booking__cols  { grid-template-columns: minmax(0, 1fr); }
  .booking__right { position: static; }
}

/* --- Court header card (desktop / tablet) -------------------------------- */

.court {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}
.court__img {
  background: var(--blue-100);
  background-size: cover;
  background-position: center;
  min-block-size: 157px;
}
.court__detail { padding: 24px 26px; }
.court__desc   { margin-block: 10px 14px; color: var(--ink-500); font-size: 15px; }
.court__tags   { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Mobile court hero (4.5) ---------------------------------------------
   200 tall, bottom aligned, vertical overlay. Replaces the header card.   */

.court-hero {
  display: none;
  position: relative;
  block-size: 200px;
  background: var(--ink-900) center / cover no-repeat;
  align-items: flex-end;
}
.court-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(5 23 15 / 0.15), rgb(5 23 15 / 0.94));
}
.court-hero__text { position: relative; z-index: 1; padding: 20px; color: #fff; }
.court-hero__sub  { margin-block-start: 6px; font-size: 14px; color: var(--on-dark-body); }

/* --- Day picker ---------------------------------------------------------- */

.picker__title { margin-block-end: 18px; }
.days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

/* --- Slots --------------------------------------------------------------- */

.slots__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 18px;
}
.legend { display: flex; gap: 18px; }
.legend__key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-500);
}
.legend__key::before {
  content: '';
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: currentColor;
}
.legend__key--free     { --dot: var(--green-500); }
.legend__key--selected { --dot: var(--blue-700); }
.legend__key--booked   { --dot: var(--ink-300); }
.legend__key::before   { background: var(--dot); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--slot-gap);
}

/* 4.2 draws a 4 by 4 grid running 08:00 to 23:00, so the 00:00 block that
   the mobile screen carries is held back above the mobile breakpoint. */
@media (min-width: 768px) {
  .slot-grid .slot[data-desktop='hide'] { display: none; }
}

/* --- Summary panel ------------------------------------------------------- */

.summary__title { margin-block-end: 18px; }

.summary__rows { margin-block-end: 4px; }
.summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  border-block-end: var(--stroke) solid var(--row-divider);
  font-size: 15px;
}
.summary__row dt { color: var(--ink-300); }
.summary__row dd { margin: 0; color: var(--ink-900); text-align: end; }

.summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px 22px;
}
.summary__total-value { font-size: 26px; font-weight: 700; color: var(--green-600); }

.summary__fields { display: flex; flex-direction: column; gap: 12px; margin-block-end: 18px; }

/* --- Mobile sticky bar (4.5) ---------------------------------------------
   White, top border, 26 bottom padding for the home indicator.            */

.stickybar {
  display: none;
  position: sticky;
  inset-block-end: 0;
  z-index: 15;
  background: var(--surface);
  border-block-start: var(--stroke) solid var(--border);
  padding: 14px var(--gutter-mobile) 26px;
}
.stickybar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 12px;
}
.stickybar__when { font-size: 14px; font-weight: 500; }
.stickybar__pay  { margin-block-start: 3px; font-size: 12px; color: var(--ink-300); }
.stickybar__price { font-size: 22px; font-weight: 700; color: var(--green-600); }

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 767px) {
  .booking { padding-block-end: 0; }
  .crumb, .court, .booking__right .note { display: none; }
  .court-hero { display: flex; }
  .stickybar  { display: block; }

  .booking__wrap { padding-inline: var(--gutter-mobile); }
  .booking__cols { gap: 12px; padding-block-start: 16px; }
  .booking__left { gap: 12px; }

  /* 4.5: five day cells, and a two column slot grid running 17:00 to 00:00 */
  .days      { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--slot-gap-mobile); }

  .days .day:nth-child(n + 6) { display: none; }
  .slot-grid .slot[data-mobile='hide'] { display: none; }

  .summary__card { display: none; }
  .slots__head { flex-direction: column; align-items: flex-start; gap: 10px; }
}