/* ============================================================================
   Public booking pages.

   Prefixed ch-bkp- throughout so nothing here leaks into the rest of the theme.
   ============================================================================ */

.ch-bkp-wrap {
  --ch-bkp-ink: #172b4d;
  --ch-bkp-sub: #5e6c84;
  --ch-bkp-line: #e4e7ec;
  --ch-bkp-primary: #236AD6;
  max-width: 1401px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.ch-bkp-narrow {
  max-width: 640px;
  /* it used to sit on .ch-bkp-wrap, which centres itself. Now that a step can be narrow inside a
     wider one, it has to centre on its own or it hugs the left with the page empty beside it. */
  margin-left: auto;
  margin-right: auto;
}

.ch-bkp-heading {
  font-size: 22px;
  font-weight: 800;
  color: #172b4d;
  margin: 0 0 16px;
}

.ch-bkp-lead {
  font-size: 14px;
  color: #5e6c84;
  margin: -8px 0 18px;
}
/* heading on the left, the booker call-to-action on the right; they stack on a narrow screen */
.ch-bkp-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ch-bkp-register {
  display: inline-block;
  background: #236ad6;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 18px;
  margin-bottom: 16px;
  text-decoration: none;
  white-space: nowrap;
}

  .ch-bkp-register:hover {
    background: #1b56ad;
    color: #fff;
    text-decoration: none;
  }

.ch-bkp-step-title {
  font-size: 17px;
  font-weight: 800;
  color: #172b4d;
  margin: 22px 0 12px;
}

.ch-bkp-sub {
  font-size: 14px;
  font-weight: 800;
  color: #172b4d;
  margin: 14px 0 8px;
}

.ch-bkp-back {
  display: inline-block;
  color: #5e6c84;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 12px;
}

  .ch-bkp-back:hover {
    color: #236AD6;
  }

.ch-bkp-empty {
  color: #5e6c84;
  padding: 24px 0;
}

.ch-bkp-note, .ch-bkp-sub-note {
  color: #5e6c84;
  font-size: 13px;
}

.ch-bkp-error {
  background: #fdeeec;
  border: 1px solid #f0c2bb;
  color: #a5311f;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

/* ---- filters ---- */
.ch-bkp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 22px;
}

/* Scoped through .ch-bkp-wrap on purpose: the theme styles bare <select> with a full width and a
   fixed height, which stretched this one across the page and clipped the city name inside it. */
.ch-bkp-wrap .ch-bkp-select {
  width: auto;
  min-width: 200px;
  max-width: 100%;
  height: auto;
  line-height: 1.4;
  border: 1px solid var(--ch-bkp-line);
  border-radius: 10px;
  padding: 10px 38px 10px 14px;
  font-size: 14px;
  color: #172b4d;
  /* the native arrow goes with appearance:none, so one is drawn back in */
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235e6c84' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

  .ch-bkp-wrap .ch-bkp-select:focus {
    border-color: #bcd3f5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(35,106,214,.12);
  }

/* The sport chips get a line of their own, under the search, the city and the sort.

   flex-basis: 100% is what does it - a flex item that already fills the row cannot share one, so
   everything after it wraps. order pulls the two selects and the view toggle back up beside the
   search, which is where they belong: they narrow the same list the search does, while the chips
   are a row of six and would squeeze all of it onto one cramped line.

   Done in the stylesheet rather than by moving the markup, because the chips have to stay between
   the city select and the sort in the DOM - that is the order somebody tabbing through the filters
   reads them in, and it matches the order they are written in the form. */
.ch-bkp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
  order: 2;
}

.ch-bkp-filters .ch-bkp-search,
.ch-bkp-filters .ch-bkp-select,
.ch-bkp-filters .ch-bkp-view {
  order: 1;
}

.ch-bkp-chip {
  border: 1px solid var(--ch-bkp-line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  color: #5e6c84;
  text-decoration: none;
  background: #fff;
}

  .ch-bkp-chip:hover {
    border-color: #bcd3f5;
    color: #236AD6;
  }

.ch-bkp-chip-on {
  background: #eaf2fd;
  border-color: #bcd3f5;
  color: #1f5fb0;
  font-weight: 700;
}

/* ---- venue cards ---- */
.ch-bkp-venues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.ch-bkp-venue {
  display: block;
  border: 1px solid var(--ch-bkp-line);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none !important;
  background: #fff;
  transition: all .15s ease;
}

  .ch-bkp-venue:hover {
    border-color: #bcd3f5;
    box-shadow: 0 6px 18px rgba(9,30,66,.08);
  }

.ch-bkp-venue-photo {
  height: 150px;
  border-radius: 10px;
  background: #efece7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  color: #9aa4b2;
  font-size: 12px;
}

  .ch-bkp-venue-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

.ch-bkp-venue-name-card {
  font-size: 16px;
  font-weight: 800;
  color: #172b4d;
  margin: 0 0 4px;
}

.ch-bkp-venue-meta {
  font-size: 12px;
  color: #5e6c84;
  margin: 0 0 10px;
}

.ch-bkp-venue-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ch-bkp-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f4;
  color: #5e6c84;
}

.ch-bkp-tag-offer {
  background: #e4f5e9;
  color: #1e7e34;
}

/* ---- venue detail ---- */
.ch-bkp-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.ch-bkp-photo-main {
  width: 100%;
  height: 250px;
  object-fit: contain;
  border-radius: 12px;
  background: #efece7;
}

.ch-bkp-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa4b2;
  font-size: 13px;
}

.ch-bkp-photo-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

  .ch-bkp-photo-thumbs img {
    width: 70px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--ch-bkp-line);
  }

.ch-bkp-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ch-bkp-venue-title {
  font-size: 22px;
  font-weight: 800;
  color: #172b4d;
  margin: 0;
}

.ch-bkp-rating {
  background: #e4f5e9;
  color: #1e7e34;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.ch-bkp-address {
  font-size: 13px;
  color: #5e6c84;
  margin: 6px 0 12px;
}

.ch-bkp-directions {
  color: #1e7e34;
  font-weight: 700;
  text-decoration: none;
  margin-left: 8px;
}

/* owner phone */
.ch-bkp-phone {
  font-size: 14px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ch-bkp-phone-icon {
  color: #236ad6;
  font-style: normal;
  transform: rotate(0deg);
}

.ch-bkp-phone a {
  color: #172b4d;
  font-weight: 700;
  text-decoration: none;
}

  .ch-bkp-phone a:hover {
    color: #236ad6;
  }

/* clickable map preview - the overlay link takes the whole area to Google Maps */
.ch-bkp-map {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 16px;
  border: 1px solid #e4e7ec;
}

  .ch-bkp-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

.ch-bkp-map-open {
  position: absolute;
  inset: 0;
  display: block;
  background: transparent;
  cursor: pointer;
}

.ch-bkp-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ch-bkp-offer {
  border: 1px dashed #9ecfb0;
  color: #1e7e34;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  display: inline-block;
}

.ch-bkp-desc {
  font-size: 14px;
  color: #172b4d;
  margin-bottom: 16px;
}

/* ---- courts ---- */
.ch-bkp-courts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.ch-bkp-court {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--ch-bkp-line);
  border-radius: 8px;
  padding: 14px 18px;
  text-decoration: none;
  background: #fff;
}

  .ch-bkp-court:hover {
    border-color: #bcd3f5;
  }

.ch-bkp-court-on {
  border-color: var(--ch-bkp-primary);
  background: #eaf2fd;
  box-shadow: 0 0 0 2px rgba(35,106,214,.12);
}

.ch-bkp-court-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ch-bkp-court-name {
  font-weight: 800;
  color: #172b4d;
  font-size: 15px;
}

.ch-bkp-court-sub {
  font-size: 14px;
  color: #5e6c84;
  margin-bottom: 3px;
  line-height: 1.2;
}

.ch-bkp-court-price {
  font-weight: 700;
  color: #172b4d;
  font-size: 14px;
}

/* ---- slot grid ---- */
.ch-bkp-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ch-bkp-slot-head h2{
  margin: 0;
}

.ch-bkp-rate-note {
  font-size: 12px;
  color: #5e6c84;
  margin: 0 0 12px;
}

.ch-bkp-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.ch-bkp-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--ch-bkp-line);
  border-radius: 8px;
  padding: 12px 8px;
  cursor: pointer;
  background: #fff;
  margin: 0;
  transition: all .15s ease;
}

  .ch-bkp-slot input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .ch-bkp-slot:hover {
    border-color: #bcd3f5;
  }

.ch-bkp-slot-time {
  font-weight: 700;
  color: #172b4d;
  font-size: 14px;
}

.ch-bkp-slot-price {
  font-size: 12px;
  color: #5e6c84;
}

.ch-bkp-night {
  display: inline-block;
  font-size: 12px;
  color: #a5651f;
  margin-left: 3px;
}
/* the checkbox is hidden, so the ticked state has to be obvious on the box itself */
.ch-bkp-slot-picked {
  border-color: var(--ch-bkp-primary);
  background: #eaf2fd;
  box-shadow: 0 0 0 2px rgba(35,106,214,.14);
}

.ch-bkp-slot-off {
  background: #f4f5f7;
  color: #9aa4b2;
  cursor: not-allowed;
}

  .ch-bkp-slot-off .ch-bkp-slot-time {
    color: #9aa4b2;
  }

.ch-bkp-slot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: #f6f7f9;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 16px;
}

.ch-bkp-summary {
  font-size: 13px;
  color: #172b4d;
  font-weight: 600;
}

/* ---- checkout / confirmation ---- */
.ch-bkp-card {
  border: 1px solid var(--ch-bkp-line);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
}

.ch-bkp-center {
  text-align: center;
}

.ch-bkp-left {
  text-align: left;
}

.ch-bkp-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

  .ch-bkp-summary-table td {
    padding: 10px 0;
    border-bottom: 1px solid #eef1f4;
    color: #172b4d;
  }

  .ch-bkp-summary-table tr:last-child td {
    border-bottom: none;
  }

.ch-bkp-right {
  text-align: right;
}

.ch-bkp-discount {
  color: #1e7e34;
}

.ch-bkp-due {
  color: #a5311f;
  font-weight: 800;
}

.ch-bkp-total-row td {
  font-weight: 800;
  font-size: 15px;
}

.ch-bkp-hold {
  font-size: 12px;
  color: #a5651f;
  margin: 10px 0 0;
}

.ch-bkp-pay-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}

.ch-bkp-pay {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--ch-bkp-line);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  margin: 0;
}

.ch-bkp-pay input {
  display: none;
}

.ch-bkp-pay:has(input:checked) {
  border-color: var(--ch-bkp-primary);
  background: #eaf2fd;
  box-shadow: 0 0 0 2px rgba(35,106,214,.12);
}

.ch-bkp-pay-title {
  font-weight: 700;
  color: #172b4d;
  font-size: 13px;
}

.ch-bkp-pay-amount {
  font-size: 22px;
  font-weight: 800;
  color: #172b4d;
}

.ch-bkp-pay-note {
  font-size: 12px;
  color: #5e6c84;
}

.ch-bkp-tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e4f5e9;
  color: #1e7e34;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- buttons ---- */
.ch-bkp-btn {
  display: inline-block;
  border: 1px solid var(--ch-bkp-line);
  background: #fff;
  color: #172b4d;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

  .ch-bkp-btn:hover {
    border-color: #bcd3f5;
    color: #236AD6;
  }

.ch-bkp-btn-primary {
  background: var(--ch-bkp-primary);
  border-color: var(--ch-bkp-primary);
  color: #fff;
}

  .ch-bkp-btn-primary:hover {
    background: #2f7ae5;
    border-color: #2f7ae5;
    color: #fff;
  }

  .ch-bkp-btn-primary:disabled {
    background: #b8c4d4;
    border-color: #b8c4d4;
    cursor: not-allowed;
  }

.ch-bkp-btn-block {
  width: 100%;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .ch-bkp-detail, .ch-bkp-pay-options {
    grid-template-columns: 1fr;
  }
}

/* ---- customer: my bookings ---- */
.ch-bkp-mybookings {
  border: 1px solid var(--ch-bkp-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.ch-bkp-mybookings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

  .ch-bkp-mybookings-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ch-bkp-sub);
    padding: 12px 16px;
    background: #f6f7f9;
    border-bottom: 1px solid var(--ch-bkp-line);
  }

  .ch-bkp-mybookings-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
    color: #172b4d;
  }

  .ch-bkp-mybookings-table tr:last-child td {
    border-bottom: 0;
  }

.ch-bkp-cell-strong {
  font-weight: 800;
}

