.card-surface {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.narrow-container { max-width: 52rem; }
.muted-copy { color: var(--text-muted); }
.button-wide { width: 100%; justify-content: center; }
.button-danger { color: #fff; border-color: var(--danger); background: var(--danger); }
.button-danger:hover { color: #fff; filter: brightness(.92); }

.loading-state,
.empty-state {
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    background: var(--surface);
    text-align: center;
}

.empty-state.compact { padding: 2rem; }
.empty-state h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); }
.empty-state h2, .empty-state h3 { margin-bottom: .5rem; font-size: 1.35rem; }

.alert-panel {
    display: grid;
    gap: .15rem;
    margin-block: 1rem;
    padding: .85rem 1rem;
    border: 1px solid;
    border-radius: var(--radius-md);
}
.alert-danger { color: #7a1b14; border-color: #f2b8b5; background: #fff1f0; }
.alert-success { color: #0b5735; border-color: #a6dcc1; background: #ecf9f2; }

.availability-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}
.availability-toolbar label { font-weight: 800; }
.availability-toolbar .form-control { width: auto; min-height: 2.75rem; }
.availability-private-note { margin-left: auto; color: var(--text-muted); font-size: .88rem; }
.availability-private-note span { color: var(--success); }
.availability-grid { display: grid; gap: 1rem; }
.availability-court { padding: 1rem; }
.availability-court-heading,
.availability-court-heading > div { display: flex; align-items: center; gap: .65rem; }
.availability-court-heading { justify-content: space-between; margin-bottom: 1rem; }
.availability-court-heading h2 { margin: 0; font-size: 1.35rem; }
.availability-court-heading > span { color: var(--text-muted); font-size: .85rem; }
.status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--border-strong); }
.status-dot-active { background: var(--success); box-shadow: 0 0 0 4px #d9f3e6; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: .5rem; }
.slot-button { display: grid; min-height: 3.8rem; place-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; text-decoration: none; }
.slot-button strong { font-variant-numeric: tabular-nums; }
.slot-button span { color: var(--text-muted); font-size: .72rem; }
.slot-open { background: var(--brand-primary-soft); border-color: color-mix(in srgb, var(--brand-primary), white 60%); }
.slot-open:hover { color: var(--brand-primary); border-color: var(--brand-primary); transform: translateY(-1px); }
.slot-unavailable { opacity: .58; background: var(--surface-muted); }

.booking-heading { max-width: 48rem; }
.booking-heading h1 { margin-bottom: .5rem; }
.booking-heading > p:last-child { color: var(--text-muted); }
.booking-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2rem 0; padding: 0; list-style: none; }
.booking-steps li { position: relative; display: grid; justify-items: center; gap: .35rem; color: var(--text-muted); font-size: .78rem; font-weight: 750; text-align: center; }
.booking-steps li::before { position: absolute; z-index: 0; top: 1rem; right: 50%; width: 100%; height: 2px; content: ""; background: var(--border); }
.booking-steps li:first-child::before { display: none; }
.booking-steps span { z-index: 1; display: grid; width: 2rem; height: 2rem; place-content: center; border: 2px solid var(--border); border-radius: 50%; background: var(--canvas); }
.booking-steps .active { color: var(--brand-primary); }
.booking-steps .active span { color: #fff; border-color: var(--brand-primary); background: var(--brand-primary); }
.booking-steps .active::before { background: var(--brand-primary); }
.booking-grid,
.booking-outcome-grid { display: grid; gap: 1.25rem; align-items: start; }
.booking-form, .booking-summary, .outcome-card, .payment-panel, .booking-detail-card { padding: clamp(1.15rem, 4vw, 2rem); }
.booking-form fieldset, .setup-card fieldset { margin: 0 0 2rem; padding: 0; border: 0; }
.booking-form legend, .setup-card legend { display: flex; align-items: center; gap: .65rem; width: 100%; margin-bottom: 1rem; font-size: 1.15rem; font-weight: 850; }
.booking-form legend span, .setup-card legend span { display: grid; width: 1.75rem; height: 1.75rem; place-content: center; border-radius: 50%; color: #fff; background: var(--brand-primary); font-size: .75rem; }
.form-grid { display: grid; gap: 1rem; }
.field-label { display: block; margin-bottom: .3rem; font-size: .84rem; font-weight: 800; }
.form-control { min-height: 2.85rem; border-color: var(--border-strong); }
.validation-summary { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: var(--radius-md); color: var(--danger); background: #fff2f0; }
.review-fieldset { padding-top: 1.25rem !important; border-top: 1px solid var(--border) !important; }
.quote-lines { display: grid; gap: .15rem; }
.quote-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.quote-lines span { display: grid; }
.quote-lines small { max-width: 38rem; color: var(--text-muted); font-size: .72rem; }
.quote-lines strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.terms-check { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1rem; padding: .9rem; border-radius: var(--radius-md); background: var(--surface-muted); }
.terms-check input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: .15rem; }
.alternative-slots { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.alternative-slots > strong { width: 100%; }
.booking-summary h2 { font-size: 1.5rem; }
.summary-list { display: grid; gap: 0; margin: 1rem 0; }
.summary-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.summary-list dt { color: var(--text-muted); font-weight: 600; }
.summary-list dd { margin: 0; font-weight: 800; text-align: right; }
.summary-placeholder { padding: 1rem; border-radius: var(--radius-md); color: var(--text-muted); background: var(--surface-muted); }
.summary-totals { display: grid; gap: .5rem; margin-top: 1rem; }
.summary-totals > div { display: flex; justify-content: space-between; }
.summary-grand { padding-top: .65rem; border-top: 2px solid var(--text); font-size: 1.15rem; }
.quote-expiry, .not-held-note { margin-top: 1rem; color: var(--text-muted); font-size: .78rem; }
.not-held-note { display: flex; gap: .5rem; padding: .7rem; border-radius: var(--radius-sm); color: var(--warning); background: #fff7e8; font-weight: 700; }
.not-held-note span { display: grid; width: 1.15rem; height: 1.15rem; place-content: center; border-radius: 50%; color: #fff; background: var(--warning); }

.outcome-icon { display: grid; width: 3rem; height: 3rem; place-content: center; margin-bottom: 1rem; border-radius: 50%; color: #fff; background: var(--success); font-size: 1.4rem; }
.outcome-card h1 { font-size: clamp(2rem, 6vw, 3rem); }
.outcome-lead { color: var(--text-muted); }
.status-badge { display: inline-flex; align-items: center; width: fit-content; padding: .25rem .6rem; border-radius: 999px; color: #254237; background: #e8f2ed; font-size: .72rem; font-weight: 850; }
.status-held { color: #6f4203; background: #fff0cf; }
.payment-status { margin-left: .35rem; color: #493787; background: #eee9ff; }
.secure-link-panel, .pay-at-venue-note, .detail-actions, .demo-warning { margin-top: 1.25rem; padding: 1rem; border-radius: var(--radius-md); background: var(--surface-muted); }
.secure-link-panel p, .pay-at-venue-note p, .detail-actions p, .demo-warning p { margin-bottom: .5rem; color: var(--text-muted); font-size: .86rem; }
.payment-panel h2 { font-size: 1.55rem; }
.payment-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 1rem 0 !important; }
.payment-methods legend { grid-column: 1 / -1; font-size: .85rem; }
.payment-methods > div { display: contents; }
.payment-method-card { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .5rem; align-items: center; min-width: 0; min-height: 6.5rem; padding: .85rem; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.payment-method-card:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.payment-method-card:focus-within { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.payment-method-card > input { grid-column: 1; grid-row: 1 / 3; }
.payment-method-card > img, .payment-method-card > span { grid-column: 2; }
.payment-provider-logo { display: block; width: 6rem; max-width: 100%; height: 2.125rem; object-fit: contain; object-position: left center; background: white; border-radius: .25rem; padding: .15rem; }
.counter-payment-option { margin-top: 1.5rem; padding: 1.1rem; border: 1px solid var(--brand-primary); border-radius: var(--radius-md); background: var(--brand-primary-soft); }
.counter-payment-option h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 1.15rem; }
.counter-payment-option h3 span { font-size: .875rem; font-weight: 600; }
.counter-payment-option p { font-size: 1rem; line-height: 1.55; }
.counter-payment-option button { white-space: normal; }
.membership-payment-confirmation { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: white; }
.membership-payment-confirmation summary { cursor: pointer; font-weight: 700; }
.membership-payment-confirmation .staff-field { display: grid; gap: .4rem; margin-block: .75rem; }
.membership-payment-confirmation input:not([type=checkbox]), .membership-payment-confirmation select { width: 100%; min-height: 2.75rem; border: 1px solid var(--border); border-radius: .5rem; padding: .5rem; }
.membership-payment-state { color: var(--brand-primary); font-size: .875rem; }
.payment-method-card span { display: grid; }
.payment-method-card small { color: var(--text-muted); font-size: .7rem; }
.payment-method-card.disabled { opacity: .58; cursor: not-allowed; }
.online-checkout-action { width: 100%; color: var(--text); background: #fff; text-align: left; font: inherit; }
.online-checkout-action:hover:not(:disabled) { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.online-checkout-action > span:first-child { width: 1.35rem; height: 1.35rem; border-radius: 50%; color: #fff; background: var(--brand-primary); display: grid; place-items: center; }
.checkin-qr { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; justify-items: center; gap: .65rem; background: #fff; text-align: center; }
.checkin-qr img { width: min(14rem, 100%); height: auto; image-rendering: pixelated; }
.checkin-qr figcaption { max-width: 34rem; color: var(--text-muted); font-size: .78rem; }
.payment-panel .field-label { margin-top: 1rem; }

.portal-tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 2rem; padding-bottom: .25rem; }
.portal-tabs a { padding: .65rem .9rem; border-radius: 999px; color: var(--text-muted); font-weight: 750; text-decoration: none; white-space: nowrap; }
.portal-tabs a.active { color: #fff; background: var(--brand-primary); }
.portal-section { margin-top: 2.5rem; }
.portal-section > h2 { font-size: 1.5rem; }
.portal-booking-list { display: grid; gap: .75rem; }
.portal-booking-card { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem; }
.portal-booking-date { display: grid; place-items: center; padding: .45rem; border-radius: var(--radius-md); color: #fff; background: var(--brand-secondary); line-height: 1; }
.portal-booking-date strong { font-size: 1.35rem; }
.portal-booking-date span { margin-top: .25rem; font-size: .68rem; text-transform: uppercase; }
.portal-booking-main { min-width: 0; }
.booking-card-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.booking-card-heading h3 { margin-bottom: .25rem; }
.portal-booking-main p { margin-bottom: .35rem; color: var(--text-muted); }
.booking-card-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--text-muted); font-size: .76rem; }
.portal-booking-card > .button { grid-column: 2; justify-self: start; }
.back-link { display: inline-block; margin-bottom: 1rem; font-weight: 750; }
.detail-title-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.detail-title-row h1 { margin-bottom: .25rem; font-size: clamp(2rem, 6vw, 3rem); }
.detail-title-row p { color: var(--text-muted); }
.detail-summary { grid-template-columns: 1fr; }
.booking-detail-card > h2 { margin: 2rem 0 .75rem; font-size: 1.25rem; }
.receipt-list { display: grid; gap: .5rem; }
.receipt-list > div { display: grid; grid-template-columns: 1fr auto; padding: .75rem; border-radius: var(--radius-md); background: var(--surface-muted); }
.receipt-list span:nth-child(2) { color: var(--text-muted); font-size: .78rem; }
.receipt-list span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 850; }

.setup-page { display: grid; min-height: calc(100vh - 8rem); gap: 2rem; align-items: start; max-width: 76rem; margin: 0 auto; }
.setup-intro { padding: 2rem 0; }
.setup-intro h1 { max-width: 11ch; font-size: clamp(2.4rem, 7vw, 4.5rem); }
.setup-intro > p:last-of-type { max-width: 40rem; color: var(--text-muted); }
.setup-mark { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .85rem; background: var(--brand-primary); color: var(--brand-accent); font-size: 2rem; margin-bottom: 1rem; }
.setup-assurances { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.setup-assurances li { padding: .35rem .65rem; border-radius: 999px; color: var(--brand-primary); background: var(--brand-primary-soft); font-size: .78rem; font-weight: 750; }
.setup-card { padding: clamp(1.15rem, 4vw, 2rem); }
.setup-card small { color: var(--text-muted); }
.form-span-2 { grid-column: 1 / -1; }
.demo-warning { color: var(--warning); background: #fff7e8; }

@media (min-width: 48rem) {
    .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booking-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
    .booking-summary { position: sticky; top: 6.5rem; }
    .booking-outcome-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .portal-booking-card { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
    .portal-booking-card > .button { grid-column: auto; justify-self: end; }
    .detail-summary { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
    .setup-page { grid-template-columns: minmax(18rem, .75fr) minmax(0, 1.25fr); }
    .setup-intro { position: sticky; top: 2rem; }
}

@media (max-width: 36rem) {
    .availability-private-note { width: 100%; margin-left: 0; }
    .payment-methods { grid-template-columns: 1fr; }
    .form-span-2 { grid-column: auto; }
    .quote-lines > div { align-items: flex-start; }
}

@media print {
    .booking-steps, .portal-tabs, .detail-actions { display: none !important; }
    .booking-detail-card { border: 0; box-shadow: none; }
}