/* ═══════════════════════════════════════════════════════════════
   پنل کاربری (داشبورد مشتری) — منو، کارت‌ها، پیگیری سفارش
   کلاس‌های usr-* عمدا CSS ساده‌اند تا بدون build تیلویند کار کنند.
   ═══════════════════════════════════════════════════════════════ */
.usr-side { width: 16rem; flex-shrink: 0; gap: .5rem; margin-bottom: 2rem; }
.usr-main { flex: 1 1 auto; min-width: 0; }
.usr-side_head { display: flex; align-items: center; gap: .75rem; padding: .5rem .4rem .9rem; border-bottom: 1px solid rgb(229 231 235); }
.dark .usr-side_head { border-color: rgb(255 255 255 / .12); }
.usr-avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgb(59 130 246), rgb(99 102 241)); color: #fff; font-family: DanaMedium, inherit; font-size: 1.15rem;
}
.usr-avatar svg { width: 1.4rem; height: 1.4rem; }
.usr-side_who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.usr-side_who b { font-family: DanaMedium, inherit; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usr-side_who small { color: rgb(156 163 175); font-size: .8rem; text-align: right; }
.usr-nudge { display: block; font-size: .78rem; color: rgb(37 99 235); background: rgb(59 130 246 / .08); border-radius: .6rem; padding: .5rem .65rem; margin-top: .5rem; }
.usr-nav { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; width: 100%; }
.usr-nav_link { display: flex; align-items: center; gap: .65rem; padding: .7rem .75rem; border-radius: .65rem; transition: background-color .2s, color .2s; }
.usr-nav_link svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.usr-nav_link:hover { background: rgb(59 130 246 / .07); color: rgb(59 130 246); }
.usr-nav_link.is-active { background: rgb(59 130 246 / .12); color: rgb(59 130 246); font-family: DanaMedium, inherit; }
.usr-nav_logout { color: rgb(248 113 113); }

/* موبایل: دکمه‌ی تمام‌عرض با نام صفحه‌ی جاری */
.usr-mobile { width: 100%; margin-bottom: 1rem; }
.usr-mobile_btn {
  width: 100%; display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-radius: .8rem;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .08); font-family: DanaMedium, inherit;
}
.dark .usr-mobile_btn { background: rgb(31 41 55); }
.usr-mobile_chev { margin-inline-start: auto; opacity: .6; }
.user-menu .usr-nav_link { font-size: 1.02rem; }

/* ───── کارت‌ها ───── */
.usr-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgb(0 0 0 / .07); padding: 1.1rem; }
.dark .usr-card { background: rgb(31 41 55); }
.usr-card_head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.usr-card_head h2 { font-family: DanaMedium, inherit; font-size: 1.05rem; }
.usr-card_head a { font-size: .82rem; color: rgb(59 130 246); white-space: nowrap; }
.usr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; background: rgb(59 130 246); color: #fff; border-radius: .7rem; padding: .6rem 1.1rem; font-family: DanaMedium, inherit; font-size: .88rem; white-space: nowrap; transition: background-color .2s; }
.usr-btn:hover { background: rgb(37 99 235); }
.usr-hello { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgb(59 130 246 / .1), rgb(99 102 241 / .08)); }
.dark .usr-hello { background: linear-gradient(135deg, rgb(59 130 246 / .18), rgb(31 41 55)); }
.usr-hello h1 { font-family: DanaDemiBold, DanaMedium, inherit; font-size: 1.3rem; }
.usr-hello p { color: rgb(75 85 99); margin-top: .3rem; font-size: .92rem; }
.dark .usr-hello p { color: rgb(209 213 219); }
.usr-todo { border: 1px dashed rgb(245 158 11 / .6); background: rgb(245 158 11 / .06); font-size: .9rem; }
.usr-todo ul { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.usr-todo li::before { content: "○ "; color: rgb(217 119 6); }
.usr-todo a { color: rgb(37 99 235); }

.usr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .usr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.usr-stat { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgb(0 0 0 / .07); padding: .9rem; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .65rem; align-items: center; transition: transform .2s, box-shadow .2s; }
.dark .usr-stat { background: rgb(31 41 55); }
.usr-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgb(0 0 0 / .08); }
.usr-stat svg { grid-row: span 2; width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: .7rem; background: rgb(59 130 246 / .1); color: rgb(59 130 246); }
.usr-stat span { font-size: .78rem; color: rgb(107 114 128); }
.usr-stat b { font-family: DanaDemiBold, DanaMedium, inherit; font-weight: normal; font-size: 1.2rem; }

