/* A&B design system v9 — "Sky & Navy": Electric Sky Blue #38BDF8, Midnight Navy #101828, Electric Coral #FF5A36, Ice Blue #F0F9FF.
   Coral is for actions and offers, sky blue for navigation and glow, navy for depth. Shared by the customer, shop, driver and admin apps. */
:root{
  --ink:#101828; --ink2:#475467; --ink3:#667085; --line:#d3e5f1; --paper:#f0f9ff; --card:#ffffff;
  --brand:#ff5a36; --brand2:#ff8a6b; --brandsoft:#ffece6; --brandink:#c43a1a;
  --sky:#38bdf8; --sky2:#7dd3fc; --skysoft:#e0f4ff; --skyink:#0369a1; --navy:#101828; --navy2:#1b2a4a;
  --pine:#101828; --pine2:#1b2a4a; --pinesoft:#e0f4ff;
  --ok:#15845c; --oksoft:#e0f4ea; --warn:#b86200; --warnsoft:#fff3dc; --bad:#d3322a; --badsoft:#fdebe9;
  --glass:rgba(255,255,255,.82); --warmtint:#fff1ec; --track:rgba(16,24,40,.08); --field:#ffffff; --hero-a:#0b1426; --hero-b:#14305a;
  --hero-c:#0f4a7a; --btn-a:#ff6a48; --btn-b:#ff5a36; --deep:#101828; --on-brand:#fff; --brand-rgb:255,90,54; --sky-rgb:56,189,248;
  --muted:var(--ink2); --r:20px; --r-sm:14px; --r-lg:26px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 12px 28px -16px rgba(16,40,70,.30);
  --shadow-lift:0 2px 4px rgba(16,24,40,.08),0 18px 36px -16px rgba(16,40,70,.40);
  --ease:cubic-bezier(.22,.8,.24,1); --t1:.14s; --t2:.22s; --t3:.3s;
  color-scheme:light;
  --font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Noto Naskh Arabic",Tahoma,"DejaVu Sans",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ink:#eaf2fb; --ink2:#a8b8cf; --ink3:#8296b2; --line:#223352; --paper:#0a1222; --card:#111c33;
  --brandsoft:rgba(var(--brand-rgb),.16); --brandink:#ff9b83; --skysoft:rgba(var(--sky-rgb),.14); --skyink:#7dd3fc; --pine:#1b3358; --pine2:#24447a; --pinesoft:rgba(var(--sky-rgb),.14);
  --oksoft:rgba(21,132,92,.22); --warnsoft:rgba(217,119,6,.22); --badsoft:rgba(211,50,42,.22);
  --ok:#3ddc97; --warn:#fbbf4a; --bad:#ff7b72;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.8); --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 22px 40px -16px rgba(0,0,0,.9);
  --glass:rgba(10,18,34,.8); --warmtint:#2a1712; --track:rgba(255,255,255,.08); --field:#16233f; --hero-a:#060b17; --hero-b:#0e2547;
  color-scheme:dark;
}}
:root[data-theme=dark]{
  --ink:#eaf2fb; --ink2:#a8b8cf; --ink3:#8296b2; --line:#223352; --paper:#0a1222; --card:#111c33;
  --brandsoft:rgba(var(--brand-rgb),.16); --brandink:#ff9b83; --skysoft:rgba(var(--sky-rgb),.14); --skyink:#7dd3fc; --pine:#1b3358; --pine2:#24447a; --pinesoft:rgba(var(--sky-rgb),.14);
  --oksoft:rgba(21,132,92,.22); --warnsoft:rgba(217,119,6,.22); --badsoft:rgba(211,50,42,.22);
  --ok:#3ddc97; --warn:#fbbf4a; --bad:#ff7b72;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.8); --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 22px 40px -16px rgba(0,0,0,.9);
  --glass:rgba(10,18,34,.8); --warmtint:#2a1712; --track:rgba(255,255,255,.08); --field:#16233f; --hero-a:#060b17; --hero-b:#0e2547;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums lining-nums;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.018em;line-height:1.18}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4,[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{letter-spacing:0;line-height:1.4}
[dir=rtl] body{line-height:1.6}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand2);outline-offset:2px;border-radius:8px}
::selection{background:rgba(var(--brand-rgb),.22)}

