/*
 * Solarichi WooCommerce — My account pages
 * Auto-split from the original monolithic woocommerce.css in Phase 8.
 * Keep visual changes in the relevant module to avoid loading store CSS everywhere.
 */

/*==============================
  My Account — Material Design 3
===============================*/

/* ─── My Account Layout ─── */
.woocommerce-MyAccount-content {
  width: 100%;
}

.woocommerce-MyAccount-navigation {
  display: none;
}

.md3-myaccount-wrap {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  position: relative;
}

.md3-myaccount-content {
  flex: 1;
  min-width: 0;
}

.md3-myaccount-wrap .md3-account-nav {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
  max-height: calc(100vh - var(--header-height) - var(--space-6));
  overflow-y: auto;
}

@media (max-width: 768px) {
  .md3-myaccount-wrap {
    flex-direction: column;
  }

  .md3-myaccount-wrap .md3-account-nav {
    width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.woocommerce-MyAccount-navigation {
  display: none;
}

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
  margin-bottom: var(--space-3);
}

.woocommerce-MyAccount-content > p:first-child {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-variant);
  line-height: 1.8;
}

/* ─── Section Header (shared) ─── */
.md3-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-section-header h2,
.md3-section-header h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0;
  flex: 1;
}

.md3-section-header svg {
  flex-shrink: 0;
  color: var(--md3-primary);
}

.md3-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--md3-primary);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  transition: background var(--transition);
}

.md3-back-link:hover {
  background: var(--color-primary-container);
}

/* ─── Login Page ─── */
.md3-login-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-6) 0;
}

.md3-login-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-2);
  overflow: hidden;
}

.md3-login-header {
  text-align: center;
  padding: var(--space-4) var(--space-4) var(--space-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--md3-primary) 6%, var(--color-surface)), color-mix(in srgb, var(--md3-secondary) 3%, var(--color-surface)));
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-login-header svg {
  margin-bottom: var(--space-1);
}

.md3-login-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-on-surface);
  margin: 0 0 6px;
}

.md3-login-header p {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.md3-login-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-login-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.md3-login-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--md3-primary);
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transition: all var(--transition);
}

.md3-login-tab.active {
  color: var(--md3-primary);
}

.md3-login-tab.active::after {
  opacity: 1;
  left: 10%;
  right: 10%;
}

.md3-login-tab:hover:not(.active) {
  color: var(--md3-primary);
  background: color-mix(in srgb, var(--md3-primary) 4%, transparent);
}

.md3-login-form-wrap {
  display: none;
  padding: var(--space-3);
}

.md3-login-form-wrap.active {
  display: block;
  animation: md3FadeSlideUp 0.35s ease-out;
}

.md3-login-form-wrap form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.md3-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md3-field label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-on-surface);
}

.md3-field label .required {
  color: var(--md3-error);
}

.md3-field input[type="text"],
.md3-field input[type="email"],
.md3-field input[type="password"],
.md3-field input[type="tel"],
.md3-field textarea,
.md3-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-surface-container-high);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface);
  background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  direction: rtl;
}

.md3-field input:focus,
.md3-field textarea:focus,
.md3-field select:focus {
  outline: none;
  border-color: var(--md3-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md3-primary) 12%, transparent);
}

.md3-field-desc {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
  margin-top: 2px;
}

.md3-field-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.md3-field-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.md3-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-variant);
}

.md3-checkbox-label input[type="checkbox"] {
  accent-color: var(--md3-primary);
  width: 18px;
  height: 18px;
}

.md3-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-spring);
  box-shadow: var(--elevation-1);
  min-height: 48px;
}

.md3-login-btn:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
  background: var(--md3-primary-dark, #0f766e);
}

.md3-login-btn:active {
  transform: translateY(0);
  box-shadow: var(--elevation-1);
}

.md3-register-btn {
  background: linear-gradient(135deg, var(--md3-primary), var(--md3-tertiary));
}

.md3-lost-password {
  text-align: center;
  margin: 0;
}

.md3-lost-password a {
  font-size: var(--font-size-sm);
  color: var(--md3-primary);
  text-decoration: none;
  font-weight: 600;
}

.md3-lost-password a:hover {
  text-decoration: underline;
}

.md3-field-note {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
  margin: 0;
  line-height: 1.6;
}

/* ─── Account Navigation (Sidebar) ─── */
.md3-account-nav {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
}

