/* سولفنا — طبقة الحركة v0.1 — 2026-10-22 (معاينة).
   حركة فقط فوق الواجهة الحالية: لا ألوان جديدة ولا تخطيط ولا أيقونات. كل مدة بين 160 و420 م.ث،
   وتُلغى كلها مع «تقليل الحركة» من إعداد الجهاز أو من المظهر في الحساب. */
:root{--m-ease:cubic-bezier(.2,.8,.2,1);--m-fast:160ms;--m-mid:260ms;--m-slow:420ms;--m-grad:linear-gradient(125deg,#FF967D 0%,#EE5DA6 50%,#8A78EF 100%)}

/* تفاعلات خفيفة للأزرار والصفوف والرقائق */
.btn,.chip,.iconbtn,.row,nav button{transition:transform var(--m-fast) var(--m-ease),filter var(--m-fast) var(--m-ease),background-color var(--m-fast) var(--m-ease)}
.btn:active,.chip:active,.iconbtn:active,nav button:active{transform:scale(.96)}
.row:active{transform:scale(.99)}
/* حالة الانتظار: الزر الذي بدأ طلباً للخادم يُظهر دوّاراً مكان نصه حتى يرجع الرد */
.btn[data-m-busy]{position:relative;color:transparent!important;pointer-events:none}
.btn[data-m-busy]::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:m-spin .8s linear infinite}
.btn.sec[data-m-busy]::after{border-color:var(--line);border-top-color:var(--ink)}
@keyframes m-spin{to{transform:rotate(360deg)}}

/* دخول الشاشات والقوائم والأوراق */
.m-enter{animation:m-in var(--m-mid) var(--m-ease) both}
@keyframes m-in{from{transform:translateY(8px)}to{transform:none}} /* انزلاق رأسي فقط: لا تمرير أفقي ولا شفافية تُنقص التباين لحظة الدخول */
.sheet-back{animation:m-fade var(--m-fast) var(--m-ease) both}
.sheet{animation:m-up var(--m-mid) var(--m-ease) both;will-change:transform}
.sheet.m-drag{animation:none;transition:none}
.sheet.m-snap{animation:none;transition:transform var(--m-mid) var(--m-ease)}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.toast{animation:m-toast var(--m-mid) var(--m-ease) both}
@keyframes m-toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.bubble.m-new{animation:m-pop var(--m-mid) var(--m-ease) both}
@keyframes m-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.okmsg,.m-ok{animation:m-pop var(--m-slow) var(--m-ease) both}

/* مراحل الطلب: النقطة والخط بدل الرمزين ✓ و○، بنفس الصفوف والنصوص */
[data-timeline] .kv.m-stage{position:relative;padding-inline-start:30px;padding-block:6px}
[data-timeline] .kv.m-stage::before{content:"";position:absolute;inset-inline-start:4px;top:9px;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--surface);box-sizing:border-box;transition:background var(--m-mid) var(--m-ease),border-color var(--m-mid) var(--m-ease)}
[data-timeline] .kv.m-stage::after{content:"";position:absolute;inset-inline-start:10px;top:25px;bottom:-8px;width:2px;background:var(--line)}
[data-timeline] .kv.m-stage:last-child::after{display:none}
[data-timeline] .kv.m-stage[data-m="done"]::before{background:var(--m-grad);border-color:transparent;box-shadow:inset 0 0 0 3px var(--surface)}
[data-timeline] .kv.m-stage[data-m="done"]::after{background:var(--m-grad);transform-origin:top;animation:m-grow var(--m-slow) var(--m-ease) both}
[data-timeline] .kv.m-stage[data-m="now"]::before{border-color:var(--blue);animation:m-halo 1.6s var(--m-ease) infinite}
@keyframes m-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes m-halo{0%{box-shadow:0 0 0 0 var(--blue-soft)}100%{box-shadow:0 0 0 9px transparent}}

/* شريط الرحلة: من الفرع إلى العميل، والمركبة تتقدم مع كل مرحلة */
.m-journey{display:flex;flex-direction:column;gap:6px;padding:14px 4px 2px}
.m-journey .m-track{position:relative;height:4px;border-radius:2px;background:var(--line);margin:26px 22px 8px}
.m-journey .m-fill{position:absolute;inset:0 auto 0 auto;inset-inline-start:0;width:var(--p,0%);border-radius:2px;background:var(--m-grad);transition:width 900ms var(--m-ease)}
.m-journey .m-veh{position:absolute;top:-24px;inset-inline-start:calc(var(--p,0%) - 26px);width:52px;height:auto;transition:inset-inline-start 900ms var(--m-ease);filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));transform:scaleX(var(--m-flip,1))}
[dir="rtl"] .m-journey .m-veh{--m-flip:-1}
.m-journey[data-live] .m-veh{animation:m-bob 1.2s ease-in-out infinite}
@keyframes m-bob{50%{transform:scaleX(var(--m-flip,1)) translateY(-1.5px)}}
.m-journey .m-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:0 4px}
.m-journey .m-ends span{display:inline-flex;align-items:center;gap:4px}
.m-journey .m-ends .solfna-signature{width:18px;height:18px}
.m-journey[data-done] .m-ends span:last-child{color:var(--ok);font-weight:700}

/* الفاتورة تخرج من الطابعة بعد تأكيد الدفع (مرة واحدة)، مع زر تخطٍّ */
.m-printer{position:relative;margin:0 auto -8px;width:min(300px,92%);z-index:2}
.m-printer svg{width:100%;height:auto;display:block}
.m-printer .m-skip{position:absolute;top:-2px;inset-inline-end:0}
.m-paper{overflow:hidden;padding-bottom:40px;margin-bottom:-40px}
.m-paper>.card{animation:m-print 1400ms var(--m-ease) both}
.m-paper.m-printed>.card{animation:none}
@keyframes m-print{0%{transform:translateY(-104%)}70%{transform:translateY(4px)}100%{transform:none}}

/* تقليل الحركة: من الجهاز، أو من المظهر في الحساب */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
@media (prefers-reduced-motion:reduce){html:not([data-motion="full"]) *,html:not([data-motion="full"]) *::before,html:not([data-motion="full"]) *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}