/* The passenger's order form */
.ord-grid{display:grid;grid-template-columns:1fr 54rem;gap:4rem;align-items:start;padding-top:4rem}
.ord-side .kicker{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.3rem;border-radius:2rem;background:var(--green-soft);color:var(--taxi);font-weight:700;font-size:1.3rem}
.ord-side .kicker .mi{font-size:1.8rem}
.ord-side h1{margin-top:1.6rem;font-weight:900;font-size:4.6rem;line-height:5.2rem;letter-spacing:-.16rem}
.ord-side p{margin-top:1.6rem;max-width:48rem;font-size:1.8rem;line-height:2.7rem;color:var(--text-mid)}
.ord-side ul{margin-top:2.6rem;display:flex;flex-direction:column;gap:1.4rem}
.ord-side li{display:flex;align-items:center;gap:1.2rem;font-weight:500;font-size:1.6rem;color:var(--text-hi)}
.ord-side li .mi{flex:none;width:4.2rem;height:4.2rem;border-radius:1.4rem;display:flex;align-items:center;justify-content:center;font-size:2.2rem;background:var(--green-soft);color:var(--taxi)}
.alt-call{display:inline-flex;align-items:center;gap:1.2rem;margin-top:3rem;padding:1.4rem 2.2rem 1.4rem 1.6rem;border-radius:2.2rem;background:#fff;border:1px solid var(--outline);box-shadow:0 .3rem 1rem rgba(127,156,136,.25)}
.alt-call .mi{font-size:3.2rem;color:var(--taxi)}
.alt-call small{display:block;font-size:1.2rem;color:var(--text-lo)}
.alt-call b{display:block;font-weight:800;font-size:2.2rem;line-height:2.6rem}
@media (max-width:1000px){.ord-grid{grid-template-columns:1fr;gap:2.4rem;padding-top:2.4rem}.ord-side h1{font-size:3.4rem;line-height:3.9rem}.ord-side ul,.alt-call{display:none}.ord-side p{font-size:1.6rem;line-height:2.4rem}}

.ord-card{padding:3rem;position:relative}
.ord-card h2{font-weight:800;font-size:2.4rem;margin-bottom:2rem}
#ordForm>.field,#ordForm>.route,#ordForm>.cargo-toggle,#ordForm>.here{margin-bottom:1.6rem}
#ordForm .field{display:block}
.route{position:relative;display:grid;grid-template-columns:1fr;gap:1.4rem}
.swap{position:absolute;right:1.6rem;top:50%;transform:translateY(-8%);z-index:2;width:4.6rem;height:4.6rem;border-radius:50%;background:#fff;border:1px solid var(--outline);box-shadow:0 .6rem 1.4rem -.4rem rgba(40,90,60,.4);display:flex;align-items:center;justify-content:center;color:var(--taxi);transition:transform .35s var(--spring)}
.swap.turn{transform:translateY(-8%) rotate(180deg)}
.swap .mi{font-size:2.4rem}
@media (min-width:640px){.route{grid-template-columns:1fr 1fr;gap:1.4rem}.swap{right:auto;left:50%;top:auto;bottom:.6rem;transform:translateX(-50%)}.swap.turn{transform:translateX(-50%) rotate(180deg)}.swap .mi{transform:rotate(90deg)}}
.input-surface select{cursor:pointer;color:var(--text-hi)}
.input-surface select.is-empty{color:var(--text-lo)}
.pax{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pax button{height:5.4rem;border-radius:1.6rem;font-weight:800;font-size:2rem;background:var(--surface-hi);border:1px solid var(--outline);color:var(--text-hi);transition:transform .15s var(--spring),background .2s,color .2s}
.pax button:active{transform:scale(.94)}
.pax button.on{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 .8rem 1.6rem -.6rem rgba(22,163,74,.6)}
.cargo-toggle{display:flex;align-items:center;gap:.9rem;width:100%;height:5rem;padding:0 1.6rem;border-radius:1.6rem;background:var(--surface-hi);border:1px solid var(--outline);font-weight:600;font-size:1.5rem;color:var(--text-mid);transition:background .2s}
.cargo-toggle .mi{font-size:2.2rem;color:var(--text-lo)}
.cargo-toggle .chev{margin-left:auto;transition:transform .25s var(--ease)}
.cargo-toggle[aria-expanded="true"]{background:var(--violet-soft);color:var(--violet);border-color:rgba(124,58,237,.3)}
.cargo-toggle[aria-expanded="true"] .mi{color:var(--violet)}
.cargo-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.cargo{margin-bottom:1.6rem}
.here{display:flex;align-items:center;gap:.9rem;width:100%;min-height:5rem;padding:.8rem 1.6rem;border-radius:1.6rem;border:1.5px dashed rgba(22,38,29,.25);font-weight:600;font-size:1.4rem;color:var(--text-mid);text-align:left;transition:background .2s,border-color .2s}
.here .mi{font-size:2.2rem;color:var(--text-lo)}
.here.ok{border:1.5px solid rgba(21,128,61,.6);background:var(--green-soft);color:var(--taxi)}
.here.ok .mi{color:var(--taxi)}
.here.busy .mi{animation:sg-spin 1s linear infinite}
#ordForm .error-banner{margin-bottom:1.4rem}
.legal{margin-top:1.4rem;font-size:1.2rem;line-height:1.7rem;color:var(--text-lo);text-align:center}

.done{text-align:center;padding:2rem 0}
.done .tick{width:10rem;height:10rem;margin:0 auto;color:var(--mint)}
.done .tick circle{stroke-dasharray:152;stroke-dashoffset:152;animation:dash .6s .1s ease forwards}
.done .tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:dash .4s .55s ease forwards}
@keyframes dash{to{stroke-dashoffset:0}}
.done h2{margin-top:1.4rem;margin-bottom:0}
.done p{margin-top:.8rem;font-size:1.6rem;color:var(--text-mid)}
.done .sum{margin:2.2rem auto;max-width:36rem;padding:1.6rem;border-radius:2rem;background:var(--surface-hi);text-align:left;font-size:1.5rem;line-height:2.2rem}
.done .sum div{display:flex;gap:.8rem;align-items:flex-start;padding:.3rem 0}
.done .sum .mi{font-size:2rem;color:var(--taxi)}
@media (max-width:520px){.ord-card{padding:2.2rem 1.8rem}}