.ch-bkp-cell-sub {
  font-size: 12px;
  color: var(--ch-bkp-sub);
}

.ch-bkp-badge-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 12px;
}

.ch-bkp-status-confirmed {
  background: #e8f0fd;
  color: #1f5fb0;
}

.ch-bkp-status-completed {
  background: #e7f5ee;
  color: #1c7c4a;
}

.ch-bkp-status-cancelled {
  background: #fdecea;
  color: #c0392b;
}

.ch-bkp-actions {
  text-align: right;
}

.ch-bkp-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

/* one consistent pill for every row action, coloured by what it does */
.ch-bkp-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: #fff;
  transition: background .15s ease, border-color .15s ease;
}

.ch-bkp-act-danger {
  color: #c0392b;
  border-color: #f1c4bd;
  background: #fdf0ee;
}

  .ch-bkp-act-danger:hover {
    background: #fbe2de;
  }

.ch-bkp-act-rate {
  color: #a5651f;
  border-color: #f0c65a;
  background: #fff8e6;
}

  .ch-bkp-act-rate:hover {
    background: #fdefc6;
  }

.ch-bkp-act-proof {
  color: #236ad6;
  border-color: #bcd4f5;
  background: #eef4fd;
}

  .ch-bkp-act-proof:hover {
    background: #dfeafb;
  }

  .ch-bkp-act-proof input {
    display: none;
  }

.ch-bkp-act-view {
  color: #1e7e34;
  border-color: #bfe3c8;
  background: #eef7f0;
}

  .ch-bkp-act-view:hover {
    background: #ddeee2;
  }

/* non-action hints in the same column */
.ch-bkp-act-note {
  color: #8a94a6;
  font-size: 12px;
}

.ch-bkp-act-rated {
  color: #a5651f;
  font-size: 12.5px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .ch-bkp-action-group {
    justify-content: flex-start;
  }
}

.ch-bkp-rated {
  color: #a5651f;
  font-size: 13px;
  font-weight: 700;
}

/* ---- review popup ---- */
.ch-bkp-hidden {
  display: none !important;
}
/* the modal is rendered outside .ch-bkp-wrap, so the design tokens are redeclared here - without
   them var(--ch-bkp-primary) is undefined and the primary button turns white-on-white (invisible) */
.ch-bkp-modal {
  --ch-bkp-ink: #172b4d;
  --ch-bkp-sub: #5e6c84;
  --ch-bkp-line: #e4e7ec;
  --ch-bkp-primary: #236AD6;
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(23,43,77,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ch-bkp-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 12px 40px rgba(9,30,66,.25);
}

.ch-bkp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ch-bkp-line);
}

  .ch-bkp-modal-head h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #172b4d;
  }

.ch-bkp-modal-x {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ch-bkp-sub);
  cursor: pointer;
}

.ch-bkp-modal-body {
  padding: 18px 20px;
}

.ch-bkp-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--ch-bkp-line);
}

.ch-bkp-stars {
  display: flex;
  gap: 6px;
  font-size: 34px;
  margin-bottom: 14px;
}

.ch-bkp-star {
  color: #d7dce3;
  cursor: pointer;
  line-height: 1;
  transition: color .1s ease;
}

  .ch-bkp-star:hover, .ch-bkp-star-on {
    color: #f5b301;
  }

.ch-bkp-textarea {
  width: 100%;
  border: 1px solid var(--ch-bkp-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
}

/* ==========================================================================
   Venue name across the flow
   The customer is booking a place, not a court id, so the venue name is the
   largest thing on every step - bigger than the step headings under it.
   ========================================================================== */

.ch-bkp-venue-head {
  margin: 0 0 18px;
}

.ch-bkp-venue-head .ch-bkp-back {
  margin-bottom: 6px;
}

.ch-bkp-venue-name {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color: #172b4d;
  margin: 0;
  word-break: break-word;
}

.ch-bkp-venue-sub {
  font-size: 14px;
  color: #5e6c84;
  margin: 6px 0 0;
}

/* the venue page's own title is the same name, so it reads at the same weight */
.ch-bkp-venue-title {
  font-size: 30px;
}

@media (max-width: 575px) {
  .ch-bkp-venue-name,
  .ch-bkp-venue-title {
    font-size: 24px;
  }
}

/* ==========================================================================
   AJAX flow
   Steps are swapped inside #ch-bkp-flow rather than navigating. The panel is
   dimmed while a step loads so a slow request cannot be mistaken for a
   dead button.
   ========================================================================== */

.ch-bkp-flow {
  position: relative;
  min-height: 120px;
}

.ch-bkp-flow-busy {
  opacity: .45;
  pointer-events: none;
}

.ch-bkp-flow-spinner {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: 3px solid #e4e7ec;
  border-top-color: #236AD6;
  border-radius: 50%;
  animation: ch-bkp-spin .7s linear infinite;
  z-index: 3;
}

@keyframes ch-bkp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-bkp-flow-spinner { animation-duration: 2s; }
}

.ch-bkp-venue-name-link {
  color: inherit;
  text-decoration: none;
}

.ch-bkp-venue-name-link:hover {
  color: var(--ch-bkp-primary, #236AD6);
  text-decoration: underline;
}

/* On the payment step the whole column narrows together: the venue name sits directly above the
   summary card instead of starting at the left edge of the far wider slot grid it replaced. */
.ch-bkp-stage-narrow .ch-bkp-venue-head {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================================
   Find a venue - v17 (ink + lime)

   Scoped to .ch-bkp-vn, which wraps step 1 only. The rules above stay as the
   unscoped fallback and keep serving the later steps - .ch-bkp-select is also
   the date picker in _SlotsPanel, and .ch-bkp-tag is also used on the venue
   page, so neither is restyled globally.

   Every hook booking-public.js relies on is untouched: #ch-bkp-city,
   [data-bkp-sport], .ch-bkp-chip-on, a[data-bkp-nav] and #ch-bkp-venue-list.
   ============================================================================ */
.ch-bkp-vn {
  --vn-ink: #1f2452;
  --vn-ink-2: #2e3570;
  --vn-paper: #ffffff;
  --vn-bg: #f4f4f8;
  --vn-line: #e3e2ee;
  --vn-muted: #63668a;
  --vn-faint: #9698b4;
  --vn-lime: #f5a524;
  --vn-lime-deep: #b8760c;
  --vn-pitch: #3b2f8f;
  --vn-pitch-soft: #ecebfa;
  color: var(--vn-ink);
}

/* ---- head ---- */
.ch-bkp-vn .ch-bkp-heading-row {
  align-items: flex-end;
  gap: 20px;
}

.ch-bkp-vn .ch-bkp-heading {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
  color: var(--vn-ink);
}

.ch-bkp-vn .ch-bkp-register {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  margin: 0;
  border-radius: 999px;
  background: var(--vn-ink);
  color: var(--vn-paper);
  font-size: 14px;
  font-weight: 700;
  transition: background .16s ease;
}

  .ch-bkp-vn .ch-bkp-register:hover {
    background: var(--vn-ink-2);
    color: var(--vn-paper);
  }

/* ---- toolbar ---- */
/* Two rows now that the sport chips have a line of their own, so the radius is a corner rather than
   a stadium: 999px on a box this tall bows the sides out and the bar stops reading as a bar. */
.ch-bkp-vn .ch-bkp-filters {
  gap: 10px;
  margin: 28px 0 0;
  padding: 10px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 28px;
}

.ch-bkp-vn .ch-bkp-select {
  min-width: 168px;
  height: 46px;
  padding: 0 40px 0 18px;
  border: 1.5px solid var(--vn-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vn-ink);
  background-color: var(--vn-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231f2452' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right 16px center;
}

  .ch-bkp-vn .ch-bkp-select:hover {
    border-color: #c9c8dd;
  }

  .ch-bkp-vn .ch-bkp-select:focus {
    border-color: var(--vn-ink);
    box-shadow: none;
  }

.ch-bkp-vn .ch-bkp-chips {
  gap: 4px;
  padding: 4px;
  background: var(--vn-bg);
  border-radius: 999px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

  .ch-bkp-vn .ch-bkp-chips::-webkit-scrollbar {
    display: none;
  }

.ch-bkp-vn .ch-bkp-chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--vn-ink-2);
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}

  .ch-bkp-vn .ch-bkp-chip:hover {
    background: #e6e5f1;
    color: var(--vn-ink-2);
  }

/* booking-public.js toggles this class to mark the active sport */
.ch-bkp-vn .ch-bkp-chip-on,
.ch-bkp-vn .ch-bkp-chip-on:hover {
  background: var(--vn-ink);
  color: var(--vn-paper);
}

/* ---- cards ---- */
.ch-bkp-vn .ch-bkp-venues {
  gap: 20px;
  margin-top: 28px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 312px), 1fr));
}

.ch-bkp-vn .ch-bkp-venue {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 24px;
  overflow: hidden;
  color: inherit;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}

  .ch-bkp-vn .ch-bkp-venue:hover {
    transform: translateY(-5px);
    border-color: #cdccdf;
    box-shadow: 0 30px 50px -32px rgba(31, 36, 82, .45);
  }

.ch-bkp-vn .ch-bkp-venue-photo {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 11;
  flex: 0 0 auto;
  margin: 8px 8px 0;
  border-radius: 18px;
  background: repeating-linear-gradient(135deg, #e7e6f0 0 10px, #dcdbe9 10px 20px);
  color: var(--vn-faint);
}

  .ch-bkp-vn .ch-bkp-venue-photo img {
    object-fit: cover;
  }

  /* keeps the city label legible over a bright photo */
  .ch-bkp-vn .ch-bkp-venue-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 64px;
    background: linear-gradient(to top, rgba(16, 18, 46, .72), rgba(16, 18, 46, 0));
    pointer-events: none;
  }

.ch-bkp-vn .ch-bkp-venue-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  max-width: 74%;
  gap: 6px;
}

.ch-bkp-vn .ch-bkp-vtag {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--vn-lime);
  color: #3d2600;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.ch-bkp-vn .ch-bkp-vcity {
  position: absolute;
  inset: auto auto 12px 14px;
  z-index: 1;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ch-bkp-vn .ch-bkp-venue-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 16px 18px 18px;
}

.ch-bkp-vn .ch-bkp-venue-main {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

.ch-bkp-vn .ch-bkp-venue-name-card {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--vn-ink);
  transition: color .16s ease;
}

.ch-bkp-vn .ch-bkp-venue:hover .ch-bkp-venue-name-card {
  color: var(--vn-lime-deep);
}

.ch-bkp-vn .ch-bkp-venue-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--vn-muted);
}

.ch-bkp-vn .ch-bkp-vrate {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.ch-bkp-vn .ch-bkp-vrate b {
  color: var(--vn-ink);
  font-size: 13px;
}

.ch-bkp-vn .ch-bkp-vrate i {
  font-style: normal;
  color: var(--vn-lime);
}

.ch-bkp-vn .ch-bkp-vcourts {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--vn-pitch-soft);
  color: var(--vn-pitch);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.ch-bkp-vn .ch-bkp-venue-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid #edecf5;
}

.ch-bkp-vn .ch-bkp-vprice {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

  .ch-bkp-vn .ch-bkp-vprice b {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--vn-ink);
  }

  .ch-bkp-vn .ch-bkp-vprice span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vn-faint);
  }

/* a span, not a button: the whole card is an <a>, and a button inside a link is
   invalid and would steal the click booking-public.js listens for */
.ch-bkp-vn .ch-bkp-vcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--vn-ink);
  color: var(--vn-paper);
  font-size: 13.5px;
  font-weight: 700;
  transition: background .16s ease, color .16s ease;
}

.ch-bkp-vn .ch-bkp-venue:hover .ch-bkp-vcta {
  background: var(--vn-lime);
  color: #3d2600;
}

.ch-bkp-vn .ch-bkp-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 44px 20px;
  text-align: center;
  background: var(--vn-paper);
  border: 1px dashed var(--vn-line);
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vn-muted);
}

