/* Book a call: the calendar sheet (book-call.js). */
.bk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:22px;min-height:330px}
.bk-mon{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.bk-mon b{font:600 15px/1.2 'Geist',sans-serif;color:var(--ink,#EEF1FA)}
.bk-nav{display:flex;gap:6px}
.bk-nav button{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--ink,#EEF1FA);
  background:rgba(37,99,235,.07);border:1px solid rgba(147,197,253,.2);transition:background .15s ease,border-color .15s ease}
.bk-nav button:hover:not(:disabled){background:rgba(37,99,235,.16);border-color:rgba(147,197,253,.45)}
.bk-nav button:disabled{opacity:.3;cursor:default}
.bk-nav svg{width:16px;height:16px}
.bk-dow,.bk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.bk-dow span{text-align:center;font:600 12px/1 'Geist',sans-serif;color:var(--faint,#8E9BC4);padding:6px 0 8px}
.bk-day{aspect-ratio:1;min-height:36px;border-radius:11px;border:1px solid transparent;background:transparent;color:#8E9BC4;font:500 13.5px/1 'Geist',sans-serif;
  font-variant-numeric:tabular-nums;cursor:default;display:grid;place-items:center;position:relative;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.bk-day.free{color:var(--ink,#EEF1FA);background:rgba(37,99,235,.09);border-color:rgba(147,197,253,.16);cursor:pointer;font-weight:600}
.bk-day.free:hover{background:rgba(37,99,235,.2);border-color:rgba(96,165,250,.5);transform:translateY(-1px)}
.bk-day.today::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--signal,#2DD4BF)}
.bk-day.on,.bk-day.on:hover{color:#fff;background:linear-gradient(135deg,var(--electric,#2563EB),#1D4ED8);border-color:transparent;box-shadow:0 10px 22px -10px rgba(2,6,23,.55)}
.bk-day:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.45)}
.bk-day.blank{visibility:hidden}

.bk-times{display:flex;flex-direction:column;min-width:0;border-left:1px solid rgba(147,197,253,.12);padding-left:22px}
.bk-th{margin-bottom:12px}
.bk-th b{display:block;font:600 15px/1.25 'Geist',sans-serif;color:var(--ink,#EEF1FA)}
.bk-th span{display:block;margin-top:3px;font-size:12px;color:var(--muted,#A9B4D6)}
.bk-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-content:start;max-height:262px;overflow-y:auto;padding-right:4px;overscroll-behavior:contain}
.bk-slot{padding:10px 8px;border-radius:11px;font:600 13px/1 'Geist',sans-serif;font-variant-numeric:tabular-nums;color:var(--ink,#EEF1FA);cursor:pointer;
  background:rgba(6,8,20,.55);border:1px solid rgba(147,197,253,.2);transition:background .15s ease,border-color .15s ease,transform .15s ease;animation:bkIn .3s cubic-bezier(.16,1,.3,1) backwards}
.bk-slot:hover{border-color:rgba(96,165,250,.6);background:rgba(37,99,235,.14);transform:translateY(-1px)}
.bk-slot.on,.bk-slot.on:hover{color:#fff;background:linear-gradient(135deg,var(--electric,#2563EB),#1D4ED8);border-color:transparent}
.bk-slot:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.45)}
@keyframes bkIn{from{opacity:0;transform:translateY(6px)}}
.bk-none{grid-column:1/-1;padding:26px 6px;text-align:center;font-size:13px;line-height:1.5;color:var(--muted,#A9B4D6)}
.bk-load{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:300px;color:var(--muted,#A9B4D6);font-size:13.5px}
.bk-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(147,197,253,.3);border-top-color:var(--glow,#93C5FD);animation:bkSpin .7s linear infinite}
@keyframes bkSpin{to{transform:rotate(360deg)}}

/* step two: the time that was picked, then who to call */
.bk-picked{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;border-radius:13px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(59,130,246,.18),transparent 70%);border:1px solid rgba(96,165,250,.28)}
.bk-picked svg{width:22px;height:22px;flex:0 0 auto;color:#93C5FD}
.bk-picked div{min-width:0;flex:1}
.bk-picked b{display:block;font:600 14.5px/1.3 'Geist',sans-serif;color:#fff}
.bk-picked span{display:block;font-size:12.5px;color:var(--muted,#A9B4D6)}
.bk-picked button{flex:0 0 auto;font:600 12.5px/1 'Geist',sans-serif;color:var(--glow,#93C5FD);background:none;border:0;padding:6px 2px;cursor:pointer}
.bk-picked button:hover{color:#fff}
.bk-err{min-height:1.2em;margin-top:2px;font-size:13px;line-height:1.45;color:var(--danger,#F87171)}

/* step three */
.bk-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 10px 12px}
.bk-done > svg{width:54px;height:54px;color:var(--ok,#34D399);animation:bkPop .5s cubic-bezier(.16,1,.3,1) both}
@keyframes bkPop{from{opacity:0;transform:scale(.6)}}
.bk-done b{font:700 20px/1.25 'Geist',sans-serif;letter-spacing:-.015em;color:var(--ink,#EEF1FA)}
.bk-done p{max-width:400px;margin:0;font-size:14px;line-height:1.6;color:var(--muted,#A9B4D6)}
.bk-done p strong{color:var(--ink,#EEF1FA);font-weight:600}

@media (max-width:680px){
  .bk{grid-template-columns:minmax(0,1fr);gap:16px;min-height:0}
  .bk-times{border-left:0;border-top:1px solid rgba(147,197,253,.12);padding:16px 0 0}
  .bk-slots{grid-template-columns:repeat(3,minmax(0,1fr));max-height:190px}
}
@media (prefers-reduced-motion:reduce){ .bk-slot,.bk-done > svg{animation:none} }