/* Booking flow and the customer's booking page. */
.booking { background: var(--cream); }
.book { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(28px, 5vw, 60px) 0 90px; }
.book-main { min-width: 0; }
.loading { color: var(--muted); }
.step { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.step-head h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.step-head h2 span { font: italic 500 1.2rem var(--serif); color: var(--gold); margin-right: 10px; }
.step-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; }
.step-done small { display: block; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.step-done b { font-weight: 500; }

.cat { font: 500 .78rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sage); margin: 22px 0 10px; }
.cat:first-child { margin-top: 0; }
.opts { display: grid; gap: 10px; }
.opts-2 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; text-align: left; width: 100%; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card);
  font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--wine); }
.opt[aria-pressed="true"] { border-color: var(--plum); background: #fbf2f6; box-shadow: inset 0 0 0 1px var(--plum); }
.opt b { font: 500 1.25rem/1.2 var(--serif); }
.opt .price { font: 500 1.2rem var(--serif); color: var(--plum); white-space: nowrap; }
.opt small { grid-column: 1 / -1; color: var(--muted); font-size: .86rem; }
.opt .chip { justify-self: start; margin-top: 6px; grid-column: 1 / -1; }
.who { display: flex; align-items: center; gap: 14px; }
.who > span:last-child { display: grid; gap: 2px; text-align: left; }
.who > span:last-child small { grid-column: auto; }
.who .monogram { width: 46px; height: 46px; font-size: 1.4rem; margin: 0; flex: none; }
.monogram-any { background: var(--sage); }

.dates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.date { flex: none; width: 70px; padding: 10px 0 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); text-align: center; cursor: pointer; font: inherit; color: inherit; scroll-snap-align: start; }
.date small { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.date b { display: block; font: 500 1.7rem/1.1 var(--serif); }
.date em { display: block; font-style: normal; font-size: .72rem; color: var(--sage); }
.date:disabled { opacity: .35; cursor: default; }
.date[aria-pressed="true"] { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.date[aria-pressed="true"] small, .date[aria-pressed="true"] em { color: var(--blush); }
.month { font: italic 500 1.2rem var(--serif); color: var(--muted); margin: 4px 0 10px; }
.times-group { margin-top: 18px; }
.times-group h3 { font: 500 .78rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.time { padding: 11px 0; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font: 500 .98rem var(--sans); color: var(--ink); cursor: pointer; }
.time:hover { border-color: var(--wine); }
.time[aria-pressed="true"] { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.none { padding: 22px; background: var(--card); border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }

.form { display: grid; gap: 16px; max-width: 560px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label.field { display: grid; gap: 6px; font-size: .9rem; font-weight: 500; }
label.field small { font-weight: 400; color: var(--muted); }
input, textarea, select { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); font: 400 1rem var(--sans); color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--wine); }
.hp { position: absolute; left: -9999px; }
.err { color: var(--bad); font-size: .92rem; min-height: 1.2em; }
.fine { font-size: .85rem; color: var(--muted); }

/* summary */
.summary { position: sticky; top: 96px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: grid; gap: 14px; }
.summary h2 { font-size: 1.8rem; }
.sum-list { display: grid; gap: 10px; margin: 0; }
.sum-list div { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.sum-list dt { color: var(--muted); }
.sum-list dd { margin: 0; text-align: right; font-weight: 500; }
.sum-total { padding-top: 12px; border-top: 1px solid var(--line); }
.sum-total dd { font: 500 1.4rem var(--serif); color: var(--plum); }
.sum-note { font-size: .86rem; color: var(--muted); }

/* booked / manage */
.status { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 18px; }
.status h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.badge { justify-self: start; padding: 5px 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; letter-spacing: .04em; }
.badge-ok { background: #e3eedf; color: var(--ok); }
.badge-wait { background: #f7e7cf; color: var(--warn); }
.badge-bad { background: #f3dddd; color: var(--bad); }
.status .sum-list { max-width: 460px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.timer { font-size: .92rem; color: var(--warn); }
.ref { font-size: .85rem; color: var(--muted); }
.ref code { background: var(--cream-2); padding: 2px 8px; border-radius: 6px; }
.toast { opacity: 0; pointer-events: none; position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: .95rem; transition: transform .25s; z-index: 50; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bad); }

@media (max-width: 900px) {
  .book { grid-template-columns: 1fr; padding-bottom: 130px; }
  .summary { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 22px 22px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -12px rgba(42, 24, 36, .35); gap: 10px; z-index: 20; }
  .summary h2, .summary .sum-list div:not(.sum-total), .summary .sum-note { display: none; }
  .summary .sum-total { border-top: 0; padding-top: 0; }
}
@media (max-width: 520px) {
  .row2 { grid-template-columns: 1fr; }
}