@media (max-width: 640px) {
  .ch-bkp-vn .ch-bkp-filters {
    padding: 8px;
    gap: 8px;
    border-radius: 24px;
  }

  .ch-bkp-vn .ch-bkp-select,
  .ch-bkp-vn .ch-bkp-chips {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .ch-bkp-vn .ch-bkp-register {
    width: 100%;
    justify-content: center;
  }

  .ch-bkp-vn .ch-bkp-venue-photo {
    aspect-ratio: 16 / 9;
  }

  /* the lift reads as a jitter under a thumb */
  .ch-bkp-vn .ch-bkp-venue:hover {
    transform: none;
  }
}

/* ---- v17: container, type scale and the head ----------------------------
   The stage sits inside .ch-bkp-wrap, which is 1000px for the later steps. The
   venue list wants the design's 1220px, so the wrap is widened only when it is
   holding this step. Browsers without :has() keep 1000px, which still lays out
   correctly - it is a width, not a dependency.
   ------------------------------------------------------------------------ */
.ch-bkp-wrap:has(.ch-bkp-vn) {
  max-width: 1220px;
  padding: 50px 15px;
}

.ch-bkp-vn {
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

  .ch-bkp-vn *,
  .ch-bkp-vn *::before,
  .ch-bkp-vn *::after {
    box-sizing: border-box;
  }

/* display face: headline, card name, price and the tag pills */
.ch-bkp-vn .ch-bkp-heading,
.ch-bkp-vn .ch-bkp-venue-name-card,
.ch-bkp-vn .ch-bkp-vprice b,
.ch-bkp-vn .ch-bkp-vtag,
.ch-bkp-vn .ch-bkp-eyebrow {
  font-family: "Space Grotesk", Manrope, "Helvetica Neue", Arial, sans-serif;
}

.ch-bkp-vn .ch-bkp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: var(--vn-lime);
  color: #3d2600;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

  .ch-bkp-vn .ch-bkp-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3d2600;
  }

.ch-bkp-vn .ch-bkp-lead {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--vn-muted);
}

.ch-bkp-vn .ch-bkp-count {
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--vn-faint);
}

/* The type label sits after the rating, separated by a dot rather than a pipe.
   The dot only appears when there is a rating in front of it - an unrated venue
   would otherwise lead with a stray bullet. */
.ch-bkp-vn .ch-bkp-vtype {
  display: inline-flex;
  align-items: center;
}

  .ch-bkp-vn .ch-bkp-vrate + .ch-bkp-vtype::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c6c5d8;
    margin-right: 12px;
  }

.ch-bkp-vn .ch-bkp-vrate span {
  color: var(--vn-muted);
}

/* the courts pill's count bubble */
.ch-bkp-vn .ch-bkp-vcourts em {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vn-pitch);
  color: #fff;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
}

/* the pill has the bubble inset on the left, so it loses that side's padding */
.ch-bkp-vn .ch-bkp-vcourts:has(em) {
  padding-left: 7px;
}

@media (max-width: 640px) {
  .ch-bkp-wrap:has(.ch-bkp-vn) {
    padding: 30px 15px;
  }

  .ch-bkp-vn .ch-bkp-lead {
    max-width: none;
  }
}

/* ---- v17: search, sort and the grid/list switch ------------------------- */
.ch-bkp-vn .ch-bkp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 220px;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  margin: 0;
  background: var(--vn-bg);
  border: 1.5px solid transparent;
  border-radius: 999px;
}

  .ch-bkp-vn .ch-bkp-search:focus-within {
    background: var(--vn-paper);
    border-color: var(--vn-ink);
  }

  .ch-bkp-vn .ch-bkp-search svg {
    flex: 0 0 auto;
  }

  /* the storefront styles bare inputs with a border, a height and a full width,
     which would draw a second box inside this pill */
  .ch-bkp-vn .ch-bkp-search input {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--vn-ink);
  }

    .ch-bkp-vn .ch-bkp-search input::placeholder {
      color: var(--vn-faint);
      font-weight: 500;
    }

    /* the browser's own clear affordance sits oddly in a pill */
    .ch-bkp-vn .ch-bkp-search input::-webkit-search-cancel-button {
      -webkit-appearance: none;
      appearance: none;
    }

.ch-bkp-vn .ch-bkp-view {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-left: auto;
  background: var(--vn-bg);
  border-radius: 999px;
}

  .ch-bkp-vn .ch-bkp-view button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--vn-faint);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
  }

    .ch-bkp-vn .ch-bkp-view button:hover {
      color: var(--vn-ink);
    }

    .ch-bkp-vn .ch-bkp-view button[aria-pressed="true"] {
      background: var(--vn-paper);
      color: var(--vn-ink);
      box-shadow: 0 1px 3px rgba(31, 36, 82, .16);
    }

/* an unrated venue still gets the star, just not the accent colour */
.ch-bkp-vn .ch-bkp-vrate-new {
  color: #c6c5d8;
}

/* ---- list view ----------------------------------------------------------
   The class sits on #ch-bkp-venue-list, which outlives the cards inside it, so
   the choice survives a filter change.
   ------------------------------------------------------------------------ */
.ch-bkp-vn .ch-bkp-is-list .ch-bkp-venues {
  grid-template-columns: 1fr;
  gap: 12px;
}

.ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue {
  flex-direction: row;
  align-items: stretch;
  border-radius: 22px;
}

  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue:hover {
    transform: translateX(5px);
  }

.ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-photo {
  flex: 0 0 246px;
  aspect-ratio: auto;
  margin: 8px 0 8px 8px;
}

  /* the scrim and the overlaid city are a grid-card device; in a row the city
     reads better as part of the text column */
  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-photo::after {
    display: none;
  }

.ch-bkp-vn .ch-bkp-is-list .ch-bkp-vcity {
  position: static;
  color: var(--vn-muted);
  font-size: 13px;
  font-weight: 600;
}

.ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-body {
  flex-direction: row;
  align-items: center;
  gap: 26px;
  padding: 18px 22px;
}

.ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-main {
  gap: 8px;
}

.ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-side {
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding: 0 0 0 26px;
  border-top: 0;
  border-left: 1px solid #edecf5;
}

.ch-bkp-vn .ch-bkp-is-list .ch-bkp-vprice {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

@media (max-width: 880px) {
  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-photo {
    flex: 0 0 170px;
  }

  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-side {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid #edecf5;
  }
}

@media (max-width: 640px) {
  .ch-bkp-vn .ch-bkp-search {
    flex: 1 1 100%;
    width: 100%;
  }

  .ch-bkp-vn .ch-bkp-view {
    margin-left: auto;
  }

  /* a 246px thumbnail beside text is unreadable on a phone, so a list row goes
     back to being a stacked card */
  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue {
    flex-direction: column;
  }

  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue-photo {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    margin: 8px 8px 0;
  }

  .ch-bkp-vn .ch-bkp-is-list .ch-bkp-venue:hover {
    transform: none;
  }
}

/* ---- v17: sponsored strip -----------------------------------------------
   The design's own rules reach for --amber and --amber-ink, which it never
   defines - the kicker and the CTA hover would have come out unstyled. They are
   the same pair the rest of the section calls lime, so they resolve to that.
   ------------------------------------------------------------------------ */
.ch-bkp-vn .ch-bkp-ad {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 26px;
  padding: 24px 26px;
  border: 1px solid var(--vn-line);
  border-radius: 22px;
  background: linear-gradient(105deg, #1f2452 0%, #33306f 62%, #3b2f8f 100%);
  color: #fff;
  overflow: hidden;
}

  .ch-bkp-vn .ch-bkp-ad::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 165, 36, .34), transparent 68%);
    pointer-events: none;
  }

.ch-bkp-vn .ch-bkp-ad-tag {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.ch-bkp-vn .ch-bkp-ad-main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-width: 60ch;
}

.ch-bkp-vn .ch-bkp-ad-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--vn-lime);
  color: #3d2600;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ch-bkp-vn .ch-bkp-ad-h {
  margin: 0;
  font-family: "Space Grotesk", Manrope, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #fff;
}

.ch-bkp-vn .ch-bkp-ad-p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: #c8c9e4;
}

.ch-bkp-vn .ch-bkp-ad-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #a9abd0;
}

  .ch-bkp-vn .ch-bkp-ad-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .ch-bkp-vn .ch-bkp-ad-meta i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--vn-lime);
    font-style: normal;
  }

.ch-bkp-vn .ch-bkp-ad-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--vn-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}

  .ch-bkp-vn .ch-bkp-ad-cta:hover {
    background: var(--vn-lime);
    color: #3d2600;
  }

  .ch-bkp-vn .ch-bkp-ad-cta svg {
    fill: none;
    stroke: currentColor;
  }

@media (max-width: 720px) {
  .ch-bkp-vn .ch-bkp-ad {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
  }

  .ch-bkp-vn .ch-bkp-ad-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   Venue detail - v17 (indigo + amber)

   The wrapper carries .ch-bkp-vn as well, which already defines the v17 tokens,
   widens .ch-bkp-wrap to 1220px and styles the sponsored strip - so none of that
   is repeated here. Everything below is detail-page only.
   ============================================================================ */
.ch-bkp-vd {
  --vd-hair: #edecf5;
}

.ch-bkp-vd a {
  text-decoration: none;
}

/* ---- back link ---- */
.ch-bkp-vd .ch-bkp-vd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 12px;
  margin: 0 0 18px;
  border: 1px solid var(--vn-line);
  border-radius: 999px;
  background: var(--vn-paper);
  color: var(--vn-ink);
  font-size: 13px;
  font-weight: 700;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

  .ch-bkp-vd .ch-bkp-vd-back:hover {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: #fff;
  }

  .ch-bkp-vd .ch-bkp-vd-back svg {
    fill: none;
    stroke: currentColor;
  }

/* ---- header card ---- */
.ch-bkp-vd .ch-bkp-vd-head {
  display: grid;
  gap: 18px;
  padding: 26px 26px 22px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(31, 36, 82, .04);
}

.ch-bkp-vd .ch-bkp-vd-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vn-pitch);
}

  .ch-bkp-vd .ch-bkp-vd-kicker > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

    .ch-bkp-vd .ch-bkp-vd-kicker > span::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22a06b;
      box-shadow: 0 0 0 4px rgba(34, 160, 107, .16);
    }

  .ch-bkp-vd .ch-bkp-vd-kicker em {
    font-style: normal;
    color: #c6c5d8;
  }

  .ch-bkp-vd .ch-bkp-vd-kicker b {
    color: var(--vn-faint);
    font-weight: 700;
  }

.ch-bkp-vd .ch-bkp-vd-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.ch-bkp-vd .ch-bkp-vd-title {
  margin: 0;
  font-family: "Space Grotesk", Manrope, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--vn-ink);
}

.ch-bkp-vd .ch-bkp-vd-rating {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--vn-pitch-soft);
}

  .ch-bkp-vd .ch-bkp-vd-rating strong {
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--vn-pitch);
  }

  .ch-bkp-vd .ch-bkp-vd-rating div {
    display: grid;
    gap: 2px;
  }

  .ch-bkp-vd .ch-bkp-vd-rating i {
    font-style: normal;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--vn-lime);
  }

  .ch-bkp-vd .ch-bkp-vd-rating small {
    font-size: 11.5px;
    font-weight: 700;
    color: #6d67a8;
  }

.ch-bkp-vd .ch-bkp-vd-addr {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vn-muted);
  max-width: 62ch;
}

  .ch-bkp-vd .ch-bkp-vd-addr svg {
    flex: 0 0 auto;
    margin-top: 2px;
    fill: none;
    stroke: var(--vn-faint);
  }

  .ch-bkp-vd .ch-bkp-vd-addr a {
    margin-left: 2px;
    color: var(--vn-pitch);
    font-weight: 700;
    white-space: nowrap;
  }

    .ch-bkp-vd .ch-bkp-vd-addr a:hover {
      text-decoration: underline;
    }

.ch-bkp-vd .ch-bkp-vd-facts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--vd-hair);
}

.ch-bkp-vd .ch-bkp-vd-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--vn-bg);
  font-size: 13px;
  font-weight: 700;
}

  .ch-bkp-vd .ch-bkp-vd-fact svg {
    fill: none;
    stroke: var(--vn-pitch);
  }

.ch-bkp-vd .ch-bkp-vd-fact--courts {
  padding-left: 5px;
  background: var(--vn-pitch-soft);
  color: var(--vn-pitch);
}

  .ch-bkp-vd .ch-bkp-vd-fact--courts em {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vn-pitch);
    color: #fff;
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
  }

.ch-bkp-vd .ch-bkp-vd-fact--open {
  background: #e9f7ef;
  color: #186a37;
}

.ch-bkp-vd .ch-bkp-vd-fact--price {
  margin-left: auto;
  padding: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--vn-muted);
}

  .ch-bkp-vd .ch-bkp-vd-fact--price b {
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--vn-ink);
  }

/* ---- body grid ---- */
.ch-bkp-vd .ch-bkp-vd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr);
  gap: 28px;
  margin-top: 28px;
  align-items: start;
}

