/* BookedTok stage 2: the photo flow's sheet, over Piper's flips inside the phone frame. A headline and one button. */
#bt .bk{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;justify-content:center;align-items:center;
  background:radial-gradient(120% 80% at 50% 30%,#2a1418 0%,#0d0b0c 70%);color:#fff;padding:24px 22px 30px;box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;touch-action:manipulation;-webkit-user-select:text;user-select:text}
#bt.bk-on .bk{display:flex}
#bt.bk-on .bt-stack,#bt.bk-on .bt-sound{visibility:hidden}
#bt .bk-x{position:absolute;top:10px;left:10px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font:400 28px/1 -apple-system,sans-serif;cursor:pointer;z-index:3}
#bt .bk-box{width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
#bt .bk-h{margin:0;font:700 31px/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.2px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
#bt .bk-line{margin:-4px 0 0;font-size:15px;line-height:1.4;color:rgba(255,255,255,.78)}
#bt .bk-form{display:flex;flex-direction:column;gap:10px;width:100%}
#bt .bk-in{width:100%;box-sizing:border-box;padding:15px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font:600 18px/1.2 -apple-system,sans-serif;text-align:center;outline:none;-webkit-appearance:none;appearance:none}
#bt .bk-in:focus{border-color:#fe2c55;background:rgba(255,255,255,.12)}
#bt .bk-in::placeholder{color:rgba(255,255,255,.4)}
#bt select.bk-in option{color:#000}
#bt .bk-code{letter-spacing:8px;font-size:24px}
#bt .bk-btn{margin-top:4px;padding:17px 30px;min-width:240px;border:0;border-radius:999px;background:#fe2c55;color:#fff;
  font:700 19px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;box-shadow:0 6px 24px rgba(254,44,85,.35);cursor:pointer}
#bt .bk-btn:disabled{opacity:.55}
#bt .bk-err{margin:0;min-height:18px;font-size:14px;color:#ff9aa9}
#bt .bk-err:empty{min-height:0;display:none}
#bt .bk-foot{margin:2px 0 0;font-size:13px}
#bt .bk-foot a{color:rgba(255,255,255,.6)}
/* the camera: the live picture fills the frame, the headline and the shutter sit over it */
#bt .bk.bk-camera{background:#000;justify-content:flex-end;padding-bottom:34px}
#bt .bk-camera .bk-cam{position:absolute;inset:0;overflow:hidden}
#bt .bk-camera .bk-cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000}
#bt .bk-camera .bk-oval{position:absolute;left:50%;top:42%;width:62%;aspect-ratio:3/4;transform:translate(-50%,-50%);
  border:3px dashed rgba(255,255,255,.75);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
#bt .bk-camera .bk-box{position:relative;z-index:2}
#bt .bk-camera .bk-h{font-size:27px}
/* the painting */
#bt .bk-bar{width:70%;height:6px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
#bt .bk-bar span{display:block;height:100%;width:0;background:#fe2c55;border-radius:6px;transition:width .2s linear}
#bt .bk-flash{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.4) 35%,rgba(255,255,255,0) 70%);
  animation:bk-pop 1.6s ease-in-out infinite}
@keyframes bk-pop{0%,100%{opacity:.25;transform:scale(.7)}12%{opacity:1;transform:scale(1.15)}40%{opacity:.35;transform:scale(.9)}}
/* the pictures: a polaroid, tap to save */
#bt .bk-card{background:#f4efe6;padding:9px 9px 30px;box-shadow:0 12px 34px rgba(0,0,0,.6);transform:rotate(-2.5deg);cursor:pointer;
  animation:bk-in .6s cubic-bezier(.2,.9,.3,1.2) both}
#bt .bk-card img{display:block;width:min(64vw,250px);aspect-ratio:1;object-fit:cover;background:#ddd}
#bt .bk-card.bk-tall{transform:rotate(2deg)}
#bt .bk-card.bk-tall img{width:min(52vw,210px);aspect-ratio:2/3}
#bt .bk-result .bk-h{margin-top:6px}
@keyframes bk-in{from{opacity:0;transform:translateY(24px) rotate(-8deg) scale(.9)}}
@media (max-height:640px){#bt .bk-card img{width:min(52vw,190px)}#bt .bk-card.bk-tall img{width:min(40vw,150px)}#bt .bk-h{font-size:26px}}
