/* مناديب «روتين» — نفس هوية متجر الويب (Brand.swift): الأزرق الملكي
   ‎#2563EB‎، الحبر الكحلي ‎#16224a‎، خطوط التطبيق محلياً، ورمز الريال الرسمي.
   موبايل-أولاً: عمود واحد ≤560px يتوسّط الشاشات الأعرض — المندوب على جوّاله. */

/* ── خطوط التطبيق نفسها (منسوخة من store/fonts — مسارات نسبية عمداً:
      التطبيق قد يُخدم من مسار فرعي) ── */
@font-face{ font-family:'Tajawal'; src:url('fonts/Tajawal-Regular.woff2') format('woff2');   font-weight:400; font-display:swap; }
@font-face{ font-family:'Tajawal'; src:url('fonts/Tajawal-Medium.woff2') format('woff2');    font-weight:500; font-display:swap; }
@font-face{ font-family:'Tajawal'; src:url('fonts/Tajawal-Bold.woff2') format('woff2');      font-weight:700; font-display:swap; }
@font-face{ font-family:'Tajawal'; src:url('fonts/Tajawal-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face{ font-family:'Tajawal'; src:url('fonts/Tajawal-Black.woff2') format('woff2');     font-weight:900; font-display:swap; }
@font-face{ font-family:'Rubik';   src:url('fonts/Rubik.woff2') format('woff2');             font-weight:300 900; font-display:swap; }
@font-face{ font-family:'Baloo Bhaijaan 2'; src:url('fonts/BalooBhaijaan2.woff2') format('woff2'); font-weight:400 800; font-display:swap; }

:root{
  --bg:#f8f9fe; --bg-2:#eef0fb; --card:#ffffff; --card-2:#f5f6fd;
  --stroke:#e4e7f5; --stroke-strong:#ccd2ec; --divider:rgba(22,34,74,0.07);
  --ink:#16224a; --ink-2:#515d80; --ink-3:#8a93b3; --ink-4:#c4c9dd;
  --accent:#2563EB; --accent-soft:#e5edff; --accent-deep:#1d4ed8;
  --deep:#16224a;
  --gold:#f5b94a; --gold-deep:#8a6010;
  --danger:#e2574a; --success:#2f9e5f; --warn:#e6a02b;
  --app-grad:linear-gradient(135deg,#2563EB 0%,#16C8C8 52%,#FF4D8F 100%);
  --font-display:'Baloo Bhaijaan 2','Tajawal',system-ui,sans-serif;
  --font-ar:'Tajawal',system-ui,sans-serif;
  --font-num:'Rubik','Tajawal',system-ui,sans-serif;
  --r-sm:14px; --r-md:20px; --r-lg:26px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(22,34,74,0.05),0 0 0 1px rgba(22,34,74,0.04);
  --shadow-2:0 8px 22px rgba(22,34,74,0.08),0 0 0 1px rgba(22,34,74,0.04);
  --shadow-3:0 22px 50px rgba(22,34,74,0.14),0 0 0 1px rgba(22,34,74,0.05);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-ar);
  -webkit-font-smoothing:antialiased; line-height:1.6; min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.num{ font-family:var(--font-num); font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }

/* رمز الريال الرسمي (SAMA) — يُلوّن بلون النص المجاور عبر mask */
.riyal{
  display:inline-block; width:0.82em; height:0.82em;
  background:currentColor;
  -webkit-mask:url('assets/riyal.svg') center/contain no-repeat;
  mask:url('assets/riyal.svg') center/contain no-repeat;
  vertical-align:-0.06em; margin-inline-start:0.12em; opacity:0.85;
}

/* العمود الواحد — جوال أولاً ويتوسّط على الأعرض */
.app{ max-width:560px; margin:0 auto; padding:0 16px calc(40px + env(safe-area-inset-bottom, 0px)); min-height:100vh; }

/* ── بانر انقطاع الشبكة ── */
.net-banner{
  position:sticky; top:0; z-index:120; text-align:center;
  background:rgba(230,160,43,0.95); color:#3d2a05;
  font-weight:800; font-size:13.5px; padding:9px 16px;
  box-shadow:0 4px 14px rgba(22,34,74,0.12);
}

/* ── حالات عامة (نفس متجر الويب) ── */
.state{ text-align:center; padding:70px 20px; color:var(--ink-3); font-weight:700; }
.state .big{ margin-bottom:14px; display:flex; justify-content:center; font-size:46px; line-height:1; }
.state .dim{ font-size:13px; font-weight:600; }
.spin{ width:34px; height:34px; border-radius:50%; border:3px solid var(--stroke-strong); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ═══ شاشة الدخول ═══ */
.login{ padding-top:12vh; text-align:center; }
.login .brand-mark{ width:64px; height:64px; border-radius:18px; background:var(--app-grad); margin:0 auto 16px; box-shadow:0 10px 24px rgba(37,99,235,0.3); }
.login h1{ font-family:var(--font-display); font-size:30px; font-weight:800; margin:0 0 4px; letter-spacing:-0.4px; }
.login h1 .thin{ color:var(--ink-2); font-weight:700; font-size:22px; }
.login .sub{ color:var(--ink-3); font-size:14px; margin:0 0 22px; }
.login-card{ background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--shadow-2); text-align:center; }
.tin{
  width:100%; height:52px; border:1px solid var(--stroke-strong); border-radius:var(--r-sm);
  padding:0 16px; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--card-2); outline:none; text-align:center; margin-bottom:10px;
}
.tin:focus{ border-color:var(--accent); background:#fff; }
.cta{
  width:100%; height:52px; border:none; border-radius:var(--r-pill);
  background:var(--app-grad); color:#fff; font-weight:800; font-size:15.5px;
  box-shadow:0 10px 24px rgba(37,101,234,0.22);
}
.cta:disabled{ opacity:0.55; }
.linkish{ width:100%; margin-top:10px; border:none; background:transparent; color:var(--ink-3); font-weight:800; font-size:13px; }
.sent{ font-size:13.5px; color:var(--ink-2); margin:0 0 14px; }
.err{ color:var(--danger); font-size:13px; font-weight:800; margin:12px 0 0; }
.foot-note{ color:var(--ink-4); font-size:12px; margin-top:18px; }

/* ═══ شاشة البوابة (ليس مندوباً / موقوف / خطأ) ═══ */
.gate{ padding-top:14vh; text-align:center; }
.gate .big{ font-size:52px; margin-bottom:14px; }
.gate h2{ font-family:var(--font-display); font-size:22px; font-weight:800; margin:0 0 6px; }
.gate p{ color:var(--ink-3); font-size:14px; margin:0 0 22px; }
.gate .gate-acts{ display:flex; flex-direction:column; gap:10px; max-width:280px; margin:0 auto; }

/* ═══ الترويسة بعد الدخول ═══ */
.hdr{
  position:sticky; top:0; z-index:50; margin:0 -16px; padding:14px 16px 12px;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--divider);
}
.hdr-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hdr .brand{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.hdr .mark{ width:40px; height:40px; border-radius:12px; background:var(--app-grad); box-shadow:0 6px 16px rgba(37,99,235,0.28); flex-shrink:0; }
.hdr .app-name{ font-size:11.5px; font-weight:800; color:var(--ink-3); line-height:1.3; }
.hdr .courier-name{ font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.signout{
  height:38px; padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--stroke-strong); background:var(--card);
  color:var(--ink-2); font-weight:800; font-size:13px; flex-shrink:0;
}
.signout:hover{ color:var(--danger); }

/* مبدّل الحالة — متاح/غير متاح */
.seg{ display:flex; gap:4px; background:var(--bg-2); border:1px solid var(--stroke); border-radius:var(--r-pill); padding:4px; }
.seg[aria-busy="true"]{ opacity:0.6; pointer-events:none; }
.seg-btn{ flex:1; height:44px; border:none; border-radius:var(--r-pill); background:transparent; font-weight:800; font-size:14.5px; color:var(--ink-3); transition:background .15s, color .15s; }
.seg-btn.active[data-status="available"]{ background:#e6f7ee; color:var(--success); box-shadow:var(--shadow-1); }
.seg-btn.active[data-status="offline"]{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-1); }

/* ═══ الطابور ═══ */
.group{ margin-top:20px; }
.group-h{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--ink); }
.group-h .cnt{ font-size:12.5px; padding:1px 10px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-deep); }

.ocard{
  background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-md);
  padding:14px 16px; box-shadow:var(--shadow-1); margin-bottom:12px;
}
/* لون جانبي حسب الحالة — يميّز البطاقة بلمحة والمندوب يمشي */
.ocard[data-state="offered"]{ border-inline-start:4px solid var(--accent); }
.ocard[data-state="accepted"]{ border-inline-start:4px solid var(--warn); }
.ocard[data-state="picked_up"]{ border-inline-start:4px solid var(--success); }