/* ---- gallery mosaic ---- */
.ch-bkp-vd .ch-bkp-vd-gal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  aspect-ratio: 16 / 9.2;
  border-radius: 24px;
  overflow: hidden;
  background: var(--vn-paper);
  box-shadow: 0 1px 2px rgba(31, 36, 82, .05);
}

.ch-bkp-vd .ch-bkp-vd-cell {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e7e6f0;
  border-radius: 2px;
}

  /* the first photo takes the tall left half of the mosaic */
  .ch-bkp-vd .ch-bkp-vd-cell:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .ch-bkp-vd .ch-bkp-vd-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  }

  .ch-bkp-vd .ch-bkp-vd-cell:hover img {
    transform: scale(1.05);
  }

  .ch-bkp-vd .ch-bkp-vd-cell:first-child::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(14, 16, 40, .72), rgba(14, 16, 40, 0));
    pointer-events: none;
  }

.ch-bkp-vd .ch-bkp-vd-hero {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 18px;
  display: grid;
  gap: 5px;
  color: #fff;
  pointer-events: none;
}

  .ch-bkp-vd .ch-bkp-vd-hero b {
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .ch-bkp-vd .ch-bkp-vd-hero span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #d9daea;
  }

  .ch-bkp-vd .ch-bkp-vd-hero i {
    font-style: normal;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #8f90ab;
  }

.ch-bkp-vd .ch-bkp-vd-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(16, 18, 46, .58);
  color: #fff;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 16px;
  font-weight: 700;
  transition: background .18s ease;
}

.ch-bkp-vd .ch-bkp-vd-cell:hover .ch-bkp-vd-more {
  background: rgba(16, 18, 46, .7);
}

/* one photo only - the mosaic collapses to a single frame */
.ch-bkp-vd .ch-bkp-vd-gal--single {
  display: block;
  aspect-ratio: 16 / 10;
}

.ch-bkp-vd .ch-bkp-vd-gal--single .ch-bkp-vd-cell {
  width: 100%;
  height: 100%;
}

.ch-bkp-vd .ch-bkp-vd-gal--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--vn-line);
  background: repeating-linear-gradient(135deg, #e7e6f0 0 10px, #dcdbe9 10px 20px);
  color: var(--vn-faint);
  font-size: 13px;
  font-weight: 600;
}

/* ---- content blocks ---- */
.ch-bkp-vd .ch-bkp-vd-block {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--vd-hair);
}

.ch-bkp-vd .ch-bkp-vd-h {
  margin: 0 0 14px;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vn-ink);
}

.ch-bkp-vd .ch-bkp-vd-p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vn-muted);
}

/* The description is written in the booker's editor and stored as markup, so the handful of tags
   that survive its allow-list need somewhere to land. A description saved before the editor
   existed is a single run of text and simply renders as one paragraph, as it always did. */
.ch-bkp-vd .ch-bkp-vd-p > p {
  margin: 0 0 10px;
}

  .ch-bkp-vd .ch-bkp-vd-p > p:last-child {
    margin-bottom: 0;
  }

.ch-bkp-vd .ch-bkp-vd-p ul,
.ch-bkp-vd .ch-bkp-vd-p ol {
  margin: 8px 0;
  padding-left: 22px;
}

.ch-bkp-vd .ch-bkp-vd-p li {
  margin: 3px 0;
}

/* .ch-bkp-vd a strips underlines for the page's own links; a link inside prose is the one place
   that reads as a mistake, so it is put back here */
.ch-bkp-vd .ch-bkp-vd-p a {
  color: var(--vn-pitch);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.ch-bkp-vd .ch-bkp-vd-amen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

  .ch-bkp-vd .ch-bkp-vd-amen li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    background: var(--vn-paper);
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
  }

  .ch-bkp-vd .ch-bkp-vd-amen svg {
    flex: 0 0 auto;
    fill: none;
    stroke: var(--vn-pitch);
  }

/* ---- aside ---- */
.ch-bkp-vd .ch-bkp-vd-aside {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 14px;
}

.ch-bkp-vd .ch-bkp-vd-bk {
  padding: 22px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 22px;
  box-shadow: 0 24px 44px -34px rgba(31, 36, 82, .45);
}

/* coupon ticket - the notches are the two half-circles punched out of the sides */
.ch-bkp-vd .ch-bkp-vd-coupon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: -4px -4px 18px;
  padding: 14px 16px;
  background: linear-gradient(90deg, #fff8ea, #fffdf8);
  border: 1.5px dashed #f0c477;
  border-radius: 16px;
}

  .ch-bkp-vd .ch-bkp-vd-coupon::before,
  .ch-bkp-vd .ch-bkp-vd-coupon::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vn-paper);
    border: 1.5px dashed #f0c477;
    transform: translateY(-50%);
  }

  .ch-bkp-vd .ch-bkp-vd-coupon::before {
    left: -7px;
    clip-path: inset(0 0 0 50%);
  }

  .ch-bkp-vd .ch-bkp-vd-coupon::after {
    right: -7px;
    clip-path: inset(0 50% 0 0);
  }

.ch-bkp-vd .ch-bkp-vd-coupon-off {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--vn-lime);
  color: #3d2600;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  text-align: center;
}

.ch-bkp-vd .ch-bkp-vd-coupon-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

  .ch-bkp-vd .ch-bkp-vd-coupon-main b {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
  }

  .ch-bkp-vd .ch-bkp-vd-coupon-main span {
    font-size: 14px;
    font-weight: 600;
    color: #8a7a55;
  }

/* court list */

/* location card */
.ch-bkp-vd .ch-bkp-vd-loc {
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 22px;
  overflow: hidden;
}

.ch-bkp-vd .ch-bkp-vd-map {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #e9e8f2;
}

  .ch-bkp-vd .ch-bkp-vd-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

.ch-bkp-vd .ch-bkp-vd-dir {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--vn-paper);
  color: var(--vn-ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px -6px rgba(31, 36, 82, .5);
}

  .ch-bkp-vd .ch-bkp-vd-dir:hover {
    background: var(--vn-ink);
    color: #fff;
  }

  .ch-bkp-vd .ch-bkp-vd-dir svg {
    fill: none;
    stroke: currentColor;
  }

.ch-bkp-vd .ch-bkp-vd-locbody {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.ch-bkp-vd .ch-bkp-vd-locrow {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  font-weight: 600;
}

  .ch-bkp-vd .ch-bkp-vd-locrow svg {
    flex: 0 0 auto;
    margin-top: 2px;
    fill: none;
    stroke: var(--vn-pitch);
  }

  .ch-bkp-vd .ch-bkp-vd-locrow small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vn-faint);
  }

@media (max-width: 980px) {
  .ch-bkp-vd .ch-bkp-vd-grid {
    grid-template-columns: 1fr;
  }

  .ch-bkp-vd .ch-bkp-vd-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .ch-bkp-vd .ch-bkp-vd-head {
    gap: 14px;
    padding: 20px 18px;
    border-radius: 20px;
  }

  .ch-bkp-vd .ch-bkp-vd-titlerow {
    gap: 14px;
  }

  .ch-bkp-vd .ch-bkp-vd-rating {
    padding: 9px 13px;
  }

    .ch-bkp-vd .ch-bkp-vd-rating strong {
      font-size: 22px;
    }

  .ch-bkp-vd .ch-bkp-vd-fact--price {
    margin-left: 0;
    width: 100%;
  }

  .ch-bkp-vd .ch-bkp-vd-coupon {
    margin: 0 0 16px;
  }

  /* the mosaic becomes a swipeable strip */
  .ch-bkp-vd .ch-bkp-vd-gal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    aspect-ratio: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

    .ch-bkp-vd .ch-bkp-vd-gal::-webkit-scrollbar {
      display: none;
    }

  .ch-bkp-vd .ch-bkp-vd-cell {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 16 / 11;
    border-radius: 18px;
  }

    .ch-bkp-vd .ch-bkp-vd-cell:first-child {
      grid-column: auto;
      grid-row: auto;
    }

  .ch-bkp-vd .ch-bkp-vd-hero b {
    font-size: 15px;
  }
}

/* ---- v17: unrated header badge ---- */
.ch-bkp-vd .ch-bkp-vd-rating--new strong {
  font-size: 20px;
  color: #c6c5d8;
}

/* ---- v17: court picker on the venue page ---- */

/* ---- v17: photo viewer ---- */
.ch-bkp-vd .ch-bkp-vd-lb {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 18px;
  background: rgba(13, 14, 32, .94);
  backdrop-filter: blur(6px);
}

  .ch-bkp-vd .ch-bkp-vd-lb[hidden] {
    display: none;
  }

.ch-bkp-vd .ch-bkp-vd-lb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}

.ch-bkp-vd .ch-bkp-vd-lb-count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #c9cadd;
}

.ch-bkp-vd .ch-bkp-vd-lb-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

  .ch-bkp-vd .ch-bkp-vd-lb-close:hover {
    background: rgba(255, 255, 255, .12);
  }

.ch-bkp-vd .ch-bkp-vd-lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

  .ch-bkp-vd .ch-bkp-vd-lb-stage img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 16px;
    object-fit: contain;
  }

.ch-bkp-vd .ch-bkp-vd-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #12122c;
  cursor: pointer;
}

  .ch-bkp-vd .ch-bkp-vd-lb-nav:hover {
    background: #fff;
  }

.ch-bkp-vd .ch-bkp-vd-lb-prev { left: 6px; }
.ch-bkp-vd .ch-bkp-vd-lb-next { right: 6px; }

.ch-bkp-vd .ch-bkp-vd-lb-strip {
  display: flex;
  gap: 8px;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}

  .ch-bkp-vd .ch-bkp-vd-lb-strip::-webkit-scrollbar {
    display: none;
  }

  .ch-bkp-vd .ch-bkp-vd-lb-strip button {
    flex: 0 0 84px;
    height: 58px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #20213c;
    cursor: pointer;
    opacity: .6;
    transition: opacity .16s ease, border-color .16s ease;
  }

    .ch-bkp-vd .ch-bkp-vd-lb-strip button img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .ch-bkp-vd .ch-bkp-vd-lb-strip button:hover {
      opacity: 1;
    }

    .ch-bkp-vd .ch-bkp-vd-lb-strip button[aria-current="true"] {
      border-color: #fff;
      opacity: 1;
    }

@media (max-width: 640px) {

  .ch-bkp-vd .ch-bkp-vd-lb-nav {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================================
   Slots panel - v17

   Steps 3 and 4 keep their own markup and behaviour; this only restyles them to
   match the venue page the customer just came from. The wrapper class is added
   in _SlotsPanel.cshtml.
   ============================================================================ */
.ch-bkp-sp {
  --vn-ink: #1f2452;
  --vn-paper: #ffffff;
  --vn-bg: #f4f4f8;
  --vn-line: #e3e2ee;
  --vn-muted: #63668a;
  --vn-faint: #9698b4;
  --vn-lime: #f5a524;
  --vn-pitch: #3b2f8f;
  --vn-pitch-soft: #ecebfa;
  --vd-hair: #edecf5;
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  color: var(--vn-ink);
}

.ch-bkp-sp .ch-bkp-step-title {
  margin: 0;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--vn-ink);
}

/* ---- court tabs ---- */
.ch-bkp-sp .ch-bkp-courts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 8px;
  margin: 12px 0 22px;
}

.ch-bkp-sp .ch-bkp-court {
  position: relative;
  display: grid;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 13px;
  border: 1.5px solid var(--vn-line);
  border-radius: 14px;
  background: var(--vn-paper);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ch-bkp-sp .ch-bkp-court:hover {
  border-color: #c9c8dd;
  transform: translateY(-1px);
}

.ch-bkp-sp .ch-bkp-court-name {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--vn-ink);
}

.ch-bkp-sp .ch-bkp-court-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--vn-ink);
  margin-bottom: 5px;
}
.ch-bkp-sp .ch-bkp-court-price {
  margin-top: 3px;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vn-pitch);
}

/* the chosen court gets the tick from the design */
.ch-bkp-sp .ch-bkp-court-on {
  border-color: var(--vn-ink);
  background: #fbfbff;
  box-shadow: 0 0 0 3px rgba(31, 36, 82, .07);
}

  .ch-bkp-sp .ch-bkp-court-on::after {
    content: "\2713";
    position: absolute;
    top: 9px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--vn-ink);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
  }

  .ch-bkp-sp .ch-bkp-court-on .ch-bkp-court-sub {
    color: var(--vn-muted);
  }

