:root{--ink:#12161C;--ink2:#1F2630;--line:#E3E6EA;--bg:#F4F5F7;--muted:#5B6470;--acc:#FFC627;--good:#1B6E3D;--bad:#C62828}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px}
.app{display:flex;flex-direction:column;height:100%;max-width:520px;margin:0 auto;background:#fff;position:relative}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;background:var(--ink);color:#fff}
.brand{font-weight:700}.brand span{color:var(--acc)}
.tag{font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--ink2);color:#fff}
.tag.on{background:#3DDC84;color:var(--ink)}
#map{flex:1;min-height:260px}
.sheet{padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);max-height:58%;overflow-y:auto}
.sheet h2{margin:0;font-size:17px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:600}
input,select{height:46px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-weight:400;background:#fff}
.btn{height:50px;border-radius:14px;border:0;background:var(--ink);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;padding:0 16px}
.btn.acc{background:var(--acc);color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.bad{background:#fff;color:var(--bad);border:1px solid var(--bad)}
.btn:disabled{opacity:.5}
.btn.wide{width:100%}
.muted{color:var(--muted);font-size:13.5px}
.card{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.price{font-size:22px;font-weight:700}
.pin{display:flex;gap:6px;direction:ltr}
.pin b{width:42px;height:50px;border-radius:10px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:24px}
.steps{display:flex;gap:4px}.steps i{flex:1;height:5px;border-radius:3px;background:var(--line)}.steps i.on{background:var(--acc)}
.offer{position:absolute;inset:auto 0 0 0;background:var(--ink);color:#fff;padding:16px;border-radius:20px 20px 0 0;display:flex;flex-direction:column;gap:10px;z-index:1000}
.offer .price{color:var(--acc)}
.hidden{display:none!important}
.toast{position:absolute;top:60px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;z-index:2000;font-size:14px}
.toast.bad{background:var(--bad)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button{height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
.seg button.on{background:var(--acc);border-color:var(--ink)}
.banner{background:#FFF6D9;color:#5A3F00;font-size:12.5px;padding:6px 16px;text-align:center}
/* alerts */
.alert{position:absolute;top:56px;inset-inline:10px;z-index:2100;background:var(--ink);color:#fff;border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer;animation:drop .25s ease-out}
.alert b{font-size:16px}.alert span{font-size:14px;color:#D7DCE2;line-height:1.6}
.alert.go{background:#1B6E3D}.alert.go span{color:#E3F5EA}
.alert.bad{background:var(--bad)}.alert.bad span{color:#FDE7E7}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.alert{animation:none}}
.eta{background:#FFF6D9;border-radius:12px;padding:8px 12px;font-size:14px}
/* emergency */
.btn.sos{height:40px;font-size:14px;background:#fff;color:var(--bad);border:1.5px solid var(--bad)}
/* rating */
.stars{display:flex;gap:6px;direction:ltr;justify-content:center}
.stars button{width:46px;height:46px;border:0;background:none;font-size:34px;line-height:1;color:var(--line);cursor:pointer}
.stars button.on{color:var(--acc)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags button{height:34px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;padding:0 12px;cursor:pointer}
.tags button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* chat */
.chat-fab{position:absolute;inset-inline-start:14px;bottom:calc(min(58%, 420px) + 12px);z-index:1200;width:54px;height:54px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:24px;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer}
.chat-fab b{position:absolute;top:-4px;inset-inline-end:-4px;min-width:22px;height:22px;border-radius:11px;background:var(--bad);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat{position:absolute;inset:auto 0 0 0;height:72%;z-index:1500;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.2);display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.chat-head .btn{height:38px;width:38px;padding:0}
.chat-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.msg{max-width:80%;padding:8px 12px;border-radius:14px;display:flex;flex-direction:column;gap:2px;line-height:1.55;word-wrap:break-word}
.msg small{font-size:11px;opacity:.65}
.msg.me{align-self:flex-end;background:var(--acc);border-end-end-radius:4px}
.msg.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-end-start-radius:4px}
.chat-quick{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 0}
.chat-quick button{flex:none;height:34px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;padding:0 12px;cursor:pointer}
.chat-form{display:flex;gap:8px;padding:10px 12px 14px}
.chat-form input{flex:1}.chat-form .btn{height:46px}
.sheet>*{flex-shrink:0}