/* Pop-up (decided 2026-09-24).
   Phones: a floating bottom card (Apple Pay-style): inset 8px, 32px corners, height follows content,
   stops 72px from the top and scrolls inside. Wider screens: the same pop-up as a centred 560px card.
   A host decides the shape: .pop-host--sheet (always bottom card), .pop-host--center (always centred),
   .pop-host--page (fixed over the page; picks the shape by viewport width). */
.pop-host{position:relative;isolation:isolate}
.pop-host--page{position:fixed;inset:0;z-index:100;pointer-events:none}
.pop-host--page[data-pop=open]{pointer-events:auto}
.pop-scrim{position:absolute;inset:0;z-index:20;background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity 220ms var(--ease-out)}
[data-pop=open]>.pop-scrim{opacity:1}
.pop{position:absolute;z-index:21;display:flex;flex-direction:column;background:var(--surface-panel);box-shadow:var(--shadow-overlay);outline:none;text-align:left}

/* Shape: floating bottom card */
.pop-host--sheet>.pop{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));max-height:calc(100% - 72px);border-radius:32px;transform:translateY(calc(100% + 24px));transition:transform var(--spring-sheet-ms) var(--spring-sheet)}   /* the sheet's spring, 2026-10-27 */
.pop-host--sheet[data-pop=open]>.pop{transform:none}
/* Shape: centred card */
/* Scale-in on the sheet's spring, no overshoot (Apple fixes 13, 2026-10-27; it was cubic-bezier(.2,.9,.3,1.1)) */
.pop-host--center>.pop{left:50%;top:50%;width:min(560px,calc(100% - 32px));max-height:calc(100% - 96px);border-radius:28px;opacity:0;transform:translate(-50%,-48%) scale(.96);transition:opacity 180ms var(--ease-out),transform var(--spring-sheet-ms) var(--spring-sheet)}
.pop-host--center[data-pop=open]>.pop{opacity:1;transform:translate(-50%,-50%)}
/* Page host: bottom card on phones, centred card from 641px. */
@media(max-width:640px){
  .pop-host--page>.pop{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));max-height:calc(100% - 72px);border-radius:32px;transform:translateY(calc(100% + 24px));transition:transform var(--spring-sheet-ms) var(--spring-sheet)}
  .pop-host--page[data-pop=open]>.pop{transform:none}
}
@media(min-width:641px){
  .pop-host--page>.pop{left:50%;top:50%;width:min(560px,calc(100% - 32px));max-height:calc(100% - 96px);border-radius:28px;opacity:0;transform:translate(-50%,-48%) scale(.96);transition:opacity 180ms var(--ease-out),transform var(--spring-sheet-ms) var(--spring-sheet)}
  .pop-host--page[data-pop=open]>.pop{opacity:1;transform:translate(-50%,-50%)}
}
.pop[data-dragging=true]{transition:none;-webkit-user-select:none;user-select:none}

