/* ==============================
   بدنه سفارش ها
============================== */
.woocommerce-MyAccount-content-wrapper {
  border-radius: 15px !important;
  padding-bottom: 20px !important;
}


/* ==============================
   راست اوردن متن پیام
============================== */
@media (min-width: 576px) {

  .woocommerce-info,
  .woocommerce-message {
    flex-direction: row !important;
    justify-content: flex-end;
  }
}

/* ==============================
   کارت‌های خلاصه سفارش‌ها
============================== */
.orders-summary-cards {
  display: grid;
  gap: 15px;
  margin-bottom: 25px;
  justify-items: center;
  /* وسط چین کارت‌ها */
  text-align: center;
  /* متن وسط چین */
  width: 100%;
}

.summary-card {
  border-radius: 12px;
  box-shadow: 0px 7px 14px 4px rgba(0, 0, 0, 0.5);
  padding: 20px 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* عرض کارت همیشه 100% سلول grid */
}

.summary-card:hover {
  transform: translateY(-4px);
}

/* رنگ‌های کارت‌ها */
.card-days {
  background-color: #FFEED8;
  color: #AD5D00;
}

.card-counts {
  background-color: #D8E8FF;
  color: #00387A;
}

.card-money {
  background-color: #D8FFD8;
  color: #00631C;
}

.card-average {
  background-color: #F7DBFF;
  color: #7D00A3;
}

/* هاور کارت‌ها */
.card-days:hover {
  background-color: #FFC881;
  box-shadow: 0 4px 15px #AD5D00;
}

.card-counts:hover {
  background-color: #8EBDFF;
  box-shadow: 0 4px 15px #00387A;
}

.card-money:hover {
  background-color: #A1FFA1;
  box-shadow: 0 4px 15px #00631C;
}

.card-average:hover {
  background-color: #F0BCFF;
  box-shadow: 0 4px 15px #7D00A3;
}

.summary-card .card-icon {
  font-size: 30px;
  margin-bottom: 10px;
}

.fa-calendar,
.summary-card .value-days {
  color: #AD5D00;
}

.fa-receipt {
  color: #6366f1;
}

.fa-clock {
  color: #7d00a3;
}

.fa-box,
.summary-card .value-counts {
  color: #00387A;
}

.fa-money-bill-wave,
.summary-card .value-money {
  color: #00631C;
}

.summary-card .card-icon .fa-chart-line,
.summary-card .value-average {
  color: #7d00a3;
}

.summary-card .card-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
  color: #000;
}

.summary-card .card-value {
  font-size: 18px;
  font-weight: 700;
}

.summary-card .card-target {
  font-size: 12px;
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.summary-card .card-target strong {
  color: #1f2937;
  font-weight: 700;
}

/* موبایل: 2 ستون و 2 ردیف */
@media (max-width: 767px) {
  .orders-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary-card {
    width: 100%;
  }
}

/* دسکتاپ: 4 کارت در یک ردیف */
@media (min-width: 768px) {
  .orders-summary-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .summary-card {
    width: 100%;
    /* کارت تمام عرض سلول grid */
  }
}


/* ==============================
   کارت‌های سفارش
============================== */
.my-orders-wrapper {
  display: grid;
  gap: 20px;
}

.order-card {
  background: var(--color-background-light);
  border-radius: 15px;
  box-shadow: 0px 5px 10px 2px var(--color-shadow);
  padding: 16px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.order-card:hover {
  transform: translateY(-2px);
  background-color: var(--color-accent);
  box-shadow: 0 3px 10px 2px var(--color-shadow);
}

.order-card-header {
  font-weight: 600;
  font-size: 1rem;
  color: #374151;
  margin-bottom: 10px;
}

.order-card-header i {
  margin-left: 6px;
}

.order-card-body p {
  margin: 6px 0;
  font-size: 0.95rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-card-status {
  margin: 10px 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-completed .order-status {
  color: #16a34a;
}

.status-pending .order-status {
  color: #eab308;
}

.status-on-hold .order-status {
  color: #8800aa;
}

.status-failed .order-status {
  color: #f38020;
}

.status-cancelled .order-status {
  color: #dc2626;
}

.status-processing .order-status {
  color: #2563eb;
}

.order-card-footer {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.order-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: solid 3px;
  border-radius: 50%;
  /* دایره‌ای */
  text-decoration: none !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.order-action-btn i {
  font-size: smaller;
}

/* رنگ آیکون‌ها بر اساس اکشن */
.order-action-btn.pay {
  color: #28a745 !important;
  /* سبز برای پرداخت */
}
.order-action-btn.pay i {
  color: #28a745;
  /* سبز برای پرداخت */
}

.order-action-btn.view {
  color: #0043cc !important;
  /* آبی برای نمایش */
}
.order-action-btn.view i {
  color: #0043cc;
  /* آبی برای نمایش */
}

.order-action-btn.cancel {
  color: #dc3545 !important;
  /* قرمز برای لغو */
}
.order-action-btn.cancel i {
  color: #dc3545;
  /* قرمز برای لغو */
}

/* افکت هاور جذاب */
.order-action-btn:hover {
  transform: scale(1.2);
  cursor: pointer;
}



/* ==============================
   اعلان زمانی که سفارش ندارد
============================== */
.no-orders-notice {
  background: var(--color-background-light);
  border: 1px solid #ff6b6b;
  color: #ff3b3b;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.no-orders-notice i {
  font-size: 36px;
  color: #ff3b3b;
}

.no-orders-notice a {
  margin-top: 8px;
  color: #fff;
  background: #ff3b3b;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.no-orders-notice a:hover {
  background: #e03131;
}

/* ==============================
   واکنش‌گرایی دسکتاپ
============================== */
@media (min-width: 992px) {
  .order-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .order-card-header {
    flex: 1;
    margin: 0;
  }

  .order-card-body {
    flex: 4;
    display: flex;
    gap: 24px;
    margin: 0;
    justify-content: space-around;
  }

  .order-card-status {
    flex: 1;
    margin: 0;
    text-align: center;
  }

  .order-card-footer {
    flex: 1;
    margin: 0;
    text-align: end;
  }
}