/* ==========================================================================
   my-account.css — صفحة "حسابي" (My Account — dashboard/orders/addresses/
   edit-account/login/register)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   لا override قوالب هنا — كل القوالب أصلية من ووكومرس (لا يوجد
   woocommerce/myaccount/ في الثيم)؛ تنسيق بالكامل عبر جسر CSS يستهدف
   أصناف ووكومرس الأصلية (form-row / woocommerce-Input / button / ...)،
   بنفس فلسفة wc-native.css. صفحة "حسابي" نفسها WP Page عادية تمر بـ
   page.php (.page-title + .section جاهزان من هناك).
   ========================================================================== */

/* الحاوية العامة لأي محتوى ووكومرس على هذه الصفحة (نموذج دخول/تسجيل حين
   الخروج، أو لوحة التحكم حين الدخول) */
.woocommerce-account .woocommerce {
  display: block;
}

/* ---- تخطيط لوحة التحكم: تنقّل + محتوى -------------------------------- */
@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: inline-start; /* أول عنصر = يمين في RTL */
    width: 240px;
    margin-inline-end: var(--space-24);
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    overflow: hidden; /* يفتح BFC حتى يلتف المحتوى بجانب العنصر العائم */
  }
  /* .woocommerce-MyAccount-content قد يكون أقصر من التنقّل العائم (مثلًا
     صفحة الطلبات وهي فارغة) — بدون هذا يبقى ارتفاع الغلاف .woocommerce
     محسوبًا من العنصر غير العائم فقط، فيمتد التنقّل العائم خارج الغلاف
     ويتراكب فوق الفوتر بدل التوقّف عنده. */
  .woocommerce-account .woocommerce {
    display: flow-root;
  }
}

/* بطاقة التنقّل بين تبويبات الحساب */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-24);
}
@media (min-width: 900px) {
  .woocommerce-MyAccount-navigation ul {
    margin-block-end: 0;
  }
}
.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding-block: var(--space-12);
  padding-inline: var(--space-16);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-align: start;
}
.woocommerce-MyAccount-navigation-link a:hover {
  background-color: var(--color-bg-alt);
}
.woocommerce-MyAccount-navigation-link.is-active a {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--color-error);
}

/* بطاقة المحتوى */
.woocommerce-MyAccount-content {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
}
.woocommerce-MyAccount-content > p {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.woocommerce-MyAccount-content > p:last-child {
  margin-bottom: 0;
}
.woocommerce-MyAccount-content mark {
  background: none;
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

/* ---- جدول الطلبات ----------------------------------------------------- */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-orders-table thead {
  display: none;
}
@media (min-width: 700px) {
  .woocommerce-orders-table thead {
    display: table-header-group;
  }
  .woocommerce-orders-table__header {
    padding-block: var(--space-12);
    padding-inline: var(--space-8);
    border-block-end: var(--border-width) solid var(--color-border);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
    text-align: start;
  }
}
.woocommerce-orders-table__row {
  display: block;
  padding: var(--space-16);
  margin-block-end: var(--space-12);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
@media (min-width: 700px) {
  .woocommerce-orders-table__row {
    display: table-row;
    padding: 0;
    margin-block-end: 0;
    border: none;
    border-block-end: var(--border-width) solid var(--color-border);
    border-radius: 0;
  }
}
.woocommerce-orders-table__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text);
  border: none;
}
.woocommerce-orders-table__cell::before {
  content: attr(data-title);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
@media (min-width: 700px) {
  .woocommerce-orders-table__cell {
    display: table-cell;
    padding-block: var(--space-12);
    padding-inline: var(--space-8);
  }
  .woocommerce-orders-table__cell::before {
    content: none;
  }
}
.woocommerce-orders-table__cell-order-number a {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.woocommerce-orders-table__cell-order-actions {
  justify-content: flex-end;
}
.woocommerce-orders-table__cell-order-actions .button {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-8);
  padding-inline: var(--space-16);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.woocommerce-orders-table__cell-order-actions .button.view:hover,
.woocommerce-orders-table__cell-order-actions .button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* شارة حالة الطلب — لونها حسب صف <tr class="...--status-{status}">،
   بلا أي تعديل PHP: الكلاس أصلي من WooCommerce. */
.woocommerce-orders-table__cell-order-status {
  font-weight: var(--fw-medium);
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
  color: var(--color-success);
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
  color: var(--color-error);
}
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
  color: var(--color-gold);
}

.woocommerce-Pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-block-start: var(--space-16);
}
.woocommerce-Pagination .button {
  padding-block: var(--space-8);
  padding-inline: var(--space-16);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--fs-xs);
}

/* ---- العناوين (Addresses) ---------------------------------------------- */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
@media (min-width: 640px) {
  .woocommerce-Addresses {
    grid-template-columns: repeat(2, 1fr);
  }
}
.woocommerce-Address {
  padding: var(--space-20);
  background-color: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-block-end: var(--space-12);
}
.woocommerce-Address-title h2 {
  font-size: var(--fs-md);
  margin-bottom: 0;
}
.woocommerce-Address-title .edit {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}
.woocommerce-Address address {
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

/* ---- الفورمات (edit-account / edit-address / تسجيل الدخول والتسجيل) --
   لا override للقوالب، فالأصناف أصلية من ووكومرس (form-row/woocommerce-
   Input/button)، بقيَم مطابقة لـ .field/.input/.btn (forms.css/buttons.css)
   بدل إعادة استخدامها مباشرة على ماركप لا نتحكّم فيه. */
.woocommerce form .form-row {
  margin-bottom: var(--space-16);
}
.woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.woocommerce form .form-row label .required {
  color: var(--color-error);
  text-decoration: none;
}
.woocommerce form .form-row label .optional {
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding-block: var(--space-12);
  padding-inline: var(--space-16);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  transition: border-color 0.2s ease;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--color-error);
}

@media (min-width: 480px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    width: calc(50% - var(--space-8));
  }
  .woocommerce form .form-row-first {
    float: inline-end; /* أول عنصر = يمين في RTL */
  }
  .woocommerce form .form-row-last {
    float: inline-start;
  }
}
.woocommerce form::after {
  content: "";
  display: block;
  clear: both;
}

.woocommerce form .form-row .show-password-input {
  inset-inline-end: var(--space-12);
  inset-inline-start: auto;
}

.woocommerce form button.button,
.woocommerce form input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-12);
  padding-inline: var(--space-24);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  border: none;
}
.woocommerce form button.button:hover,
.woocommerce form input.button:hover {
  background-color: var(--color-primary-darkest);
}

.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  color: var(--color-text);
}

/* نموذجا الدخول والتسجيل جنبًا إلى جنب على الشاشات الواسعة */
.u-columns.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}
@media (min-width: 768px) {
  .u-columns.col2-set {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* بطاقة الدخول/التسجيل الفعلية بطاقة زجاجية داكنة من .auth-form (auth-form.css)،
   لا "سطح" فاتح — إزالة قصدية، كانت تكسب الأولوية على .auth-form بنفس درجة
   التخصيص (نفس ملف my-account.css محمّل بعد components/auth-form.css)،
   فتُخفي النص الفاتح على خلفية بيضاء. اكتُشف أثناء التحقق البصري من تبويبات
   Phase 6 (auth-login-tabs.js) — انظر form-login.php، الاستخدام الوحيد لهذين الصفّين. */