.pop__head{position:relative;z-index:1;flex:none;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;padding:10px 10px 6px;touch-action:none;border-top-left-radius:inherit;border-top-right-radius:inherit;background:var(--surface-panel);transition:box-shadow 150ms var(--ease-out)}
/* Once the content scrolls, the title bar lifts with a soft shadow. */
.pop[data-scrolled=true] .pop__head{box-shadow:0 1px 0 var(--border-divider),0 6px 14px -8px rgb(0 0 0 / 18%)}
.pop[data-shape=sheet] .pop__head{cursor:grab}
.pop__titles{min-width:0;text-align:center}
.pop__head h3{margin:0;text-align:center;font-size:1.1875rem;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.pop__sub{margin:2px 0 0;font-size:.8125rem;line-height:1.35;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A pop-up that asks a question (align: 'start', the booking's extras since 2026-10-11): the title on the left at the step
   heading's size, the x beside its first line, the line under it at 15pt; the content starts 20pt below. */
.pop[data-align=start] .pop__head{grid-template-columns:minmax(0,1fr) 44px;align-items:start;column-gap:8px;padding:18px 12px 0 24px}
.pop[data-align=start] .pop__head>span:first-child{display:none}
.pop[data-align=start] .pop__titles{padding-top:8px;text-align:left}
.pop[data-align=start] .pop__head h3{text-align:left;font-size:1.3125rem;line-height:1.3;letter-spacing:-.015em}
.pop[data-align=start] .pop__sub{margin-top:4px;font-size:.9375rem;line-height:1.4;white-space:normal}
.pop__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px 24px 8px}
.pop[data-align=start] .pop__body{padding-top:20px}
.pop[data-align=start] .pop__body>.extra-h:first-child{margin-top:0}
.pop[data-shape=center] .pop__body{padding:8px 36px 12px}
.pop[data-shape=center][data-align=start] .pop__head{padding:24px 16px 0 36px}   /* lines up with the centred card's 36pt sides */
.pop[data-shape=center][data-align=start] .pop__body{padding-top:20px}
.pop__foot{flex:none;padding:12px 16px 16px;transition:box-shadow 150ms var(--ease-out)}
.pop[data-shape=center] .pop__foot{padding:16px 36px 28px}
.pop[data-scrolled=true] .pop__foot{box-shadow:0 -1px 0 var(--border-divider)}
.pop__foot .button{width:100%;background:var(--action-primary);color:var(--action-foreground)}   /* every solid button is Panda blue, Skip, Got it and Done included (the user, 2026-10-28: "keep all blue") */
@media (hover:hover){.pop__foot .button:hover:not(:disabled){background:var(--action-hover)}}   /* hover and press darker in its own colour, never another */
.pop__foot .button:active:not(:disabled){background:var(--action-press,var(--action-hover))}
/* The blue forward action (e.g. Continue with a time) and a disabled state until a choice is made. */
.pop__foot .button:disabled,.pop__foot .button:disabled:hover{background:var(--surface-subtle);color:var(--text-secondary);border-color:transparent;cursor:not-allowed}

/* Content pieces */
.pop__badge{width:60px;height:60px;margin:6px auto 12px;border-radius:50%;background:var(--surface-badge);display:flex;align-items:center;justify-content:center;color:var(--brand-blue)}
.pop__badge svg{width:34px;height:34px}
.pop__lede{margin:0 auto;max-width:34ch;text-align:center;font-size:.9375rem;line-height:1.5;color:var(--text-secondary)}
.pop__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.pop[data-shape=center] .pop__list{grid-template-columns:1fr 1fr;gap:18px 24px}
.pop__list li{display:flex;gap:12px;font-size:.875rem;line-height:1.45}
.pop__list li>svg{flex:none;width:20px;height:20px;color:var(--brand-blue);margin-top:1px}
.pop__list strong{display:block;font-size:.9375rem}
.pop__list span{color:var(--text-secondary)}
.pop__note{margin:16px 0 0;text-align:center;font-size:.75rem;color:var(--text-secondary)}
.pop__score{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 10px}
.pop__score b{font-size:2rem;letter-spacing:-.02em;font-variant-numeric:proportional-nums}
.pop__score span{font-size:.875rem;color:var(--text-secondary)}
.pop[data-shape=center] .pop__reviews{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.pop__review{padding:14px 0;border-top:1px solid var(--border-divider)}
.pop__review .stars{display:flex;gap:2px}
.pop__review .stars svg{width:12px;height:12px}
.pop__review p{margin:8px 0;font-size:.875rem;line-height:1.5}
.pop__review footer{font-size:.8125rem}
.pop__review footer span{color:var(--text-secondary)}

@media(prefers-reduced-motion:reduce){
  .pop,.pop-scrim{transition:opacity 1ms!important}
  .pop-host--sheet>.pop,.pop-host--page>.pop{transform:none!important;opacity:0}
  [data-pop=open]>.pop{opacity:1}
  .pop-host--center>.pop,.pop-host--center[data-pop=open]>.pop{transform:translate(-50%,-50%)!important}
}
@media(min-width:641px) and (prefers-reduced-motion:reduce){.pop-host--page>.pop{transform:translate(-50%,-50%)!important}}
@media(prefers-reduced-transparency:reduce){.pop-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(23 26 32 / 50%)}}
@media(forced-colors:active){.pop{border:1px solid CanvasText}}
/* Busy action (e.g. "Holding your time…"): the button keeps its colour and shows a spinner; the pop-up's content ignores taps. */
/* Also the booking bar's "Holding your time…" (booking.css .bk-bar) */
:is(.pop__foot,.bk-bar) .button[aria-busy=true]{gap:10px;cursor:progress}
:is(.pop__foot,.bk-bar) .button[aria-busy=true]::before{content:"";flex:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:pop-spin .8s linear infinite}
@keyframes pop-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){:is(.pop__foot,.bk-bar) .button[aria-busy=true]::before{animation-duration:2.4s}}