.md3-account-nav-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--md3-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--md3-secondary) 4%, var(--color-surface)));
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-account-nav-user {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-on-surface);
}

.md3-account-nav-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
}

.md3-account-nav-item {
  margin: 0;
}

.md3-account-nav-item a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition: all var(--transition);
  min-height: 44px;
}

.md3-account-nav-item a:hover {
  background: var(--color-surface-container-low);
  color: var(--md3-primary);
}

.md3-account-nav-item.is-active a {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-weight: 700;
}

.md3-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: inherit;
}

.md3-nav-label {
  flex: 1;
}

/* ─── Dashboard ─── */
.md3-dashboard-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-dashboard-hello {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--md3-primary) 6%, var(--color-surface)), color-mix(in srgb, var(--md3-secondary) 3%, var(--color-surface)));
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
}

.md3-dashboard-hello svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.md3-dashboard-hello h2 {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-on-surface);
  margin: 0 0 4px;
}

.md3-dashboard-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-variant);
  margin: 0;
  line-height: 1.7;
}

.md3-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.md3-stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
  transition: all var(--transition-spring);
}

.md3-stat-card:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.md3-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.md3-stat-icon-orders {
  background: color-mix(in srgb, var(--md3-primary) 12%, transparent);
  color: var(--md3-primary);
}

.md3-stat-icon-spent {
  background: color-mix(in srgb, var(--md3-secondary) 12%, transparent);
  color: var(--md3-secondary);
}

.md3-stat-icon-downloads {
  background: color-mix(in srgb, var(--md3-tertiary) 12%, transparent);
  color: var(--md3-tertiary);
}

.md3-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md3-stat-value {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-on-surface);
  direction: ltr;
}

.md3-stat-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-on-surface-variant);
}

.md3-dashboard-recent {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  padding: var(--space-3);
}

.md3-view-all {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--md3-primary);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  transition: background var(--transition);
}

.md3-view-all:hover {
  background: var(--color-primary-container);
}

.md3-orders-mini-list {
  display: flex;
  flex-direction: column;
}

.md3-order-mini {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-order-mini:last-child {
  border-bottom: none;
}

.md3-order-mini-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}

.md3-order-mini-id {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-on-surface);
}

.md3-order-mini-date {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
}

.md3-order-mini-status {
  flex: 1;
}

.md3-order-mini-total {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-on-surface);
  direction: ltr;
}

.md3-order-mini-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-on-surface-variant);
  transition: all var(--transition);
}

.md3-order-mini-view:hover {
  background: var(--color-primary-container);
  color: var(--md3-primary);
}

.md3-dashboard-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.md3-dash-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-surface-container);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-on-surface);
  transition: all var(--transition-spring);
  min-height: 48px;
}

.md3-dash-link:hover {
  border-color: var(--md3-primary);
  color: var(--md3-primary);
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.md3-dash-link svg {
  flex-shrink: 0;
  color: var(--md3-primary);
}

/* ─── Orders Table ─── */
.md3-orders-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-orders-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
}

.md3-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.md3-orders-table thead th {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  font-weight: 700;
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-surface-container);
  white-space: nowrap;
}

.md3-orders-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-surface-container);
  vertical-align: middle;
  color: var(--color-on-surface);
}

.md3-orders-table tbody tr:last-child td {
  border-bottom: none;
}

.md3-orders-table tbody tr:hover {
  background: color-mix(in srgb, var(--md3-primary) 2%, transparent);
}

.md3-order-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.md3-order-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-on-surface-variant);
  border: 1px solid var(--color-surface-container-high);
  transition: all var(--transition);
  white-space: nowrap;
}

.md3-order-action:hover {
  border-color: var(--md3-primary);
  color: var(--md3-primary);
  background: var(--color-primary-container);
}

.md3-order-action-pay {
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  border-color: var(--md3-primary);
}