.ocard-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ocard .ono{ font-size:17px; color:var(--ink); }
.ocard .otime{ font-size:12px; color:var(--ink-3); font-weight:700; }
.orow{ display:flex; gap:7px; align-items:baseline; font-size:14px; color:var(--ink-2); margin-top:4px; line-height:1.55; }
.orow.addr span{ color:var(--ink); font-weight:700; }
.orow.note span{ color:var(--ink-2); }
.orow.meta{ font-size:13px; color:var(--ink-3); margin-top:8px; }
.orow.meta b{ color:var(--ink); }
.orow.meta .sep{ color:var(--ink-4); }

/* سطر التحصيل — أبرز سطر في البطاقة */
.cod{ margin-top:11px; padding:11px 14px; border-radius:12px; font-weight:800; font-size:14.5px; }
.cod.due{ background:rgba(230,160,43,0.16); color:var(--gold-deep); border:1px solid rgba(230,160,43,0.4); }
.cod.due b{ font-size:17px; }
.cod.paid{ background:#e6f7ee; color:var(--success); }

/* أفعال البطاقة */
.acts-contact{ display:flex; gap:8px; margin-top:12px; }
.acts-main{ display:flex; gap:8px; margin-top:8px; }
.act{
  flex:1; height:46px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:var(--r-pill); font-weight:800; font-size:14.5px;
  border:1px solid var(--stroke-strong); background:var(--card); color:var(--ink);
  transition:background .15s, color .15s;
}
.act.ghost:hover{ background:var(--bg-2); }
.act.primary{ background:var(--app-grad); color:#fff; border:none; box-shadow:0 8px 18px rgba(37,99,235,0.22); }
.act.accept{ background:var(--success); color:#fff; border:none; }
.act.reject{ flex:0 0 auto; min-width:96px; color:var(--danger); }
.act.reject:hover{ background:#fbe9e7; }
.act:disabled{ opacity:0.55; pointer-events:none; }

/* ═══ مودال الرقم السري ═══ */
.pin-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(22,34,74,0.42);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px;
}
.pin-card{
  position:relative; width:100%; max-width:400px; background:var(--card);
  border-radius:var(--r-lg); padding:30px 26px; box-shadow:var(--shadow-3); text-align:center;
}
.pin-close{ position:absolute; top:14px; inset-inline-start:14px; width:34px; height:34px; border:none; background:var(--bg-2); border-radius:50%; color:var(--ink-2); font-size:15px; }
.pin-card h2{ font-family:var(--font-display); font-size:21px; font-weight:800; margin:0 0 4px; }
.pin-hint{ color:var(--ink-3); font-size:13.5px; margin:0; }
.pin-cod{ margin:14px 0 0; padding:9px 12px; border-radius:12px; background:rgba(230,160,43,0.16); color:var(--gold-deep); font-weight:800; font-size:13.5px; }
/* الخانات — dir=ltr كي تُقرأ الأرقام يساراً-يميناً كما يمليها العميل */
.pin-row{ display:flex; gap:10px; justify-content:center; margin:20px 0 4px; }
.pin-box{
  width:56px; height:64px; text-align:center;
  font-family:var(--font-num); font-size:28px; font-weight:800; color:var(--ink);
  border:1.5px solid var(--stroke-strong); border-radius:14px; background:var(--card-2); outline:none;
  caret-color:var(--accent);
}
.pin-box:focus{ border-color:var(--accent); background:#fff; }
.pin-err{ color:var(--danger); font-size:13px; font-weight:800; margin:10px 0 0; min-height:20px; }
.pin-btn{ width:100%; height:52px; margin-top:8px; border:none; border-radius:var(--r-pill); background:var(--app-grad); color:#fff; font-weight:800; font-size:15.5px; }
.pin-btn:disabled{ opacity:0.55; }
/* الاحتفال */
.pin-done{ padding:14px 0 6px; }
.pin-done .big{ font-size:52px; line-height:1; margin-bottom:10px; }
.pin-done h2{ color:var(--success); margin-bottom:4px; }
.pin-done p{ color:var(--ink-3); font-size:13.5px; margin:0; }

/* ═══ التوست ═══ */
.toast{
  position:fixed; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline:16px;
  margin:0 auto; max-width:520px; z-index:300; text-align:center;
  background:var(--deep); color:#fff; padding:13px 16px; border-radius:14px;
  font-weight:800; font-size:14px; box-shadow:var(--shadow-3);
  animation:toast-in .2s ease-out;
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:360px){
  .pin-box{ width:48px; height:58px; font-size:24px; }
  .act{ font-size:13.5px; }
}