/* تفاعل في كل الشاشات — HMI */
:root{--hmi-ok:#12936F;--hmi-bad:#D2453B}
/* موجة الضغط */
.hmi-rw{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.hmi-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.16;transform:scale(0);animation:hmiRipple .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes hmiRipple{to{transform:scale(1);opacity:0}}
.btn,.ful-opt,.seg-btn,.btn-soft,.order-row,.cat-tile,.request-cta,.errand-card,.lg-staff-b,.lg-acc-main{transition:transform .14s ease,box-shadow .2s,background-color .2s,border-color .2s,color .2s}
.btn:active:not(:disabled),.ful-opt:active,.seg-btn:active,.btn-soft:active,.order-row:active,.cat-tile:active,.request-cta:active,.lg-acc-main:active{transform:scale(.97)}

/* الزرار وهو بيعمل العملية: لفّة جوّاه، وبعدين ✓ أو هزة */
.hmi-busy,.btn[type=submit]:disabled{position:relative;color:transparent!important;pointer-events:none}
.hmi-busy > *,.btn[type=submit]:disabled > *{visibility:hidden}
.hmi-busy::after,.btn[type=submit]:disabled::after{content:"";position:absolute;inset:0;margin:auto;width:1.25em;height:1.25em;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:hmiSpin .7s linear infinite}
.btn-outline-primary.hmi-busy::after,.btn-outline-secondary.hmi-busy::after,.btn-light.hmi-busy::after,.btn-soft.hmi-busy::after,.btn-outline-success.hmi-busy::after,.btn-outline-danger.hmi-busy::after{border-color:rgba(15,123,95,.25);border-top-color:var(--green,#0F7B5F)}
@keyframes hmiSpin{to{transform:rotate(360deg)}}
.hmi-done{position:relative;color:transparent!important}
.hmi-done > *{visibility:hidden}
.hmi-done::after{content:"";position:absolute;inset:0;margin:auto;width:.62em;height:1.1em;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-12%) rotate(45deg) scale(0);animation:hmiTick .35s cubic-bezier(.34,1.56,.64,1) forwards}
.btn-outline-primary.hmi-done::after,.btn-soft.hmi-done::after,.btn-light.hmi-done::after{border-color:var(--green,#0F7B5F)}
@keyframes hmiTick{to{transform:translateY(-12%) rotate(45deg) scale(1)}}
.hmi-fail{animation:hmiShake .45s ease-in-out}

/* الخانات: تركيز ناعم، ✓ لما تبقى صح، ورسالة لما تبقى غلط */
.form-control,.form-select{transition:border-color .2s,box-shadow .25s,background-color .2s,transform .2s}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .22rem rgba(15,123,95,.16),0 6px 16px rgba(15,123,95,.08)}
.form-control.hmi-ok{border-color:var(--hmi-ok);padding-inline-end:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2312936F'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:1.05rem;background-position:left .75rem center;animation:hmiOk .3s ease}
[dir=ltr].form-control.hmi-ok,.form-control.hmi-ok[dir=ltr]{background-position:right .75rem center;padding-inline-end:.75rem;padding-right:2.3rem}
.form-control.hmi-bad{border-color:var(--hmi-bad);box-shadow:0 0 0 .2rem rgba(210,69,59,.12)}
@keyframes hmiOk{from{background-size:0}to{background-size:1.05rem}}
.hmi-msg{font-size:.78rem;color:var(--hmi-bad);max-height:0;overflow:hidden;opacity:0;transform:translateY(-3px);transition:max-height .25s,opacity .2s,transform .25s,margin .2s;margin:0}
.hmi-msg.show{max-height:3em;opacity:1;transform:none;margin:-2px 2px 8px}
.hmi-shake{animation:hmiShake .45s ease-in-out}
@keyframes hmiShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
/* مقياس قوة كلمة المرور */
.hmi-pw{display:flex;align-items:center;gap:8px;margin:-2px 2px 8px;min-height:1.1em}
.hmi-pw-bars{display:flex;gap:4px;flex:0 0 112px}
.hmi-pw-bars i{flex:1;height:5px;border-radius:5px;background:#E2E9E5;transition:background .3s,transform .3s}
.hmi-pw small{font-size:.75rem;color:#55655E}
.hmi-pw[data-s="1"] i:nth-child(-n+1){background:#D2453B}
.hmi-pw[data-s="2"] i:nth-child(-n+2){background:#F2A93B}
.hmi-pw[data-s="3"] i:nth-child(-n+3){background:#7CC44E}
.hmi-pw[data-s="4"] i{background:#12936F}
.hmi-pw[data-s=""] .hmi-pw-bars{opacity:0}
/* عدّاد الحروف */
.hmi-count{font-size:.72rem;color:#8A9A93;text-align:end;margin:-4px 4px 6px;transition:color .2s}
.hmi-count.near{color:#B9741A;font-weight:600}

/* طيران للسلة */
.hmi-fly{position:fixed;z-index:4000;border-radius:16px;background:var(--green,#0F7B5F) center/cover no-repeat;box-shadow:0 10px 24px rgba(10,40,30,.3);pointer-events:none;will-change:transform}
.hmi-pop{animation:hmiPop .45s cubic-bezier(.34,1.8,.64,1)}
@keyframes hmiPop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
/* فرقعة القلب */
.hmi-burst{position:fixed;z-index:4000;pointer-events:none}
.hmi-burst i{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--c);animation:hmiBurst .6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes hmiBurst{0%{transform:rotate(var(--a)) translateX(0) scale(1.2);opacity:1}100%{transform:rotate(var(--a)) translateX(30px) scale(.3);opacity:0}}
.wish-btn.active i{animation:hmiPop .45s cubic-bezier(.34,1.8,.64,1)}

/* المفاتيح (switch) بنطة */
.form-switch .form-check-input{transition:background-position .25s cubic-bezier(.34,1.56,.64,1),background-color .2s,border-color .2s}

/* الرسائل (toast): أيقونة + شريط وقت + دخلة ناعمة */
#hmToastWrap{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(440px,calc(100% - 24px));padding-inline:0!important}
#hmToastWrap .toast{width:100%;border-radius:16px;box-shadow:0 14px 34px rgba(10,30,25,.22);overflow:hidden;animation:hmiToastIn .38s cubic-bezier(.34,1.4,.64,1)}
#hmToastWrap .toast-body{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;line-height:1.45}
#hmToastWrap .toast-body .hmi-ti{flex:0 0 28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1rem}
#hmToastWrap .toast::after{content:"";position:absolute;bottom:0;inset-inline-start:0;height:3px;width:100%;background:rgba(255,255,255,.55);transform-origin:right;animation:hmiToastBar var(--hmi-tt,3.5s) linear forwards}
#hmToastWrap .toast{position:relative}
#hmToastWrap .text-bg-success{background:linear-gradient(135deg,#12936F,#0A5C46)!important}
#hmToastWrap .text-bg-danger{background:linear-gradient(135deg,#D2453B,#A3302A)!important}
#hmToastWrap .text-bg-warning{background:linear-gradient(135deg,#F7B54C,#E09422)!important;color:#2A1A05!important}
#hmToastWrap .text-bg-warning .btn-close{filter:none}
#hmToastWrap .text-bg-info{background:linear-gradient(135deg,#2C8DB8,#1E6B8F)!important;color:#fff!important}
@keyframes hmiToastIn{from{transform:translateY(24px) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes hmiToastBar{to{transform:scaleX(0)}}
body:not(:has(.tab-bar)):not(.has-panel-tabs) #hmToastWrap{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}

@media (prefers-reduced-motion:reduce){
  .hmi-ripple,.hmi-fly,.hmi-burst{display:none}
  .hmi-pop,.hmi-shake,.hmi-fail,.form-control.hmi-ok,#hmToastWrap .toast{animation:none!important}
}

/* ================= 4.10: طبقة تفاعل لكل الشاشات ================= */
/* الكروت اللي تحت الشاشة بتطلع بنعومة وانت بتنزل */
.hmi-rv{opacity:0;transform:translateY(18px) scale(.985)}
.hmi-rv.hmi-in{opacity:1;transform:none;transition:opacity .45s ease var(--hmi-d,0ms),transform .55s cubic-bezier(.2,.8,.2,1) var(--hmi-d,0ms)}
/* الضغط على الكروت: بتنزل لتحت شوية زي زرار حقيقي */
.p-card,.stat-card,.vendor-card,.store-card,.category-card,.vp-card,.wallet-card,.item-card[data-action],.acc-card[data-action]{transition:transform .16s ease,box-shadow .25s ease}
.p-card:active,.stat-card[data-action]:active,.vendor-card:active,.store-card:active,.category-card:active,.vp-card:active,.item-card[data-action]:active{transform:scale(.975)}
/* ميلان خفيف مع الماوس (الكمبيوتر) */
.hmi-tilt{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-2px);box-shadow:0 14px 30px rgba(10,40,30,.12)}
/* الصور بتظهر بنعومة */
img.hmi-img-wait{opacity:0;filter:blur(6px)}
img{transition:opacity .4s ease,filter .5s ease}
/* أزرار التنقل تحت: الأيقونة بتنط والخط بيكبر لما تختارها */
.tab-bar button.active i:nth-of-type(2){animation:hmiTabPop .45s cubic-bezier(.34,1.8,.64,1)}
.tab-bar button.active::before{animation:hmiTabBar .35s cubic-bezier(.34,1.56,.64,1)}
.tab-bar button.active span:not(.fab-circle){animation:hmiTabTxt .3s ease}
@keyframes hmiTabPop{0%{transform:scale(.6) translateY(4px)}60%{transform:scale(1.18) translateY(-2px)}100%{transform:none}}
@keyframes hmiTabBar{from{width:0;opacity:0}to{width:28px;opacity:1}}
@keyframes hmiTabTxt{from{opacity:.4;transform:translateY(2px)}to{opacity:1;transform:none}}
/* الاختيارات (checkbox / radio) بتنط */
.form-check-input:checked{animation:hmiPop .32s cubic-bezier(.34,1.8,.64,1)}
/* النوافذ والشيتات بتفتح بنطة ناعمة */
.modal.fade .modal-dialog{transform:translateY(26px) scale(.96);transition:transform .38s cubic-bezier(.34,1.35,.64,1),opacity .2s}
.modal.show .modal-dialog{transform:none}
.offcanvas-bottom.sheet.showing,.offcanvas-bottom.sheet.show:not(.hiding){transition:transform .42s cubic-bezier(.32,1.25,.6,1)!important}
/* إشعار جديد: نقطة بتنبض */
.badge[id*="otif"]:not(.d-none),.badge[id*="Badge"].bg-danger:not(.d-none){animation:hmiPulse 2.2s ease-out infinite}
@keyframes hmiPulse{0%{box-shadow:0 0 0 0 rgba(210,69,59,.45)}70%{box-shadow:0 0 0 8px rgba(210,69,59,0)}100%{box-shadow:0 0 0 0 rgba(210,69,59,0)}}
/* أزرار الكمية: الرقم اللي اتغيّر بينط */
.stepper span{display:inline-block}
/* اسحب سطر السلة علشان تشيله */
.cart-line{position:relative;touch-action:pan-y;transition:transform .25s ease,opacity .25s;background:var(--surface,#fff)}
.cart-line.hmi-swiping{transition:none}
.cart-line::after{content:"\F5DE  شيل";font-family:bootstrap-icons,inherit;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--hmi-bad);border-radius:inherit;opacity:calc(var(--hmi-sw,0) * .9);pointer-events:none;z-index:-1}
.cart-line.hmi-gone{opacity:0}
/* اسحب لتحت للتحديث */
.hmi-ptr{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;z-index:1040;display:flex;align-items:center;gap:8px;padding:4px 14px 4px 8px;border-radius:999px;
  background:rgba(255,255,255,.97);box-shadow:0 10px 26px rgba(10,40,30,.18);font-weight:600;color:#17251F;transform:translate(-50%,-80px);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .25s;pointer-events:none}
.hmi-ptr.ready{background:#E9F7F1}
.hmi-ptr .hm-mascot{cursor:default}
[data-theme="dark"] .hmi-ptr{background:#17251F;color:#E8F1ED}
@media (prefers-reduced-motion:reduce){
  .hmi-rv{opacity:1!important;transform:none!important}
  .tab-bar button.active i,.tab-bar button.active::before,.form-check-input:checked,.badge{animation:none!important}
  img.hmi-img-wait{opacity:1;filter:none}
}