#tennis-bookings{background:#fff;border-radius:24px;padding:20px 16px;margin:12px 0;color:var(--brand-ink)}
#tennis-bookings h2{font-size:20px;margin:0 0 6px;letter-spacing:-.4px}
#tennis-bookings .booking-subtitle,#tennis-bookings .booking-note,#booking-status{font-size:12px;color:var(--brand-muted);line-height:1.5}
#tennis-bookings .booking-subtitle{margin:0 0 16px}
#tennis-bookings .booking-row{display:grid;grid-template-columns:82px minmax(0,1fr) minmax(0,1fr) 62px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--brand-border)}
#tennis-bookings .booking-heading{font-size:11px;color:var(--brand-muted);padding-top:0}
#tennis-bookings .booking-date{font-size:12px;font-weight:650}
#tennis-bookings select{width:100%;min-width:0;border:1px solid transparent;border-radius:11px;background:var(--brand-soft);color:var(--brand-ink);font:inherit;font-size:13px;min-height:44px;padding:8px 5px}
#tennis-bookings select:focus-visible{outline:2px solid var(--brand-focus);outline-offset:2px}
#tennis-bookings select:disabled{opacity:.5}
#tennis-bookings select.is-empty{padding-left:28px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.5' fill='%23ffcc4d' stroke='%23e0a419'/><circle cx='8.4' cy='10' r='1.4' fill='%23664500'/><circle cx='15.6' cy='10' r='1.4' fill='%23664500'/><path d='M8 17.2q4-3.6 8 0' fill='none' stroke='%23664500' stroke-width='1.7' stroke-linecap='round'/><path d='M8.4 12.3q-1.8 2.6 0 3.7q1.8-1.1 0-3.7z' fill='%235dadec'/></svg>");background-repeat:no-repeat;background-position:7px center;background-size:16px 16px}
#tennis-bookings .booking-note{margin:14px 0 5px}
#booking-status{min-height:18px;margin:0}
#booking-retry{background:var(--brand-soft);border:0;border-radius:9px;color:var(--brand-action);padding:8px 12px;margin-top:8px;font:inherit;font-size:13px}
@media(max-width:400px){#tennis-bookings{padding:16px 10px}#tennis-bookings .booking-row{grid-template-columns:67px minmax(0,1fr) minmax(0,1fr) 49px;gap:4px}#tennis-bookings select{font-size:11px;padding:8px 2px}#tennis-bookings .booking-date{font-size:11px}}

/* Keep separators between bookings, but not after the final row. */
#tennis-bookings .booking-row:last-child{border-bottom:0}

.hero-booking-freshness{display:block;font-size:11px;line-height:1.4;margin-top:6px;max-width:190px}.hero-booking-freshness[hidden]{display:none}

.hero-booking-details[hidden],.hero-booking-attendance[hidden]{display:none!important}

#tennis-bookings .booking-one-off-action{background:none;border:0;padding:8px 0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;font-size:12px}
#tennis-bookings .booking-one-off-label{display:block;font-size:10px;color:var(--brand-muted)}
#tennis-bookings .booking-cancel-one-off{grid-column:1/-1;justify-self:end}
#booking-one-off-form{margin:8px 0;font-size:13px}
#booking-one-off-form[hidden]{display:none}

/* Discoverable, restrained secondary action for occasional sessions. */
#tennis-bookings #booking-add-one-off{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:16px 0 8px;
  padding:10px 16px;
  border:1px solid var(--brand-action);
  border-radius:12px;
  background:var(--brand-control);
  color:var(--brand-action);
  font:inherit;
  font-size:var(--text-widget-action, 14px);
  font-weight:650;
  line-height:1.35;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#tennis-bookings #booking-add-one-off:hover:not(:disabled){background:var(--brand-soft)}
#tennis-bookings #booking-add-one-off:active:not(:disabled){transform:scale(.985)}
#tennis-bookings #booking-add-one-off:focus-visible{outline:2px solid var(--brand-action);outline-offset:3px}
#tennis-bookings #booking-add-one-off:disabled{opacity:.5;cursor:default}
#tennis-bookings #booking-add-one-off[hidden]{display:none}