/* ============ Muna Pilot — styles ============ */
:root{
  --orange:#e8590c; --orange-dark:#c64a08; --orange-soft:#fff0e3;
  --green:#2f9e44; --green-soft:#e6f7ea;
  --red:#e03131; --red-soft:#ffe9e9;
  --blue:#1971c2; --blue-soft:#e7f1fb;
  --ink:#241a10; --muted:#8a7a66; --faint:#b9a88f;
  --cream:#fff8f0; --card:#ffffff; --line:#f0e2d2;
  --shadow:0 1px 2px rgba(36,26,16,.05),0 8px 24px -12px rgba(36,26,16,.18);
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#efe6da; color:var(--ink); min-height:100dvh;
}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- shell ---------- */
.shell{
  max-width:430px;margin:0 auto;min-height:100dvh;background:var(--cream);
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 0 0 1px rgba(36,26,16,.06),0 24px 80px -24px rgba(36,26,16,.35);
}
.shell.wide{max-width:1060px}
@media(min-width:500px){.shell{min-height:calc(100dvh)}}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(135deg,#f76707,#e8590c 55%,#d9480f);
  color:#fff;padding:14px 16px 12px;display:flex;align-items:center;gap:10px;
}
.hdr .logo{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.hdr .logo .dot{color:#ffd8a8}
.hdr .rolechip{font-size:.7rem;font-weight:700;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:3px 9px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase}
.hdr .spacer{flex:1}
.hdr .hbtn{font-size:.75rem;font-weight:600;background:rgba(255,255,255,.16);padding:7px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.28)}
.hdr .hbtn:active{background:rgba(255,255,255,.3)}
.pilotband{background:#241a10;color:#ffd8a8;font-size:.68rem;text-align:center;padding:4px 10px;letter-spacing:.03em}
.pilotband b{color:#fff}
.pilotband .apstate{cursor:pointer;text-decoration:underline dotted}

/* ---------- generic ---------- */
.page{flex:1;padding:16px;padding-bottom:96px}
.shell.wide .page{padding:20px 24px 60px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.section-title{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 2px 10px}
.section-title:first-child{margin-top:2px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--orange);color:#fff;font-weight:700;font-size:1rem;
  padding:15px;border-radius:14px;box-shadow:0 6px 16px -6px rgba(232,89,12,.5);
  transition:transform .06s ease;
}
.btn:active{transform:scale(.98)}
.btn.green{background:var(--green);box-shadow:0 6px 16px -6px rgba(47,158,68,.5)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.danger{background:var(--red);box-shadow:0 6px 16px -6px rgba(224,49,49,.45)}
.btn.sm{padding:10px 14px;font-size:.85rem;border-radius:11px;width:auto}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.tiny{font-size:.7rem}
.bold{font-weight:700}
.right{text-align:right}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}

.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  padding:4px 10px;border-radius:99px;background:var(--orange-soft);color:var(--orange-dark);
}
.chip.green{background:var(--green-soft);color:var(--green)}
.chip.red{background:var(--red-soft);color:var(--red)}
.chip.blue{background:var(--blue-soft);color:var(--blue)}
.chip.gray{background:#f1ece4;color:var(--muted)}

input.field,select.field,textarea.field{
  width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:13px 14px;font-size:.95rem;outline:none;
}
input.field:focus,select.field:focus,textarea.field:focus{border-color:var(--orange)}
label.flabel{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin:14px 2px 6px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- role picker ---------- */
.rolewrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 22px 40px;background:
  radial-gradient(120% 60% at 50% -10%, #ffe3c8 0%, var(--cream) 60%)}
.rolelogo{text-align:center;margin-bottom:6px}
.rolelogo .mark{width:84px;height:84px;border-radius:26px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;
  background:linear-gradient(135deg,#f76707,#d9480f);box-shadow:0 14px 30px -10px rgba(232,89,12,.55)}
.rolelogo h1{font-size:2.1rem;font-weight:800;letter-spacing:-.03em}
.rolelogo h1 span{color:var(--orange)}
.rolelogo p{color:var(--muted);margin-top:4px;font-size:.95rem}
.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.rolecard{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 14px;text-align:left;
  box-shadow:var(--shadow);transition:transform .08s ease;
}
.rolecard:active{transform:scale(.97)}
.rolecard .ric{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:10px}
.rolecard h3{font-size:.98rem;font-weight:800}
.rolecard p{font-size:.74rem;color:var(--muted);margin-top:3px;line-height:1.35}
.rolefoot{text-align:center;margin-top:26px;font-size:.75rem;color:var(--muted);line-height:1.6}
.rolefoot button{color:var(--orange-dark);font-weight:700;text-decoration:underline}

/* ---------- onboarding ---------- */
.ob{flex:1;display:flex;flex-direction:column;padding:28px 24px}
.ob h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.ob .sub{color:var(--muted);margin-bottom:22px;line-height:1.5}
.phonerow{display:flex;gap:10px}
.phonerow .cc{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font-weight:700;white-space:nowrap}
.otpnote{margin-top:14px;background:var(--blue-soft);color:var(--blue);border-radius:12px;padding:12px 14px;font-size:.85rem;line-height:1.45}
.ob .push{margin-top:auto;padding-top:24px}

/* ---------- customer home ---------- */
.greet h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.greet p{color:var(--muted);font-size:.85rem;margin-top:2px}
.searchbar{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:14px}
.searchbar input{border:0;outline:0;flex:1;font-size:.95rem;background:none}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 2px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.fchip{flex-shrink:0;font-size:.8rem;font-weight:700;padding:8px 15px;border-radius:99px;background:#fff;border:1.5px solid var(--line);color:var(--muted)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.promo{margin-top:16px;border-radius:var(--radius);padding:16px 18px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#2f9e44,#20713a)}
.promo h3{font-size:1.02rem;font-weight:800}
.promo p{font-size:.78rem;opacity:.9;margin-top:3px}
.promo .pemoji{position:absolute;right:10px;bottom:-8px;font-size:3.2rem;opacity:.35;transform:rotate(-12deg)}

.rcard{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);margin-top:14px;text-align:left;width:100%}
.rcard:active{transform:scale(.99)}
.rcover{height:110px;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative}
.rcover .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px}
.rcover .fee{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.92);border-radius:99px;font-size:.7rem;font-weight:800;padding:4px 10px;color:var(--ink)}
.rbody{padding:12px 14px 14px}
.rbody h3{font-size:1rem;font-weight:800}
.rmeta{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);margin-top:4px;flex-wrap:wrap}
.rmeta .star{color:#f08c00;font-weight:800}
.closedmask{filter:grayscale(.7);opacity:.72}

/* ---------- restaurant page (customer) ---------- */
.rhero{height:140px;display:flex;align-items:flex-end;padding:14px;position:relative;color:#fff}
.rhero .back{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.28);border-radius:99px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:#fff}
.rhero .bigemoji{position:absolute;right:14px;bottom:10px;font-size:3.6rem;opacity:.5}
.rinfo{background:#fff;border-bottom:1px solid var(--line);padding:14px 16px}
.rinfo h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.menucat{font-size:.95rem;font-weight:800;margin:20px 2px 8px}
.mitem{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px}
.mitem .memoji{width:52px;height:52px;border-radius:12px;background:var(--orange-soft);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.mitem h4{font-size:.92rem;font-weight:700}
.mitem p{font-size:.75rem;color:var(--muted);margin-top:2px;line-height:1.35}
.mitem .price{font-weight:800;font-size:.9rem;margin-top:4px}
.mitem.sold{opacity:.5}
.addbtn{width:36px;height:36px;border-radius:11px;background:var(--orange);color:#fff;font-size:1.2rem;font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -4px rgba(232,89,12,.6)}
.stepper{display:flex;align-items:center;gap:10px;flex-shrink:0}
.stepper button{width:32px;height:32px;border-radius:10px;background:var(--orange-soft);color:var(--orange-dark);font-weight:800;font-size:1.05rem}
.stepper .q{font-weight:800;min-width:16px;text-align:center}

.cartbar{
  position:fixed;bottom:76px;left:50%;transform:translateX(-50%);width:calc(min(430px,100%) - 24px);
  z-index:45;background:var(--ink);color:#fff;border-radius:15px;padding:14px 18px;
  display:flex;align-items:center;gap:10px;font-weight:700;box-shadow:0 14px 30px -8px rgba(36,26,16,.5);
}
.cartbar .count{background:var(--orange);border-radius:8px;padding:2px 9px;font-size:.85rem}

/* ---------- bottom nav ---------- */
.bnav{
  position:sticky;bottom:0;z-index:44;background:#fff;border-top:1px solid var(--line);
  display:flex;padding:6px 8px calc(8px + env(safe-area-inset-bottom));margin-top:auto;
}
.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;font-size:.66rem;font-weight:700;color:var(--muted);border-radius:12px}
.bnav button .ni{font-size:1.25rem;line-height:1}
.bnav button.on{color:var(--orange-dark)}
.bnav button.on .ni{transform:scale(1.08)}
.bnav .navdot{position:absolute;margin-left:26px;margin-top:-2px;width:8px;height:8px;border-radius:99px;background:var(--red);border:2px solid #fff}

/* ---------- checkout ---------- */
.citem{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line)}
.citem:last-child{border-bottom:0}
.optcard{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;margin-top:8px;width:100%;text-align:left}
.optcard.on{border-color:var(--orange);background:var(--orange-soft)}
.optcard .oic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.optcard h4{font-size:.9rem;font-weight:800}
.optcard p{font-size:.73rem;color:var(--muted);margin-top:1px;line-height:1.35}
.radio{width:20px;height:20px;border-radius:99px;border:2px solid var(--line);flex-shrink:0}
.optcard.on .radio{border-color:var(--orange);background:radial-gradient(circle at center,var(--orange) 0 45%,transparent 50%)}
.feerow{display:flex;justify-content:space-between;font-size:.9rem;padding:5px 0;color:var(--muted)}
.feerow.total{color:var(--ink);font-weight:800;font-size:1.05rem;border-top:1px solid var(--line);margin-top:6px;padding-top:11px}

/* ---------- tracking ---------- */
.trackhead{background:#fff;border-bottom:1px solid var(--line);padding:14px 16px}
.trackhead h2{font-size:1.1rem;font-weight:800}
#map,.map-fallback{height:240px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:14px;background:#e9f0e9;position:relative;z-index:1}
.map-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:.85rem}
.etacard{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:16px;margin-top:14px}
.etacard .eic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.etacard h3{font-size:1.05rem;font-weight:800}
.etacard p{font-size:.78rem;opacity:.75;margin-top:2px}
.timeline{margin-top:16px}
.tstep{display:flex;gap:13px;position:relative;padding-bottom:20px}
.tstep:last-child{padding-bottom:0}
.tstep .tdot{width:26px;height:26px;border-radius:99px;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.72rem;flex-shrink:0;z-index:2}
.tstep .tline{position:absolute;left:12px;top:26px;bottom:-2px;width:2px;background:var(--line);z-index:1}
.tstep:last-child .tline{display:none}
.tstep.done .tdot{background:var(--green);border-color:var(--green);color:#fff}
.tstep.done .tline{background:var(--green)}
.tstep.now .tdot{border-color:var(--orange);background:var(--orange-soft);animation:pulse 1.6s infinite}
.tstep h4{font-size:.9rem;font-weight:700;padding-top:3px}
.tstep.now h4{color:var(--orange-dark)}
.tstep .tts{font-size:.72rem;color:var(--muted);margin-top:2px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,89,12,.35)}70%{box-shadow:0 0 0 9px rgba(232,89,12,0)}100%{box-shadow:0 0 0 0 rgba(232,89,12,0)}}
.drvcard{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:14px}
.avatar{width:46px;height:46px;border-radius:99px;background:linear-gradient(135deg,#f76707,#d9480f);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;flex-shrink:0}
.callbtn{width:44px;height:44px;border-radius:13px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.nearby{display:none;background:var(--green-soft);color:var(--green);border-radius:12px;padding:11px 14px;font-size:.85rem;font-weight:700;margin-top:12px;text-align:center}
.bigbanner{border-radius:var(--radius);padding:16px;margin-top:14px;font-weight:700;text-align:center}
.bigbanner.red{background:var(--red-soft);color:var(--red)}
.bigbanner.green{background:var(--green-soft);color:var(--green)}

/* ---------- orders list ---------- */
.ordrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-top:10px;width:100%;text-align:left}
.ordrow .oemoji{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}

/* ---------- stars ---------- */
.stars{display:flex;gap:6px;font-size:1.7rem;justify-content:center;margin-top:8px}
.stars button{color:#e5dccf;transition:transform .08s}
.stars button.on{color:#f08c00}
.stars button:active{transform:scale(1.2)}

/* ---------- dashboard (restaurant/admin) ---------- */
.tabs{display:flex;gap:6px;background:#fff;border-bottom:1px solid var(--line);padding:8px 12px;position:sticky;top:0;z-index:30;overflow-x:auto}
.tabs button{font-size:.85rem;font-weight:700;color:var(--muted);padding:9px 14px;border-radius:10px;white-space:nowrap}
.tabs button.on{background:var(--orange-soft);color:var(--orange-dark)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.kpi .kv{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.kpi .kl{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ocard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:10px;box-shadow:var(--shadow)}
.ocard.new{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,89,12,.12)}
.ohead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ohead .code{font-weight:800;font-size:.95rem}
.oitems{margin-top:9px;font-size:.85rem;line-height:1.55;color:#4d4234}
.onote{margin-top:8px;background:#fffbe6;border:1px solid #ffe58f;border-radius:10px;padding:8px 11px;font-size:.78rem;color:#7a5b00}
.obtns{display:flex;gap:8px;margin-top:12px}
.obtns .btn{padding:11px}
.tbl{width:100%;border-collapse:collapse;font-size:.82rem;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.tbl th{background:#faf3ea;text-align:left;padding:10px 12px;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:#fffaf4}
.switch{position:relative;width:44px;height:26px;border-radius:99px;background:#e5dccf;flex-shrink:0;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch.on{background:var(--green)}
.switch.on::after{left:21px}

/* ---------- driver ---------- */
.drvstate{border-radius:var(--radius);padding:22px;text-align:center;color:#fff;margin-bottom:14px}
.drvstate.off{background:linear-gradient(135deg,#495057,#343a40)}
.drvstate.onn{background:linear-gradient(135deg,#2f9e44,#20713a)}
.drvstate h2{font-size:1.25rem;font-weight:800;margin-top:8px}
.drvstate p{font-size:.82rem;opacity:.85;margin-top:4px}
.radar{width:64px;height:64px;margin:0 auto;border-radius:99px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:1.8rem;position:relative}
.radar.live::before{content:"";position:absolute;inset:0;border-radius:99px;border:2px solid rgba(255,255,255,.7);animation:radar 1.8s infinite}
@keyframes radar{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.offer{border:2px solid var(--orange);border-radius:var(--radius);overflow:hidden;margin-top:14px;background:#fff;box-shadow:0 0 0 4px rgba(232,89,12,.12)}
.offer .ohd{background:var(--orange);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800}
.offer .obody{padding:16px}
.legrow{display:flex;gap:12px;position:relative;padding-bottom:16px}
.legrow:last-child{padding-bottom:0}
.legrow .ldot{width:12px;height:12px;border-radius:99px;margin-top:4px;flex-shrink:0}
.legrow .lline{position:absolute;left:5px;top:18px;bottom:0;width:2px;background:var(--line)}
.legrow:last-child .lline{display:none}
.countpill{background:#fff;color:var(--orange-dark);border-radius:99px;padding:3px 12px;font-weight:800}
.jobstep{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:10px}
.jobstep.done{opacity:.55}
.jobstep .jn{width:30px;height:30px;border-radius:99px;background:var(--orange-soft);color:var(--orange-dark);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}
.jobstep.done .jn{background:var(--green);color:#fff}
.cashbox{background:#fffbe6;border:1.5px solid #ffe58f;border-radius:14px;padding:14px;margin-top:12px}

/* ---------- toasts & modal ---------- */
#toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(400px,calc(100% - 28px))}
.toast{background:var(--ink);color:#fff;border-radius:13px;padding:13px 16px;font-size:.85rem;font-weight:600;box-shadow:0 14px 30px -8px rgba(0,0,0,.4);display:flex;gap:10px;align-items:center;animation:tin .22s ease}
.toast.green{background:var(--green)}
.toast.red{background:var(--red)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.overlay{position:fixed;inset:0;background:rgba(20,12,4,.5);z-index:150;display:flex;align-items:flex-end;justify-content:center;animation:fin .18s ease}
@media(min-width:500px){.overlay{align-items:center}}
@keyframes fin{from{opacity:0}to{opacity:1}}
.sheet{background:var(--cream);width:min(430px,100%);border-radius:22px 22px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));max-height:88dvh;overflow-y:auto;animation:sup .22s ease}
@media(min-width:500px){.sheet{border-radius:22px}}
@keyframes sup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet h3{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.grabber{width:42px;height:5px;border-radius:99px;background:#e5dccf;margin:-8px auto 14px}
.payspin{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 0 10px;text-align:center}
.spinner{width:44px;height:44px;border-radius:99px;border:4px solid var(--orange-soft);border-top-color:var(--orange);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.paydone{width:64px;height:64px;border-radius:99px;background:var(--green);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* leaflet marker tweaks */
.emoji-pin{font-size:1.6rem;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:none}
.drv-pin{font-size:1.7rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.leaflet-div-icon{background:none;border:none}

.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .ee{font-size:2.6rem;margin-bottom:10px}
.empty h3{color:var(--ink);font-size:1rem;font-weight:800;margin-bottom:4px}
.empty p{font-size:.82rem;line-height:1.5}

@media(min-width:700px){
  .shell.wide .ocardgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .shell.wide .ocardgrid .ocard{margin-top:0}
}