/* ═══════════════════════════════════════════════════════════════════════════
   Booking widget — glass surfaces, two panes
   Month calendar on the left, times for the chosen day on the right, then the
   form. Same three states the React SlotPicker has: picking, filling, done.
   ═══════════════════════════════════════════════════════════════════════════ */

.sched{padding:clamp(22px,3vw,34px);border-radius:var(--r-xl);min-height:380px}

/* ── Loading / empty ──────────────────────────────────────────────────────── */
.sched-loading,.sched-msg{display:grid;place-items:center;gap:14px;min-height:320px;text-align:center}
.sched-msg p{margin:0;max-width:44ch}
.sched-spinner{width:26px;height:26px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.12);border-top-color:var(--a1);
  animation:sched-spin .7s linear infinite}
@keyframes sched-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sched-spinner{animation-duration:2s}}

/* ── Two-pane picker ──────────────────────────────────────────────────────── */
.sched-grid{display:grid;grid-template-columns:1fr 268px;gap:26px;align-items:start}

/* Calendar */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cal-title{font-weight:650;color:var(--fg);font-size:16px;letter-spacing:-.02em}
.cal-nav{margin-left:auto;display:flex;gap:6px}
.cal-nav button{width:32px;height:32px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--glass);border:1px solid rgba(255,255,255,.1);color:var(--fg);
  display:grid;place-items:center;transition:.18s var(--ease)}
.cal-nav button:hover:not(:disabled){background:var(--glass-hi)}
.cal-nav button:disabled{opacity:.3;cursor:not-allowed}
.cal-nav svg{width:13px;height:13px}

.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-dow span{text-align:center;font-size:11.5px;font-weight:650;color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase;padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{aspect-ratio:1;border:0;background:transparent;border-radius:var(--r-sm);
  color:var(--faint);font-size:14px;font-family:inherit;display:grid;place-items:center;
  cursor:default;position:relative;transition:.16s var(--ease)}
.cal-cell.open{color:var(--fg);cursor:pointer;background:var(--glass);
  border:1px solid rgba(255,255,255,.09);font-weight:550}
.cal-cell.open:hover{background:var(--glass-hi);transform:scale(1.05)}
.cal-cell.open::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--a1)}
.cal-cell.sel{background:var(--grad);color:#fff;border-color:transparent;font-weight:650;
  box-shadow:0 4px 14px -3px rgba(91,140,255,.6)}
.cal-cell.sel::after{background:#fff}

/* Times */
.times-head{font-weight:650;color:var(--fg);font-size:15px;margin-bottom:4px;letter-spacing:-.02em}
.times-tz{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.times-tz button{background:none;border:0;color:var(--a1);cursor:pointer;font:inherit;
  font-size:12.5px;padding:0;text-decoration:underline;text-underline-offset:2px}
.times-list{display:grid;gap:7px;max-height:330px;overflow-y:auto;padding-right:5px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.times-list::-webkit-scrollbar{width:5px}
.times-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.time-btn{padding:11px;border-radius:var(--r-sm);background:var(--glass);
  border:1px solid rgba(255,255,255,.1);color:var(--fg);font:inherit;font-size:14.5px;
  font-weight:550;cursor:pointer;transition:.16s var(--ease);font-variant-numeric:tabular-nums}
.time-btn:hover{background:var(--glass-hi);border-color:rgba(91,140,255,.45);transform:translateX(2px)}
.times-empty{font-size:14px;color:var(--muted);padding:22px 0;text-align:center}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.sched-form{max-width:520px;margin-inline:auto}
.sched-when{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:22px;
  border-radius:var(--r);background:var(--glass-hi);border:1px solid rgba(255,255,255,.09)}
.sched-when svg{width:17px;height:17px;color:var(--a1);flex:0 0 auto}
.sched-when b{color:var(--fg);font-weight:650;font-size:14.5px;display:block;line-height:1.35}
.sched-when span{font-size:12.5px;color:var(--muted)}
.sched-when button{margin-left:auto;background:none;border:0;color:var(--a1);cursor:pointer;
  font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:2px;flex:0 0 auto}

.f-row{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:14px}
.f-field{display:grid;gap:6px}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:13px;font-weight:600;color:var(--body);letter-spacing:.01em}
.f-field label .req{color:var(--a1)}
.f-field input,.f-field select,.f-field textarea{
  padding:11px 13px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.11);color:var(--fg);font:inherit;font-size:14.5px;
  transition:.18s var(--ease);width:100%}
.f-field textarea{resize:vertical;min-height:76px;line-height:1.55}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:0;border-color:var(--a1);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(91,140,255,.15)}
.f-field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.f-field select option{background:var(--ink2);color:var(--fg)}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but happily fill one that is merely positioned away. */
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sched-err{padding:12px 15px;border-radius:var(--r-sm);margin-bottom:16px;font-size:14px;
  background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:#FFB4B4}
.sched-actions{display:flex;gap:11px;align-items:center;margin-top:20px}
.sched-actions .btn{flex:1}
.sched-fine{font-size:12.5px;color:var(--faint);margin:14px 0 0;line-height:1.5}

/* ── Done ─────────────────────────────────────────────────────────────────── */
.sched-done{text-align:center;padding:30px 20px;max-width:480px;margin-inline:auto}
.sched-tick{width:52px;height:52px;border-radius:50%;margin:0 auto 20px;display:grid;
  place-items:center;background:rgba(61,220,151,.13);border:1px solid rgba(61,220,151,.32)}
.sched-tick svg{width:25px;height:25px;color:var(--good)}
.sched-done h3{margin-bottom:10px}
.sched-done .when{display:inline-block;padding:11px 18px;border-radius:var(--r-sm);
  background:var(--glass-hi);border:1px solid rgba(255,255,255,.1);margin:16px 0;
  font-weight:650;color:var(--fg);font-size:15px}

@media (max-width:820px){
  .sched-grid{grid-template-columns:1fr;gap:22px}
  .times-list{max-height:none;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));display:grid}
  .f-row{grid-template-columns:1fr}
}