/* ========================================
   ACCOUNT PAGES - Minimal Modern Design
   Shared styles for all account sub-pages
   ======================================== */

/* Theme-aware CSS Variables */
:root {
  --account-primary: var(--primary-color, #111111);
  --account-bg: var(--body-bg, #F9FAFB);
  --account-card-bg: var(--card-bg, #FFFFFF);
  --account-border: var(--border-color, #E5E7EB);
  --account-text: var(--text-color, #111111);
  --account-text-secondary: var(--text-muted, #6B7280);
  --account-radius: 12px;
  --account-radius-sm: 8px;
}

/* Page Containers */
#account-order,
#account-edit,
#account-address,
#account-reward,
#account-transaction,
#account-download,
#account-return,
#account-wishlist,
#account-newsletter,
#account-password {
  background-color: var(--account-bg);
  min-height: 100vh;
  padding-bottom: 40px;
}

/* Section Containers */
.orders-section,
.rewards-section,
.transactions-section,
.account-section-content {
  margin: 0 auto;
  max-width: 800px;
}

/* Page Title */
.title-section,
.page-title-modern {
  font-size: 20px;
  font-weight: 600;
  color: var(--account-text);
  margin: 0 0 20px 0;
}

.title-2 {
  font-size: 16px;
  font-weight: 500;
  color: var(--account-text-secondary);
}

/* Cards */
.order-card,
.address-label,
.account-card {
  background: var(--account-card-bg);
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius);
  padding: 20px;
  margin-bottom: 12px;
}

/* Tables */
.table-responsive {
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius);
  overflow: hidden;
}

.orders-section .table-responsive,
.rewards-section .table-responsive,
.transactions-section .table-responsive {
  background: var(--account-card-bg);
  box-shadow: none;
  border: 1px solid var(--account-border);
}

.orders-section table,
.rewards-section table,
.transactions-section table {
  margin: 0;
}

.orders-section table > thead > tr > td,
.orders-section table > tbody > tr > td,
.rewards-section table > thead > tr > td,
.rewards-section table > tbody > tr > td,
.transactions-section table > thead > tr > td,
.transactions-section table > tbody > tr > td {
  background: var(--account-card-bg);
  padding: 14px 16px;
  color: var(--account-text);
  border-color: var(--account-border);
  font-size: 14px;
}

.orders-section table > thead > tr > td,
.rewards-section table > thead > tr > td,
.transactions-section table > thead > tr > td {
  font-weight: 600;
  background: var(--account-bg);
  color: var(--account-text-secondary);
  font-size: 13px;
}

.orders-section table > tbody > tr > td,
.rewards-section table > tbody > tr > td,
.transactions-section table > tbody > tr > td {
  border-bottom: 1px solid var(--account-border);
}

.orders-section table > tbody > tr:last-child > td,
.rewards-section table > tbody > tr:last-child > td,
.transactions-section table > tbody > tr:last-child > td {
  border-bottom: 0;
}

/* Buttons */
.btn-add,
.btn-primary,
.btn-return,
.btn-view,
.btn-tracking,
.btn-transfer {
  background: var(--account-text);
  border: 1px solid var(--account-text);
  border-radius: var(--account-radius-sm);
  padding: 10px 16px;
  color: var(--account-card-bg);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.btn-default,
.btn-secondary {
  background: transparent;
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius-sm);
  padding: 10px 16px;
  color: var(--account-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.buttons .btn-return {
  background: transparent;
  border: 1px solid var(--account-border);
  color: var(--account-text);
  width: auto;
}

.btn-view,
.btn-tracking,
.btn-transfer {
  background: transparent;
  border: 1px solid var(--account-border);
  color: var(--account-text);
  padding: 8px 14px;
  font-size: 13px;
}

.btn-info {
  background: transparent;
  border: 1px solid var(--account-border);
  color: var(--account-text);
}

.btn-danger {
  background: transparent;
  border: 1px solid var(--account-border);
  color: #DC2626;
}

/* Forms */
#account-edit .form-horizontal,
#account-address .form-horizontal,
#account-password .form-horizontal {
  background: var(--account-card-bg);
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius);
  padding: 24px;
  max-width: 600px;
  margin: 0 auto;
}

#account legend,
fieldset legend {
  font-size: 16px;
  font-weight: 600;
  color: var(--account-text);
  border: none;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--account-border);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label,
.control-label {
  color: var(--account-text);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-control {
  background: var(--account-card-bg);
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--account-text);
}

.form-control:focus {
  border-color: var(--account-text);
  outline: none;
  box-shadow: none;
}

/* Alerts */
.alert {
  border-radius: var(--account-radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--account-border);
}

.alert-success {
  background: var(--account-card-bg);
  border-color: var(--account-border);
  color: var(--account-text);
}

.alert-danger {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}

.alert-warning {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}

/* Empty State */
.text-center img {
  max-width: 120px;
  opacity: 0.6;
  margin-bottom: 16px;
}

.text-center p {
  color: var(--account-text-secondary);
  font-size: 14px;
}

/* Pagination */
.pagination-results {
  padding: 16px 0;
}

.pagination > li > a,
.pagination > li > span {
  color: var(--account-text);
  border-color: var(--account-border);
  background: var(--account-card-bg);
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--account-text);
  border-color: var(--account-text);
  color: var(--account-card-bg);
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  padding: 12px 0;
  margin-bottom: 16px;
}

.breadcrumb > li > a {
  color: var(--account-text-secondary);
}

/* Row Header */
.row.options {
  margin-bottom: 16px;
}

/* Mobile */
@media (max-width: 767px) {
  .orders-section,
  .rewards-section,
  .transactions-section,
  .account-section-content {
    padding: 0 16px;
  }

  .order-card {
    padding: 16px;
  }

  .title-section,
  .page-title-modern {
    font-size: 18px;
  }

  #account-edit .form-horizontal,
  #account-address .form-horizontal,
  #account-password .form-horizontal {
    padding: 20px 16px;
    margin: 0 16px;
  }

  .btn-view,
  .btn-tracking,
  .btn-transfer {
    display: block;
    text-align: center;
    margin-bottom: 8px;
  }
}

/* Utility Classes */
.mb-16 {
  margin-bottom: 16px;
}

.mt-16 {
  margin-top: 16px;
}

@media (min-width: 992px) {
  .text-md-right {
    text-align: right;
  }
  html[dir="rtl"] .text-md-right {
    text-align: left;
  }
  .text-md-left {
    text-align: left;
  }
  html[dir="rtl"] .text-md-left {
    text-align: right;
  }
}