/* ============================================================
   STANDARD COMPONENTS  v2  — multi-step booking widget
   Feels like real software: stepper, animated transitions,
   spinner, animated success. Two-state: DEMO simulates the
   confirmation; LIVE redirects to Cal.com.
   ============================================================ */

.bk{
  --bk-bg:#1b1b1b;--bk-fg:#f4f0e8;--bk-muted:#9a948a;--bk-accent:#c9a24b;--bk-line:#33312c;--bk-ok:#3fbf7f;
  background:var(--bk-bg);color:var(--bk-fg);border:1px solid var(--bk-line);
  border-radius:18px;padding:0;max-width:600px;margin:0 auto;overflow:hidden;text-align:left;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);font-family:inherit;
}

/* header — clean app bar (no fake window dots) */
.bk__bar{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid var(--bk-line);background:#161616}
.bk__bar-ico{display:flex;align-items:center;justify-content:center;color:var(--bk-accent)}
.bk__bar-title{font-size:13px;font-weight:600;color:var(--bk-fg);letter-spacing:.01em}
.bk__bar-badge{margin-left:auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--bk-accent);border:1px solid var(--bk-accent);border-radius:999px;padding:3px 8px}

/* stepper */
.bk__steps{display:flex;gap:6px;padding:16px 18px 4px}
.bk__step{flex:1;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--bk-muted)}
.bk__step-bar{height:3px;border-radius:3px;background:var(--bk-line);margin-top:6px;overflow:hidden;position:relative}
.bk__step-bar::after{content:"";position:absolute;inset:0;background:var(--bk-accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.bk__step.is-done .bk__step-bar::after,.bk__step.is-active .bk__step-bar::after{transform:scaleX(1)}
.bk__step.is-active{color:var(--bk-fg)}

/* panel + transitions */
.bk__stage{padding:14px 18px 18px;position:relative}
.bk__panel{animation:bk-in .34s cubic-bezier(.22,1,.36,1)}
.bk__panel.back{animation:bk-in-back .34s cubic-bezier(.22,1,.36,1)}
@keyframes bk-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes bk-in-back{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.bk__label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--bk-muted);margin:2px 0 12px}

/* service cards */
.bk__svc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--bk-line);border-radius:11px;cursor:pointer;transition:.18s;margin-bottom:9px}
.bk__svc:hover{border-color:var(--bk-accent);transform:translateY(-2px)}
.bk__svc.is-active{border-color:var(--bk-accent);background:rgba(201,162,75,.08)}
.bk__svc-name{font-weight:600;font-size:14.5px}
.bk__svc-dur{font-size:11.5px;color:var(--bk-muted);margin-top:2px}
.bk__svc-price{font-family:inherit;font-weight:700;color:var(--bk-accent);white-space:nowrap}
.bk__svc-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--bk-line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:.18s}
.bk__svc.is-active .bk__svc-check{border-color:var(--bk-accent);background:var(--bk-accent)}
.bk__svc.is-active .bk__svc-check::after{content:"✓";color:#1a1a1a;font-size:12px;font-weight:800}

/* days + slots */
.bk__days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.bk__day{flex:0 0 auto;text-align:center;min-width:62px;padding:10px 6px;border:1px solid var(--bk-line);border-radius:11px;cursor:pointer;background:transparent;color:var(--bk-fg);transition:.18s}
.bk__day small{display:block;font-size:10px;color:var(--bk-muted);text-transform:uppercase;letter-spacing:.05em}
.bk__day b{display:block;font-size:18px;margin-top:3px}
.bk__day em{font-style:normal;display:block;font-size:9px;color:var(--bk-muted);margin-top:1px}
.bk__day:hover{border-color:var(--bk-accent)}
.bk__day.is-active{background:var(--bk-accent);color:#1a1a1a;border-color:var(--bk-accent)}
.bk__day.is-active small,.bk__day.is-active em{color:rgba(26,26,26,.7)}
.bk__slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bk__slot{padding:10px 4px;border:1px solid var(--bk-line);border-radius:9px;background:transparent;color:var(--bk-fg);font-size:13px;cursor:pointer;transition:.16s}
.bk__slot:hover:not(:disabled){border-color:var(--bk-accent);transform:translateY(-1px)}
.bk__slot.is-active{background:var(--bk-accent);color:#1a1a1a;border-color:var(--bk-accent);font-weight:700}
.bk__slot:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through}

/* inputs */
.bk__field{margin-bottom:12px}
.bk__field label{display:block;font-size:11px;color:var(--bk-muted);margin-bottom:5px}
.bk__field input{width:100%;padding:12px 13px;border:1px solid var(--bk-line);border-radius:9px;background:#161616;color:var(--bk-fg);font:inherit;font-size:14px;transition:.18s}
.bk__field input:focus{outline:none;border-color:var(--bk-accent)}

/* summary row */
.bk__sum{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bk-line);font-size:13.5px}
.bk__sum span:first-child{color:var(--bk-muted)}
.bk__sum b{color:var(--bk-fg)}

/* nav buttons */
.bk__nav{display:flex;gap:10px;margin-top:18px}
.bk__btn{flex:1;padding:14px;border-radius:10px;border:1px solid var(--bk-line);background:transparent;color:var(--bk-fg);font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:.18s}
.bk__btn:hover{border-color:var(--bk-accent)}
.bk__btn--primary{background:var(--bk-accent);color:#1a1a1a;border-color:var(--bk-accent);flex:2}
.bk__btn--primary:hover{filter:brightness(1.06)}
.bk__btn:disabled{opacity:.4;cursor:not-allowed}
.bk__btn--back{flex:0 0 auto;padding:14px 18px;color:var(--bk-muted)}
.bk__btn--back:hover{color:var(--bk-fg);border-color:var(--bk-accent)}

/* spinner */
.bk__spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(26,26,26,.35);border-top-color:#1a1a1a;border-radius:50%;animation:bk-spin .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes bk-spin{to{transform:rotate(360deg)}}

/* success */
.bk__done{text-align:center;padding:18px 8px 8px;animation:bk-in .4s ease}
.bk__check{width:74px;height:74px;border-radius:50%;border:2px solid var(--bk-ok);margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.bk__check svg{width:38px;height:38px}
.bk__check path{stroke:var(--bk-ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:48;stroke-dashoffset:48;animation:bk-draw .5s .15s forwards cubic-bezier(.65,0,.45,1)}
@keyframes bk-draw{to{stroke-dashoffset:0}}
.bk__done h4{font-size:19px;margin-bottom:6px}
.bk__done p{font-size:13px;color:var(--bk-muted);max-width:340px;margin:0 auto 14px}
.bk__recap{background:#161616;border:1px solid var(--bk-line);border-radius:11px;padding:14px 16px;text-align:left;max-width:340px;margin:0 auto}