/* A familiar moment makes a webapp tangible without another project link. */
.service-scene--booking { display:grid; place-items:center; background:#e8ecf8; }
.booking-card { position:relative; z-index:1; width:65%; max-width:350px; padding:clamp(22px,4.3cqw,38px); border-radius:22px; background:#fff; box-shadow:0 14px 40px #233ad30a; }
.booking-choice,.booking-result { display:flex; flex-direction:column; align-items:center; }
.booking-symbol { display:grid; place-items:center; color:var(--blue); width:52px; height:52px; margin-bottom:15px; border-radius:16px; background:#eef1ff; }
.booking-symbol svg { width:35px; height:35px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.booking-card h4 { margin:0 0 24px; color:var(--ink); font-size:clamp(19px,3.8cqw,28px); font-weight:500; letter-spacing:-.04em; line-height:1.2; }
.booking-days { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
.booking-days button { display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px; min-height:64px; border:1px solid #e7eaf2; border-radius:12px; background:#fff; color:var(--ink); transition:background .25s,color .25s,border-color .25s; }
.booking-days button > span { color:var(--muted); font-size:11px; }
.booking-days strong { font-size:23px; font-weight:500; line-height:1; letter-spacing:-.04em; }
.booking-days button[aria-pressed="true"] { border-color:var(--blue); background:var(--blue); color:#fff; }
.booking-days button[aria-pressed="true"] > span { color:#dce2ff; }
.booking-times { display:flex; gap:8px; width:100%; margin-top:12px; }
.booking-times button { flex:1; min-height:44px; padding:8px; font-size:12px; color:var(--muted); border:1px solid #e7eaf2; background:#fff; border-radius:10px; transition:background .25s,color .25s,border-color .25s; }
.booking-times button[aria-pressed="true"] { color:var(--blue); background:#f0f3ff; border-color:#acb8f5; }
.booking-card .booking-confirm { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:46px; margin-top:20px; padding:12px 16px; border:0; border-radius:100px; background:var(--ink); color:#fff; font-size:12px; }
.booking-confirm svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
.booking-card button { touch-action:manipulation; cursor:pointer; }
.booking-card button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.booking-result { justify-content:center; min-height:320px; }
.booking-result h4 { margin-bottom:12px; }
.booking-result p { margin:0; font-size:13px; color:var(--muted); }
.booking-tick { display:grid; place-items:center; width:82px; height:82px; margin-bottom:28px; background:var(--blue); color:#fff; border-radius:50%; }
.booking-tick svg { width:48px; height:48px; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.booking-result button { min-height:44px; margin-top:22px; padding:8px 14px; border:0; border-radius:6px; background:transparent; color:var(--blue); font-size:12px; }
.booking-orbit { display:grid; place-items:center; position:absolute; width:62px; height:62px; border:1px solid #c8d2f2; border-radius:18px; color:var(--blue); background:#f2f5ff; }
.booking-orbit svg { width:32px; height:32px; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.booking-orbit--one { top:22%; left:5%; transform:rotate(-12deg); }
.booking-orbit--two { bottom:21%; right:4%; transform:rotate(12deg); }
[data-booking-state="confirmed"] .booking-tick { animation:booking-confirm-in .65s cubic-bezier(.22,1,.36,1) both; }
[data-booking-state="confirmed"] .booking-tick path { animation:booking-tick-in .6s .15s ease both; }
[data-booking-state="confirmed"] .booking-orbit--one { transform:translateY(-8px) rotate(-4deg); }
[data-booking-state="confirmed"] .booking-orbit--two { transform:translateY(8px) rotate(4deg); }
.booking-orbit { transition:transform .65s cubic-bezier(.22,1,.36,1); }
.booking-choice[hidden],.booking-result[hidden],.booking-confirm[hidden] { display:none; }
/* Fixed square hit areas keep the swatches round, even when the mobile controls tighten. */
.demo-controls--palette button { flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; padding:8px; }
.demo-controls--palette i { display:block; flex:0 0 26px; width:26px; height:26px; min-width:26px; }
@keyframes booking-confirm-in { from { transform:scale(.65) rotate(-12deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes booking-tick-in { from { stroke-dasharray:1; stroke-dashoffset:1; } to { stroke-dasharray:1; stroke-dashoffset:0; } }
@media (hover:hover) and (pointer:fine) {
  .booking-confirm:hover svg { transform:translateX(3px); }
  .booking-result button:hover { background:#eef1ff; }
  .booking-days button:not([aria-pressed="true"]):hover,.booking-times button:not([aria-pressed="true"]):hover { border-color:#a5b0df; }
}
@media (min-width:761px) and (max-width:1000px) {
  .service-scene--booking { aspect-ratio:1.35; }
}
@media (max-width:760px) {
  .booking-card { width:73%; padding:21px 20px; border-radius:18px; }
  .booking-symbol { width:44px; height:44px; margin-bottom:13px; border-radius:13px; }
  .booking-symbol svg { width:30px; height:30px; }
  .booking-card h4 { font-size:clamp(18px,5.4cqw,23px); margin-bottom:20px; }
  .booking-days button { min-height:62px; padding:10px 4px; }
  .booking-days strong { font-size:22px; }
  .booking-times button { font-size:11px; }
  .booking-card .booking-confirm { font-size:11px; padding:12px 14px; margin-top:16px; }
  .booking-orbit { width:43px; height:43px; border-radius:13px; }
  .booking-orbit svg { width:25px; height:25px; }
  .booking-orbit--one { left:2%; top:20%; }
  .booking-orbit--two { right:1%; bottom:19%; }
  .booking-result { min-height:296px; }
}
@media (max-width:370px) {
  .service-scene--booking { aspect-ratio:.76; }
  .booking-card { width:78%; padding:20px 16px; }
  .booking-orbit--one { left:-3%; }
  .booking-orbit--two { right:-3%; }
}
@media (prefers-reduced-motion:reduce) {
  .booking-card *,.booking-orbit { transition:none!important; animation:none!important; }
}