/* Kohmera Booking: the booking box's look (booking build, 2026-10-21). Served by the book Worker at /book.css.
   A website matches it to its own colours by setting these on the box or on :root:
   --kb-ink (text), --kb-muted (quiet text), --kb-paper (cards), --kb-soft (the box's background),
   --kb-accent (buttons and picked days), --kb-accent-ink (words on buttons), --kb-line (borders), --kb-radius.
   The box takes the website's own font. Everything sits under .kb so a website's styles and ours never mix. */
.kb{--_ink:var(--kb-ink,#141113);--_muted:var(--kb-muted,#5f5458);--_paper:var(--kb-paper,#fff);--_soft:var(--kb-soft,transparent);--_accent:var(--kb-accent,#141113);--_on:var(--kb-accent-ink,#fff);--_line:var(--kb-line,#e2dcdd);--_tint:var(--kb-tint,#f3efed);--_r:var(--kb-radius,14px);--_bad:#b42318;--_good:#067647;
  display:block;max-width:640px;margin:0 auto;padding:0 0 56px;color:var(--_ink);background:var(--_soft);font:inherit;font-size:17px;line-height:1.5;text-align:left;-webkit-text-size-adjust:100%}
.kb *,.kb *::before,.kb *::after{box-sizing:border-box}
.kb [hidden]{display:none!important}
.kb .kb-h{margin:4px 0 14px;font:inherit;font-size:26px;line-height:1.2;font-weight:700;color:var(--_ink);letter-spacing:0;text-transform:none;outline:none}
.kb .kb-sub{margin:22px 0 10px;font:inherit;font-size:19px;line-height:1.3;font-weight:700;color:var(--_ink);text-transform:none;letter-spacing:0}
.kb .kb-cat{margin:22px 0 8px;font:inherit;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--_muted)}
.kb .kb-cat:first-child{margin-top:4px}
.kb .kb-p{margin:0 0 12px;font-size:17px}
.kb .kb-muted,.kb .kb-small{color:var(--_muted)}
.kb .kb-small{margin:10px 0;font-size:15px}
.kb .kb-center{text-align:center}
.kb .kb-welcome{margin:0 0 18px;padding:14px 16px;border-radius:var(--_r);background:var(--_paper);border:1px solid var(--_line);font-size:16px}
.kb .kb-test{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:#fff6e0;color:#7a4b00;border:1px solid #f1d38c;font-size:15px;font-weight:600;text-align:center}
.kb .kb-card{padding:20px;border-radius:var(--_r);background:var(--_paper);border:1px solid var(--_line);margin:0 0 16px}
.kb .kb-card .kb-h{margin-top:0}

/* buttons */
.kb .kb-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:12px 0 0;padding:12px 18px;border:2px solid var(--_accent);border-radius:999px;background:var(--_accent);color:var(--_on);font:inherit;font-size:17px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;text-transform:none;letter-spacing:0}
.kb .kb-btn:hover{filter:brightness(1.08)}
.kb .kb-btn:disabled{opacity:.6;cursor:default;filter:none}
.kb .kb-btn-2{background:transparent;color:var(--_accent);border-color:var(--_line)}
.kb .kb-btn-2:hover{border-color:var(--_accent);filter:none}
.kb .kb-all{margin-top:18px}
.kb .kb-danger{color:var(--_bad)}
.kb .kb-danger:hover{border-color:var(--_bad)}
.kb .kb-danger-fill{background:var(--_bad);border-color:var(--_bad);color:#fff}
.kb .kb-row{display:flex;gap:0 10px;flex-wrap:wrap}
.kb .kb-row .kb-btn{flex:1 1 200px}
.kb .kb-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0 0 4px -4px;padding:6px 4px;border:0;background:none;color:var(--_muted);font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none}
.kb .kb-back:hover{color:var(--_ink)}
.kb button:focus-visible,.kb a:focus-visible,.kb input:focus-visible,.kb textarea:focus-visible,.kb summary:focus-visible,.kb .kb-policy-text:focus-visible{outline:3px solid var(--_accent);outline-offset:2px}