/* ---- date row ---- */
.ch-bkp-sp .ch-bkp-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ch-bkp-sp .ch-bkp-slot-head .ch-bkp-select {
  min-width: 0;
  width: auto;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--vn-line);
  border-radius: 11px;
  background-color: var(--vn-bg);
  background-image: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--vn-ink);
}

  .ch-bkp-sp .ch-bkp-slot-head .ch-bkp-select:focus {
    border-color: var(--vn-ink);
    background-color: var(--vn-paper);
    box-shadow: none;
  }

.ch-bkp-sp .ch-bkp-rate-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vn-muted);
}

/* ---- slot grid ---- */
.ch-bkp-sp .ch-bkp-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 8px;
}

.ch-bkp-sp .ch-bkp-slot {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  border: 1.5px solid var(--vn-line);
  border-radius: 12px;
  background: var(--vn-paper);
  text-align: center;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

  .ch-bkp-sp .ch-bkp-slot:hover {
    border-color: var(--vn-ink);
    transform: translateY(-1px);
  }

  /* the checkbox is the state, the label is the control */
  .ch-bkp-sp .ch-bkp-slot input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

.ch-bkp-sp .ch-bkp-slot-time {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--vn-ink);
}

.ch-bkp-sp .ch-bkp-slot-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--vn-ink);
}

/* booking-public.js puts ch-bkp-slot-picked on the label because the checkbox is
   visually hidden; :has() is the no-script equivalent of the same state */
.ch-bkp-sp .ch-bkp-slot-picked,
.ch-bkp-sp .ch-bkp-slot:has(input:checked) {
  background: var(--vn-ink);
  border-color: var(--vn-ink);
}

  .ch-bkp-sp .ch-bkp-slot-picked .ch-bkp-slot-time,
  .ch-bkp-sp .ch-bkp-slot-picked .ch-bkp-slot-price,
  .ch-bkp-sp .ch-bkp-slot:has(input:checked) .ch-bkp-slot-time,
  .ch-bkp-sp .ch-bkp-slot:has(input:checked) .ch-bkp-slot-price,
  .ch-bkp-sp .ch-bkp-slot:has(input:checked) .ch-bkp-slot-price span {
    color: #fff;
  }

.ch-bkp-sp .ch-bkp-slot-off,
.ch-bkp-sp .ch-bkp-slot:has(input:disabled) {
  background: #f5f5f9;
  border-color: #eceaf3;
  cursor: not-allowed;
  transform: none;
}

  .ch-bkp-sp .ch-bkp-slot-off:hover {
    border-color: #eceaf3;
    transform: none;
  }

  .ch-bkp-sp .ch-bkp-slot-off .ch-bkp-slot-time {
    color: #b3b4c6;
  }

  .ch-bkp-sp .ch-bkp-slot-off .ch-bkp-slot-price {
    color: #c3c4d3;
    font-weight: 600;
  }

.ch-bkp-sp .ch-bkp-night {
  color: var(--vn-pitch);
  font-weight: 800;
}

.ch-bkp-sp .ch-bkp-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 26px 18px;
  text-align: center;
  background: #f7f7fb;
  border: 1px dashed var(--vn-line);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vn-muted);
}

/* ---- summary bar ---- */
.ch-bkp-sp .ch-bkp-slot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--vd-hair);
}

.ch-bkp-sp .ch-bkp-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--vn-muted);
}

.ch-bkp-sp .ch-bkp-btn-primary {
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--vn-ink);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

  .ch-bkp-sp .ch-bkp-btn-primary:hover:not(:disabled) {
    background: var(--vn-lime);
    color: #3d2600;
  }

  .ch-bkp-sp .ch-bkp-btn-primary:disabled {
    background: #eceaf3;
    color: #a7a8bd;
    cursor: not-allowed;
  }

@media (max-width: 640px) {
  .ch-bkp-sp .ch-bkp-courts {
    grid-template-columns: 1fr;
  }

  .ch-bkp-sp .ch-bkp-slot-bar .ch-bkp-btn-primary {
    width: 100%;
  }
}

/* ---- v17: the slot picker inside the venue page's aside -------------------
   _SlotsPanel is rendered in the booking card now, which is a ~340px column
   rather than the full stage width it used to have. Only the tracks change.
   -------------------------------------------------------------------------- */
.ch-bkp-vd-bk .ch-bkp-sp .ch-bkp-courts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 9px 0 18px;
}

.ch-bkp-vd-bk .ch-bkp-sp .ch-bkp-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 315px;
  overflow-y: auto;
  padding-right: 2px;
  padding-bottom: 15px;
}

.ch-bkp-vd-bk .ch-bkp-sp .ch-bkp-slot-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.ch-bkp-vd-bk .ch-bkp-sp .ch-bkp-btn-primary {
  width: 100%;
}

/* the panel already sits in a bordered card, so it does not need its own */
.ch-bkp-vd-bk .ch-bkp-sp .ch-bkp-step-title {
  font-size: 16px;
}

/* ---- v17: paying, on the venue page --------------------------------------
   booking-public.js puts ch-bkp-stage-narrow on the stage as soon as the
   checkout panel lands in #ch-bkp-flow. Here that means the summary is sitting
   in the aside, which is far too narrow to pay in - so the grid drops to one
   column and the aside becomes the page.
   -------------------------------------------------------------------------- */
.ch-bkp-stage-narrow .ch-bkp-vd-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ch-bkp-stage-narrow .ch-bkp-vd-aside {
  position: static;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.ch-bkp-stage-narrow .ch-bkp-vd-bk .ch-bkp-sp .ch-bkp-slots {
  max-height: none;
}

/* ============================================================================
   Confirm and pay - v17 (indigo + amber)

   Step 5. Which amount the button offers, and whether the "due at the venue"
   line shows, both follow the checked radio through :has() - no script, so the
   panel cannot get out of step with the option the customer actually picked.
   ============================================================================ */
.ch-bkp-paystep {
  --vn-ink: #1f2452;
  --vn-ink-2: #2e3570;
  --vn-paper: #ffffff;
  --vn-bg: #f4f4f8;
  --vn-line: #e3e2ee;
  --vn-muted: #63668a;
  --vn-faint: #9698b4;
  --vn-lime: #f5a524;
  --vn-pitch: #3b2f8f;
  --vn-pitch-soft: #ecebfa;
  --vd-hair: #edecf5;
  --pay-green: #186a37;
  --pay-green-soft: #e9f7ef;
  max-width: 1000px;
  margin: 0 auto;
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  color: var(--vn-ink);
}

  .ch-bkp-paystep *,
  .ch-bkp-paystep *::before,
  .ch-bkp-paystep *::after {
    box-sizing: border-box;
  }

.ch-bkp-paystep .ch-bkp-pay-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 12px;
  margin: 0 0 18px;
  border: 1px solid var(--vn-line);
  border-radius: 999px;
  background: var(--vn-paper);
  color: var(--vn-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

  .ch-bkp-paystep .ch-bkp-pay-back:hover {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: #fff;
  }

  .ch-bkp-paystep .ch-bkp-pay-back svg {
    fill: none;
    stroke: currentColor;
  }

.ch-bkp-paystep .ch-bkp-pay-title {
  margin: 0;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--vn-ink);
}

.ch-bkp-paystep .ch-bkp-pay-sub {
  margin: 10px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vn-muted);
}

  .ch-bkp-paystep .ch-bkp-pay-sub b {
    color: var(--vn-ink);
    font-weight: 800;
  }

.ch-bkp-paystep .ch-bkp-pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: 24px;
  margin-top: 26px;
  align-items: start;
}

.ch-bkp-paystep .ch-bkp-pay-card {
  padding: 22px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 22px;
}

  .ch-bkp-paystep .ch-bkp-pay-card + .ch-bkp-pay-card {
    margin-top: 16px;
  }

.ch-bkp-paystep .ch-bkp-pay-h {
  margin: 0 0 4px;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vn-ink);
}

  .ch-bkp-paystep .ch-bkp-pay-note {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    color: #777;
  }

/* ---- booking summary ---- */
.ch-bkp-paystep .ch-bkp-pay-book {
  display: grid;
  gap: 14px;
}

.ch-bkp-paystep .ch-bkp-pay-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

  .ch-bkp-paystep .ch-bkp-pay-row svg {
    flex: 0 0 auto;
    fill: none;
    stroke: var(--vn-pitch);
  }

  .ch-bkp-paystep .ch-bkp-pay-row div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .ch-bkp-paystep .ch-bkp-pay-row b {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
  }

  .ch-bkp-paystep .ch-bkp-pay-row span {
    font-size: 14px;
    font-weight: 600;
    color: var(--vn-muted);
    line-height: normal;
  }

.ch-bkp-paystep .ch-bkp-pay-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px solid var(--vd-hair);
}

.ch-bkp-paystep .ch-bkp-pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--vn-pitch-soft);
  color: var(--vn-pitch);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---- pay-now options ---- */
.ch-bkp-paystep .ch-bkp-pay-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ch-bkp-paystep .ch-bkp-pay-opt {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1.5px solid var(--vn-line);
  border-radius: 16px;
  background: var(--vn-paper);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

  .ch-bkp-paystep .ch-bkp-pay-opt:hover {
    border-color: #c9c8dd;
  }

  .ch-bkp-paystep .ch-bkp-pay-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .ch-bkp-paystep .ch-bkp-pay-opt b {
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
  }

  .ch-bkp-paystep .ch-bkp-pay-opt small {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #888;
    letter-spacing: 0.3px;
  }

.ch-bkp-paystep .ch-bkp-pay-opt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

  .ch-bkp-paystep .ch-bkp-pay-opt-top > span:first-child {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
  }

.ch-bkp-paystep .ch-bkp-pay-tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--vn-line);
  border-radius: 50%;
}

  .ch-bkp-paystep .ch-bkp-pay-tick::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
  }

.ch-bkp-paystep .ch-bkp-pay-opt:has(input:checked) {
  border-color: var(--vn-ink);
  background: #fbfbff;
  box-shadow: 0 0 0 3px rgba(31, 36, 82, .07);
}

  .ch-bkp-paystep .ch-bkp-pay-opt:has(input:checked) .ch-bkp-pay-tick {
    border-color: var(--vn-ink);
  }

    .ch-bkp-paystep .ch-bkp-pay-opt:has(input:checked) .ch-bkp-pay-tick::after {
      background: var(--vn-ink);
    }

/* ---- right rail ---- */
.ch-bkp-paystep .ch-bkp-pay-rail {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 14px;
}

.ch-bkp-paystep .ch-bkp-pay-bill {
  padding: 22px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 22px;
  box-shadow: 0 24px 44px -34px rgba(31, 36, 82, .45);
}

.ch-bkp-paystep .ch-bkp-pay-hold {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #f4dcae;
  border-radius: 14px;
  background: #fff8ea;
}

  .ch-bkp-paystep .ch-bkp-pay-hold svg {
    flex: 0 0 auto;
    fill: none;
    stroke: #b8760c;
  }

  .ch-bkp-paystep .ch-bkp-pay-hold > span {
    display: grid;
    gap: 1px;
  }

  .ch-bkp-paystep .ch-bkp-pay-hold b {
    font-size: 16px;
    font-weight: 700;
    color: #8a5a00;
    font-variant-numeric: tabular-nums;
  }

  .ch-bkp-paystep .ch-bkp-pay-hold span span,
  .ch-bkp-paystep .ch-bkp-pay-hold > span > span:last-child {
    font-size: 15px;
    font-weight: 400;
    color: #a07a2e;
  }

.ch-bkp-paystep .ch-bkp-pay-rows {
  display: grid;
  gap: 11px;
  font-size: 14px;
  font-weight: 700;
}

  .ch-bkp-paystep .ch-bkp-pay-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 17px;
  }

    .ch-bkp-paystep .ch-bkp-pay-line > span:first-child {
      color: var(--vn-muted);
      font-weight: 600;
      font-size: 17px;
    }

    .ch-bkp-paystep .ch-bkp-pay-line em {
      display: block;
      margin-top: 2px;
      font-style: normal;
      font-size: 14px;
      font-weight: 700;
      color: var(--vn-faint);
    }

.ch-bkp-paystep .ch-bkp-pay-line-off,
.ch-bkp-paystep .ch-bkp-pay-line-off > span:first-child {
  color: var(--pay-green);
  font-weight: 700;
}

  .ch-bkp-paystep .ch-bkp-pay-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--vd-hair);
    font-size: 24px;
    font-weight: 700;
  }

    .ch-bkp-paystep .ch-bkp-pay-total b {
      font-family: "Space Grotesk", Manrope, sans-serif;
      font-size: 24px;
      letter-spacing: -.03em;
      line-height: normal;
    }

