.reservation-steps { display: flex; justify-content: center; padding: 0; list-style: none; margin: 0 0 2rem; gap: 2rem; }
.reservation-steps li { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; }
.reservation-steps li > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid #ccd4c9; border-radius: 50%; font-weight: 600; }
.reservation-steps [aria-current="step"] { color: var(--accent); font-weight: 600; }
.reservation-steps [aria-current="step"] > span { color: white; background: var(--accent); border-color: var(--accent); }
.reservation-steps .completed > span { background: var(--soft); color: var(--accent); }
.notice { padding: .9rem 1.1rem; background: #f0efe5; color: #645d42; border-radius: .75rem; font-size: .8rem; line-height: 1.8; margin: 0 0 1.5rem; }
#reservation-form, #reservation-review, #missing-draft { background: var(--paper); border: 1px solid var(--line); border-radius: 1.25rem; padding: 2rem; box-shadow: 0 8px 32px #293c3405; }
#reservation-review > p:first-child, #missing-draft p { font-size: .9rem; color: var(--muted); }
.reservation-fields { display: grid; gap: 1.75rem; padding: 0; border: 0; min-width: 0; }
.access-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 1.25rem; padding: 2.5rem; margin: 1rem auto; }
.access-verification { max-width: 32rem; box-shadow: 0 8px 32px #293c3405; }
.access-heading { text-align: center; margin-bottom: 2rem; }
.access-heading h2 { font-size: 1.15rem; margin: 1rem 0 .5rem; }
.access-symbol { display: grid; place-items: center; width: 3rem; height: 3rem; margin: auto; border-radius: 50%; color: var(--accent); background: var(--soft); font-size: 1.25rem; }
.access-recipient { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; margin: 0; }
.access-feedback { background: var(--soft); color: var(--accent-dark); }
.access-channel { margin: 0; padding: 0; border: 0; min-width: 0; }
.access-channel legend { font-size: .85rem; font-weight: 600; margin-bottom: .6rem; padding: 0; }
.access-channel-options { display: grid; grid-template-columns: 1fr 1fr; padding: .3rem; gap: .3rem; background: #eff1eb; border-radius: .8rem; }
.access-channel-options label { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem; border: 1px solid transparent; border-radius: .6rem; font-size: .85rem; cursor: pointer; }
.access-channel-options label:has(:checked) { background: var(--paper); border-color: #cedacf; color: var(--accent); box-shadow: 0 1px 4px #293c340a; font-weight: 600; }
.access-channel-options input[type="radio"] { width: 1rem; height: 1rem; flex: 0 0 1rem; padding: 0; accent-color: var(--accent); margin: 0; }
.access-channel-options label span { white-space: nowrap; }
.customer-page #verification-code { text-align: center; font-size: 1.7rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; padding: .7rem .7rem .7rem 1.05rem; }
.customer-page #verification-code::placeholder { font-size: 1.7rem; color: #a8afa5; }
.access-resend { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.25rem; }
.access-resend summary { color: var(--muted); font-size: .8rem; cursor: pointer; padding: .35rem 0; }
.access-resend[open] .access-contact-form { margin-top: 1.25rem; }
.access-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.access-toolbar h2 { font-size: 1rem; margin: 0; }
.access-toolbar h2 span { font-size: .75rem; font-weight: 400; color: var(--muted); margin-left: .5rem; }
.customer-page .access-end { background: transparent; border-color: transparent; color: var(--muted); font-size: .75rem; font-weight: 400; padding: .4rem; }
.customer-page .access-end:hover { color: var(--accent); background: var(--soft); }
.booking-card { border: 1px solid var(--line); border-radius: 1.1rem; background: var(--paper); overflow: hidden; margin-bottom: 1.25rem; }
.booking-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.75rem 2rem 0; }
.booking-header h2 { margin: 0; font-size: 1rem; font-weight: 500; }
.booking-date-label { display: block; color: var(--muted); font-size: .7rem; margin-bottom: .4rem; }
.booking-time { display: block; font-size: 2.15rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; letter-spacing: .02em; }
.booking-status { background: var(--soft); color: var(--accent); border-radius: 2rem; padding: .3rem .75rem; font-size: .7rem; white-space: nowrap; }
.booking-status-cancelled { background: #eaece6; color: var(--muted); }
.booking-card-cancelled { background: #f2f3ee; }
.booking-card-cancelled .booking-time { color: var(--muted); }
.booking-details { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; margin: 1rem 2rem 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.booking-details dt { font-size: .7rem; color: var(--muted); }
.booking-details dd { margin: .25rem 0 0; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.booking-cancellation { padding: 1.25rem 2rem; border-top: 1px solid var(--line); background: #fafaf6; }
.booking-deadline { font-size: .75rem; color: var(--muted); margin: 0 0 1rem; }
.booking-phone-note { margin: .75rem 0 1.25rem; color: var(--muted); font-size: .8rem; line-height: 1.8; }
.booking-phone-note a, .booking-deadline a { color: var(--accent); font-weight: 600; }
.booking-deadline span { display: inline-block; }
.booking-cancel-form { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1rem; }
.customer-page .cancel-button { background: #fffefa; border-color: #d7bcb3; color: #8c493a; font-size: .8rem; }
.customer-page .cancel-button:hover { background: #f9ede7; border-color: #a86450; }
.booking-unavailable { color: #79633d; background: #f0eee4; border-radius: .6rem; padding: .8rem 1rem; margin: 0; font-size: .8rem; }
.access-empty { text-align: center; color: var(--muted); padding: 2.5rem 1.25rem; border: 1px dashed #cbd4c9; border-radius: 1rem; font-size: .85rem; }
.reservation-fields h2 { margin: 0 0 .6rem; font-size: 1rem; }
.field { display: grid; gap: .65rem; }
.field > label, .contact-fields legend { font-weight: 600; font-size: .9rem; }
.required { display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .05rem .4rem; border-radius: .3rem; background: #f4eee7; color: #886044; font-size: .65rem; font-weight: 500; }
.hint { margin: .25rem 0 .5rem; color: var(--muted); font-size: .75rem; }
.calendar-note { display: block; margin-top: .35rem; }
.input-with-unit { display: flex; align-items: center; gap: .75rem; }
.input-with-unit input { max-width: 9rem; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.5rem 0 .75rem; }
.calendar-toolbar h3 { font-size: 1.05rem; margin: 0; letter-spacing: .03em; }
.customer-page .calendar-toolbar button { padding: .35rem .8rem; min-height: 2.5rem; font-size: .75rem; }
.calendar { width: 100%; table-layout: fixed; border-spacing: .45rem; }
.calendar th { font-size: .75rem; font-weight: 500; color: var(--muted); padding-bottom: .6rem; }
.calendar th:first-child { color: #a05e56; }
.calendar th:last-child { color: #557b92; }
.calendar td { padding: 0; }
.customer-page .calendar button { display: block; width: 100%; min-height: 3.5rem; padding: .3rem 0; background: var(--soft); color: var(--accent); border: 1px solid transparent; font-size: .95rem; font-variant-numeric: tabular-nums; border-radius: .7rem; }
.calendar button span { display: block; font-size: .6rem; line-height: 1.3; }
.customer-page .calendar button:hover:not(:disabled) { border-color: var(--accent); background: #e0ebdf; }
.customer-page .calendar button[aria-current="date"] { text-decoration: underline; text-underline-offset: .2rem; }
.customer-page .calendar button[aria-pressed="true"] { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 3px 8px #28584b25; }
.customer-page .calendar button[aria-pressed="true"]:hover { background: var(--accent-dark); }
.customer-page button:disabled, .customer-page .calendar button:disabled { background: #f5f5f0; color: #959990; border-color: transparent; cursor: not-allowed; box-shadow: none; }
#selected-date { padding: .75rem 1rem; border-radius: .6rem; background: var(--soft); color: var(--accent); font-size: .8rem; margin: 1rem 0 0; }
.contact-fields { padding: 1.5rem 0 0; margin: 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.contact-fields legend { padding: 0 .5rem 0 0; }
.contact-options { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.contact-options label { display: flex; flex: 1 1 12rem; align-items: center; gap: .6rem; font-size: .85rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; background: white; }
.contact-options label:has(:checked) { border-color: var(--accent); background: var(--soft); color: var(--accent); }
.contact-options input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
#contact-label { font-size: .85rem; }
#contact-value { margin-top: .5rem; }
.customer-page .wide-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 3.5rem; margin-top: .5rem; }
.reservation-summary { margin: 1.5rem 0 2rem; }
.reservation-summary > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.reservation-summary dt { color: var(--muted); font-size: .8rem; }
.reservation-summary dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; font-size: .95rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.review-actions > * { flex: 1 1 13rem; text-align: center; }
#confirmation-message { margin: 1.5rem 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (max-width: 540px) {
    .access-panel { padding: 1.5rem 1.25rem; }
    .booking-header { padding: 1.25rem 1.25rem 0; }
    .booking-header h2 { font-size: .9rem; }
    .booking-status { padding: .25rem .5rem; font-size: .65rem; }
    .booking-details { margin: 1rem 1.25rem 1.25rem; }
    .booking-cancellation { padding: 1.25rem; }
    .booking-cancel-form { flex-direction: column; align-items: stretch; }
    #reservation-form, #reservation-review, #missing-draft { padding: 1.25rem 1rem; border-radius: 1rem; }
    .reservation-steps { gap: 1rem; }
    .reservation-steps li { font-size: .7rem; gap: .4rem; }
    .calendar { border-spacing: .2rem; }
    .customer-page .calendar button { border-radius: .45rem; min-height: 3rem; }
    .reservation-summary > div { grid-template-columns: 1fr; gap: .25rem; }
}