/* Booking system styles: the booker, manage page and admin, plus the standalone page shell (.bkp)
   used by client builds. Colours and fonts come from these variables; a client build overrides them
   from its client.json. The defaults are Veyra Pacific's. */
.bk, .adm, .bkp {
  --bk-dark: #0B1C2B;
  --bk-primary: #1E5A7A;
  --bk-accent: #6EC1D4;
  --bk-accent-2: color-mix(in srgb, var(--bk-accent) 70%, #fff);
  --bk-paper: #F4F6F7;
  --bk-ink: #0F1720;
  --bk-ink-soft: #46535f;
  --bk-line: color-mix(in srgb, var(--bk-ink) 12%, transparent);
  --bk-line-dark: rgba(255, 255, 255, .12);
  --bk-on-dark: #E8ECEF;
  --bk-on-dark-soft: #9fb0bd;
  --bk-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --bk-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------- standalone page shell (client builds) ---------- */
.bkp { margin: 0; background: var(--bk-paper); color: var(--bk-ink); font: 400 16px/1.6 var(--bk-body); -webkit-font-smoothing: antialiased; }
.bkp *, .bkp *::before, .bkp *::after { box-sizing: border-box; }
.bkp h1, .bkp h2, .bkp h3, .bkp h4 { font-family: var(--bk-head); font-weight: 400; letter-spacing: -.015em; line-height: 1.15; margin: 0; }
.bkp p { margin: 0 0 1em; }
.bkp a { color: inherit; }
.bkp .wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.bkp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bkp :focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 3px; border-radius: 4px; }
.bkp .skip { position: absolute; left: 12px; top: -60px; background: var(--bk-accent); color: var(--bk-dark); padding: 10px 16px; border-radius: 8px; z-index: 10; font-weight: 600; }
.bkp .skip:focus { top: 12px; }
.bkp-top { background: var(--bk-dark); color: var(--bk-on-dark); position: relative; overflow: hidden; }
.bkp-top::before { content: ""; position: absolute; right: -220px; top: -320px; width: 760px; height: 760px; background: radial-gradient(closest-side, color-mix(in srgb, var(--bk-primary) 55%, transparent), transparent 70%); pointer-events: none; }
.bkp-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.bkp-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 500 18px var(--bk-head); color: #fff; }
.bkp-brand img { max-height: 40px; max-width: 180px; width: auto; display: block; }
.bkp-back { font-size: 14px; color: var(--bk-on-dark-soft); text-decoration: none; }
.bkp-back:hover { color: #fff; }
.bkp-hero { position: relative; padding: 46px 0 140px; }
.bkp-eyebrow { font: 500 12px var(--bk-head); letter-spacing: .28em; text-transform: uppercase; color: var(--bk-accent); margin: 0 0 16px; }
.bkp-hero h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 300; letter-spacing: -.03em; max-width: 18ch; color: #fff; margin-bottom: 18px; }
.bkp-lede { font-size: 18px; color: var(--bk-on-dark-soft); max-width: 58ch; margin: 0; }
.bkp-main { padding: 0 0 80px; display: flow-root; }
.bkp-foot { padding: 28px 0 40px; border-top: 1px solid var(--bk-line); font-size: 13.5px; color: var(--bk-ink-soft); }
.bkp-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.bkp-foot a { color: var(--bk-ink-soft); }
.bkp .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: linear-gradient(100deg, color-mix(in srgb, var(--bk-accent) 85%, #fff), var(--bk-accent) 55%, color-mix(in srgb, var(--bk-accent) 55%, var(--bk-primary)));
  color: var(--bk-dark); font: 600 15px var(--bk-head); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--bk-accent) 60%, transparent); transition: transform .2s, box-shadow .2s; }
.bkp .btn:hover { transform: translateY(-2px); }
.bkp .btn svg { width: 16px; height: 16px; }
.bkp .btn.dark { background: var(--bk-dark); color: #fff; box-shadow: none; }
.bkp .btn.ghost { background: transparent; color: var(--bk-ink); box-shadow: inset 0 0 0 1px var(--bk-line); }
.bkp .form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bkp .form label { display: grid; gap: 7px; font: 500 13px var(--bk-head); color: var(--bk-ink); }
.bkp .form .full { grid-column: 1 / -1; }
.bkp .form input, .bkp .form select, .bkp .form textarea { font: 400 16px var(--bk-body); padding: 13px 15px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bk-ink) 20%, transparent); background: #fff; color: var(--bk-ink); width: 100%; }
.bkp .form input:focus, .bkp .form select:focus, .bkp .form textarea:focus { outline: 2px solid var(--bk-accent); border-color: var(--bk-primary); }
.bkp .form .hint { font: 400 13px var(--bk-body); color: var(--bk-ink-soft); }
.bkp .pp-submit { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .bkp .form { grid-template-columns: 1fr; } .bkp-hero { padding: 30px 0 120px; } .bkp-back { display: none; } }

/* meeting-type chooser and side-panel summary */
.bk-summary { font-size: 15px; color: var(--bk-on-dark-soft); margin: 0 0 26px; }
.bk-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bk-type { width: 100%; text-align: left; display: grid; gap: 6px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--bk-line); background: #fff; color: var(--bk-ink); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.bk-type:hover { border-color: var(--bk-primary); box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--bk-dark) 60%, transparent); }
.bk-type-t { font: 500 18px var(--bk-head); }
.bk-type-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--bk-ink-soft); }
.bk-type-m svg { width: 16px; height: 16px; color: var(--bk-primary); }
.bk-type-m svg + * { margin-right: 8px; }
.bk-type-s { font-size: 14.5px; color: var(--bk-ink-soft); }

