/* ══════════════════════════════════════════════════════════════════
   WOOCOMMERCE MY ACCOUNT — SIDEBAR & DASHBOARD STYLES
   - الكمبيوتر (Desktop >= 992px): تظهر القائمة الجانبية على اليمين والمحتوى في اليسار
   - الهاتف (Mobile <= 991px): القائمة الجانبية مخفية تماماً، ويظهر نمط الهاتف المدمج
   - حجم مدمج ومريح دون تضخم وبدون "آخر الطلبات"
   - صفر ظلال (box-shadow: none !important) توافقاً مع اوامر.ini
══════════════════════════════════════════════════════════════════ */

.woocommerce-my-account-wrapper {
  direction: rtl;
  font-family: inherit;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.woocommerce-my-account-wrapper *,
.woocommerce-my-account-wrapper *::before,
.woocommerce-my-account-wrapper *::after {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════
   1. القائمة الجانبية (SIDEBAR)
   مخفية في الهاتف تماماً، وتظهر في الكمبيوتر فقط
══════════════════════════════════════════ */
.woocommerce-MyAccount-navigation,
.acc-sidebar {
  display: none !important;
}

.acc-sidebar-inner {
  background-color: #ffffff;
  border: 1px solid rgba(67, 50, 147, 0.14);
  border-radius: 9px;
  padding: 14px;
  box-shadow: none !important;
}

/* الملف الشخصي في القائمة الجانبية */
.acc-profile-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc-avatar-area {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.acc-avatar-wrap {
  width: 48px;
  height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.acc-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(67, 50, 147, 0.15);
  background-color: #f3f0ff;
  transition: opacity 140ms ease-out;
}

.acc-avatar-wrap:hover .acc-avatar-img {
  opacity: 0.85;
}

.acc-avatar-cam-badge {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-primary, #433293);
  color: #ffffff;
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.acc-avatar-cam-badge svg {
  width: 10px;
  height: 10px;
}

.acc-avatar-loading {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(15, 10, 35, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
}

.acc-avatar-loading.on { display: flex; }
.acc-avatar-loading svg {
  width: 18px;
  height: 18px;
  animation: acc-spin 0.8s linear infinite;
}

@keyframes acc-spin {
  to { transform: rotate(360deg); }
}

.acc-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acc-user-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f0f0f;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-user-email {
  font-size: 12px;
  color: #666677;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: right;
}

.acc-id-wrap {
  width: 100%;
}

.acc-cust-id-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: #f5f3ff;
  border: 1px solid rgba(67, 50, 147, 0.16);
  color: #1e1b4b;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
}

.acc-cust-id-btn:hover {
  background-color: #ede9fe;
  border-color: var(--color-primary, #433293);
}

.acc-id-tag {
  color: var(--color-primary, #433293);
  font-weight: 500;
}

.acc-id-num {
  font-weight: 700;
  color: #1e1b4b;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.acc-copy-icon {
  width: 12px;
  height: 12px;
  stroke: var(--color-primary, #433293);
  flex-shrink: 0;
}

.acc-copy-text {
  font-weight: 600;
  color: var(--color-primary, #433293);
  font-size: 11.5px;
}

.acc-cust-id-btn.copied {
  background-color: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.35);
  color: #059669;
}

.acc-cust-id-btn.copied .acc-copy-icon,
.acc-cust-id-btn.copied .acc-copy-text,
.acc-cust-id-btn.copied .acc-id-tag {
  color: #059669;
  stroke: #059669;
}

.acc-sidebar-divider {
  height: 1px;
  background-color: rgba(67, 50, 147, 0.1);
  margin: 12px 0;
  border: none;
}

/* قائمة الروابط في القائمة الجانبية */
.acc-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acc-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: #1e1b4b;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 140ms ease-out, color 140ms ease-out;
  box-shadow: none !important;
}

.acc-nav-link:hover {
  background-color: #f5f3ff;
  color: var(--color-primary, #433293);
}

.acc-nav-link.is-active {
  background-color: #ede9fe;
  color: var(--color-primary, #433293);
  font-weight: 700;
  border-right: 3px solid var(--color-primary, #433293);
}

.acc-nav-icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  flex-shrink: 0;
}

.acc-nav-label {
  flex: 1;
  text-align: right;
}

.acc-nav-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background-color: #f4f4f5;
  border: 1px solid #e4e4e7;
  color: #52525b;
}

.acc-nav-badge--wallet {
  background-color: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}

.acc-nav-item--logout {
  margin-top: 4px;
  border-top: 1px solid rgba(67, 50, 147, 0.08);
  padding-top: 4px;
}

.acc-nav-link--logout {
  color: #dc2626;
}

.acc-nav-link--logout:hover {
  background-color: #fef2f2;
  color: #b91c1c;
}

.acc-nav-link--logout .acc-nav-icon {
  stroke: #dc2626;
}

/* ══════════════════════════════════════════
   2. منطقة المحتوى (CONTENT)
══════════════════════════════════════════ */
.woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.woocommerce-MyAccount-content .orders-container,
.woocommerce-MyAccount-content .ea-container,
.woocommerce-MyAccount-content .ww,
.woocommerce-MyAccount-content .vod-wrap {
  max-width: 100% !important;
  margin: 0 !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* ══════════════════════════════════════════
   3. لوحة تحكم حسابي المدمجة (DASHBOARD)
══════════════════════════════════════════ */
.dsh-content-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ترويسة الهاتف (تظهر فقط في الهاتف) */
.dsh-profile--mobile {
  background-color: #ffffff;
  border: 1px solid rgba(67, 50, 147, 0.14);
  border-radius: 9px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: none !important;
}

.dsh-profile-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dsh-avatar-box {
  width: 46px;
  height: 46px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.dsh-avatar-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(67, 50, 147, 0.15);
  background-color: #f3f0ff;
  transition: opacity 140ms ease-out;
}

.dsh-avatar-cam-badge {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-primary, #433293);
  color: #ffffff;
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dsh-avatar-cam-badge svg {
  width: 10px;
  height: 10px;
}

.dsh-avatar-loading {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(15, 10, 35, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
}

.dsh-avatar-loading.on { display: flex; }
.dsh-avatar-loading svg {
  width: 18px;
  height: 18px;
  animation: acc-spin 0.8s linear infinite;
}

.dsh-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dsh-user-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f0f0f;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsh-user-email {
  font-size: 12px;
  color: #666677;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: right;
}

.dsh-id-wrap {
  flex-shrink: 0;
}

.dsh-cust-id-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background-color: #f5f3ff;
  border: 1px solid rgba(67, 50, 147, 0.16);
  color: #1e1b4b;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
  white-space: nowrap;
}

.dsh-cust-id-btn:hover {
  background-color: #ede9fe;
  border-color: var(--color-primary, #433293);
}

.dsh-id-tag {
  color: var(--color-primary, #433293);
  font-weight: 500;
}

.dsh-id-num {
  font-weight: 700;
  color: #1e1b4b;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.dsh-copy-icon {
  width: 12px;
  height: 12px;
  stroke: var(--color-primary, #433293);
  flex-shrink: 0;
}

.dsh-copy-text {
  font-weight: 600;
  color: var(--color-primary, #433293);
  font-size: 11.5px;
}

.dsh-cust-id-btn.copied {
  background-color: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.35);
  color: #059669;
}

.dsh-cust-id-btn.copied .dsh-copy-icon,
.dsh-cust-id-btn.copied .dsh-copy-text,
.dsh-cust-id-btn.copied .dsh-id-tag {
  color: #059669;
  stroke: #059669;
}

/* ترويسة الكمبيوتر الترحيبية (ملغية ومخفية) */
.dsh-welcome-hero,
.dsh-welcome-hero--desktop {
  display: none !important;
}

/* البطاقات الأربع المدمجة (~56px) */
.dsh-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dsh-card {
  background-color: #ffffff;
  border: 1px solid rgba(67, 50, 147, 0.14);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  box-shadow: none !important;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
  cursor: pointer;
}

.dsh-card:hover {
  background-color: #f5f3ff;
  border-color: var(--color-primary, #433293);
}

.dsh-card--wallet {
  background-color: #f0fdf4;
  border-color: rgba(16, 185, 129, 0.35);
}

.dsh-card--wallet:hover {
  background-color: #dcfce7;
  border-color: #059669;
}

.dsh-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dsh-card-icon {
  width: 18px;
  height: 18px;
  stroke: var(--color-primary, #433293);
  flex-shrink: 0;
}

.dsh-card-icon--wallet { stroke: #059669; }
.dsh-card-icon--wishlist { stroke: #dc2626; }

.dsh-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dsh-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f0f0f;
  line-height: 1.2;
}

.dsh-card-val {
  font-size: 11.5px;
  color: #666677;
  line-height: 1.2;
}

.dsh-card-val strong {
  color: #0f0f0f;
  font-weight: 600;
}

.dsh-card-val--wallet strong {
  color: #059669;
  font-weight: 700;
}

.dsh-card-arrow {
  width: 14px;
  height: 14px;
  stroke: #9ca3af;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 140ms ease-out, stroke 140ms ease-out;
}

.dsh-card:hover .dsh-card-arrow {
  transform: translateX(-3px);
  stroke: var(--color-primary, #433293);
}

.dsh-card--wallet:hover .dsh-card-arrow {
  stroke: #059669;
}

/* زر تسجيل الخروج في الهاتف */
.dsh-logout-wrap--mobile {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.dsh-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  background-color: transparent;
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none !important;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
  white-space: nowrap;
}

.dsh-logout-btn svg {
  width: 14px;
  height: 14px;
  stroke: #dc2626;
}

.dsh-logout-btn:hover {
  background-color: #fef2f2;
  border-color: #dc2626;
}

/* Toast */
.acc-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1e1b4b;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(67, 50, 147, 0.3);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out;
  z-index: 99999;
  white-space: nowrap;
  direction: rtl;
}

.acc-toast.show { opacity: 1; }
.acc-toast.err { background-color: #b91c1c; border-color: #991b1b; }

/* ══════════════════════════════════════════
   4. التخطيط في الشاشات الكبيرة (DESKTOP >= 992px)
   تظهر القائمة الجانبية في اليمين والمحتوى في اليسار
══════════════════════════════════════════ */
@media (min-width: 992px) {
  .woocommerce-my-account-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 12px 0 32px;
  }

  /* إظهار القائمة الجانبية في الكمبيوتر فقط */
  .woocommerce-MyAccount-navigation,
  .acc-sidebar {
    display: block !important;
    width: 280px;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
  }

  .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
  }

  /* إخفاء ترويسة الهاتف وزر خروج الهاتف في الكمبيوتر (لأنها في الجانبية) */
  .dsh-profile--mobile {
    display: none !important;
  }

  .dsh-logout-wrap--mobile {
    display: none !important;
  }

  .dsh-welcome-hero,
  .dsh-welcome-hero--desktop {
    display: none !important;
  }

  /* إخفاء شبكة المربعات الأربع في الكمبيوتر نهائياً */
  .dsh-cards-grid {
    display: none !important;
  }
}

/* ══════════════════════════════════════════
   5. التخطيط في الشاشات الصغيرة (MOBILE <= 991px)
   القائمة الجانبية مخفية تماماً
══════════════════════════════════════════ */
@media (max-width: 991px) {
  /* إخفاء القائمة الجانبية تماماً في الهاتف */
  .woocommerce-MyAccount-navigation,
  .acc-sidebar {
    display: none !important;
  }

  .woocommerce-my-account-wrapper {
    padding: 8px 0 24px;
  }

  /* إظهار بروفايل وزر خروج الهاتف */
  .dsh-profile--mobile {
    display: flex !important;
  }

  .dsh-welcome-hero--desktop {
    display: none !important;
  }

  /* إظهار شبكة بطاقات التنقل في الهاتف لأن القائمة الجانبية مخفية */
  .dsh-cards-grid,
  .dsh-cards-grid--mobile {
    display: grid !important;
  }

  .dsh-logout-wrap--mobile {
    display: flex !important;
  }
}

@media (max-width: 580px) {
  .dsh-profile--mobile {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .dsh-id-wrap {
    width: 100%;
  }

  .dsh-cust-id-btn {
    width: 100%;
    justify-content: center;
  }

  .dsh-cards-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dsh-logout-wrap--mobile {
    justify-content: stretch;
  }

  .dsh-logout-wrap--mobile .dsh-logout-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acc-avatar-wrap,
  .acc-cust-id-btn,
  .acc-nav-link,
  .dsh-avatar-box,
  .dsh-cust-id-btn,
  .dsh-card,
  .dsh-card-arrow,
  .dsh-logout-btn,
  .acc-toast {
    transition: none !important;
  }
}