/* ═══ MehrBot Motion — دکمه‌ها و اجزای زنده (الهام از animate-ui: فنر، hover/tap، in-view) ═══ */
:root{--mb-spring:cubic-bezier(.34,1.56,.64,1);--mb-ease:cubic-bezier(.22,1,.36,1);--mb-p:var(--primary-color,#6366f1)}

/* ── دکمه‌ها ── */
.btn,button.btn,a.btn{position:relative;overflow:hidden;isolation:isolate;border-radius:12px!important;font-weight:600;letter-spacing:.1px;
  transition:transform .35s var(--mb-spring),box-shadow .3s var(--mb-ease),filter .2s,background-position .6s var(--mb-ease)!important;will-change:transform}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.96);transition-duration:.08s!important}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mb-p) 35%,transparent)!important}
.btn:disabled,.btn[disabled]{opacity:.6;cursor:not-allowed;filter:saturate(.6)}
/* درخشش عبوری */
.btn::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);transform:translateX(-120%);transition:transform .75s var(--mb-ease)}
.btn:hover:not(:disabled)::after{transform:translateX(120%)}
/* اصلی: گرادیان زنده */
.btn-primary,.btn.btn-primary{background:linear-gradient(135deg,var(--mb-p) 0%,color-mix(in srgb,var(--mb-p) 70%,#ec4899) 55%,var(--mb-p) 100%)!important;
  background-size:200% 200%!important;color:#fff!important;border:0!important;box-shadow:0 6px 18px color-mix(in srgb,var(--mb-p) 35%,transparent)}
.btn-primary:hover:not(:disabled){background-position:100% 50%!important;box-shadow:0 12px 28px color-mix(in srgb,var(--mb-p) 45%,transparent)}
/* ثانویه: شیشه‌ای با حاشیهٔ رنگی در hover */
.btn-secondary,.btn.btn-secondary{background:color-mix(in srgb,var(--mb-p) 6%,var(--card-bg,#fff))!important;border:1px solid color-mix(in srgb,var(--mb-p) 22%,var(--border-color,#e5e7eb))!important;
  color:var(--text-color,inherit)!important;box-shadow:0 2px 6px rgba(15,23,42,.05)}
.btn-secondary:hover:not(:disabled){border-color:var(--mb-p)!important;color:var(--mb-p)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--mb-p) 18%,transparent)}
.btn-danger,.btn.btn-danger{background:linear-gradient(135deg,#ef4444,#f43f5e)!important;color:#fff!important;border:0!important;box-shadow:0 6px 16px rgba(239,68,68,.28)}
.btn-danger:hover:not(:disabled){box-shadow:0 10px 24px rgba(239,68,68,.38)}
.btn-success,.btn.btn-success{background:linear-gradient(135deg,#10b981,#22c55e)!important;color:#fff!important;border:0!important}
/* آیکن داخل دکمه: کمی حرکت */
.btn svg,.btn i{transition:transform .4s var(--mb-spring)}
.btn:hover:not(:disabled) svg{transform:translateX(-2px) rotate(-6deg) scale(1.08)}
/* موج کلیک */
.mb-ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;background:currentColor;opacity:.25;animation:mbRipple .6s var(--mb-ease) forwards;z-index:-1}
@keyframes mbRipple{to{transform:scale(2.6);opacity:0}}
/* حالت در حال کار */
.btn.mb-busy{color:transparent!important;pointer-events:none}
.btn.mb-busy::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.55);border-top-color:#fff;animation:mbSpin .7s linear infinite}
.btn-secondary.mb-busy::before{border-color:color-mix(in srgb,var(--mb-p) 30%,transparent);border-top-color:var(--mb-p)}
@keyframes mbSpin{to{transform:rotate(360deg)}}
.btn.mb-done{animation:mbPop .45s var(--mb-spring)}
@keyframes mbPop{40%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ── تب‌ها: فنر و خط فعال ── */
.tab-link{position:relative;transition:color .25s,background .3s var(--mb-ease),transform .35s var(--mb-spring)!important}
.tab-link:hover{transform:translateY(-1px)}
.tab-link:active{transform:scale(.97)}
.tab-link.active{animation:mbTab .4s var(--mb-spring)}
@keyframes mbTab{0%{transform:scale(.94)}100%{transform:scale(1)}}

/* ── چک‌باکس و رادیو ── */
input[type=checkbox],input[type=radio]{accent-color:var(--mb-p);transition:transform .3s var(--mb-spring)}
input[type=checkbox]:checked,input[type=radio]:checked{animation:mbCheck .35s var(--mb-spring)}
@keyframes mbCheck{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ── فیلدها: هالهٔ فوکوس ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{transition:border-color .2s,box-shadow .25s var(--mb-ease)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{border-color:var(--mb-p)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--mb-p) 16%,transparent)!important;outline:none}

/* ── ورود کارت‌ها به دید ── */
.mb-inview{opacity:0;transform:translateY(14px)}
.mb-inview.mb-shown{opacity:1;transform:none;transition:opacity .55s var(--mb-ease),transform .6s var(--mb-spring)}
.card{transition:box-shadow .3s var(--mb-ease),transform .35s var(--mb-spring)}

/* ── نوار پیشرفت و badge ── */
progress{accent-color:var(--mb-p)}
.notification-badge:not(.hidden){animation:mbPop .5s var(--mb-spring)}

/* ── منوی کناری: آیکن فنری ── */
.sidebar-nav li a svg{transition:transform .4s var(--mb-spring)}
.sidebar-nav li a:hover svg{transform:scale(1.15) rotate(-8deg)}

/* ── دکمهٔ بازگشت به بالا (صفحهٔ اصلی) ── */
.mb-top{position:fixed;left:22px;bottom:22px;z-index:900;width:48px;height:48px;border-radius:16px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#6366f1,#ec4899);box-shadow:0 10px 26px rgba(99,102,241,.4);display:grid;place-items:center;
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .3s,transform .45s var(--mb-spring)}
.mb-top.show{opacity:1;transform:none;pointer-events:auto}
.mb-top:hover{transform:translateY(-3px) scale(1.06)}
.mb-top svg{width:22px;height:22px}
.mb-top .mb-ring{position:absolute;inset:-4px;border-radius:19px;pointer-events:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}