/* booking.css — what the booking pages add on top of the site: the checkout blocks and the
   member's own list (the area tabs, the picker card, the day strip, the time grid and the
   ways to pay are base.css's, shared with every page that books something). Drawn only in
   the contract's tokens (docs/WEBSITE.md), so they read as part of whatever site the tenant
   chose. */

/* Checkout ---------------------------------------------------------------- */

.checkout { display: grid; gap: 1.6rem; }

.extra {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0;
	cursor: pointer;
}
.extra input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.extra-price { margin-left: auto; color: var(--muted); font-size: 0.95rem; }
.extra.is-soldout { opacity: 0.45; cursor: default; }

/* My bookings ------------------------------------------------------------- */

.bookinglist { display: grid; gap: 0.6rem; }

.bookingrow {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.bookingrow:hover { border-color: var(--text); }

.bookingrow-when { display: grid; min-width: 11rem; }
.bookingrow-when strong { text-transform: capitalize; }
.bookingrow-when span { font-size: 0.9rem; color: var(--muted); }
.bookingrow-what { display: grid; }
.bookingrow-what span { color: var(--muted); font-size: 0.9rem; }
.bookingrow .badge { margin-left: auto; }

.checkout > :empty { display: none; }