.ch-bkp-paystep .ch-bkp-pay-due {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff8ea;
  font-size: 12.5px;
  font-weight: 700;
  color: #3d2600;
}

.ch-bkp-paystep .ch-bkp-pay-cta {
  width: 100%;
  height: 54px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--vn-ink);
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

  .ch-bkp-paystep .ch-bkp-pay-cta:hover {
    background: var(--vn-lime);
    color: #3d2600;
  }

  .ch-bkp-paystep .ch-bkp-pay-cta:disabled {
    background: #eceaf3;
    color: #a7a8bd;
    cursor: not-allowed;
  }

/* The button carries both amounts and the advance line is rendered up front;
   the checked radio decides which of them is on screen. */
.ch-bkp-paystep [data-bkp-pay-advance],
.ch-bkp-paystep .ch-bkp-pay-due {
  display: none;
}

.ch-bkp-paystep:has(input[name="paymentTypeId"][value="20"]:checked) [data-bkp-pay-full] {
  display: none;
}

.ch-bkp-paystep:has(input[name="paymentTypeId"][value="20"]:checked) [data-bkp-pay-advance] {
  display: inline;
}

.ch-bkp-paystep:has(input[name="paymentTypeId"][value="20"]:checked) .ch-bkp-pay-due {
  display: block;
}

.ch-bkp-paystep .ch-bkp-pay-safe {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--vn-faint);
}

  .ch-bkp-paystep .ch-bkp-pay-safe li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .ch-bkp-paystep .ch-bkp-pay-safe svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
  }

.ch-bkp-paystep .ch-bkp-pay-terms {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--vn-faint);
}

@media (max-width: 940px) {
  .ch-bkp-paystep .ch-bkp-pay-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ch-bkp-paystep .ch-bkp-pay-rail {
    position: static;
  }
}

@media (max-width: 560px) {
  .ch-bkp-paystep .ch-bkp-pay-card,
  .ch-bkp-paystep .ch-bkp-pay-bill {
    padding: 18px;
    border-radius: 18px;
  }

  .ch-bkp-paystep .ch-bkp-pay-opts {
    grid-template-columns: minmax(0, 1fr);
  }
  .ch-bkp-vd .ch-bkp-vd-bk {
    padding: 14px;
    border-radius: 12px;
  }

  .ch-bkp-vd .ch-bkp-vd-loc,
  .ch-bkp-vn .ch-bkp-ad {
    border-radius: 12px;
  }
}

/* the payment step needs the full column, not the venue page's aside */
.ch-bkp-stage-narrow .ch-bkp-vd-aside {
  max-width: 1000px;
}

/* ---- v17: the venue page while the payment step is open -------------------
   booking-public.js puts ch-bkp-stage-narrow on the stage the moment the
   checkout panel lands in #ch-bkp-flow. At that point the customer is paying,
   not browsing the venue - so the page becomes the summary and nothing else.

   Hidden rather than unrendered because the panel is swapped back out by the
   "Select slots" link, and the venue has to be whole again the instant it is.
   -------------------------------------------------------------------------- */
.ch-bkp-stage-narrow .ch-bkp-vd-back,
.ch-bkp-stage-narrow .ch-bkp-vd-head,
.ch-bkp-stage-narrow .ch-bkp-vd-grid > div:first-child,
.ch-bkp-stage-narrow .ch-bkp-vd-loc,
.ch-bkp-stage-narrow .ch-bkp-vd-coupon {
  display: none;
}

/* the payment panel brings its own cards, so the booking card's chrome would be
   a box drawn around a box */
.ch-bkp-stage-narrow .ch-bkp-vd-bk {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ch-bkp-stage-narrow .ch-bkp-vd-grid {
  gap: 0;
  margin-top: 0;
}

/* ============================================================================
   Paying - v17

   The page the gateway's own window opens over. It is read at a glance, past a
   modal, so it says only what the customer needs to know they are paying the
   right ground for the right slots - and that closing it would be a bad idea.
   ============================================================================ */
.ch-bkp-paywait {
  --vn-ink: #1f2452;
  --vn-paper: #ffffff;
  --vn-bg: #f4f4f8;
  --vn-line: #e3e2ee;
  --vn-muted: #63668a;
  --vn-faint: #9698b4;
  --vn-lime: #f5a524;
  --vn-pitch: #3b2f8f;
  --vn-pitch-soft: #ecebfa;
  --vd-hair: #edecf5;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 0 40px;
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  color: var(--vn-ink);
  text-align: center;
}

  .ch-bkp-paywait *,
  .ch-bkp-paywait *::before,
  .ch-bkp-paywait *::after {
    box-sizing: border-box;
  }

.ch-bkp-paywait-card {
  padding: 34px 28px 30px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 24px;
  box-shadow: 0 24px 44px -34px rgba(31, 36, 82, .45);
}

/* the ring keeps turning for as long as the gateway window is open, which is the
   one honest signal this page can give that nothing has stalled */
.ch-bkp-paywait-spin {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 20px;
  border: 3px solid var(--vn-pitch-soft);
  border-top-color: var(--vn-pitch);
  border-radius: 50%;
  animation: ch-bkp-paywait-turn .9s linear infinite;
}

@keyframes ch-bkp-paywait-turn {
  to { transform: rotate(360deg); }
}

.ch-bkp-paywait-venue {
  margin: 0;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--vn-ink);
}

.ch-bkp-paywait-meta {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vn-muted);
}

.ch-bkp-paywait-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--vd-hair);
  text-align: left;
}

  .ch-bkp-paywait-amount span {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vn-muted);
  }

  .ch-bkp-paywait-amount b {
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
  }

.ch-bkp-paywait-due {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff8ea;
  font-size: 12.5px;
  font-weight: 700;
  color: #3d2600;
  text-align: left;
}

/* #ch-bkp-pay-note is text-only on purpose: the checkout handler swaps its
   textContent to "verifying" once the gateway hands the payment back */
.ch-bkp-paywait-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 24px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--vn-line);
  border-radius: 14px;
  background: var(--vn-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--vn-muted);
}

.ch-bkp-paywait-safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--vn-faint);
}

  .ch-bkp-paywait-safe svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
  }

@media (prefers-reduced-motion: reduce) {
  .ch-bkp-paywait-spin {
    animation-duration: 2.4s;
  }
}

@media (max-width: 560px) {
  .ch-bkp-paywait-card {
    padding: 26px 20px 24px;
    border-radius: 20px;
  }

  .ch-bkp-paywait-amount {
    flex-direction: column;
    gap: 4px;
  }
}

/* ============================================================================
   Booking confirmed - v17 (indigo + amber)

   The pass the customer keeps. Styled as a ticket with a torn edge because that
   is what it is: the top half is the booking, the strip below it is what was
   paid for it.
   ============================================================================ */
.ch-bkp-cf {
  --vn-ink: #1f2452;
  --vn-paper: #ffffff;
  --vn-bg: #f4f4f8;
  --vn-line: #e3e2ee;
  --vn-muted: #63668a;
  --vn-faint: #9698b4;
  --vn-lime: #f5a524;
  --vn-pitch: #3b2f8f;
  --vn-pitch-soft: #ecebfa;
  --vd-hair: #edecf5;
  --cf-green: #186a37;
  --cf-green-soft: #e9f7ef;
  max-width: 1000px;
  margin: 0 auto;
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  color: var(--vn-ink);
}

  .ch-bkp-cf *,
  .ch-bkp-cf *::before,
  .ch-bkp-cf *::after {
    box-sizing: border-box;
  }

.ch-bkp-cf-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 12px;
  margin: 0 0 18px;
  border: 1px solid var(--vn-line);
  border-radius: 999px;
  background: var(--vn-paper);
  color: var(--vn-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

  .ch-bkp-cf-back:hover {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: #fff;
  }

  .ch-bkp-cf-back svg {
    fill: none;
    stroke: currentColor;
  }

/* ---- hero ---- */
.ch-bkp-cf-hero {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.ch-bkp-cf-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1f7a48, #0d4227);
  color: #fff;
  box-shadow: 0 14px 28px -14px rgba(13, 66, 39, .6);
}

  .ch-bkp-cf-mark svg {
    fill: none;
    stroke: currentColor;
  }

  .ch-bkp-cf-mark::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid rgba(13, 66, 39, .26);
    animation: ch-bkp-cf-pulse 2.4s ease-out infinite;
  }

@keyframes ch-bkp-cf-pulse {
  0% { transform: scale(.9); opacity: .9; }
  70% { transform: scale(1.14); opacity: 0; }
  100% { opacity: 0; }
}

.ch-bkp-cf-title {
  margin: 0;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--vn-ink);
}

.ch-bkp-cf-sub {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--vn-muted);
}

  .ch-bkp-cf-sub b {
    color: var(--vn-ink);
    font-weight: 800;
  }

/* ---- ticket ---- */
.ch-bkp-tk {
  position: relative;
  margin-top: 28px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 50px -38px rgba(31, 36, 82, .5);
}

.ch-bkp-tk-top {
  padding: 24px 26px;
}

.ch-bkp-tk-id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

  .ch-bkp-tk-id > span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vn-faint);
  }

  .ch-bkp-tk-id b {
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
  }

.ch-bkp-tk-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1.5px solid var(--vn-line);
  border-radius: 8px;
  background: var(--vn-paper);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--vn-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

  .ch-bkp-tk-copy:hover {
    border-color: var(--vn-ink);
    color: var(--vn-ink);
  }

  .ch-bkp-tk-copy.ch-bkp-copied {
    background: var(--cf-green-soft);
    border-color: #8fca9f;
    color: var(--cf-green);
  }

  .ch-bkp-tk-copy svg {
    fill: none;
    stroke: currentColor;
  }

.ch-bkp-tk-venue {
  margin: 0 0 4px;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.ch-bkp-tk-court {
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vn-pitch);
}

.ch-bkp-tk-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.ch-bkp-tk-meta div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ch-bkp-tk-meta span {
  font-size: 16px;
  font-weight: 500;
  color: #444;
}

.ch-bkp-tk-meta b {
  font-size: 16px;
  font-weight: 800;
}

.ch-bkp-tk-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.ch-bkp-tk-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--vn-pitch-soft);
  color: var(--vn-pitch);
  font-size: 14px;
  font-weight: 800;
}

/* the torn edge, with the two punched notches sitting over the page ground */
.ch-bkp-tk-tear {
  position: relative;
  height: 1px;
  background: repeating-linear-gradient(90deg, #dcdaea 0 7px, transparent 7px 14px);
}

  .ch-bkp-tk-tear::before,
  .ch-bkp-tk-tear::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vn-bg);
    border: 1px solid var(--vn-line);
  }

  .ch-bkp-tk-tear::before { left: -12px; }
  .ch-bkp-tk-tear::after { right: -12px; }

.ch-bkp-tk-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 26px;
  background: #ebf6ff;
}

  .ch-bkp-tk-pay div {
    display: grid;
    gap: 3px;
  }

  .ch-bkp-tk-pay span {
    font-size: 14px;
    font-weight: 600;
    color: var(--vn-faint);
  }

  .ch-bkp-tk-pay b {
    font-family: "Space Grotesk", Manrope, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
  }

  .ch-bkp-tk-pay em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--vn-muted);
  }

.ch-bkp-tk-paid b { color: var(--cf-green); }
.ch-bkp-tk-due b { color: #3d2600; }

/* ---- actions ---- */
.ch-bkp-cf-acts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ch-bkp-cf-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--vn-line);
  border-radius: 14px;
  background: var(--vn-paper);
  color: var(--vn-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

  .ch-bkp-cf-act:hover {
    border-color: var(--vn-ink);
    color: var(--vn-ink);
  }

  .ch-bkp-cf-act svg {
    flex: 0 0 auto;
    fill: none;
    stroke: var(--vn-pitch);
  }

.ch-bkp-cf-act--primary {
  border-color: var(--vn-ink);
  background: var(--vn-ink);
  color: #fff;
}

  .ch-bkp-cf-act--primary svg { stroke: #fff; }

  .ch-bkp-cf-act--primary:hover {
    background: var(--vn-lime);
    border-color: var(--vn-lime);
    color: #3d2600;
  }

    .ch-bkp-cf-act--primary:hover svg { stroke: #3d2600; }

/* ---- info columns ---- */
.ch-bkp-cf-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.ch-bkp-cf-card {
  padding: 22px;
  background: var(--vn-paper);
  border: 1px solid var(--vn-line);
  border-radius: 20px;
}

.ch-bkp-cf-h {
  margin: 0 0 14px;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.ch-bkp-cf-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vn-muted);
}

  .ch-bkp-cf-list li {
    display: flex;
    gap: 10px;
  }

  .ch-bkp-cf-list svg {
    flex: 0 0 auto;
    margin-top: 2px;
    fill: none;
    stroke: var(--vn-pitch);
  }

  .ch-bkp-cf-list b {
    color: var(--vn-ink);
    font-weight: 800;
  }

.ch-bkp-cf-help {
  display: grid;
  gap: 10px;
}

  .ch-bkp-cf-help a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--vn-line);
    border-radius: 13px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: var(--vn-ink);
    transition: border-color .15s ease;
  }

    .ch-bkp-cf-help a:hover {
      border-color: var(--vn-ink);
      color: var(--vn-ink);
    }

  .ch-bkp-cf-help svg {
    flex: 0 0 auto;
    fill: none;
    stroke: var(--vn-pitch);
  }

  .ch-bkp-cf-help small {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vn-faint);
  }