/* buttons: solid colour, a faint top highlight, a little lift on hover, a clear press */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:var(--r-sm);font-weight:700;letter-spacing:-.005em;background:var(--brand);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 16px -10px rgba(var(--brand-rgb),.75);transition:transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease),background var(--t2),filter var(--t1);position:relative}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 20px -10px rgba(var(--brand-rgb),.8)}
.btn:active{transform:translateY(0) scale(.975);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 4px 8px -6px rgba(var(--brand-rgb),.7);filter:none}
.btn.block{width:100%}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:#c5cec8;background:#fbfcfb}
.btn.dark{background:var(--pine);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 16px -10px rgba(16,24,40,.8)}
.btn.ok{background:var(--ok);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 16px -10px rgba(21,132,92,.8)}
.btn.bad{background:#d3322a;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 16px -10px rgba(211,50,42,.7)}
.btn.soft{background:var(--brandsoft);color:var(--brandink);box-shadow:none}
.btn.sm{min-height:40px;padding:0 15px;font-size:.9rem;border-radius:12px}
.btn:disabled{opacity:.5;pointer-events:none;box-shadow:none}
.btn.is-busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* forms */
label.f{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px;color:var(--ink2)}
.in{width:100%;min-height:50px;padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--card);transition:border-color var(--t1),box-shadow var(--t2) var(--ease),background var(--t1)}
.in:hover{border-color:#c5cec8}
.in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.15)}
.in::placeholder{color:var(--ink3)}
textarea.in{min-height:84px;resize:vertical}
.row{display:flex;gap:12px}.row>*{flex:1;min-width:0}
.field{margin-bottom:14px}
.muted{color:var(--ink2)}.tiny{font-size:.82rem}

/* badges */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--paper);color:var(--ink2);transition:background var(--t2),color var(--t2)}
.chip.ok{background:var(--oksoft);color:var(--ok)}.chip.warn{background:var(--warnsoft);color:var(--warn)}.chip.bad{background:var(--badsoft);color:var(--bad)}.chip.brand{background:var(--brandsoft);color:var(--brandink)}

