/* ========================================
   My Orders Page Styles
   ======================================== */

/* Orders Page Container */
.demopo-orders-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.demopo-orders-title {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

/* Tabs Wrapper */
.demopo-orders-tabs-wrapper {
  background: #ffffff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
}

.demopo-orders-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Tab Buttons */
.demopo-order-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  background: #f1f2f7;
  color: #5b5b5b;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.demopo-order-tab:hover {
  background: #e5e7eb;
  color: #2c2c2c;
}

.demopo-order-tab--active {
  background: #b79c86 !important;
  color: #ffffff !important;
}

/* Orders Grid */
.demopo-orders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Order Card */
.demopo-order-card {
  background: #ffffff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
  transition: all 0.3s ease;
}

.demopo-order-card:hover {
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  transform: translateY(-2px);
}

/* Card Header */
.demopo-order-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.demopo-order-card__id {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* Status Badges */
.demopo-order-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.demopo-badge--processing {
  background: #fff4ed;
  color: #e1763a;
}

.demopo-badge--confirmed {
  background: #e9f7f1;
  color: #1c8f6b;
}

.demopo-badge--in-the-way {
  background: #e8f1ff;
  color: #2563eb;
}

.demopo-badge--delivered {
  background: #f3e8ff;
  color: #7c3aed;
}

.demopo-badge--canceled {
  background: #fee2e2;
  color: #e11d48;
}

/* Card Meta */
.demopo-order-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.demopo-order-card__date {
  font-size: 12px;
  color: #9ca3af;
}

.demopo-order-card__total {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

/* Divider */
.demopo-order-card__divider {
  height: 1px;
  background: #eef1f5;
  margin: 16px 0;
}

/* Product Images */
.demopo-order-card__images {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.demopo-order-card__image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #f1f2f7;
  border: 1px solid #e5e7eb;
}

.demopo-order-card__extra {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
}

/* Action Buttons */
.demopo-order-card__actions {
  display: flex;
  gap: 12px;
}

.demopo-order-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  border: none;
}

.demopo-order-btn--primary {
  background: #b79c86;
  color: #ffffff;
}

.demopo-order-btn--primary:hover {
  background: #a98f7a;
  transform: translateY(-1px);
}

.demopo-order-btn--cancel {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
}

.demopo-order-btn--cancel:hover {
  background: #fee2e2;
}

/* Empty State */
.demopo-orders-empty {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
}

.demopo-orders-empty p {
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .demopo-orders-page {
    padding: 24px 16px;
  }

  .demopo-orders-title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .demopo-orders-tabs-wrapper {
    padding: 12px;
  }

  .demopo-orders-tabs {
    gap: 8px;
  }

  .demopo-order-tab {
    padding: 8px 16px;
    font-size: 12px;
  }

  .demopo-orders-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .demopo-order-card {
    padding: 16px;
  }

  .demopo-order-card__image {
    width: 56px;
    height: 56px;
  }
}

/* RTL Support */
body.rtl .demopo-orders-title {
  text-align: right;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

body.rtl .demopo-order-card__header,
body.rtl .demopo-order-card__meta {
  direction: rtl;
  text-align: right;
}

body.rtl .demopo-order-card__id,
body.rtl .demopo-order-card__date,
body.rtl .demopo-order-card__total {
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

body.rtl .demopo-order-card__images {
  direction: rtl;
}

body.rtl .demopo-order-btn {
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* ========================================
   Order Details & Address Styling
   ======================================== */

.demopo-wc-order-details-wrapper {
  margin-top: 32px;
}

/* Section Titles (Order details, Billing address) */
.woocommerce-order-details__title,
.woocommerce-column__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

/* Order Details Table */
.woocommerce-table--order-details {
  border: 1px solid #eef1f5;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 32px;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 16px 24px;
  border-bottom: 1px solid #eef1f5;
  text-align: left;
}

.woocommerce-table--order-details th {
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce-table--order-details td {
  font-size: 15px;
  color: #111827;
}

.woocommerce-table--order-details tr:last-child td,
.woocommerce-table--order-details tr:last-child th {
  border-bottom: none;
}

.woocommerce-table--order-details a {
  color: #111827;
  text-decoration: none;
  font-weight: 500;
}

.woocommerce-table--order-details .product-quantity {
  font-weight: 600;
}

/* Billing & Shipping Address */
.woocommerce-customer-details {
  background: #ffffff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  padding: 24px;
}

.woocommerce-customer-details address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}

/* Order Again Button */
.order-again {
  margin-top: 24px;
  margin-bottom: 32px;
}

.order-again .button {
  display: inline-block;
  background: #b79c86;
  color: #ffffff;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.order-again .button:hover {
  background: #a98f7a;
  transform: translateY(-1px);
}

/* RTL Support */
body.rtl .woocommerce-table--order-details th,
body.rtl .woocommerce-table--order-details td {
  text-align: right;
}

body.rtl .woocommerce-customer-details address {
  text-align: right;
}