.md3-order-action-pay:hover {
  background: var(--md3-primary-dark, #0f766e);
  color: var(--md3-on-primary);
  border-color: var(--md3-primary-dark, #0f766e);
}

.md3-order-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}

.md3-order-status-badge.status-completed {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #16a34a;
}

.md3-order-status-badge.status-processing {
  background: color-mix(in srgb, var(--md3-tertiary) 12%, transparent);
  color: var(--md3-tertiary);
}

.md3-order-status-badge.status-on-hold {
  background: color-mix(in srgb, var(--md3-secondary) 12%, transparent);
  color: var(--md3-secondary);
}

.md3-order-status-badge.status-pending {
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #b45309;
}

.md3-order-status-badge.status-cancelled {
  background: color-mix(in srgb, var(--md3-error) 12%, transparent);
  color: var(--md3-error);
}

.md3-order-status-badge.status-refunded {
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  color: #7c3aed;
}

.md3-order-status-badge.status-failed {
  background: color-mix(in srgb, var(--md3-error) 8%, transparent);
  color: var(--md3-error);
}

.md3-orders-empty {
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.md3-orders-empty svg {
  margin-bottom: var(--space-2);
}

.md3-orders-empty p {
  font-size: var(--font-size-base);
  color: var(--color-on-surface-variant);
  margin: 0 0 var(--space-3);
}

.md3-shop-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 700;
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  text-decoration: none;
  transition: all var(--transition-spring);
  box-shadow: var(--elevation-1);
}

.md3-shop-btn:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
  color: var(--md3-on-primary);
}

/* ─── Orders Pagination ─── */
.md3-orders-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.md3-pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--md3-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-surface-container);
  text-decoration: none;
  transition: all var(--transition);
}

.md3-pagination-btn:hover {
  background: var(--color-primary-container);
  border-color: var(--md3-primary);
}

/* ─── View Order ─── */
.md3-view-order-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-view-order-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
}

.md3-view-order-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.md3-view-order-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--md3-primary) 10%, transparent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.md3-view-order-title h2 {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-on-surface);
  margin: 0 0 4px;
}

.md3-view-order-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
  direction: rtl;
}

.md3-view-order-downloads {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  padding: var(--space-3);
}

.md3-view-order-downloads h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 var(--space-2);
}

.md3-view-order-items {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  padding: var(--space-3);
}

.md3-view-order-items h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 var(--space-2);
}

.md3-order-details-table-wrap {
  overflow-x: auto;
}

.md3-order-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.md3-order-details-table thead th {
  padding: var(--space-1) var(--space-2);
  text-align: right;
  font-weight: 700;
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  background: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-order-details-table tbody td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-surface-container);
  vertical-align: middle;
}

.md3-order-details-table tfoot th {
  padding: var(--space-1) var(--space-2);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  text-align: right;
}

.md3-order-details-table tfoot td {
  padding: var(--space-1) var(--space-2);
  font-weight: 600;
  direction: ltr;
  text-align: left;
}

.md3-order-total-row th {
  font-weight: 800 !important;
  color: var(--color-on-surface) !important;
}

.md3-order-total-row td {
  font-weight: 800 !important;
  color: var(--md3-primary) !important;
  font-size: var(--font-size-base);
}

.md3-order-product-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.md3-order-product-thumb img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  object-fit: cover;
}

.md3-order-product-name {
  font-weight: 600;
  color: var(--color-on-surface);
}

.md3-purchase-note {
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--color-surface-container-low);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
}

/* ─── Downloads ─── */
.md3-downloads-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-downloads-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.md3-download-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-surface-container);
  transition: all var(--transition-spring);
}

.md3-download-card:hover {
  box-shadow: var(--elevation-2);
  border-color: color-mix(in srgb, var(--md3-primary) 20%, var(--color-surface-container));
}

.md3-download-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--md3-primary) 8%, transparent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.md3-download-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.md3-download-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-on-surface);
  text-decoration: none;
}

.md3-download-name:hover {
  color: var(--md3-primary);
}

.md3-download-meta {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
}

.md3-download-expires {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
}

.md3-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  text-decoration: none;
  transition: all var(--transition-spring);
  flex-shrink: 0;
  box-shadow: var(--elevation-1);
}

.md3-download-btn:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
  color: var(--md3-on-primary);
}

.md3-downloads-empty {
  text-align: center;
  padding: var(--space-6);
}

.md3-downloads-empty svg {
  margin-bottom: var(--space-2);
}

.md3-downloads-empty p {
  font-size: var(--font-size-base);
  color: var(--color-on-surface-variant);
  margin: 0 0 var(--space-3);
}

/* ─── Edit Account ─── */
.md3-edit-account-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-edit-account-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
  padding: var(--space-3);
}

.md3-password-section {
  padding: var(--space-2);
  background: var(--color-surface-container-low);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-surface-container);
}

