/* ============================================================
   Hero appointment-flow animation — replaces the photo frame.
   A single device frame whose screen advances through the real
   booking sequence, with a step rail underneath.
   ============================================================ */
.as-flowvis{position:relative;width:100%;max-width:none}
.as-dev{position:relative;width:100%;border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-surface);box-shadow:0 40px 80px -26px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.1)}
.as-dev__bar{display:flex;align-items:center;gap:9px;background:var(--color-midnight-800);padding:11px 15px}
.as-dev__dots{display:flex;gap:5px}
.as-dev__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.24)}
.as-dev__ttl{font-family:var(--font-display);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.as-dev__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:10px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.as-dev__live i{width:7px;height:7px;border-radius:50%;background:var(--color-success-500);animation:asPulse var(--dur-pulse) var(--ease-in-out) infinite}
/* screen stage — fixed height, screens cross-fade inside it */
.as-scr{position:relative;height:364px;background:var(--bg-canvas)}
.as-s{position:absolute;inset:0;padding:var(--space-6);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);pointer-events:none}
.as-s.on{opacity:1;transform:none}
.as-s__h{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-5)}
.as-s[data-s="2"] .as-s__h{margin-bottom:var(--space-4)}
.as-s[data-s="2"]{padding-top:var(--space-5);padding-bottom:var(--space-5)}
.as-s__n{width:22px;height:22px;border-radius:50%;background:var(--color-crimson-500);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:11px;font-weight:var(--fw-bold);flex-shrink:0}
.as-s__t{font-family:var(--font-display);font-size:15px;font-weight:var(--fw-bold);color:var(--fg-primary);margin:0}
.as-lbl{display:block;font-family:var(--font-display);font-size:10px;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:7px}
/* rows (doctors) */
.as-rows{display:grid;gap:7px}
.as-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:9px 11px;background:var(--bg-surface);transition:border-color .4s var(--ease-out),background .4s var(--ease-out)}
.as-row.sel{border-color:var(--color-crimson-500);background:var(--color-crimson-50)}
.as-av{width:28px;height:28px;border-radius:50%;background:var(--color-midnight-800);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:11px;font-weight:var(--fw-bold);flex-shrink:0}
.as-row b{display:block;font-family:var(--font-display);font-size:13px;font-weight:var(--fw-bold);color:var(--fg-primary);line-height:1.2;white-space:nowrap}
.as-row em{font-style:normal;font-size:11px;color:var(--fg-tertiary)}
.as-tag{margin-left:auto;font-family:var(--font-display);font-size:10px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-xs);white-space:nowrap}
.as-tag--ok{background:var(--color-success-50);color:var(--color-success-700)}
.as-tag--full{background:var(--color-warning-50);color:var(--color-warning-700)}
/* slots */
.as-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.as-slot{border:1px solid var(--border-subtle);border-radius:var(--radius-xs);padding:9px 4px;text-align:center;font-family:var(--font-display);font-size:12px;font-weight:var(--fw-semibold);color:var(--fg-secondary);background:var(--bg-surface);font-variant-numeric:tabular-nums;transition:all .4s var(--ease-out)}
.as-slot.gone{color:var(--fg-disabled);text-decoration:line-through;background:var(--bg-canvas)}
.as-slot.sel{background:var(--color-crimson-500);border-color:var(--color-crimson-500);color:#fff;transform:scale(1.04)}
.as-hint{display:flex;align-items:center;gap:8px;margin-top:10px;background:var(--color-info-50);border:1px solid var(--color-info-100);border-radius:var(--radius-sm);padding:8px 11px;font-size:12px;color:var(--color-info-700);line-height:1.45}
.as-hint svg{width:14px;height:14px;flex-shrink:0}
.as-hint b{font-weight:var(--fw-semibold)}
/* confirm screen */
.as-ok{text-align:center;padding-top:var(--space-6)}
.as-ok__ring{width:56px;height:56px;margin:0 auto var(--space-5);border-radius:50%;background:var(--color-success-50);border:2px solid var(--color-success-500);display:flex;align-items:center;justify-content:center;color:var(--color-success-700)}
.as-ok__ring svg{width:26px;height:26px}
.as-s.on .as-ok__ring{animation:asPop .5s var(--ease-out) both}
@keyframes asPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.as-ok__t{font-family:var(--font-display);font-size:17px;font-weight:var(--fw-bold);color:var(--fg-primary);margin:0 0 6px}
.as-ok__d{font-size:13px;color:var(--fg-secondary);line-height:1.5;margin:0 0 var(--space-5)}
.as-ok__ref{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:12px;font-weight:var(--fw-bold);color:var(--fg-secondary);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:6px 13px;font-variant-numeric:tabular-nums}
/* whatsapp screen */
/* queue screen */
/* step rail */
.as-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:var(--space-5)}
.as-rail__i{text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.as-rail__bar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden;margin-bottom:7px}
.as-rail__bar i{display:block;height:100%;width:0;background:var(--color-crimson-500);border-radius:2px}
.as-rail__i.on .as-rail__bar i{width:100%;transition:width 3.4s linear}
.as-rail__i:nth-child(3).on .as-rail__bar i{transition-duration:5.2s}
.as-rail__i:nth-child(5).on .as-rail__bar i{transition-duration:4.6s}
.as-rail__i.done .as-rail__bar i{width:100%}
.as-rail__l{display:block;font-family:var(--font-display);font-size:11px;font-weight:var(--fw-semibold);color:rgba(255,255,255,.5);line-height:1.3;transition:color .4s var(--ease-out)}
.as-rail__i.on .as-rail__l{color:#fff}
.as-rail__i.done .as-rail__l{color:rgba(255,255,255,.72)}
.as-rail__i:hover .as-rail__l{color:#fff}
@media (prefers-reduced-motion:reduce){
  .as-s{transition:none}
  .as-rail__i.on .as-rail__bar i{transition:none}
  .as-s.on .as-ok__ring{animation:none;transition:none}
}
@media(max-width:1180px){.as-scr{height:360px}}
@media(max-width:640px){
  .as-scr{height:372px}
  .as-rail{grid-template-columns:repeat(5,1fr);gap:5px}
  .as-rail__l{font-size:9.5px}
  .as-slots{grid-template-columns:repeat(4,1fr)}
}

/* patient-details form — values type in field by field */
.as-form{display:grid;grid-template-columns:1fr 1fr;gap:6px 9px}
.as-f{grid-column:1/-1;display:block}
.as-f--half{grid-column:auto}
.as-f__l{display:block;font-family:var(--font-display);font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:3px}
.as-f__i{display:flex;align-items:center;min-height:28px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:4px 9px;font-size:12px;color:var(--fg-primary);transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.as-f__i--tall{min-height:34px;align-items:flex-start}
/* language selection — segmented pills, replacing the free-text field */
.as-langs{display:flex;gap:5px}
.as-lang{flex:1;text-align:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:5px 4px;font-family:var(--font-display);font-size:11px;font-weight:var(--fw-semibold);color:var(--fg-tertiary);white-space:nowrap;transition:background var(--dur-medium) var(--ease-out),border-color var(--dur-medium) var(--ease-out),color var(--dur-medium) var(--ease-out)}
.as-lang.sel{background:var(--color-crimson-500);border-color:var(--color-crimson-500);color:#fff}
@media (prefers-reduced-motion:reduce){.as-lang{transition:none}}
.as-f__i.act{border-color:var(--color-crimson-500);box-shadow:0 0 0 3px rgba(220,16,46,.12)}
.as-f__i b{flex:1;min-width:0;font-weight:var(--fw-regular);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:clip}
.as-f__i--tall b{white-space:normal}
.as-f__i i{display:none;flex-shrink:0;width:1px;height:14px;margin-left:1px;background:var(--color-crimson-500);animation:asCaret 1s steps(1,end) infinite}
.as-f__i.act i{display:block}
@keyframes asCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.as-go{margin-top:9px;text-align:center;background:var(--color-crimson-500);color:#fff;border-radius:var(--radius-sm);padding:8px;font-family:var(--font-display);font-size:12.5px;font-weight:var(--fw-bold);box-shadow:var(--shadow-crimson);transition:transform .2s var(--ease-out)}
.as-s.on .as-go{animation:asGo .5s var(--ease-out) 3s both}
@keyframes asGo{0%{transform:scale(1)}45%{transform:scale(.97)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.as-f__i i{animation:none}.as-s.on .as-go{animation:none}}
.as-rail{grid-template-columns:repeat(5,1fr)}

/* messages & reminders screen — WhatsApp thread, bubbles arriving in sequence */
.as-wa{background:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px;height:262px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.as-wa__b{align-self:flex-end;max-width:90%;background:var(--color-success-50);border:1px solid var(--color-success-100);color:var(--fg-primary);border-radius:12px 12px 3px 12px;padding:7px 10px;font-size:11.5px;line-height:1.42;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.as-s.on .as-wa__b{opacity:1;transform:none}
.as-s.on .as-wa__b:nth-child(2){transition-delay:.7s}
.as-s.on .as-wa__b:nth-child(3){transition-delay:1.4s}
.as-wa__b b{display:block;font-family:var(--font-display);font-size:10px;font-weight:var(--fw-bold);letter-spacing:.03em;color:var(--color-success-700);margin-bottom:2px}
.as-wa__b em{font-style:normal;display:block;margin-top:3px;font-size:9.5px;color:var(--fg-secondary);text-align:right}
@media (prefers-reduced-motion:reduce){.as-s.on .as-wa__b{transition:none;transition-delay:0s}}
@media(max-width:1180px){.as-wa{height:254px}}
@media(max-width:640px){.as-wa{height:264px}.as-wa__b{font-size:11px;max-width:94%}}