/* Booking page: thank-you view and the fade back to the form */
#done.is-in{animation:doneIn .9s var(--ease) both}
#done.is-out{animation:doneOut .9s var(--ease) both}
@keyframes doneIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes doneOut{to{opacity:0;transform:translate3d(0,-8px,0)}}
.fade-in{animation:formIn 1.1s var(--ease) both}
@keyframes formIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.done h3{max-width:24ch;margin-inline:auto;text-wrap:balance;line-height:1.1}
.done-timer{margin:10px 0 0}
.done-timer b{color:var(--fg);font-variant-numeric:tabular-nums}

/* booked slots */
.slot[disabled]{opacity:.35;text-decoration:line-through;cursor:not-allowed;background:transparent}
.slot[disabled]:hover{background:transparent}

/* email-confirmation checkbox */
.field .chk{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:4px 0;cursor:pointer;font:400 15px/1.45 var(--display);letter-spacing:0;text-transform:none;color:var(--fg)}
.field .chk input{flex:none;width:20px;height:20px;margin:1px 0 0;padding:0;border-radius:5px;box-shadow:none;background:none;accent-color:#ff9db5;cursor:pointer}
.field .chk input:focus-visible{outline:2px solid #ff9db5;outline-offset:3px}
.field.notify.bad .chk input{outline:2px solid #ff8a8a;outline-offset:2px}
.field .chk a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.field .chk .req{margin-left:2px}
/* fields keep their natural height when a neighbour in the same row is taller (e.g. Website has help text) */
.field{align-content:start}