/* the service list */
.kb .kb-list{display:grid;gap:10px}
.kb .kb-svc{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;margin:0;padding:14px 14px 14px 16px;border:1px solid var(--_line);border-radius:var(--_r);background:var(--_paper);color:var(--_ink);font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;text-transform:none;letter-spacing:0}
.kb .kb-svc:hover{border-color:var(--_accent)}
.kb .kb-svc:disabled{opacity:.55;cursor:default}
.kb .kb-svc:disabled:hover{border-color:var(--_line)}
.kb .kb-svc-img{flex:0 0 auto;width:68px;height:68px;border-radius:10px;object-fit:cover;background:var(--_line)}
.kb .kb-svc-body{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.kb .kb-svc-name{font-size:17px;font-weight:700;line-height:1.3}
.kb .kb-svc-meta{font-size:15px;color:var(--_muted)}
.kb .kb-svc-desc{font-size:15px;color:var(--_muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb .kb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.kb .kb-chip{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--_tint);border:1px solid var(--_line);font-size:13px;font-weight:600;color:var(--_muted)}
.kb .kb-arrow{flex:0 0 auto;font-size:28px;line-height:1;color:var(--_muted)}

/* extras */
.kb .kb-extra{display:flex;align-items:center;gap:14px;min-height:60px;margin:0;padding:12px 14px;border:1px solid var(--_line);border-radius:var(--_r);background:var(--_paper);cursor:pointer;font-weight:400}
.kb .kb-extra-body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.kb .kb-extra-name{font-weight:700}
.kb .kb-extra-meta{font-size:15px;color:var(--_muted)}
.kb .kb-check{flex:0 0 auto;width:24px;height:24px;margin:0;accent-color:var(--_accent);cursor:pointer}
.kb .kb-qty{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.kb .kb-qty-b{width:44px;height:44px;margin:0;padding:0;border:1px solid var(--_line);border-radius:50%;background:var(--_paper);color:var(--_ink);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.kb .kb-qty-b:hover{border-color:var(--_accent)}
.kb .kb-qty-n{min-width:24px;text-align:center;font-weight:700;font-size:18px}
.kb .kb-sum{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:var(--_paper);border:1px dashed var(--_line);font-weight:600}

/* the calendar */
.kb .kb-cal-wrap{padding:16px;border-radius:var(--_r);background:var(--_paper);border:1px solid var(--_line)}
.kb .kb-nav{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.kb .kb-month{font-size:19px;font-weight:700}
.kb .kb-nav-b{width:44px;height:44px;margin:0;padding:0;border:1px solid var(--_line);border-radius:50%;background:var(--_paper);color:var(--_ink);font:inherit;font-size:26px;line-height:1;cursor:pointer}
.kb .kb-nav-b:disabled{opacity:.3;cursor:default}
.kb .kb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kb .kb-wd{padding:4px 0;text-align:center;font-size:13px;font-weight:700;color:var(--_muted)}
.kb .kb-day{display:flex;align-items:center;justify-content:center;justify-self:center;width:100%;max-width:50px;aspect-ratio:1/1;min-height:40px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--_muted);opacity:.45;font:inherit;font-size:16px}
.kb .kb-blank{visibility:hidden}
.kb .kb-open{opacity:1;color:var(--_ink);font-weight:700;background:var(--_tint);box-shadow:inset 0 0 0 1px var(--_line);cursor:pointer}
.kb .kb-open:hover{box-shadow:inset 0 0 0 2px var(--_accent)}
.kb .kb-open.kb-on{background:var(--_accent);color:var(--_on);box-shadow:none}
.kb .kb-opens{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--_tint);border:1px solid var(--_line);font-size:15px;text-align:center}
.kb .kb-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kb .kb-time{min-height:48px;margin:0;padding:8px;border:1px solid var(--_line);border-radius:12px;background:var(--_paper);color:var(--_ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.kb .kb-time:hover{border-color:var(--_accent)}
.kb .kb-time.kb-on{background:var(--_accent);border-color:var(--_accent);color:var(--_on)}

/* the waitlist */
.kb .kb-wl{margin:16px 0 0;padding:4px 16px;border-radius:var(--_r);background:var(--_paper);border:1px solid var(--_line)}
.kb .kb-wl summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer;color:var(--_ink)}
.kb .kb-wl[open]{padding-bottom:16px}

/* the form */
.kb .kb-form{margin:0}
.kb .kb-label{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;font-size:16px;font-weight:700;color:var(--_ink)}
.kb .kb-help{font-weight:400;font-size:15px;color:var(--_muted)}
.kb .kb-in{display:block;width:100%;min-height:50px;margin:0;padding:12px 14px;border:1px solid var(--_line);border-radius:12px;background:var(--_paper);color:var(--_ink);font:inherit;font-size:17px;font-weight:400;line-height:1.4;box-shadow:none;-webkit-appearance:none;appearance:none}
.kb textarea.kb-in{min-height:96px;resize:vertical}
.kb .kb-in:focus{border-color:var(--_accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_accent) 18%,transparent)}
.kb .kb-agree{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:14px;border-radius:12px;background:var(--_paper);border:1px solid var(--_line);font-size:16px;font-weight:600;cursor:pointer}
.kb .kb-agree .kb-check{margin-top:1px}
.kb .kb-policy-text{max-height:320px;overflow:auto;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--_paper);border:1px solid var(--_line);font-size:15px;color:var(--_muted)}
.kb .kb-policy-text p{margin:0 0 8px}
.kb .kb-dl{display:grid;grid-template-columns:minmax(96px,32%) 1fr;gap:8px 14px;margin:0}
.kb .kb-dl dt{margin:0;color:var(--_muted);font-size:15px}
.kb .kb-dl dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.kb .kb-err{margin:0 0 12px;padding:12px 14px;border-radius:10px;background:#fef3f2;border:1px solid #fecdca;color:var(--_bad);font-size:16px;font-weight:600}
.kb .kb-ok{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:#ecfdf3;border:1px solid #abefc6;color:var(--_good);font-size:16px;font-weight:600}
.kb .kb-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kb .kb-add{margin-top:0}
.kb .kb-photos{display:flex;flex-wrap:wrap;gap:10px}
.kb .kb-photos:empty{display:none}
.kb .kb-photo{position:relative;display:block;width:92px;height:92px}
.kb .kb-photo img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--_line)}
.kb .kb-photo-x{position:absolute;top:-10px;right:-10px;width:32px;height:32px;margin:0;padding:0;border:2px solid var(--_paper);border-radius:50%;background:var(--_ink);color:var(--_paper);font:inherit;font-size:18px;line-height:1;cursor:pointer}

/* waiting, done */
.kb .kb-wait{display:flex;align-items:center;justify-content:center;gap:12px;min-height:120px;color:var(--_muted);font-size:16px}
.kb .kb-spin{width:22px;height:22px;border:3px solid var(--_line);border-top-color:var(--_accent);border-radius:50%;animation:kb-spin .8s linear infinite}
@keyframes kb-spin{to{transform:rotate(360deg)}}
.kb .kb-done{padding:30px 20px}
.kb .kb-tick{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;margin:0 0 10px;border-radius:50%;background:var(--_good);color:#fff;font-size:32px;font-weight:700}
.kb .kb-acts{margin:0 0 8px}

/* our own confirm box (never the browser's pop-up) */
.kb .kb-ask-bg{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(20,17,19,.55)}
.kb .kb-ask{width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;padding:22px 20px 20px;border-radius:var(--_r);background:var(--_paper);color:var(--_ink);box-shadow:0 18px 50px rgba(0,0,0,.3)}
.kb .kb-ask .kb-h{font-size:22px;margin-bottom:10px}
/* the team: a face for each person, and "Booking with Amber" */
.kb .kb-who-img{flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--_tint)}
.kb .kb-who-ini{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--_line);font-size:22px;font-weight:700;color:var(--_muted)}
.kb .kb-who-any{font-size:20px}
.kb .kb-with{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;border-radius:var(--_r);background:var(--_paper);border:1px solid var(--_line)}
.kb .kb-with-body{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.kb .kb-with-name{font-size:17px;font-weight:700}
.kb .kb-linkbtn{min-height:44px;margin:-8px 0 -10px;padding:0;border:0;background:none;color:var(--_ink);font:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (min-width:600px){
  .kb .kb-times{grid-template-columns:repeat(4,1fr)}
  .kb .kb-ask-bg{align-items:center}
  .kb .kb-card{padding:24px}
}
@media (max-width:360px){
  .kb{font-size:16px}
  .kb .kb-h{font-size:23px}
  .kb .kb-cal-wrap{padding:12px 8px}
  .kb .kb-grid{gap:2px}
  .kb .kb-svc-img{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){.kb .kb-spin{animation-duration:2.4s}}

/* the pop-up (2026-10-27): the same box over the page, the whole screen on a phone. --kb-bg sets its background. */
dialog.kb.kbm{position:fixed;inset:0;width:min(680px,calc(100vw - 48px));max-width:none;height:fit-content;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:var(--_r);background:var(--kb-bg,#fff);color:var(--_ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 70px rgba(20,17,19,.35)}
dialog.kbm:not([open]){display:none}
dialog.kbm::backdrop{background:rgba(20,17,19,.55)}
html.kbm-on{overflow:hidden}
.kbm .kbm-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 24px;background:var(--kb-bg,#fff);border-bottom:1px solid var(--_line)}
.kbm .kbm-t{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-size:16px;font-weight:700;color:var(--_ink)}
.kbm .kbm-x{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--_line);border-radius:999px;background:var(--_paper);color:var(--_ink);font:inherit;font-size:16px;font-weight:600;line-height:1;cursor:pointer}
.kbm .kbm-x:focus-visible{outline:2px solid var(--_accent);outline-offset:2px}
.kbm .kbm-x span{font-size:24px;font-weight:400}
.kbm .kbm-body{padding:16px 24px 4px}
.kbm .kbm-body .kb{max-width:none;padding-bottom:24px;scroll-margin-top:72px}
@media (max-width:600px){
  dialog.kb.kbm{width:100%;height:100%;height:100dvh;max-height:none;border-radius:0;box-shadow:none}
  .kbm .kbm-bar{padding-left:16px}
  .kbm .kbm-body{padding:12px 16px 4px}
}