/* toasts: a coloured edge says what kind of message it is; they slide in and out */
#toasts{position:fixed;inset-inline:0;bottom:92px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:99;pointer-events:none;padding:0 14px}
.toast{background:var(--pine);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:600;font-size:.92rem;box-shadow:var(--shadow-lift);max-width:min(92vw,420px);border-inline-start:5px solid var(--brand2);animation:tin var(--t3) var(--ease)}
.toast.bad{background:#4a1612;border-inline-start-color:#ff6b5e}.toast.ok{background:#0c3d2b;border-inline-start-color:#3ddc97}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity var(--t3),transform var(--t3)}
@keyframes tin{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* loading placeholders (use instead of spinners for lists and cards) */
.skel,.skel-line{border-radius:14px;background:linear-gradient(100deg,#e7ece8 30%,var(--paper) 50%,#e7ece8 70%);background-size:200% 100%;animation:sk 1.3s linear infinite}
.skel-line{height:14px;margin:8px 0}
@keyframes sk{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ===== v7 "Night Market": themes, ambient background, theme switch ===== */
html{background:var(--paper)}
body{position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 40% at 100% 0%,rgba(var(--brand-rgb),.10),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(var(--sky-rgb),.14),transparent 70%)}
:root[data-theme=dark] body::before,:root:not([data-theme=light]) body::before{background:radial-gradient(60% 40% at 100% 0%,rgba(var(--brand-rgb),.13),transparent 70%),radial-gradient(55% 45% at 0% 100%,rgba(var(--sky-rgb),.18),transparent 70%)}
:root[data-theme=light] body::before{background:radial-gradient(60% 40% at 100% 0%,rgba(var(--brand-rgb),.10),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(var(--sky-rgb),.10),transparent 70%)}
.themebtn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--paper);color:var(--ink);border:1px solid var(--line);overflow:hidden;flex:none;transition:transform var(--t1) var(--ease),background var(--t2)}
.themebtn:active{transform:scale(.9)}
.themebtn span{grid-area:1/1;display:grid;place-items:center;transition:transform .4s var(--ease),opacity .25s}
.themebtn .ti-sun{color:#ffb347}.themebtn .ti-moon{color:var(--ink2)}
:root[data-theme=dark] .themebtn .ti-moon,:root:not([data-theme]) .themebtn .ti-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
:root[data-theme=light] .themebtn .ti-sun{opacity:0;transform:rotate(90deg) scale(.4)}
@media(prefers-color-scheme:light){:root:not([data-theme]) .themebtn .ti-sun{opacity:0}}
html.theme-x *,html.theme-x *::before,html.theme-x *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important}
.themebtn .tl{display:none;font-style:normal;font-weight:700;font-size:.95rem}

/* v11: the page background itself drifts slowly on every screen (customer, shop, driver, admin) */
body::before{inset:-12%;animation:ambient 26s ease-in-out infinite alternate;will-change:transform}
@keyframes ambient{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.14)}}
@media (prefers-reduced-motion:reduce){body::before{animation-duration:60s!important;animation-iteration-count:infinite!important}}

/* ===== v12: full-page animated background (all four apps) =====
   #bgfx is created by core.js: fixed, behind everything, never inside one section. Light and night themes each have their own sky/navy palette. */