.ch-bkp-cf-foot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vn-faint);
}

  .ch-bkp-cf-foot a {
    color: var(--vn-pitch);
    text-decoration: none;
  }

    .ch-bkp-cf-foot a:hover {
      text-decoration: underline;
    }

@media (max-width: 820px) {
  .ch-bkp-cf-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ch-bkp-tk-top,
  .ch-bkp-tk-pay {
    padding: 20px 18px;
  }

  .ch-bkp-cf-card {
    padding: 18px;
  }
}

/* ============================================================================
   Date field - mobiscroll

   The field keeps its own look. Mobiscroll brings a full text-field style of
   its own, which would drop a second border and a different font into the slot
   header, so the parts of it that reach the input are turned back off here -
   only the calendar it opens is left to the library.

   The popup itself is hung off <body>, so it cannot be scoped under .ch-bkp-sp
   the way the rest of this file is. Only the type face is set on it, to keep it
   from arriving in a system font next to Manrope.
   ============================================================================ */
.ch-bkp-sp .ch-bkp-slot-head .ch-bkp-select[data-bkp-ms="1"] {
  font-family: inherit;
  cursor: pointer;
  /* room for the calendar mark, which sits where the native field's own used to */
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f2452' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

  /* readonly is how the picker keeps a half-typed date out of the field - it is
     still an enabled control and must not be greyed out like a disabled one */
  .ch-bkp-sp .ch-bkp-slot-head .ch-bkp-select[data-bkp-ms="1"]:read-only {
    opacity: 1;
    color: var(--vn-ink);
  }

.mbsc-popup .mbsc-font,
.mbsc-popup.mbsc-font {
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================================
   My bookings - v7 (entry pass)

   A booking is a ticket, so the list is made of tickets: a code and a status on
   the top half, what was paid on the bottom, and a torn seam between them. The
   next slot is lifted out above the list as a full pass, because that is the
   one the customer opened the page to look at.

   Everything is scoped under .ch-bkp-mb so it cannot reach the rest of the
   storefront, and the tokens are declared here rather than shared - this page
   runs a colder palette than the venue list does.
   ============================================================================ */
/* The page runs on its own ground rather than the theme's. That is not only for
   looks: every torn seam on this page is faked by punching circles filled with
   the background colour, so the colour behind the cards has to be one this file
   knows. Left to the theme, the notches would show up as pale dots. */
.ch-bkp-mb-page {
  padding: 30px 0;
}

/* The tokens sit on both roots, not on .ch-bkp-mb alone. The popups are pinned
   to the viewport, so they are rendered as siblings of the page rather than
   inside it - and a custom property only reaches what it encloses. Declared in
   one place, every var() inside a popup would resolve to nothing: no white box,
   no borders on its buttons, and the theme's own font instead of this page's. */
.ch-bkp-mb,
.ch-bkp-mb-modal {
  --mb-ink: #12203a;
  --mb-paper: #ffffff;
  --mb-bg: #eef1f5;
  --mb-line: #dee3ec;
  --mb-line-strong: #d6dbe4;
  --mb-muted: #5a6579;
  --mb-faint: #8b95a8;
  --mb-accent: #ff6b4a;
  --mb-accent-soft: #ffd9c9;
  --mb-go: #0f6b45;
  --mb-go-soft: #d8f3e3;
  --mb-go-line: #a9e0c4;
  --mb-stop: #b0402f;
  --mb-stop-soft: #fde3e0;
  --mb-stop-line: #f6c7c1;
  --mb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family: Sora, Manrope, "Helvetica Neue", Arial, sans-serif;
  color: var(--mb-ink);
}

.ch-bkp-mb {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

  .ch-bkp-mb *,
  .ch-bkp-mb *::before,
  .ch-bkp-mb *::after,
  .ch-bkp-mb-modal *,
  .ch-bkp-mb-modal *::before,
  .ch-bkp-mb-modal *::after {
    box-sizing: border-box;
  }

@keyframes ch-bkp-mb-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes ch-bkp-mb-pop {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* the halo behind the status chip on the pass - it is the one thing on the page
   that is still happening, so it is the one thing that moves on its own */
@keyframes ch-bkp-mb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 107, 69, .45); }
  50% { box-shadow: 0 0 0 6px rgba(15, 107, 69, 0); }
}

/* ---- page head ---- */
.ch-bkp-mb-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  animation: ch-bkp-mb-rise 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.ch-bkp-mb-headtext {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ch-bkp-mb-eyebrow {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--mb-ink);
  color: var(--mb-accent-soft);
  font: 600 11px/1 var(--mb-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ch-bkp-mb-title {
  margin: 0;
  font-size: clamp(32px, 6.5vw, 56px);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--mb-ink);
}

/* ---- status filters ---- */
.ch-bkp-mb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ch-bkp-mb-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--mb-line-strong);
  border-radius: 999px;
  background: var(--mb-paper);
  color: #3e4a5f;
  font: 600 13px/1 Sora, sans-serif;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), background .16s ease, color .16s ease, border-color .16s ease;
}

  .ch-bkp-mb-filter:hover {
    transform: translateY(-2px);
  }

  .ch-bkp-mb-filter:active {
    transform: scale(.96);
  }

  .ch-bkp-mb-filter b {
    padding: 3px 7px;
    border-radius: 999px;
    background: #e8ecf2;
    color: #77839a;
    font: 600 11px/1 var(--mb-mono);
  }

  .ch-bkp-mb-filter[aria-pressed="true"] {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-paper);
  }

    .ch-bkp-mb-filter[aria-pressed="true"] b {
      background: rgba(255, 255, 255, .16);
      color: var(--mb-accent-soft);
    }

/* ---- the next slot, as a full pass ---- */
.ch-bkp-mb-pass {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 24px;
  background: var(--mb-ink);
  color: var(--mb-paper);
  overflow: hidden;
  animation: ch-bkp-mb-rise 720ms cubic-bezier(.22, 1, .36, 1) 90ms both;
  transition: transform .26s ease, box-shadow .26s ease;
}

  .ch-bkp-mb-pass:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 50px -30px rgba(18, 32, 58, .6);
  }

  /* the warm bloom in the corner - the pass is the only dark panel on the page
     and reads flat without it */
  .ch-bkp-mb-pass::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -40px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 74, .75) 0%, rgba(255, 107, 74, 0) 70%);
    pointer-events: none;
  }

.ch-bkp-mb-passmain {
  position: relative;
  z-index: 1;
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3vw, 32px);
}

.ch-bkp-mb-passtop {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.ch-bkp-mb-kicker {
  font: 700 11px/1 var(--mb-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffb99f;
}

.ch-bkp-mb-live {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #0b5737;
  border-radius: 7px;
  background: var(--mb-go);
  color: var(--mb-paper);
  font: 600 11px/1 var(--mb-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: ch-bkp-mb-pulse 2800ms ease-in-out infinite;
}

.ch-bkp-mb-when {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch-bkp-mb-time {
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
}

.ch-bkp-mb-day {
  font-size: 18px;
  color: rgba(255, 255, 255, .7);
}

.ch-bkp-mb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  padding-top: 4px;
}

  .ch-bkp-mb-facts > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .ch-bkp-mb-facts span {
    font: 400 16px / 1 var(--mb-mono);
    color: rgba(255, 255, 255, 0.7);
  }

  .ch-bkp-mb-facts b {
    font-size: 17px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

.ch-bkp-mb-passacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.ch-bkp-mb-passbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  border-radius: 13px;
  background: var(--mb-accent);
  color: var(--mb-paper);
  font: 700 14px/1 Sora, sans-serif;
  cursor: pointer;
  transition: filter .18s ease;
  margin: 0;
}

  .ch-bkp-mb-passbtn:hover {
    filter: brightness(.95);
  }

  /* the upload control is a label around a hidden file input - the input is the
     control, the label is the button the customer sees */
  .ch-bkp-mb-passbtn input[type="file"] {
    display: none;
  }

.ch-bkp-mb-passbtn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .26);
  color: var(--mb-paper);
  font-weight: 600;
}

  .ch-bkp-mb-passbtn--ghost:hover {
    filter: none;
    background: rgba(255, 255, 255, .08);
  }

/* ---- the pass stub ---- */
.ch-bkp-mb-stub {
  position: relative;
  z-index: 1;
  flex: 0 1 400px;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(22px, 3vw, 32px);
  border-left: 2px dashed rgba(255, 255, 255, .22);
}

  /* the punched holes at each end of the seam, filled with the page ground so
     the seam reads as torn rather than drawn */
  .ch-bkp-mb-stub::before,
  .ch-bkp-mb-stub::after {
    content: "";
    position: absolute;
    left: -15px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
  }

  .ch-bkp-mb-stub::before { top: -15px; }
  .ch-bkp-mb-stub::after { bottom: -15px; }

.ch-bkp-mb-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

  .ch-bkp-mb-ref span {
    font: 600 10px/1 var(--mb-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
  }

  .ch-bkp-mb-ref b {
    font: 700 22px/1 var(--mb-mono);
    letter-spacing: .02em;
    overflow-wrap: anywhere;
  }

.ch-bkp-mb-stublist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

  .ch-bkp-mb-stublist div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .ch-bkp-mb-stublist span {
    flex: 0 0 auto;
    font: 600 14px / 1 var(--mb-mono);
    color: rgba(255, 255, 255, .5);
  }

  .ch-bkp-mb-stublist b {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
  }

.ch-bkp-mb-stubtotal {
  gap: 5px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, .22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

  .ch-bkp-mb-stubtotal span {
    font: 600 14px / 1 var(--mb-mono);
    color: rgba(255, 255, 255, .5);
    line-height: normal;
  }

  .ch-bkp-mb-stubtotal b {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mb-accent-soft);
  }

/* ---- section rule ---- */
.ch-bkp-mb-rule {
  display: flex;
  align-items: center;
  gap: 14px;
}

  .ch-bkp-mb-rule h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mb-ink);
  }

  .ch-bkp-mb-rule i {
    flex: 1;
    display: block;
    height: 1px;
    background: var(--mb-line-strong);
  }

/* ---- the list ---- */
.ch-bkp-mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

/* ---- one palette per status ----------------------------------------------

   Status is the only thing that colours a card, and it is declared once, here.
   The card, its pill and its hover glow all read the same four tokens, so a
   status can never end up green in one place and grey in another.

     --st        the status colour itself, for the border and accent on hover
     --st-rgb    the same colour as channels, so the glow can be mixed at .2
     --st-line   the pill's border tint
     --st-rest   the card's border at rest

   --st-rest is its own token because cancelled is the one status that does not
   tint the card at rest: a called-off booking is history, and outlining it in
   red would make the calmest row on the page the loudest.
   -------------------------------------------------------------------------- */
.ch-bkp-mb-card[data-bkp-mb-status="confirmed"] {
  --st: #22c55e;
  --st-rgb: 34, 197, 94;
  --st-soft: #e6f9ed;
  --st-text: #15803d;
  --st-line: #b7ebc9;
  --st-rest: #b7ebc9;
}

.ch-bkp-mb-card[data-bkp-mb-status="completed"] {
  --st: #3b82f6;
  --st-rgb: 59, 130, 246;
  --st-soft: #e8f1fe;
  --st-text: #1d4ed8;
  --st-line: #bcd8fd;
  --st-rest: #bcd8fd;
}

.ch-bkp-mb-card[data-bkp-mb-status="cancelled"] {
  --st: #ef4444;
  --st-rgb: 239, 68, 68;
  --st-soft: #fdeaea;
  --st-text: #b91c1c;
  --st-line: #f8c9c9;
  --st-rest: var(--mb-line);
}