/* ---------- booking: /book, /book/manage, /book/admin ---------- */
.bk [hidden], .adm [hidden] { display: none !important; }
.book-hero { padding: 90px 0 150px; border-bottom: 0; }
.book-hero h1 { max-width: 16ch; }
.book-hero-sm { padding: 70px 0 130px; }
.book-hero-sm h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 0; }
.book-sec { padding: 0 0 90px; display: flow-root; }
.bk {
  position: relative; margin-top: -96px;
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  background: #fff; border: 1px solid var(--bk-line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--bk-dark) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--bk-dark) 4%, transparent);
}
.bk-info {
  position: relative; padding: 40px 34px 34px; color: var(--bk-on-dark); overflow: hidden;
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--bk-primary) 55%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bk-dark) 88%, var(--bk-primary)), var(--bk-dark));
}
.bk-info::after { content: ""; position: absolute; left: 34px; right: 34px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--bk-accent), transparent); opacity: .5; }
.bk-org { margin: 0 0 14px; font: 500 12px var(--bk-head); letter-spacing: .28em; text-transform: uppercase; color: var(--bk-accent); }
.bk-info h2 { font: 400 26px/1.2 var(--bk-head); letter-spacing: -.015em; color: #fff; margin: 0 0 24px; }
.bk-facts { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; font-size: 15px; color: #c9d4dc; }
.bk-facts li { display: flex; align-items: center; gap: 12px; }
.bk-facts svg { width: 19px; height: 19px; flex: none; color: var(--bk-accent); }
.bk-sub { font: 500 13px var(--bk-head); letter-spacing: .04em; color: #fff; margin: 0 0 12px; }
.bk-agenda { margin: 0 0 30px; padding: 0; list-style: none; counter-reset: ag; display: grid; gap: 10px; font-size: 14.5px; color: var(--bk-on-dark-soft); }
.bk-agenda li { counter-increment: ag; display: grid; grid-template-columns: 26px 1fr; }
.bk-agenda li::before { content: counter(ag, decimal-leading-zero); font: 400 12px/1.9 var(--bk-head); color: var(--bk-accent); }
.bk-chosen { margin: 0 0 26px; padding: 18px 20px; border-radius: 14px; background: color-mix(in srgb, var(--bk-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bk-accent) 30%, transparent); }
.bk-chosen p { margin: 0; }
.bk-chosen .bk-chosen-k { font: 500 11.5px var(--bk-head); letter-spacing: .18em; text-transform: uppercase; color: var(--bk-accent); margin-bottom: 8px; }
.bk-chosen-d { font: 500 16px/1.35 var(--bk-head); color: #fff; }
.bk-chosen-t { font-size: 15px; color: #dbe5ec; }
.bk-chosen .bk-chosen-z { font-size: 13px; color: var(--bk-on-dark-soft); margin-top: 4px; }
.bk-alt { margin: 0; font-size: 14px; color: var(--bk-on-dark-soft); }
.bk-alt a { color: var(--bk-accent); }

.bk-main { padding: 34px 40px 40px; color: var(--bk-ink); min-height: 520px; }
.bk-loading, .bk-note { color: var(--bk-ink-soft); }
.bk-step { animation: bk-in .35s ease both; }
@keyframes bk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bk-step { animation: none; } }
.bk-h { font: 400 24px/1.25 var(--bk-head); color: var(--bk-ink); margin: 0 0 18px; outline: none; }
.bk-link { background: none; border: 0; padding: 0; font: inherit; color: var(--bk-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bk-link:hover { color: var(--bk-dark); }
.bk-notice { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: #fff6ec; border: 1px solid #f0d5b5; color: #6b4116; font-size: 15px; }
.bk-notice[role="status"] { background: #eef8fa; border-color: #c4e6ee; color: var(--bk-dark); }

/* steps */
.bk-steps { list-style: none; margin: 0 0 26px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font: 500 12.5px var(--bk-head); color: #6f7f8b; }
.bk-steps li { display: inline-flex; align-items: center; gap: 8px; }
.bk-steps li + li::before { content: ""; width: 22px; height: 1px; background: #cfd8de; margin-right: 2px; }
.bk-steps .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #cfd8de; font-size: 11px; }
.bk-steps .on { color: var(--bk-ink); }
.bk-steps .on .n { background: var(--bk-dark); border-color: var(--bk-dark); color: #fff; }
.bk-steps .done { color: var(--bk-primary); }
.bk-steps .done .n { background: color-mix(in srgb, var(--bk-primary) 10%, transparent); border-color: transparent; color: var(--bk-primary); }

/* time zone */
.bk-tz { margin: 0 0 22px; }
.bk-tz-line { margin: 0; display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--bk-ink-soft); }
.bk-tz-line svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--bk-primary); }
.bk-tz-line strong { color: var(--bk-ink); font-weight: 600; }
.bk-tz-pick { margin-top: 12px; padding: 16px; border: 1px solid var(--bk-line); border-radius: 14px; background: var(--bk-paper); }
.bk-tz-lab { display: block; font: 500 13px var(--bk-head); margin-bottom: 7px; }
.bk-tz-pick input { width: 100%; font: 400 16px var(--bk-body); padding: 12px 14px; border-radius: 10px; border: 1px solid #cfd8de; background: #fff; color: var(--bk-ink); }
.bk-tz-pick input:focus { outline: 2px solid var(--bk-accent); border-color: var(--bk-primary); }
.bk-tz-pick ul { list-style: none; margin: 8px 0 0; padding: 4px; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--bk-line); border-radius: 10px; }
.bk-tz-pick li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.bk-tz-pick li small { color: var(--bk-ink-soft); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-tz-pick li.act { background: color-mix(in srgb, var(--bk-primary) 10%, transparent); }
.bk-tz-pick li.cur { font-weight: 600; }
.bk-tz-pick li.none { cursor: default; color: var(--bk-ink-soft); }
.bk-tz-reset { margin-top: 10px; font-size: 14px; }

/* calendar + times */
.bk-pick-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 34px; align-items: start; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk-cal-head h4 { font: 500 17px var(--bk-head); color: var(--bk-ink); }
.bk-mo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--bk-line); background: #fff; color: var(--bk-ink); cursor: pointer; }
.bk-mo svg { width: 16px; height: 16px; }
.bk-mo:hover:not(:disabled) { border-color: var(--bk-primary); color: var(--bk-primary); }
.bk-mo:disabled { opacity: .35; cursor: default; }
.bk-grid { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 4px; table-layout: fixed; font-size: 15px; }
.bk-grid th { font: 500 11.5px var(--bk-head); letter-spacing: .08em; text-transform: uppercase; color: #6f7f8b; padding: 4px 0 8px; text-align: center; background: none; border: 0; }
.bk-grid td, .bk-grid td:first-child { padding: 0; text-align: center; border: 0; font-weight: 400; vertical-align: middle; }
.bk-day { position: relative; width: 100%; max-width: 52px; aspect-ratio: 1; min-height: 44px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: none; font: 400 15px var(--bk-body); color: #8d9aa4; cursor: default; font-variant-numeric: tabular-nums; }
.bk-day.has { background: color-mix(in srgb, var(--bk-primary) 9%, transparent); color: var(--bk-primary); font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.bk-day.has:hover { background: color-mix(in srgb, var(--bk-primary) 18%, transparent); }
.bk-day.sel, .bk-day.sel:hover { background: var(--bk-dark); color: #fff; }
.bk-day.today::after { content: ""; position: absolute; bottom: 7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.bk-day:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 1px; border-radius: 50%; }
.bk-empty { margin: 16px 0 0; color: var(--bk-ink-soft); font-size: 15px; }
.bk-times h4 { font: 500 15px var(--bk-head); color: var(--bk-ink); margin: 14px 0 14px; }
.bk-times-empty { margin: 62px 0 0; color: var(--bk-ink-soft); font-size: 14.5px; }
.bk-slots { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 8px; max-height: 384px; overflow-y: auto; }
.bk-slot { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--bk-primary) 40%, transparent); background: #fff; color: var(--bk-primary); font: 500 15px var(--bk-head); cursor: pointer; transition: background .15s, color .15s, border-color .15s; font-variant-numeric: tabular-nums; }
.bk-slot:hover, .bk-slot.sel { background: var(--bk-primary); border-color: var(--bk-primary); color: #fff; }

/* details */
.bk-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 26px; padding: 16px 18px; border-radius: 14px; background: var(--bk-paper); border: 1px solid var(--bk-line); font-size: 15px; }
.bk-when p { margin: 0; flex: 1 1 260px; }
.bk-when .bk-when-host { flex-basis: 100%; order: 3; font-size: 13.5px; color: var(--bk-ink-soft); }
.bk-form { grid-template-columns: 1fr 1fr; }
.bk-field { display: grid; gap: 7px; align-content: start; }
.bk-field label { display: block; font: 500 13px var(--bk-head); color: var(--bk-ink); }
.bk-field .opt { font-weight: 400; color: var(--bk-ink-soft); }
.bk-field textarea { min-height: 110px; }
.bk-field [aria-invalid="true"] { border-color: #c2410c; }
.bk-err { margin: 0; font-size: 13.5px; color: #b23c0a; }
.bk-form-err { margin: 0; color: #b23c0a; font-size: 14.5px; }
.bk-back { margin: 0; font-size: 14.5px; color: var(--bk-ink-soft); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-ts:empty { display: none; }
.bk-submit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.bk-submit .btn.busy { opacity: .75; cursor: progress; }

/* confirmed */
.bk-done-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bk-done-head .bk-h { margin: 0; }
.bk-tick { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--bk-accent), color-mix(in srgb, var(--bk-accent) 40%, var(--bk-primary))); color: var(--bk-dark); flex: none; }
.bk-tick svg { width: 20px; height: 20px; }
.bk-done-head.off .bk-tick { background: #e7ebee; color: var(--bk-ink-soft); }
.bk-ticket { position: relative; padding: 24px 26px; border-radius: 16px; background: var(--bk-dark); color: var(--bk-on-dark); margin-bottom: 20px; overflow: hidden; }
.bk-ticket::before { content: ""; position: absolute; right: -80px; top: -120px; width: 280px; height: 280px; background: radial-gradient(closest-side, color-mix(in srgb, var(--bk-accent) 25%, transparent), transparent); }
.bk-ticket p { position: relative; margin: 0; }
.bk-ticket-d { font: 400 22px/1.3 var(--bk-head); color: #fff; }
.bk-ticket-t { font: 300 30px/1.3 var(--bk-head); letter-spacing: -.02em; color: var(--bk-accent-2); font-variant-numeric: tabular-nums; }
.bk-ticket .bk-ticket-z { font-size: 14px; color: var(--bk-on-dark-soft); margin-top: 4px; }
.bk-ticket.off { background: var(--bk-paper); border: 1px solid var(--bk-line); }
.bk-ticket.off::before { display: none; }
.bk-ticket.off p { text-decoration: line-through; color: var(--bk-ink-soft); }
.bk-ticket-v { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bk-line-dark); font-size: 15px; }
.bk-ticket-v .k { font: 500 11.5px var(--bk-head); letter-spacing: .18em; text-transform: uppercase; color: var(--bk-accent); }
.bk-ticket-v a { color: #fff; word-break: break-all; }
.bk-ticket-v .bk-link { color: var(--bk-accent); font-size: 14px; }
.bk-mailnote { font-size: 14.5px; color: var(--bk-ink-soft); }
.bk-sub2 { font: 500 14px var(--bk-head); color: var(--bk-ink); margin: 6px 0 12px; }
.bk-addcal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.bk-cal-btn { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--bk-line); color: var(--bk-ink); text-decoration: none; font: 500 14px var(--bk-head); background: #fff; transition: border-color .15s; }
.bk-cal-btn svg { width: 18px; height: 18px; color: var(--bk-primary); flex: none; }
.bk-cal-btn:hover { border-color: var(--bk-primary); }
.bk-manage { margin: 0; font-size: 14.5px; color: var(--bk-ink-soft); }
.bk-manage a { color: var(--bk-primary); }
.bk-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.bk .btn.ghost { color: var(--bk-ink); box-shadow: inset 0 0 0 1px var(--bk-line); }
.bk .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--bk-primary); }
.bk-was { margin: -6px 0 18px; font-size: 14.5px; color: var(--bk-ink-soft); }
.bk-move { padding: 18px 20px; border-radius: 14px; background: var(--bk-paper); border: 1px solid var(--bk-line); margin-bottom: 18px; }
.bk-move p { margin: 0 0 6px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.bk-move .k { font: 500 11.5px var(--bk-head); letter-spacing: .16em; text-transform: uppercase; color: var(--bk-primary); min-width: 46px; }
.bk-move s { color: var(--bk-ink-soft); }
.bk-move .bk-ticket-z { color: var(--bk-ink-soft); font-size: 14px; margin: 0; }
.bk-fine { margin-top: 14px; font-size: 13.5px; color: var(--bk-ink-soft); }

/* below the booker */
.book-after { padding: 0 0 110px; }
.bk-how { list-style: none; margin: 0; padding: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--bk-line); }
.bk-how b { display: block; font: 500 17px var(--bk-head); color: var(--bk-ink); margin-bottom: 8px; }
.bk-how p { margin: 0; color: var(--bk-ink-soft); font-size: 15.5px; }

@media (max-width: 1080px) { .bk-pick-body { grid-template-columns: 1fr; gap: 10px; } .bk-slots { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); max-height: none; } .bk-times-empty { margin-top: 10px; } }
@media (max-width: 900px) {
  .bk { grid-template-columns: 1fr; margin-top: -80px; }
  .bk-info { padding: 26px 22px 22px; }
  .bk-info h2 { font-size: 22px; margin-bottom: 16px; }
  .bk-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; margin-bottom: 0; font-size: 14px; }
  .bk-sub, .bk-agenda, .bk-alt { display: none; }
  .bk-chosen { margin: 18px 0 0; }
  .bk-main { padding: 26px 20px 30px; min-height: 0; }
  .bk-how { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .book-hero { padding: 56px 0 120px; }
  .bk { border-radius: 18px; }
  .bk-form { grid-template-columns: 1fr; }
  .bk-addcal { grid-template-columns: 1fr; }
  .bk-grid { border-spacing: 2px; }
  .bk-steps li:not(.on) > span:not(.n) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bk-steps li + li::before { width: 14px; }
  .bk-ticket-t { font-size: 26px; }
  .bk-submit .btn, .bk-actions .btn { width: 100%; justify-content: center; }
}

/* admin */
.adm { padding: 0 0 100px; display: flow-root; }
.adm > .wrap { position: relative; margin-top: -80px; background: #fff; border: 1px solid var(--bk-line); border-radius: 22px; padding: 34px; }
.adm-login { max-width: 560px; }
.adm-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-bar .btn { padding: 10px 18px; font-size: 14px; }
.adm .btn.ghost { color: var(--bk-ink); box-shadow: inset 0 0 0 1px var(--bk-line); }
.adm-tz { margin: 0; color: var(--bk-ink-soft); font-size: 14.5px; }
.adm-err { color: #b23c0a; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; }
.adm-h { font: 500 16px var(--bk-head); color: var(--bk-ink); margin: 8px 0 14px; }
.adm-list + .adm-h, .adm-cals + .adm-h { margin-top: 36px; }
.adm-list { display: grid; gap: 12px; }
.adm-item { border: 1px solid var(--bk-line); border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: start; font-size: 14.5px; }
.adm-item.off { opacity: .6; }
.adm-when b { display: block; font: 500 15px var(--bk-head); color: var(--bk-ink); }
.adm-when span { color: var(--bk-ink-soft); font-size: 13.5px; }
.adm-who b { font-weight: 600; color: var(--bk-ink); }
.adm-who p { margin: 2px 0 0; color: var(--bk-ink-soft); word-break: break-word; }
.adm-who a { color: var(--bk-primary); }
.adm-who .notes { margin-top: 8px; padding: 8px 12px; background: var(--bk-paper); border-radius: 8px; color: var(--bk-ink); white-space: pre-wrap; }
.adm-who .warn { color: #b23c0a; font-size: 13px; }
.adm-item .btn { padding: 9px 16px; font-size: 13.5px; }
.adm-empty { color: var(--bk-ink-soft); font-size: 15px; margin: 0; }
.adm-cals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adm-cals li { border: 1px solid var(--bk-line); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.adm-cals b { display: flex; align-items: center; gap: 8px; color: var(--bk-ink); font-weight: 600; }
.adm-cals b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b8c3cb; }
.adm-cals li.ok b::before { background: #2f9e6e; }
.adm-cals li.bad b::before { background: #c2410c; }
.adm-cals span { display: block; color: var(--bk-ink-soft); margin-top: 2px; word-break: break-word; }
.adm-block { grid-template-columns: 1fr; gap: 12px; }
.adm-block .btn { padding: 11px 20px; font-size: 14px; }
.adm-blocked { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.adm-blocked li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bk-line); }
.adm-blocked small { color: var(--bk-ink-soft); }
.adm-dialog { border: 0; border-radius: 18px; padding: 28px; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--bk-dark) 50%, transparent); }
.adm-dialog::backdrop { background: color-mix(in srgb, var(--bk-dark) 55%, transparent); }
.adm-dialog h2 { font: 400 22px var(--bk-head); color: var(--bk-ink); }
.adm-dialog p { margin: 0; color: var(--bk-ink-soft); }
.adm-dialog .btn.ghost { color: var(--bk-ink); box-shadow: inset 0 0 0 1px var(--bk-line); }
@media (max-width: 960px) { .adm-grid { grid-template-columns: 1fr; } .adm-item { grid-template-columns: 1fr; gap: 8px; } .adm > .wrap { padding: 22px 18px; } }