/* Melaq customer app. Brand v1.0: navy #0D1B3D, white, violet #7C3AED and their tints only. */
:root{--navy:#0D1B3D;--violet:#7C3AED;--bg:color-mix(in srgb,#0D1B3D 4%,#fff);--line:color-mix(in srgb,#0D1B3D 12%,#fff);--muted:color-mix(in srgb,#0D1B3D 58%,#fff);--v12:color-mix(in srgb,#7C3AED 12%,#fff);--n8:color-mix(in srgb,#0D1B3D 8%,#fff);--r:16px;--shadow:0 1px 2px rgba(13,27,61,.05),0 8px 24px -14px rgba(13,27,61,.25)}
*{box-sizing:border-box}html,body{margin:0}body{font-family:'IBM Plex Sans Arabic',Inter,system-ui,sans-serif;background:var(--bg);color:var(--navy);font-size:15px;-webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit;color:inherit}
.hdr{background:var(--navy);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 18px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5}
.hdr img{height:34px}.hdr .sp{flex:1}.hdr button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:99px;padding:6px 12px;cursor:pointer}
.hdr .back{font-size:20px;padding:4px 12px}
.wrap{max-width:560px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:4px 0 12px}h2{font-size:17px;margin:18px 0 10px}.sub{color:var(--muted);margin:0 0 12px;font-size:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.btn{display:block;width:100%;background:var(--navy);color:#fff;border:0;border-radius:14px;padding:14px 16px;font-weight:700;font-size:16px;cursor:pointer;text-align:center}
.btn.v{background:var(--violet)}.btn.sec{background:#fff;color:var(--navy);border:1.5px solid var(--line)}.btn.ghost{background:none;color:var(--violet);border:1.5px solid var(--violet)}.btn:disabled{opacity:.5}
.btn.sm{display:inline-block;width:auto;padding:8px 14px;font-size:14px;border-radius:10px}
input,select,textarea{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;font-size:16px}input:focus,select:focus,textarea:focus{outline:2px solid var(--violet);border-color:transparent}
.fl{display:grid;gap:6px;font-size:13px;color:var(--muted);margin-bottom:10px}
.err{color:var(--violet);font-weight:600;min-height:1em;margin:8px 0}.ok{color:var(--muted);font-size:14px}
.login{min-height:100vh;background:var(--navy);display:grid;place-items:center;padding:24px}.login .card{width:100%;max-width:400px;display:grid;gap:12px}.login img{height:54px;justify-self:center;margin-bottom:8px}
.lcard{display:flex;gap:14px;align-items:center;cursor:pointer}.lcard .ic{width:52px;height:52px;border-radius:14px;background:var(--navy);display:grid;place-items:center;flex:none}.lcard .ic img{width:30px}.lcard b{display:block;font-size:16px}.lcard small{color:var(--muted)}.lcard .end{margin-inline-start:auto;text-align:end;font-size:13px;color:var(--muted)}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--n8);color:var(--navy)}.tag.v{background:var(--v12);color:var(--violet)}.tag.n{background:var(--navy);color:#fff}
.svc{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.svc:last-child{border:0}.svc .nm{flex:1}.svc .nm small{display:block;color:var(--muted)}
.step{display:flex;align-items:center;gap:8px}.step button{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:18px;cursor:pointer}.step b{min-width:22px;text-align:center}
.cat{font-size:13px;color:var(--muted);margin:14px 0 2px;font-weight:600}
.bar{position:fixed;inset:auto 0 0 0;background:#fff;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:6}.bar .in{max-width:560px;margin:0 auto}
.tabs{position:fixed;inset:auto 0 0 0;background:#fff;border-top:1px solid var(--line);display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:6}.tabs a{flex:1;text-align:center;padding:8px 4px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}.tabs a.on{color:var(--violet);background:var(--v12)}
.sum{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:15px}.sum .t{font-weight:700;font-size:17px;border-top:1px solid var(--line);padding-top:8px}.sum .t+span{border-top:1px solid var(--line);padding-top:8px}
.track{list-style:none;margin:0;padding:0}.track li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;color:var(--muted)}.track i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);margin-top:4px;flex:none}.track li.done{color:var(--navy)}.track li.done i{background:var(--navy);border-color:var(--navy)}.track li.now{color:var(--violet);font-weight:700}.track li.now i{background:var(--violet);border-color:var(--violet);box-shadow:0 0 0 4px var(--v12)}
.note{background:var(--v12);border-radius:12px;padding:12px 14px;font-size:14px;margin:10px 0}
.stars{display:flex;gap:6px;justify-content:center;font-size:32px}.stars button{background:none;border:0;cursor:pointer;color:var(--line)}.stars button.on{color:var(--violet)}
.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}
.toast{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));inset-inline:16px;max-width:520px;margin:0 auto;background:var(--navy);color:#fff;border-radius:12px;padding:12px 16px;z-index:50;text-align:center}.toast.bad{background:var(--violet)}
.empty{text-align:center;color:var(--muted);padding:36px 12px}
[dir=ltr] .hdr .back{transform:scaleX(-1)}
/* Semantic red/green for errors and success (owner, 2026-11-12) */
:root{--ok:#15803D;--okbg:#DCFCE7;--bad:#B91C1C;--badbg:#FEE2E2}
.err{color:var(--bad)}.toast.bad{background:var(--bad)}.btn.ghost{color:var(--bad);border-color:var(--bad)}
.tag.ok{background:var(--okbg);color:var(--ok)}.tag.bad{background:var(--badbg);color:var(--bad)}

.map{height:280px;border-radius:14px;border:1.5px solid var(--line);margin:8px 0;z-index:0}