/* ================================================================
   pages-shared.css — تخطيط الصفحات الكاملة فقط
   ملاحظة: ستايلات المنتجات/الطلبات تأتي من overlay-panels.css
================================================================ */

/* ── page hero ── */
.page-hero {
  padding: 20px 0 18px;
}
.page-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #002650;
  margin-bottom: 8px;
}
.page-breadcrumb a { color: #002650; text-decoration: none; }
.page-breadcrumb a:hover { color: #0056b3; }
.page-breadcrumb i { font-size: 0.6rem; }
.page-hero__title {
  font-size: 1.5rem;
  font-weight: 900;
  color:#003c77;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.page-hero__title i {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.page-hero__badge {
  background: #6fc282;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── main layout ── */
.page-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 90px;
  display: grid;
  gap: 24px;
}
.page-layout--with-sidebar {
  grid-template-columns: 1fr;
  align-items: start;
}
.page-sidebar { order: -1; }

@media (min-width: 901px) {
  .page-hero__title { font-size: 2rem; }
  .page-hero__title i { width: 50px; height: 50px; font-size: 1.5rem; }
  .page-layout { padding-bottom: 60px; }
  .page-layout--with-sidebar { grid-template-columns: 1fr 320px; }
  .page-sidebar { order: 0; }
}

/* ── page card ── */
.page-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,60,119,0.07);
  overflow: hidden;
}
.page-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e8edf5;
  gap: 12px;
}
.page-card__title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #003c77;
  display: flex;
  align-items: center;
  gap: 7px;
}
.page-card__title i { color: #6fc282; }
.page-card__action {
  font-size: 0.78rem;
  color: #9ca3af;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.18s;
}
.page-card__action:hover { background: #eef2f9; color: #003c77; }
.page-card__body { padding: 20px; }

/* ── page empty state ── */
.page-empty {
  text-align: center;
  padding: 55px 20px;
}
.page-empty__icon {
  width: 76px; height: 76px;
  background: #f0f4fa;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.9rem;
  color: #c8d4e8;
}
.page-empty h3 { font-size: 1rem; color: #003c77; margin-bottom: 7px; }
.page-empty p  { font-size: 0.84rem; color: #667085; margin-bottom: 18px; }
.page-empty__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ── sidebar ── */
.page-sidebar { display: flex; flex-direction: column; gap: 16px; }

.summary-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,60,119,0.07);
  padding: 18px;
}
.summary-card__title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #003c77;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e8edf5;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.83rem;
  color: #667085;
  padding: 4px 0;
}
.summary-row.grand {
  font-size: 0.95rem;
  font-weight: 900;
  color: #003c77;
  border-top: 2px solid #e8edf5;
  margin-top: 8px;
  padding-top: 11px;
}
.summary-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ── CTA buttons ── */
.btn-primary-full {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: #6fc282;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: "Cairo", Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-primary-full:hover { background: #5aab6e; }
.btn-outline-full {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  color: #003c77;
  border: 1.5px solid #dde3ed;
  border-radius: 12px;
  font-family: "Cairo", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline-full:hover { border-color: #003c77; background: #eef2f9; }

/* ── promo input ── */
.promo-input-wrap {
  display: flex;
  gap: 6px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #e8edf5;
}
.promo-input-wrap input {
  flex: 1;
  padding: 8px 11px;
  border: 1.5px solid #dde3ed;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s;
}
.promo-input-wrap input:focus { border-color: #003c77; }
.promo-input-wrap button {
  padding: 8px 13px;
  background: #003c77;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.promo-input-wrap button:hover { background: #002a5a; }

/* ── trust mini ── */
.trust-mini {
  background: #f7f9fc;
  border-radius: 12px;
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trust-mini__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  color: #667085;
}
.trust-mini__item i { color: #6fc282; width: 16px; text-align: center; }

/* ── quote info banner ── */
.quote-summary-info {
  background: linear-gradient(135deg, #003c77 0%, #00539a 100%);
  border-radius: 14px;
  padding: 16px;
  color: #fff;
}
.quote-summary-info__title { font-weight: 800; font-size: 0.92rem; margin-bottom: 5px; }
.quote-summary-info__sub   { font-size: 0.8rem; opacity: 0.85; }

/* ── filter bar (orders page) ── */
.filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid #e8edf5;
  background: #f7f9fc;
}
/* reuse panel-filter-btn from overlay-panels.css — no duplication needed */

/* ── login prompt ── */
.login-prompt {
  text-align: center;
  padding: 55px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,60,119,0.07);
}
.login-prompt__icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #eef2f9;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  color: #003c77;
}
.login-prompt h3 { font-size: 1.05rem; color: #003c77; margin-bottom: 7px; }
.login-prompt p  { font-size: 0.84rem; color: #667085; margin-bottom: 18px; }
.login-prompt__btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.login-prompt__btn-primary {
  padding: 9px 22px;
  background: #003c77;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}
.login-prompt__btn-primary:hover { background: #002a5a; }
.login-prompt__btn-outline {
  padding: 9px 22px;
  background: transparent;
  color: #003c77;
  border: 1.5px solid #dde3ed;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.login-prompt__btn-outline:hover { border-color: #003c77; background: #eef2f9; }

/* ================================================================
   pages-shared.css — إضافات v2
   CSS classes للعناصر التي كانت تُكتب كـ inline styles في JS
================================================================ */

/* ── card-item-row: صف منتج داخل بطاقة طلب/عرض سعر ── */
.card-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #e8edf5;
}
.card-item-row:last-child { border-bottom: none; }

.card-item-row__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e8edf5;
  background: #f7f9fc;
  flex-shrink: 0;
}
.card-item-row__info {
  flex: 1;
  min-width: 0;
}
.card-item-row__name {
  font-size: .83rem;
  font-weight: 700;
  color: #003c77;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-item-row__id {
  font-size: .7rem;
  color: #9ca3af;
}
.card-item-row__qty {
  text-align: end;
  flex-shrink: 0;
}
.card-item-row__qty-label { font-size: .75rem; color: #667085; }
.card-item-row__qty-total { font-size: .82rem; font-weight: 700; color: #003c77; }

/* ── order-card: بطاقة الطلب في الصفحة الكاملة ── */
.order-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,60,119,0.07);
  margin-bottom: 14px;
  overflow: hidden;
}
.order-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-alt, #f7f9fc);
  border-bottom: 1px solid #e8edf5;
  flex-wrap: wrap;
  gap: 10px;
}
.order-card__head-end { text-align: end; }
.order-card__items { padding: 0 14px; }
.order-card__items-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  font-size: .72rem;
  color: #9ca3af;
}
.order-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-alt, #f7f9fc);
  border-top: 1px solid #e8edf5;
  flex-wrap: wrap;
  gap: 8px;
}
.order-card__foot-total {
  font-size: .85rem;
  font-weight: 800;
  color: #003c77;
}
.order-card__foot-actions { display: flex; gap: 8px; }

/* ── order-card: رقم لون مخصص ── */
.order-card__num           { font-size: .88rem; font-weight: 800; color: #003c77; }
.order-card__num--quote    { color: #5b6af7; }
.order-card__num--bulk     { color: #7c3aed; }

/* ── type-tag: وسم نوع الطلب (مجمع، عرض سعر...) ── */
.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}
.type-tag--bulk    { background: #ede9fe; color: #5b21b6; }
.type-tag--quote   { background: #eef2ff; color: #5b6af7; }

/* ── overflow-count: "و N منتجات أخرى" ── */
.overflow-count {
  font-size: .78rem;
  color: #9ca3af;
  padding-top: 6px;
  text-align: center;
}

/* ── status-badge extra ── */
.panel-status-badge--processing { background: #eef2ff; color: #5b6af7; }

/* ── quote-info-tag: "سعر مخصص بعد المراجعة" ── */
.quote-price-tag {
  font-size: .78rem;
  color: #28a745;
  margin-top: 4px;
}

/* ── quote-action-status: نص حالة في footer بطاقة عرض سعر ── */
.quote-action-status {
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.quote-action-status--pending    { color: #5b6af7; }
.quote-action-status--processing { color: #856404; }
.quote-action-status--rejected   { color: #e53935; }
.quote-action-status--converted  { color: #28a745; }

/* ── btn-primary-full variants ── */
.btn-primary-full--inline  { width: auto; padding: 10px 24px; }
.btn-primary-full--approve { width: auto; padding: 8px 16px; font-size: .82rem; background: #28a745; }
.btn-primary-full--approve:hover { background: #218838; }

/* ── panel-filter-btn--danger: زر الإلغاء ── */
.panel-filter-btn--danger {
  color: #e53935;
  border-color: #e53935;
}
.panel-filter-btn--danger:hover {
  background: #ffecec;
}

/* ── panel-sent-banner--info: بانر معلومات بلون أزرق ── */
.panel-sent-banner--info {
  background: #eef5ff;
  border-color: #b3ccf5;
  color: #003c77;
  margin-top: 14px;
}

/* ── page-empty--compact: حالة فارغة بحشو أصغر ── */
.page-empty--compact { padding: 30px 0; }

/* ================================================================
   pages-shared.css — إضافات v3
   كلاسات استُبدلت بها الـ inline styles في cart.html و overlay-panels.js
================================================================ */

/* ── أيقونة الإيصال في ملخص الطلب ── */
.page-cart__receipt-icon {
  color: #6fc282;
  margin-left: 6px;
}

/* ── رسوم التوصيل المجانية ── */
.page-cart__free-delivery {
  color: #6fc282;
  font-weight: 700;
}

/* ── صف أزرار أسفل قائمة السلة ── */
.page-cart__bottom-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── btn-outline-full--inline: نسخة inline من الزر الخارجي ── */
.btn-outline-full--inline {
  width: auto;
  padding: 10px 20px;
}

/* ── زر retry داخل بانل السلة ── */
.panel-cart__retry-btn {
  background: #003c77;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 20px;
  font-family: "Cairo", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}
.panel-cart__retry-btn:hover { background: #002a5a; }


/* ── required star في نماذج التسجيل ── */
.panel-auth__required {
  color: #e53935;
}

/* ── كلاس إخفاء القسم التجاري في نموذج التسجيل ── */
.panel-auth__section--hidden {
  display: none;
}

/* ── padding-left للحقل الذي يحتوي على toggle ── */
.panel-auth__pwd-input {
  padding-left: 36px;
}

/* ── ألوان أيقونات الشبكات الاجتماعية في تسجيل الدخول ── */
.panel-auth__social-btn-icon--google { color: #EA4335; }
.panel-auth__social-btn-icon--apple  { color: #000;    }

/* ── زر submit في نماذج Auth ── */
.panel-auth__submit-btn {
  margin-bottom: 14px;
}

/* ── badge مخفي بالكلاس (بدل inline display:none) ── */
.side-panel__count-badge--hidden {
  display: none;
}

/* ── success alert مرئي عند التسجيل الناجح ── */
.panel-auth__alert--visible {
  display: flex;
}

/* ================================================================
   pages-shared.css — إضافات v4
   كلاسات الطلبات: status badges، order cards، track modal، search
   (دُمجت هنا بدل ملف orders-extra.css منفصل)
================================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   شارة حالة الطلب — order-status
   القيم مطابقة لـ OrderStatus enum في الـ backend:
   Pending | Accepted | Shipping | Delivered
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.order-status i { font-size: 0.7rem; }

.order-status--pending   { background: #fffbeb; color: #856404; }
.order-status--accepted  { background: #eff6ff; color: #1d4ed8; }
.order-status--shipping  { background: #f5f3ff; color: #7c3aed; }
.order-status--delivered { background: #ecfdf5; color: #0a7a3b; }
.order-status--rejected  { background: #fef2f2; color: #b91c1c; }

/* ── banner رفض الطلب داخل modal التتبع ── */
.order-track__rejected {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #b91c1c;
}
.order-track__rejected i { font-size: 1.2rem; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   بطاقة الطلب — order-card (override الـ base الموجود)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.order-card__head-start   { display: flex; flex-direction: column; gap: 4px; }
.order-card__head-end     { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.order-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.order-card__id {
  font-size: 0.9rem;
  font-weight: 700;
  color: #003c77;
  font-family: monospace;
}
.order-card__id-wrap      { display: flex; flex-direction: column; gap: 2px; }
.order-card__date         { font-size: 0.8rem; color: #94a3b8; }
.order-card__total        { font-size: 1rem; font-weight: 700; color: #003c77; }
.order-card__more         { font-size: 0.78rem; color: #9ca3af; padding: 6px 0 2px; text-align: center; }
.order-card__totals-mini  { display: none; gap: 14px; font-size: 0.8rem; color: #64748b; flex-wrap: wrap; }
.order-card__grand        { font-weight: 700; color: #003c77; }
.order-card__actions      { display: flex; gap: 8px; flex-shrink: 0; }

/* ── أزرار بطاقة الطلب ── */
.order-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: all 0.18s;
  white-space: nowrap;
}
.order-card__btn span { display: none; }
.order-card__btn:hover              { border-color: #003c77; color: #003c77; background: #eef2f9; }
.order-card__btn--track             { border-color: #003c77; color: #003c77; }
.order-card__btn--track:hover       { background: #003c77; color: #fff; }

/* ── صف منتج داخل بطاقة الطلب ── */
.order-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.order-item-row:last-of-type { border-bottom: none; }

.order-item-row__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e8edf5;
  background: #f7f9fc;
  flex-shrink: 0;
}
.order-item-row__info      { flex: 1; min-width: 0; }
.order-item-row__name      { font-size: 0.83rem; font-weight: 700; color: #003c77; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-item-row__spn       { font-size: 0.72rem; color: #9ca3af; font-family: monospace; margin-top: 2px; }
.order-item-row__qty       { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.order-item-row__qty-num   { font-size: 0.8rem; color: #64748b; }
.order-item-row__qty-price { font-size: 0.85rem; font-weight: 700; color: #003c77; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   banner "تم إرسال طلبك بنجاح"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.order-placed-banner {
  display: none;
  align-items: center;
  gap: 12px;
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0a7a3b;
}
.order-placed-banner i { font-size: 1.2rem; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   حقل البحث في صفحة الطلبات
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.orders-search-wrap {
  position: relative;
  margin: 14px 0;
  padding: 0 20px;
}
.orders-search-wrap input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border: 1.5px solid #e8edf5;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
}
.orders-search-wrap input:focus { border-color: #003c77; }
.orders-search-wrap i {
  position: absolute;
  right: 33px;
  top: 50%;
  transform: translateY(-50%);
  color: #c8d4e8;
  pointer-events: none;
}

/* ── stats أيقونة في summary-card ── */
.summary-card__icon { color: #6fc282; margin-left: 6px; }

/* ── stat قيم ملوّنة ── */
.stat--pending   { color: #856404; font-weight: 700; }
.stat--accepted  { color: #1d4ed8; font-weight: 700; }
.stat--shipping  { color: #7c3aed; font-weight: 700; }
.stat--delivered { color: #0a7a3b; font-weight: 700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Modal تتبع الطلب — order-track-modal
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.order-track-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.order-track-modal--visible {
  opacity: 1;
  pointer-events: auto;
}
.order-track-modal__box {
  background: #fff;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 60, 119, 0.2);
  transform: translateY(20px);
  transition: transform 0.2s;
}
.order-track-modal--visible .order-track-modal__box { transform: translateY(0); }

.order-track-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e8edf5;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.order-track-modal__title { font-size: 1rem; font-weight: 700; color: #003c77; margin: 0; }
.order-track-modal__close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.order-track-modal__close:hover { background: #003c77; color: #fff; border-color: #003c77; }
.order-track-modal__body { padding: 20px; }

/* ── معلومات الطلب المختصرة ── */
.order-track-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.order-track-meta__item { background: #f7f9fc; border-radius: 10px; padding: 10px 12px; text-align: center; }
.order-track-meta__label { font-size: 0.72rem; color: #9ca3af; font-weight: 600; margin-bottom: 4px; }
.order-track-meta__value { font-size: 0.85rem; font-weight: 700; color: #1e293b; }

/* ── مراحل التتبع ── */
.order-track__stages {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.order-track__step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0.35; flex-shrink: 0;
}
.order-track__step--done,
.order-track__step--current { opacity: 1; }

.order-track__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; color: #9ca3af;
  transition: all 0.2s;
}
.order-track__step--done .order-track__icon    { background: #ecfdf5; border-color: #0a7a3b; color: #0a7a3b; }
.order-track__step--current .order-track__icon { background: #003c77; border-color: #003c77; color: #fff; box-shadow: 0 0 0 4px rgba(0,60,119,0.12); }

.order-track__label { font-size: 0.7rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.order-track__step--done .order-track__label    { color: #0a7a3b; }
.order-track__step--current .order-track__label { color: #003c77; }

.order-track__line {
  flex: 1; height: 2px; background: #e2e8f0;
  margin: 0 4px; margin-bottom: 22px; min-width: 16px;
}

/* ── إجمالي الطلب في المودال ── */
.order-track-modal__items-title {
  font-size: 0.88rem; font-weight: 700; color: #003c77;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9;
}
.order-track-modal__total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-top: 1.5px dashed #e2e8f0;
  margin-top: 6px; font-size: 0.95rem; font-weight: 700; color: #003c77;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Responsive (mobile-first)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) {
  .order-card__head { padding: 14px 16px; }
  .order-card__items { padding: 10px 16px; }
  .order-card__foot { padding: 10px 16px; }
  .order-card__totals-mini { display: flex; }
  .order-card__btn { padding: 7px 13px; }
  .order-card__btn span { display: inline; }

  .order-track-meta { grid-template-columns: repeat(3, 1fr); }
  .order-track-modal { align-items: center; }
  .order-track-modal__box { border-radius: 16px; max-height: 88vh; }
}

/* ordersLoginPrompt — مخفي افتراضياً (يُظهره JS عند الحاجة) */
.orders-login-prompt--hidden { display: none; }