/* ============================================================
   Calibre - booking modal
   Extracted from theme.css so standalone templates (case studies,
   proposals, design pages) can load the modal WITHOUT the rest of the
   theme layer, which would collide with their own self-contained CSS.

   Every rule here is namespaced .bk-* and relies only on the design
   tokens (--bg, --card, --acc ...). Those tokens are defined by
   theme.css on normal pages, and by the pasted document's own :root on
   standalone pages - so this file works in both contexts.
   ============================================================ */

/* ---------- booking modal ---------- */
.bk-overlay{position:fixed;inset:0;z-index:400;background:rgba(6,6,5,0.84);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px);
  opacity:0;pointer-events:none;transition:opacity .28s ease}
.bk-overlay.open{opacity:1;pointer-events:auto}
.bk-modal{background:var(--card);border:1px solid var(--line2);width:min(720px,100%);
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(14px) scale(.985);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.bk-overlay.open .bk-modal{transform:none}
.bk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:22px clamp(18px,3vw,28px) 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.bk-head .lbl{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim)}
.bk-head .lbl i{font-style:normal;color:var(--acc)}
.bk-head h2{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-0.02em;margin-top:8px;line-height:1.15}
.bk-close{width:38px;height:38px;flex-shrink:0;border:1px solid var(--line2);background:none;color:var(--mut);
  font-size:1.1rem;line-height:1;cursor:pointer;border-radius:50%;transition:all .2s ease;
  display:flex;align-items:center;justify-content:center}
.bk-close:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.bk-body{flex:1;min-height:0;overflow-y:auto;position:relative}
/* ---- native booking form ---- */
.bk-form{padding:clamp(20px,3.4vw,30px)}
.bk-form[hidden],.bk-form [hidden]{display:none}

.bk-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.bk-day{flex:0 0 auto;min-width:62px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--mut);cursor:pointer;text-align:center;line-height:1.25;
  transition:border-color .18s,color .18s,background .18s}
.bk-day i{display:block;font-style:normal;font-family:var(--mono);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase}
.bk-day b{display:block;font-size:1.15rem;font-weight:800;color:var(--txt);margin:2px 0}
.bk-day:hover{border-color:var(--line2);color:var(--txt)}
.bk-day.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.bk-day.on b,.bk-day.on i{color:var(--acc-ink)}

.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:16px;
  max-height:280px;overflow-y:auto}
.bk-slot{min-width:0;padding:11px 6px;border:1px solid var(--line);border-radius:9px;background:transparent;
  color:var(--txt);font-size:0.86rem;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.bk-slot:hover{border-color:var(--acc);color:var(--acc)}
.bk-tzline{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--mut)}
.bk-tzline select{flex:1 1 180px;min-width:0;max-width:100%;
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.06em;
  color:var(--txt);background:var(--bg);border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;cursor:pointer;text-transform:none;transition:border-color .18s}
.bk-tzline select:hover{border-color:var(--line2)}
.bk-tzline select:focus{outline:none;border-color:var(--acc)}

.bk-chosen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:0.92rem;font-weight:600;
  color:var(--txt);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.bk-change{background:none;border:0;padding:0;cursor:pointer;color:var(--acc);
  font-family:var(--mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:border-color .2s}
.bk-change:hover{border-color:var(--acc)}

.bk-details label{display:block;margin-bottom:13px}
.bk-details label>span{display:block;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.bk-details label>span i{font-style:normal;text-transform:none;letter-spacing:0}
.bk-details input,.bk-details textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--txt);font:inherit;font-size:0.9rem;transition:border-color .18s}
.bk-details input:focus,.bk-details textarea:focus{outline:none;border-color:var(--acc)}
.bk-details textarea{resize:vertical;min-height:70px}
.bk-details input::placeholder,.bk-details textarea::placeholder{color:var(--dim)}
.bk-details .btn{width:100%;justify-content:center;margin-top:4px}
.bk-details button[disabled]{opacity:.6;cursor:progress}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-err{color:#FF8A7A;font-size:0.82rem;margin-bottom:10px}

.bk-done{text-align:center;padding:clamp(18px,4vw,34px) 0}
.bk-tick{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--acc);color:var(--acc-ink);font-size:1.5rem;font-weight:800}
.bk-done h3{font-size:1.4rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:8px}
.bk-done p{font-size:0.95rem;color:var(--txt);font-weight:600}
.bk-done .bk-sub{font-size:0.85rem;color:var(--mut);font-weight:400;margin-top:6px}
.bk-done .btn{margin-top:18px}

@media(max-width:520px){
  .bk-slots{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));max-height:220px}
}
@media(prefers-reduced-motion:reduce){
  .bk-day,.bk-slot,.bk-change,.bk-details input,.bk-details textarea{transition:none}
}

.bk-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}
.bk-fallback{display:none;padding:clamp(28px,5vw,44px) clamp(18px,3vw,28px);text-align:center}
.bk-fallback p{font-size:0.88rem;color:var(--mut);line-height:1.7;max-width:44ch;margin:0 auto 22px}
.bk-alt{border-top:1px solid var(--line);padding:16px clamp(18px,3vw,28px);flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bk-alt span{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}
.bk-alt a{font-size:0.85rem;font-weight:700;color:var(--acc);border-bottom:1px solid transparent;transition:border-color .2s}
.bk-alt a:hover{border-color:var(--acc)}
body.bk-lock{overflow:hidden}