.md3-password-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 4px;
}

.md3-form-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.md3-save-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px 28px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-spring);
  box-shadow: var(--elevation-1);
  min-height: 44px;
}

.md3-save-btn:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
}

.md3-save-btn:active {
  transform: translateY(0);
}

/* ─── Edit Address ─── */
.md3-edit-address-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-edit-address-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
  padding: var(--space-3);
}

.md3-edit-address-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-edit-address-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0;
}

/* ─── My Address ─── */
.md3-addresses-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md3-addresses-desc {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-variant);
  margin: 0;
}

.md3-addresses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.md3-address-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-container);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  transition: all var(--transition-spring);
}

.md3-address-card:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.md3-address-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-surface-container);
}

.md3-address-card-header h3 {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0;
}

.md3-address-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--md3-primary);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  transition: background var(--transition);
}

.md3-address-edit-link:hover {
  background: var(--color-primary-container);
}

.md3-address-card-body {
  padding: var(--space-2) var(--space-3);
}

.md3-address-card-body address {
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--color-on-surface);
  line-height: 1.8;
}

.md3-address-empty {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* ─── Default WooCommerce form row overrides in my-account ─── */
.woocommerce-MyAccount-content .form-row {
  margin: 0 0 var(--space-2);
  padding: 0;
}

.woocommerce-MyAccount-content .form-row label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-on-surface);
}

.woocommerce-MyAccount-content .form-row .required {
  color: var(--md3-error);
}

.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-surface-container-high);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface);
  background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-MyAccount-content .form-row textarea:focus {
  outline: none;
  border-color: var(--md3-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md3-primary) 12%, transparent);
}

.woocommerce-MyAccount-content .select2-selection--single {
  border: 1.5px solid var(--color-surface-container-high);
  border-radius: var(--radius-md);
  height: 42px;
}

.woocommerce-MyAccount-content .select2-selection__rendered {
  line-height: 42px;
  font-size: var(--font-size-sm);
}

/* ─── Edit Account inline validation ─── */
.woocommerce-invalid input {
  border-color: var(--md3-error) !important;
}

.woocommerce-validated input {
  border-color: #16a34a !important;
}

/* ─── Responsive My Account ─── */
@media (max-width: 900px) {
  .md3-dashboard-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .md3-addresses-grid {
    grid-template-columns: 1fr;
  }

  .md3-field-row-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .md3-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .md3-dashboard-links {
    grid-template-columns: 1fr;
  }

  .md3-orders-table thead {
    display: none;
  }

  .md3-orders-table tbody td {
    display: block;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-surface-container);
  }

  .md3-orders-table tbody td::before {
    content: attr(data-label);
    float: right;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    font-size: var(--font-size-xs);
  }

  .md3-orders-table tbody tr {
    display: block;
    border-bottom: 2px solid var(--color-surface-container-high);
  }

  .md3-orders-table tbody tr:last-child {
    border-bottom: none;
  }

  .md3-order-details-table thead {
    display: none;
  }

  .md3-order-details-table tbody td,
  .md3-order-details-table tfoot td,
  .md3-order-details-table tfoot th {
    display: block;
    text-align: left;
    padding: 6px 12px;
  }

  .md3-order-details-table tbody td::before {
    content: attr(data-label);
    float: right;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    font-size: var(--font-size-xs);
  }

  .md3-order-details-table tbody tr {
    display: block;
    border-bottom: 1px solid var(--color-surface-container);
    padding: 4px 0;
  }

  .md3-view-order-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .md3-download-card {
    flex-direction: column;
    text-align: center;
  }

  .md3-download-info {
    align-items: center;
  }

  .md3-download-btn {
    width: 100%;
    justify-content: center;
  }

  .md3-edit-account-form {
    padding: var(--space-2);
  }

  .md3-form-actions {
    flex-direction: column;
  }

  .md3-save-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .md3-login-wrap {
    padding: var(--space-3) 0;
  }

  .md3-account-nav {
    position: static;
    margin-bottom: var(--space-3);
  }

  .md3-orders-table {
    font-size: var(--font-size-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md3-login-form-wrap.active,
  .md3-stat-card:hover,
  .md3-dash-link:hover,
  .md3-download-card:hover,
  .md3-address-card:hover {
    animation: none;
    transform: none;
  }
}