body::before{display:none!important}
#bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--bgi,1);contain:strict}
html[data-app=shop]{--bgi:.9}html[data-app=admin]{--bgi:.85}html[data-app=driver]{--bgi:.7}
:root{--bg1:#b9e0fa;--bg2:#dcf1ff;--bg3:#9fd2f5;--orb1:rgba(14,165,233,.62);--orb2:rgba(37,99,235,.40);--orb3:rgba(var(--sky-rgb),.62);--orb4:rgba(var(--brand-rgb),.20);--wave:rgba(14,165,233,.34);--wave2:rgba(16,40,90,.12);--trail:rgba(14,165,233,.75)}
:root[data-theme=dark]{--bg1:#050a16;--bg2:#0b1d3d;--bg3:#07162d;--orb1:rgba(var(--sky-rgb),.42);--orb2:rgba(37,99,235,.42);--orb3:rgba(14,165,233,.34);--orb4:rgba(var(--brand-rgb),.2);--wave:rgba(var(--sky-rgb),.2);--wave2:rgba(var(--sky-rgb),.1);--trail:rgba(var(--sky-rgb),.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg1:#050a16;--bg2:#0b1d3d;--bg3:#07162d;--orb1:rgba(var(--sky-rgb),.42);--orb2:rgba(37,99,235,.42);--orb3:rgba(14,165,233,.34);--orb4:rgba(var(--brand-rgb),.2);--wave:rgba(var(--sky-rgb),.2);--wave2:rgba(var(--sky-rgb),.1);--trail:rgba(var(--sky-rgb),.9)}}
#bgfx>*{position:absolute;display:block}
#bgfx .bg-base{inset:-30% 0;height:160%;background:linear-gradient(150deg,var(--bg1),var(--bg2) 38%,var(--bg3) 62%,var(--bg2));background-size:220% 220%;animation:bgshift 34s ease-in-out infinite alternate;transform:translate3d(0,calc(var(--bgp,0)*-16%),0);will-change:transform,background-position}
#bgfx .bg-light{inset:0;background:radial-gradient(70% 55% at 50% 100%,var(--orb1),transparent 70%);opacity:calc(.25 + var(--bgp,0)*.65);transition:opacity .4s linear}
#bgfx .bg-orbs{inset:0;transform:translate3d(0,calc(var(--bgp,0)*-12vh),0);will-change:transform}
#bgfx .bg-orb{border-radius:50%;will-change:transform}
#bgfx .b1{width:62vmax;height:62vmax;left:-18vmax;top:-14vmax;background:radial-gradient(circle,var(--orb1),transparent 66%);animation:bgd1 26s ease-in-out infinite alternate}
#bgfx .b2{width:54vmax;height:54vmax;right:-16vmax;top:22vh;background:radial-gradient(circle,var(--orb2),transparent 66%);animation:bgd2 32s ease-in-out infinite alternate}
#bgfx .b3{width:48vmax;height:48vmax;left:18vw;top:62vh;background:radial-gradient(circle,var(--orb3),transparent 66%);animation:bgd3 38s ease-in-out infinite alternate}
#bgfx .b4{width:34vmax;height:34vmax;right:8vw;bottom:-10vmax;background:radial-gradient(circle,var(--orb4),transparent 66%);animation:bgd4 30s ease-in-out infinite alternate}
#bgfx .bg-wave{left:0;bottom:0;width:200%;height:34vh;min-height:200px;fill:var(--wave);will-change:transform}
#bgfx .w1{animation:bgwave 38s linear infinite}
#bgfx .w2{bottom:7vh;fill:var(--wave2);height:30vh;animation:bgwave 56s linear infinite reverse}
#bgfx .bg-trail{height:2px;width:62vmax;left:-70vmax;border-radius:2px;background:linear-gradient(90deg,transparent,var(--trail),transparent);box-shadow:0 0 14px 2px var(--trail);transform:rotate(-17deg);opacity:0;will-change:transform,opacity}
#bgfx .t1{top:18vh;animation:bgtrail 17s linear infinite}
#bgfx .t2{top:48vh;animation:bgtrail 23s linear 6s infinite}
#bgfx .t3{top:76vh;animation:bgtrail 29s linear 12s infinite}
html[data-app=driver] #bgfx .t2,html[data-app=driver] #bgfx .t3,html[data-app=driver] #bgfx .w2{display:none}
@keyframes bgshift{to{background-position:100% 100%}}
@keyframes bgd1{to{transform:translate3d(24vw,16vh,0) scale(1.18)}}
@keyframes bgd2{to{transform:translate3d(-26vw,-14vh,0) scale(.9)}}
@keyframes bgd3{to{transform:translate3d(28vw,-22vh,0) scale(1.22)}}
@keyframes bgd4{to{transform:translate3d(-30vw,-12vh,0) scale(1.3)}}
@keyframes bgwave{to{transform:translate3d(-50%,0,0)}}
@keyframes bgtrail{0%{transform:translate3d(0,0,0) rotate(-17deg);opacity:0}8%{opacity:.9}60%{opacity:.7}100%{transform:translate3d(190vw,-34vh,0) rotate(-17deg);opacity:0}}
/* reduced motion: the background keeps drifting, but much more slowly, and the sweeping trails are off */
@media (prefers-reduced-motion:reduce){
  #bgfx .bg-base,#bgfx .bg-orb,#bgfx .bg-wave{animation-duration:140s!important;animation-iteration-count:infinite!important}
  #bgfx .bg-trail{display:none}
}

/* page surfaces let the background show through a little (cards, rows, tables) while text stays on a solid-enough ground */
:root{--surf:rgba(255,255,255,.72)}
:root[data-theme=dark]{--surf:rgba(14,26,50,.64)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--surf:rgba(14,26,50,.64)}}
.band.ice{background:linear-gradient(180deg,rgba(224,244,255,.7),rgba(240,249,255,.35) 92%)}