/* Booking · Step 3 (payment done + account) — separate file */
/* ============ STEP 3 — PAYMENT DONE + ACCOUNT ============ */
.bk-done { position:relative; text-align:center; padding:10px 4px; }
.bk-done__burst { position:absolute; left:50%; top:70px; width:0; height:0; }
.bk-done__tick { display:inline-block; width:84px; height:84px; margin-bottom:14px; }
.bk-done__tick svg { width:100%; height:100%; }
.bk-done__circle { fill:none; stroke:var(--bk-green); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:bk-draw 0.6s var(--bk-ease) forwards; }
.bk-done__check { fill:none; stroke:var(--bk-green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:bk-draw 0.4s var(--bk-ease) 0.5s forwards; }
@keyframes bk-draw { to { stroke-dashoffset:0; } }
.bk-done__title { font-family:var(--bk-head); font-weight:900; font-size:1.6rem; color:var(--bk-ink); margin:0 0 4px; }
.bk-done__sub { font-size:0.86rem; color:var(--bk-muted); margin:0 0 22px; }
.bk-done__sub b { color:var(--bk-green-d); }

.bk-acc { max-width:480px; margin:0 auto; text-align:left; padding:20px; border-radius:18px; background:#f4f6f4; border:1px solid rgba(27,28,30,0.06); }
.bk-acc__head { display:flex; align-items:center; gap:8px; font-family:var(--bk-head); font-weight:800; font-size:0.95rem; color:var(--bk-ink); margin-bottom:8px; }
.bk-acc__head i { color:var(--bk-green); }
.bk-acc__line { font-size:0.84rem; color:var(--bk-muted); margin:0 0 16px; }
.bk-acc__line b { color:var(--bk-text); }

.bk-acc__pw-lbl { display:block; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--bk-muted); margin-bottom:8px; }
.bk-acc__pw-box { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:#fff; border:1.5px dashed rgba(34,197,94,0.4); }
.bk-acc__pw-box code { flex:1; font-family:'Courier New',monospace; font-size:1.05rem; font-weight:700; letter-spacing:2px; color:var(--bk-ink); }
.bk-acc__pw-eye { border:0; background:transparent; cursor:pointer; color:var(--bk-muted); font-size:0.85rem; }
.bk-acc__pw-copy { display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; padding:7px 12px; border-radius:9px; font-family:var(--bk-head); font-weight:800; font-size:0.74rem; color:#fff; background:var(--bk-green); transition:background 0.3s ease, transform 0.3s ease; }
.bk-acc__pw-copy.is-done { background:var(--bk-green-d); }
.bk-acc__pw-copy:hover { transform:translateY(-1px); }
.bk-acc__pw-hint { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:0.7rem; color:var(--bk-muted); }
.bk-acc__pw-hint i { color:var(--bk-accent); }

.bk-acc__note { display:flex; gap:10px; margin-top:16px; padding:12px 14px; border-radius:12px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.25); font-size:0.8rem; line-height:1.5; color:var(--bk-text); }
.bk-acc__note i { color:var(--bk-green-d); margin-top:2px; }

.bk-done__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px; }

/* tiny confetti reuse */
.bk-cfx { position:fixed; inset:0; z-index:9999; pointer-events:none; }
.bk-cfx i { position:fixed; width:11px; height:11px; border-radius:3px; transform:translate(-50%,-50%); animation:bk-cfx-fly 1.3s cubic-bezier(.16,.9,.3,1) forwards; }
@keyframes bk-cfx-fly { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4);} 15%{opacity:1;} 100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 120px)) rotate(var(--r));} }

@media (max-width:560px){ .bk-done__actions .bk-btn{ width:100%; } }

/* doodle hero */
.bk-done__hero { position:relative; width:150px; height:150px; margin:0 auto 6px; }
.bk-done__doodle {
  width:100%; height:100%; object-fit:contain;
  animation:bk-doodle-in 0.7s var(--bk-ease) both, bk-doodle-bob 3.5s ease-in-out 0.7s infinite;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.12));
}
@keyframes bk-doodle-in { from { opacity:0; transform:scale(0.6) rotate(-8deg); } to { opacity:1; transform:none; } }
@keyframes bk-doodle-bob { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-8px) rotate(2deg); } }
.bk-done__hero .bk-done__tick {
  position:absolute; right:-6px; bottom:-2px;
  width:46px; height:46px; margin:0;
  background:#fff; border-radius:50%;
  box-shadow:0 8px 20px rgba(34,197,94,0.35);
  display:grid; place-items:center;
  animation:bk-pop 0.5s var(--bk-ease) 0.9s both;
}