/* Booking picker component (shared by /book and the home page #book, 10/21). Same markup ids as book.js expects.
   Scoped under .bk-wrap; colors come from /site.css variables with fallbacks. Heights reserved so times loading never shifts the page. */
.bk-wrap { --bk-ground: var(--ground, #f4f3ef); --bk-card: var(--card, #fff); --bk-ink: var(--ink, #16181b); --bk-ink2: var(--ink2, #4a4f57); --bk-accent: var(--accent, #17804a);
  display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--bk-ink); }
.bk-wrap [hidden] { display: none !important; }
.bk-wrap button { font: inherit; color: inherit; touch-action: manipulation; }
.bk-bar, .bk-panel { background: var(--bk-card); border-radius: 24px; }
.bk-bar { padding: 12px 18px; display: flex; align-items: center; min-height: 56px; }
.bk-tzsel { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; padding: 4px 2px; max-width: 100%; color: var(--bk-ink2); min-height: 32px; }
.bk-tzsel svg { width: 19px; height: 19px; flex: none; }
.bk-tzsel .chev { width: 17px; height: 17px; color: var(--bk-ink); }
#bkTzLbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 8ch; }
.bk-tzsel select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.bk-tzsel:focus-within { outline: 3px solid var(--bk-accent); outline-offset: 3px; border-radius: 8px; }

.bk-grid { display: flex; flex-direction: column; gap: 10px; }
.bk-panel { padding: 20px 16px; }

/* calendar: 6 rows always rendered, so it never grows */
.cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-hd h2, .cal-hd h3 { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.cal-nav { width: 44px; height: 44px; border: 0; background: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bk-ink); }
.cal-nav svg { width: 20px; height: 20px; }
.cal-nav:hover:not([disabled]) { background: var(--bk-ground); }
.cal-nav[disabled] { color: #b9b7b0; cursor: default; }
.cal-dow, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow span { text-align: center; font-size: 13px; color: var(--bk-ink2); padding-bottom: 6px; }
.cal-days { gap: 4px 2px; min-height: calc(6 * 44px + 5 * 4px); }
.cd { aspect-ratio: 1 / 1; width: 100%; max-width: 46px; min-height: 40px; max-height: 46px; justify-self: center; border: 0; background: none; border-radius: 999px; font-size: 16px; color: #8d8b85; display: flex; align-items: center; justify-content: center; cursor: default; padding: 0; font-variant-numeric: tabular-nums; }
.cd.today { color: var(--bk-ink); text-decoration: underline; text-underline-offset: 4px; }
.cd.open { background: var(--bk-ground); color: var(--bk-ink); font-weight: 700; cursor: pointer; }
.cd.open.other { color: var(--bk-ink2); }
.cd.open:hover { background: #e3e1da; }
.cd.sel, .cd.sel:hover { background: var(--bk-ink); color: #fff; }

/* times: list height reserved for 6 times so loading never shifts layout */
.tm-hd { font-size: 17px; line-height: 1.3; font-weight: 600; margin: 4px 0 14px; letter-spacing: -.01em; min-height: 22px; }
.tm-hd span { color: var(--bk-ink2); font-weight: 400; }
.tm-list { display: flex; flex-direction: column; gap: 8px; min-height: calc(6 * 48px + 5 * 8px); }
.bk-slot { width: 100%; min-height: 48px; border: 0; background: var(--bk-ground); border-radius: 999px; padding: 0 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .12s ease, transform .12s ease; font-variant-numeric: tabular-nums; }
.bk-slot:hover { background: #e3e1da; }
.bk-slot:active { transform: scale(.97); }
.bk-slot.sel { background: var(--bk-accent); color: #fff; }
.bk-msg { color: var(--bk-ink2); font-size: 15px; padding: 10px 0; }
.bk-msg.err { color: #b3261e; }
.bk-msg a { color: var(--bk-ink); }

/* form under the picked time */
.bk-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 2px 0 6px; background: var(--bk-ground); border-radius: 20px; }
#bkFields { display: flex; flex-direction: column; gap: 10px; }
.bk-f { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; color: var(--bk-ink); }
.bk-f input { font: inherit; font-size: 16px; font-weight: 400; color: var(--bk-ink); background: #fff; border: 0; box-shadow: inset 0 0 0 1.5px #d7d4cc; border-radius: 12px; padding: 12px 14px; width: 100%; }
.bk-f input:focus-visible { outline: 3px solid var(--bk-accent); outline-offset: 1px; }
.bk-as { font-size: 15px; color: var(--bk-ink2); } .bk-as b { color: var(--bk-ink); }
.bk-as button { background: none; border: 0; padding: 4px 0; font-size: 15px; color: var(--bk-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.bk-go { font-weight: 600; font-size: 16px; min-height: 52px; border-radius: 999px; border: 0; background: var(--bk-accent); color: #fff; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.bk-go:hover { background: #0f6b3c; }
.bk-go:active { transform: scale(.97); }
.bk-go[disabled] { opacity: .7; cursor: default; }
.bk-err { color: #b3261e; font-size: 15px; }
.bk-ts:empty { display: none; }
.bk-fine { font-size: 14px; color: var(--bk-ink2); }

.bk-done { text-align: center; padding: 40px 20px; min-height: 240px; }
.bk-check { width: 56px; height: 56px; border-radius: 50%; background: var(--bk-accent); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .bk-check svg { width: 28px; height: 28px; }
.bk-done h2, .bk-done h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.bk-done p { color: var(--bk-ink2); font-size: 16px; max-width: 480px; margin: 0 auto; }
.bk-foot { margin-top: 4px; padding: 0 6px; font-size: 15px; color: var(--bk-ink2); display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; }
.bk-foot a { color: var(--bk-ink); display: inline-block; padding: 4px 0; }

@media (min-width: 760px) {
  .bk-grid { flex-direction: row; align-items: stretch; }
  .bk-panel { padding: 24px 26px; }
  .bk-cal { flex: 1.5; min-width: 0; }
  .bk-times { flex: 1; min-width: 0; }
}