/* آخرین سفارش + نوار پیگیری */
.usr-last { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.usr-last_imgs { display: flex; }
.usr-last_imgs img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: .7rem; background: rgb(243 244 246); border: 2px solid #fff; }
.dark .usr-last_imgs img { background: rgb(17 24 39); border-color: rgb(31 41 55); }
.usr-last_imgs img + img { margin-inline-start: -.9rem; }
.usr-last_meta { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: rgb(75 85 99); }
.dark .usr-last_meta { color: rgb(209 213 219); }
.usr-last_meta b { font-family: DanaMedium, inherit; font-weight: normal; }
.usr-track { display: flex; margin-top: 1.1rem; counter-reset: s; }
.usr-track li { flex: 1 1 0; position: relative; text-align: center; font-size: .8rem; color: rgb(156 163 175); padding-top: 1.6rem; }
.usr-track li span { position: absolute; top: 0; right: 50%; transform: translateX(50%); width: 1.15rem; height: 1.15rem; border-radius: 999px; background: rgb(229 231 235); z-index: 1; }
.dark .usr-track li span { background: rgb(75 85 99); }
/* خط اتصال از مرکز هر مرحله به مرحله‌ی قبلی (سمت راست در RTL) */
.usr-track li::before { content: ""; position: absolute; top: .5rem; right: -50%; width: 100%; height: 3px; background: rgb(229 231 235); }
.dark .usr-track li::before { background: rgb(75 85 99); }
.usr-track li:first-child::before { display: none; }
.usr-track li.is-done { color: rgb(22 163 74); font-family: DanaMedium, inherit; }
.usr-track li.is-done span, .usr-track li.is-done::before { background: rgb(22 163 74); }
.usr-track li.is-now { color: rgb(59 130 246); font-family: DanaMedium, inherit; }
.usr-track li.is-now span { background: #fff; border: 3px solid rgb(59 130 246); }
.dark .usr-track li.is-now span { background: rgb(31 41 55); }

/* فهرست سفارش‌ها */
.usr-orders { display: flex; flex-direction: column; }
.usr-orders li + li { border-top: 1px solid rgb(243 244 246); }
.dark .usr-orders li + li { border-color: rgb(255 255 255 / .06); }
.usr-orders a { display: flex; align-items: center; gap: .75rem; padding: .7rem .25rem; border-radius: .6rem; transition: background-color .2s; }
.usr-orders a:hover { background: rgb(59 130 246 / .04); }
.usr-orders img { width: 2.75rem; height: 2.75rem; object-fit: contain; border-radius: .55rem; background: rgb(243 244 246); flex-shrink: 0; }
.dark .usr-orders img { background: rgb(17 24 39); }
.usr-orders_main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.usr-orders_main b { font-family: DanaMedium, inherit; font-weight: normal; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-orders_main small, .usr-orders_side small { font-size: .74rem; color: rgb(156 163 175); }
.usr-orders_side { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; white-space: nowrap; }
.usr-orders_side b { font-family: DanaMedium, inherit; font-weight: normal; font-size: .88rem; }
.usr-pill { display: inline-block; font-size: .72rem; border-radius: 999px; padding: .15rem .55rem; }
.usr-pill--green { background: rgb(22 163 74 / .12); color: rgb(22 163 74); }
.usr-pill--blue { background: rgb(59 130 246 / .12); color: rgb(37 99 235); }
.usr-pill--amber { background: rgb(245 158 11 / .14); color: rgb(180 83 9); }
.usr-pill--red { background: rgb(239 68 68 / .12); color: rgb(220 38 38); }

/* پیام‌ها */
.usr-msgs { display: flex; flex-direction: column; gap: .6rem; }
.usr-msgs li { border: 1px solid rgb(229 231 235); border-radius: .75rem; padding: .75rem .85rem; }
.dark .usr-msgs li { border-color: rgb(255 255 255 / .1); }
.usr-msgs li.is-new { border-color: rgb(59 130 246 / .5); background: rgb(59 130 246 / .05); }
.usr-msgs li > div { display: flex; justify-content: space-between; gap: .5rem; }
.usr-msgs b { font-family: DanaMedium, inherit; font-weight: normal; }
.usr-msgs small { font-size: .74rem; color: rgb(156 163 175); white-space: nowrap; }
.usr-msgs p { font-size: .85rem; color: rgb(107 114 128); line-height: 1.9; margin-top: .25rem; }
.usr-empty { text-align: center; color: rgb(107 114 128); padding: 1.5rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; }

@media (max-width: 480px) {
  .usr-orders_side b { font-size: .8rem; }
  .usr-hello h1 { font-size: 1.15rem; }
}
