/* Extra styles for the live customer app (on top of the app shell styles). */
[hidden]{display:none!important}
#uo-toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);max-width:min(380px,calc(100% - 32px));background:#f4f7f5;color:#07130f;border-radius:16px;padding:12px 18px;font-weight:600;font-size:14px;box-shadow:0 12px 40px #000a;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;text-align:center}
#uo-toast.on{opacity:1;transform:translate(-50%,0)}
#uo-toast.bad{background:#ffd6d0;color:#5a1208}
button.btn:disabled{cursor:not-allowed}
.otp input.od{font-weight:700}
.card a{color:inherit}
.stp b{min-width:22px;text-align:center}
.cbar{text-decoration:none}
[data-th=light] #uo-toast{background:#0b1f17;color:#fff}
@media(prefers-reduced-motion:reduce){#uo-toast{transition:none}}

/* App feel: no rubber-band page bounce, no accidental text selection on controls, no iOS zoom on inputs. */
html,body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
button,.btn,.chip,.card.row,nav,.tile,.sw,.q{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,select,textarea{font-size:16px!important}
.pwa body{padding-top:env(safe-area-inset-top)}
#app>.v{animation:uo-in .18s ease-out}
@keyframes uo-in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.btn:active,.card.row:active,.chip:active{transform:scale(.98)}
/* Install sheet */
.uo-sheet{position:fixed;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;display:flex;align-items:center;gap:10px;background:#10241c;color:#fff;border:1px solid #ffffff1a;border-radius:20px;padding:12px;box-shadow:0 18px 50px #000b;z-index:45;animation:uo-in .25s ease-out}
.uo-sheet img{width:44px;height:44px;border-radius:12px;background:#fff;flex:none}
.uo-sheet .x{background:none;border:0;color:#9fb3aa;font-size:18px;padding:6px;cursor:pointer}
[data-th=light] .uo-sheet{background:#fff;color:#07130f;border-color:#0001}
/* Maps */
.map.uom{background:#0f211b}
@media(prefers-reduced-motion:reduce){#app>.v,.uo-sheet{animation:none}.btn:active,.card.row:active{transform:none}}
/* Place search results */
.acl{max-height:300px;overflow:auto;margin-top:4px}
.acl .sa{padding:8px 4px;gap:10px;align-items:center}
.acl .sa b{font-size:15px}
/* Password checklist */
.pwc{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:13px;color:var(--mu,#9fb3aa)}
.pwc .pwok{color:#2ecc71}
/* Profile picture */
.avup{position:relative;cursor:pointer;flex:none}
.avup .avcam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:#ff6b2c;display:grid;place-items:center;border:2px solid var(--bg,#07130f)}
.avup .avcam svg{width:15px;height:15px;color:#fff;stroke:#fff}
/* Uorder Wallet card */
.wcard{position:relative;aspect-ratio:1.586;max-width:420px;width:100%;margin:8px auto 0;border-radius:22px;padding:20px 22px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,#ff8a4c 0%,#ff6b2c 28%,#c2410c 55%,#0f2a20 100%);box-shadow:0 22px 50px -18px #ff6b2c88,inset 0 1px 0 #ffffff44;
  display:grid;grid-template-rows:auto 1fr auto auto;isolation:isolate;font-variant-numeric:tabular-nums}
.wcard::before{content:"";position:absolute;inset:-40% -10% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffffff33,transparent 65%);z-index:-1}
.wcard::after{content:"";position:absolute;left:-30%;bottom:-55%;width:90%;aspect-ratio:1;border-radius:50%;border:28px solid #ffffff12;z-index:-1}
.wc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wc-brand{font-weight:800;font-size:20px;letter-spacing:-.02em}
.wc-name{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.wc-chip{width:42px;height:30px;border-radius:7px;margin-top:14px;background:linear-gradient(135deg,#ffe7a3,#d4a43a 60%,#f7d774);box-shadow:inset 0 0 0 1px #00000022}
.wc-bal{align-self:end;font-size:30px;font-weight:800;line-height:1.1}.wc-bal small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.wc-no{font:600 clamp(16px,4.6vw,20px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;margin-top:10px;text-shadow:0 1px 2px #0005}
.wc-bot{display:flex;justify-content:space-between;gap:8px;font-size:11px;letter-spacing:.12em;opacity:.9;margin-top:6px;white-space:nowrap;overflow:hidden}
/* Welcome */
.wel{position:relative;min-height:100vh;display:grid;place-items:center;padding:30px 18px;background:radial-gradient(90% 60% at 50% 0%,#ff6b2c33,transparent 70%)}
.wel canvas{position:fixed;inset:0;pointer-events:none;z-index:5}
.wel-in{max-width:440px;width:100%;text-align:center}
.wel-badge{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:46px;background:#ff6b2c22;box-shadow:0 0 0 10px #ff6b2c12;animation:welPop .7s cubic-bezier(.2,1.6,.4,1) both}
.wel-h{animation:welUp .6s .25s both}.wel-p{animation:welUp .6s .4s both}
.wel-card{animation:welCard 1s .55s cubic-bezier(.2,1.2,.3,1) both}
.wel-tips{text-align:left;margin-top:18px}.wel-tips .card{animation:welUp .5s both}
.wel-go{animation:welUp .5s 1.6s both}
@keyframes welPop{from{transform:scale(.2);opacity:0}}
@keyframes welUp{from{transform:translateY(18px);opacity:0}}
@keyframes welCard{from{transform:perspective(800px) rotateX(55deg) translateY(60px) scale(.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.wel-badge,.wel-h,.wel-p,.wel-card,.wel-tips .card,.wel-go{animation:none}}
/* Install banner at the top */
.uo-top{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  background:linear-gradient(135deg,#ff6b2c,#c2410c);color:#fff;box-shadow:0 10px 30px #0006;transform:translateY(-110%);transition:transform .3s cubic-bezier(.2,1,.3,1)}
.uo-top.on{transform:none}
.uo-top img{width:42px;height:42px;border-radius:11px;background:#fff;flex:none}
.uo-top .sm{opacity:.95;line-height:1.3}
.uo-top .btn{width:auto;margin:0;padding:9px 16px;background:#fff;color:#c2410c;font-weight:800}
.uo-top .x{background:none;border:0;color:#fff;font-size:18px;padding:6px;cursor:pointer;opacity:.85}
@media(prefers-reduced-motion:reduce){.uo-top{transition:none}}
/* 1.0: blue tick, store replies */
.vt{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:11px;font-weight:800;line-height:1;vertical-align:2px;box-shadow:0 0 0 2px #1d9bf033}
.rply{margin-top:8px;padding:8px 10px;border-left:3px solid var(--or);background:#ffffff0a;border-radius:8px}
[data-del][hidden],#ctab[hidden],#cful[hidden],#coos[hidden]{display:none!important}
/* Sign-in and sign-up: content rises in, a scooter rides between store and home, errors shake, success ticks */
.au>*{animation:auIn .55s cubic-bezier(.2,.8,.2,1) both}
.au>*:nth-child(2){animation-delay:.05s}.au>*:nth-child(3){animation-delay:.1s}.au>*:nth-child(4){animation-delay:.15s}.au>*:nth-child(5){animation-delay:.2s}.au>*:nth-child(6){animation-delay:.25s}.au>*:nth-child(7){animation-delay:.3s}.au>*:nth-child(8){animation-delay:.35s}.au>*:nth-child(9){animation-delay:.4s}.au>*:nth-child(10){animation-delay:.45s}.au>*:nth-child(n+11){animation-delay:.5s}
@keyframes auIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.au-hero{position:relative;height:74px;margin:4px 0 6px}
.au-road{position:absolute;left:34px;right:34px;top:38px;height:3px;background:repeating-linear-gradient(90deg,var(--or) 0 10px,transparent 10px 20px);opacity:.55;border-radius:2px;animation:auRoad 1s linear infinite}
.au-road i{position:absolute;inset:0}
.au-bike{position:absolute;top:-30px;left:0;font-size:30px;animation:auBike 3.2s cubic-bezier(.45,.05,.55,.95) infinite;filter:drop-shadow(0 4px 6px #0006)}
.au-pins{display:flex;justify-content:space-between;font-size:28px;position:absolute;inset:14px 0 auto 0}
.au-pins span{animation:auPop .6s cubic-bezier(.3,1.6,.5,1) both}.au-pins span+span{animation-delay:.25s}
@keyframes auBike{0%{left:0;transform:scaleX(1)}45%{left:calc(100% - 34px);transform:scaleX(1)}50%{left:calc(100% - 34px);transform:scaleX(-1)}95%{left:0;transform:scaleX(-1)}100%{left:0;transform:scaleX(1)}}
@keyframes auRoad{to{background-position:20px 0}}
@keyframes auPop{from{transform:scale(0)}to{transform:scale(1)}}
.au input{transition:border-color .2s,box-shadow .2s}
.au input:focus{border-color:var(--or);box-shadow:0 0 0 4px #ff6b2c2e;outline:none}
.au .btn{transition:transform .12s,background .25s}
.au .btn:active{transform:scale(.97)}
.au .btn.au-ok{background:#1fa463!important;display:grid;place-items:center;animation:auOk .5s cubic-bezier(.3,1.6,.5,1)}
.au .btn.au-ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:auTick .35s .08s ease-out forwards}
@keyframes auOk{0%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes auTick{to{stroke-dashoffset:0}}
.au.shake{animation:auShake .42s cubic-bezier(.36,.07,.19,.97)}
.au.shake>*{animation:none}
@keyframes auShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.au #err:not([hidden]){animation:auIn .3s ease-out}
.au .otp .od{transition:transform .15s,border-color .2s}.au .otp .od:focus{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.au>*,.au-bike,.au-road,.au-pins span,.au.shake,.au .btn.au-ok,.au .btn.au-ok path{animation:none!important}.au .btn.au-ok path{stroke-dashoffset:0}}
/* Help centre */
.hc .srch{margin:4px 0 12px}
.hc-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;margin:0 -2px}
.hc-cats::-webkit-scrollbar{display:none}
.hc-cats button{flex:none;border:1px solid rgba(127,127,127,.3);background:transparent;color:inherit;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.hc-cats button.on{background:var(--or);border-color:var(--or);color:#fff;font-weight:600}
.hc-h{margin:18px 0 8px;font-size:15px;opacity:.85}
.hc-q{border:1px solid rgba(127,127,127,.22);border-radius:16px;margin:0 0 8px;background:rgba(127,127,127,.06);overflow:hidden}
.hc-q summary{list-style:none;cursor:pointer;padding:14px 44px 14px 16px;font-weight:600;position:relative;line-height:1.35}
.hc-q summary::-webkit-details-marker{display:none}
.hc-q summary::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;opacity:.6;transition:transform .2s}
.hc-q[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.hc-a{padding:0 16px 14px;line-height:1.55;font-size:15px;animation:hcIn .22s ease}
.hc-a p{margin:0 0 10px}.hc-a ul{margin:0 0 10px;padding-left:20px}.hc-a a{color:var(--or)}
.hc-v{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(127,127,127,.2);padding-top:10px;margin-top:6px}
.hc-v button{border:1px solid rgba(127,127,127,.3);background:transparent;border-radius:12px;padding:4px 12px;font-size:18px;cursor:pointer}
.hc-none{padding:16px}
@keyframes hcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hc-a{animation:none}.hc-q summary::after{transition:none}}
/* Combos */
.cmbl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmbs{background:#2ecc7126!important;color:#7ff0ad!important;font-size:11px;padding:3px 8px}
[data-th=light] .cmbs{background:#e3f8ec!important;color:#137a3f!important}
.cmb{margin-top:12px}.cmb .cmbi{padding:7px 0;border-top:1px solid rgba(127,127,127,.15)}.cmb .cmbi:first-of-type{margin-top:8px}
.cmb .cmbi .th,.cmb .cmbi span>span{font-size:18px}
/* Bad weather / load-shedding notice */
.mode-card{border-color:#3b82f666;background:linear-gradient(135deg,#0f2233,#0f211b);margin-top:14px}
.mode-card.loadshedding{border-color:#ffb02066;background:linear-gradient(135deg,#2a2210,#0f211b)}
.mode-ic{font-size:30px;line-height:1}.mode-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mode-tags span{font-size:12px;padding:4px 9px;border-radius:999px;background:rgba(127,127,127,.18);white-space:nowrap}
[data-th=light] .mode-card{background:linear-gradient(135deg,#e6f0fb,#fff)}[data-th=light] .mode-card.loadshedding{background:linear-gradient(135deg,#fdf3dc,#fff)}
/* Store contact and social links */
.slinks{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.slinks .chip{text-decoration:none;color:inherit}
/* Tip after delivery */
.tipcard{border-color:#2ecc7155;background:linear-gradient(135deg,#10291f,#0f211b)}[data-th=light] .tipcard{background:linear-gradient(135deg,#e7f8ee,#fff)}
.tip-face{font-size:30px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(46,204,113,.15);flex:none}
.tip-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}.tip-chips .chip{border:0;font:inherit;cursor:pointer}
.tip-chips input{width:96px;margin:0;padding:9px 12px}
/* Laundry */
.ld-hero{border-radius:22px;padding:18px;background:linear-gradient(135deg,#132f3d,#0f211b);margin-bottom:6px}
[data-th=light] .ld-hero{background:linear-gradient(135deg,#e3f1f8,#fff)}
.ld-steps{display:flex;align-items:center;gap:6px;margin-bottom:10px}.ld-steps span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;text-align:center;flex:none;width:76px}
.ld-steps b{font-size:28px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08)}.ld-steps i{flex:1;height:2px;border-top:2px dashed rgba(127,127,127,.5);margin-top:-18px}
.ld-h{display:block;margin:20px 0 6px;font-size:17px}.ld-shop.on{border-color:var(--or)}.ld-svc .stp b{min-width:22px;text-align:center}
.ld-total{border-color:#ff6b2c55}
/* Voice note recorder inside cards */
.card .uvr,.card .uvn{margin-top:4px}.card .uvn{max-width:100%}

/* Order placed: confetti burst, pulsing badge, headline and cards rise in */
.op-cnf{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.opd .ok{animation:opGlow 1.6s .9s ease-out 1}
.opd .op-h{animation:welUp .6s .75s cubic-bezier(.3,1.4,.5,1) both}
.opd>.mu,.opd>.card,.opd>.btn,.opd>a.btn{animation:welUp .55s both}
.opd>.mu{animation-delay:.95s}.opd>.card{animation-delay:1.1s}.opd>a.btn{animation-delay:1.25s}.opd>a.btn+a.btn{animation-delay:1.35s}
@keyframes opGlow{0%{filter:drop-shadow(0 0 0 #ff6b2c00)}40%{filter:drop-shadow(0 0 28px #ff6b2caa)}100%{filter:drop-shadow(0 0 0 #ff6b2c00)}}
@media (prefers-reduced-motion:reduce){.opd .ok,.opd .op-h,.opd>*{animation:none!important}}

/* Sign-in buttons: Google and Facebook share one look. */
.soc{display:grid;gap:10px;justify-items:center;margin:18px 0 6px}
.gbtn{display:flex;justify-content:center;width:100%;min-height:44px;color-scheme:light;background:transparent}
/* Google draws its button in an iframe. When the page is dark the browser paints that iframe white; forcing the light scheme keeps it transparent so no white box shows. */
.gbtn iframe,.gbtn>div{color-scheme:light!important;background:transparent!important;border-radius:999px}
.fbbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:360px;height:44px;border:0;border-radius:999px;background:#1877f2;color:#fff;font:600 15px/1 inherit;font-family:inherit;cursor:pointer}
.fbbtn:active{filter:brightness(.92)}
.fbbtn[disabled]{opacity:.6}

/* Install page */
.insrow{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.insst{flex:0 0 200px;scroll-snap-align:start;margin:0;font-size:14px}
.insst img{display:block;width:200px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:18px;border:1px solid var(--line,#1c3a30);background:var(--card,#0f211b);margin-bottom:8px}
.chip.on{background:var(--or,#ff6b2c);border-color:var(--or,#ff6b2c);color:#07130f;font-weight:600}
button.chip{font:inherit;cursor:pointer;color:inherit}
button.chip.on{color:#07130f}