.ch-bkp-mb-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--st-rest, var(--mb-line));
  border-radius: 20px;
  background: var(--mb-paper);
  box-shadow: none;
  animation: ch-bkp-mb-rise 640ms cubic-bezier(.22, 1, .36, 1) both;
  transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

  /* Lit by the mouseenter/mouseleave pair in the view rather than by :hover.
     A tap on a touch screen leaves :hover stuck on the last card pressed until
     something else is touched, so on a phone the list would keep one card glowing
     for no reason; a bound listener only ever fires for a real pointer.
     :focus-within is kept in CSS because tabbing into a card is not hovering it,
     and a keyboard user still needs to see which card they are in. */
  .ch-bkp-mb-card--hot,
  .ch-bkp-mb-card:focus-within {
    border-color: var(--st, var(--mb-accent));
    box-shadow: inset 0 3px 0 0 var(--st, var(--mb-accent)),
                0 18px 34px -16px rgba(var(--st-rgb, 18, 32, 58), .2);
  }

.ch-bkp-mb-cardtop {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
}

.ch-bkp-mb-cardid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

  .ch-bkp-mb-cardid > b {
    font: 700 12px/1 var(--mb-mono);
    letter-spacing: .06em;
    color: var(--mb-ink);
    overflow-wrap: anywhere;
  }

/* the soft tint of whatever the card's status is - no variant classes, because
   the card above it has already said which status this is */
.ch-bkp-mb-pill {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--st-line, var(--mb-line-strong));
  border-radius: 8px;
  background: var(--st-soft, #eef1f5);
  color: var(--st-text, var(--mb-muted));
  font: 600 11px/1 var(--mb-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ch-bkp-mb-cardwhen {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

  .ch-bkp-mb-cardwhen b {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mb-ink);
  }

  .ch-bkp-mb-cardwhen span {
    font-size: 13.5px;
    color: var(--mb-muted);
    overflow-wrap: anywhere;
  }

/* the tear across the middle of every card */
.ch-bkp-mb-tear {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--mb-line);
}

  .ch-bkp-mb-tear::before,
  .ch-bkp-mb-tear::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mb-bg);
  }

  .ch-bkp-mb-tear::before { left: -12px; }
  .ch-bkp-mb-tear::after { right: -12px; }

.ch-bkp-mb-cardfoot {
  /* takes the slack in a row of cards so the action rows line up across them,
     however many lines the venue and court names ran to above the tear */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px 20px;
}

/* the real upload control. It is opened by the label beside it, or by Replace
   inside the proof popup - either way it is never seen */
.ch-bkp-mb-file {
  display: none;
}

.ch-bkp-mb-money {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

  .ch-bkp-mb-money span {
    font: 600 10px/1 var(--mb-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mb-faint);
  }

  .ch-bkp-mb-money b {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mb-ink);
  }

  .ch-bkp-mb-money em {
    font-style: normal;
    font-size: 12px;
    color: var(--mb-faint);
  }

.ch-bkp-mb-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  align-items: center;
  justify-content: flex-end;
}

.ch-bkp-mb-act {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--mb-line-strong);
  border-radius: 12px;
  background: var(--mb-paper);
  color: var(--mb-ink);
  font: 600 12.5px/1.25 Sora, sans-serif;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}

  .ch-bkp-mb-act svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
  }

  .ch-bkp-mb-act:hover:not(:disabled) {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-paper);
    transform: translateY(-2px);
    box-shadow: 0 16px 24px -14px rgba(18, 32, 58, .8);
  }

  /* held while a replacement screenshot is on its way up, so the popup does not
     look inert and a second file cannot be sent on top of the first */
  .ch-bkp-mb-act:disabled {
    opacity: .55;
    cursor: progress;
    transform: none;
    box-shadow: none;
  }

  /* the upload action is a label around a hidden file input, same as the pass */
  .ch-bkp-mb-act input[type="file"] {
    display: none;
  }

.ch-bkp-mb-act--primary {
  border-color: var(--mb-ink);
  background: var(--mb-ink);
  color: var(--mb-paper);
  box-shadow: 0 10px 20px -14px rgba(18, 32, 58, .9);
}

  .ch-bkp-mb-act--primary:hover:not(:disabled) {
    background: var(--mb-accent);
    border-color: var(--mb-accent);
    color: #fff;
  }

.ch-bkp-mb-act--danger {
  border-color: var(--mb-stop-line);
  color: var(--mb-stop);
}

  .ch-bkp-mb-act--danger:hover:not(:disabled) {
    background: var(--mb-stop);
    border-color: var(--mb-stop);
    color: var(--mb-paper);
  }

/* a rating already left, and the note that says why rating is not open yet -
   both sit in the action row but neither is something to press */
.ch-bkp-mb-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mb-faint);
}

.ch-bkp-mb-note--rated {
  color: var(--mb-accent);
}

/* ---- pager ---- */
.ch-bkp-mb-pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

  .ch-bkp-mb-pager[hidden] {
    display: none;
  }

.ch-bkp-mb-pagebtn {
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--mb-line-strong);
  border-radius: 12px;
  background: var(--mb-paper);
  color: var(--mb-ink);
  font: 600 13px/1 Sora, sans-serif;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

  .ch-bkp-mb-pagebtn:hover:not(:disabled) {
    background: var(--mb-ink);
    border-color: var(--mb-ink);
    color: var(--mb-paper);
  }

  .ch-bkp-mb-pagebtn:disabled {
    opacity: .45;
    cursor: default;
  }

.ch-bkp-mb-pageinfo {
  font: 600 12px/1 var(--mb-mono);
  letter-spacing: .1em;
  color: var(--mb-muted);
}

/* ---- footer strip ---- */
.ch-bkp-mb-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border: 1px solid var(--mb-line);
  border-radius: 20px;
  background: var(--mb-paper);
}

  .ch-bkp-mb-foot p {
    margin: 0;
    font-size: 14px;
    color: var(--mb-muted);
    text-wrap: pretty;
  }

  .ch-bkp-mb-foot a {
    font-size: 14px;
    font-weight: 700;
    color: var(--mb-accent);
    text-decoration: none;
  }

    .ch-bkp-mb-foot a:hover {
      color: #a33618;
      text-decoration: underline;
    }

/* ---- nothing to show ---- */
.ch-bkp-mb-empty {
  padding: 48px 24px;
  border: 1px dashed var(--mb-line-strong);
  border-radius: 20px;
  background: var(--mb-paper);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--mb-muted);
}

/* shown when a filter matches nothing, in place of the grid */
.ch-bkp-mb-none {
  padding: 32px 24px;
  border: 1px dashed var(--mb-line-strong);
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--mb-faint);
}

  .ch-bkp-mb-none[hidden] {
    display: none;
  }

/* ---- popups: the proof viewer and the rate box share one shell ---- */
.ch-bkp-mb-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 32, 58, .55);
  backdrop-filter: blur(3px);
}

  .ch-bkp-mb-modal[hidden] {
    display: none;
  }

.ch-bkp-mb-modalbox {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--mb-paper);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(18, 32, 58, .55);
  animation: ch-bkp-mb-pop 300ms cubic-bezier(.22, 1, .36, 1) both;
}

.ch-bkp-mb-modalhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 16px;
}

  .ch-bkp-mb-modalhead b {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mb-ink);
  }

.ch-bkp-mb-modalx {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #f4f6fa;
  color: var(--mb-muted);
  cursor: pointer;
  transition: background .15s ease;
}

  .ch-bkp-mb-modalx:hover {
    background: #e9edf4;
  }

  .ch-bkp-mb-modalx svg {
    fill: none;
    stroke: currentColor;
  }

.ch-bkp-mb-modalshot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 0 22px;
  padding: 12px;
  border: 1px solid #e2e7ef;
  border-radius: 14px;
  background: #f4f6fa;
  overflow: hidden;
}

  .ch-bkp-mb-modalshot img {
    display: block;
    width: 100%;
    max-height: min(52vh, 420px);
    border-radius: 10px;
    object-fit: contain;
  }

.ch-bkp-mb-modalbody {
  padding: 0 22px;
  overflow-y: auto;
}

.ch-bkp-mb-modalfoot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 18px 22px 22px;
}

/* ---- the rate box ---- */
.ch-bkp-mb-stars {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.ch-bkp-mb-star {
  border: none;
  background: none;
  padding: 0;
  font-size: 30px;
  line-height: 1;
  color: var(--mb-line-strong);
  cursor: pointer;
  transition: color .14s ease, transform .14s ease;
}

  .ch-bkp-mb-star:hover {
    transform: scale(1.12);
  }

.ch-bkp-mb-star-on {
  color: var(--mb-accent);
}

.ch-bkp-mb-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mb-line-strong);
  border-radius: 12px;
  background: var(--mb-paper);
  color: var(--mb-ink);
  font: 500 14px/1.5 Sora, sans-serif;
  resize: vertical;
}

  .ch-bkp-mb-textarea:focus {
    outline: none;
    border-color: var(--mb-ink);
  }

@media (max-width: 760px) {
  /* the stub goes under the pass rather than beside it, so the seam turns with
     it - and the punched holes move to the two ends of the new seam */
  .ch-bkp-mb-stub {
    flex: 1 1 100%;
    min-width: 0;
    border-left: none;
    border-top: 2px dashed rgba(255, 255, 255, .22);
  }

    .ch-bkp-mb-stub::before {
      top: -15px;
      left: -13px;
    }

    .ch-bkp-mb-stub::after {
      top: -15px;
      bottom: auto;
      left: auto;
      right: -13px;
    }

  .ch-bkp-mb-head {
    align-items: flex-start;
  }

  .ch-bkp-mb-acts {
    justify-content: stretch;
  }

  .ch-bkp-mb-act {
    flex: 1 1 140px;
  }
}

@media (max-width: 520px) {
  .ch-bkp-mb-grid {
    grid-template-columns: 1fr;
  }

  .ch-bkp-mb-filters {
    width: 100%;
  }

  .ch-bkp-mb-filter {
    flex: 1 1 auto;
    justify-content: center;
  }

  .ch-bkp-mb-cardtop,
  .ch-bkp-mb-cardfoot {
    padding-left: 18px;
    padding-right: 18px;
  }

  .ch-bkp-mb-foot {
    padding: 18px;
  }

  .ch-bkp-mb-passacts .ch-bkp-mb-passbtn {
    flex: 1 1 100%;
  }
}


.ch-bkp-mb-rate-btn {
  background: rgb(255, 245, 230);
  color: rgb(138, 90, 0);
  border: 1px solid rgb(240, 212, 154);
}
/* ---- the venue's charges, when it passes them on to the customer ----
   One block per way of paying, each on the amount that option collects; the checked
   radio decides which is on screen, the same rule the button's two amounts follow. */
.ch-bkp-paystep .ch-bkp-pay-charges {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--vd-hair);
}

  .ch-bkp-paystep .ch-bkp-pay-charges .ch-bkp-pay-line,
  .ch-bkp-paystep .ch-bkp-pay-charges .ch-bkp-pay-line > span:first-child {
    font-size: 14.5px;
  }

  .ch-bkp-paystep .ch-bkp-pay-charges .ch-bkp-pay-total {
    margin-top: 4px;
    padding-top: 12px;
    font-size: 20px;
  }

    .ch-bkp-paystep .ch-bkp-pay-charges .ch-bkp-pay-total b {
      font-size: 22px;
    }

.ch-bkp-paystep .ch-bkp-pay-charges-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vn-faint);
}

.ch-bkp-paystep .ch-bkp-pay-when-advance {
  display: none;
}

.ch-bkp-paystep:has(input[name="paymentTypeId"][value="20"]:checked) .ch-bkp-pay-when-full {
  display: none;
}

.ch-bkp-paystep:has(input[name="paymentTypeId"][value="20"]:checked) .ch-bkp-pay-when-advance {
  display: grid;
}

/* the same lines on the page behind the gateway window */
.ch-bkp-paywait-lines {
  display: grid;
  gap: 7px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--vd-hair);
  text-align: left;
}

  .ch-bkp-paywait-lines div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vn-muted);
  }

  .ch-bkp-paywait-lines dt {
    font-weight: inherit;
  }

  .ch-bkp-paywait-lines dd {
    margin: 0;
    font-weight: 700;
    color: var(--vn-ink);
  }

.ch-bkp-paywait-lines + .ch-bkp-paywait-amount {
  margin-top: 12px;
  padding-top: 12px;
}