/**
 * Aries Victoria — My Account
 * ──────────────────────────────
 * Styles the WooCommerce account area: the shell + sidebar navigation,
 * dashboard, orders, addresses, forms, payment methods, and the logged-out
 * login / register screen.
 *
 * Loaded only on the account page (see inc/enqueue.php → aries_enqueue_account_assets).
 * Template overrides live in woocommerce/myaccount/.
 *
 * @package AriasVictoria
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * SHELL + LAYOUT
 * ───────────────────────────────────────────────────────────────────────────── */

.account {
  margin-top: var(--space-4);
}

.account__intro {
  margin-bottom: var(--space-8);
}

.account__eyebrow {
  margin: 0 0 var(--space-2);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-text-tertiary);
}

.account__hello {
  margin: 0;
  font-family:    var(--font-display);
  font-size:      clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight:    var(--weight-medium);
  line-height:    var(--leading-tight);
  color:          var(--color-text-primary);
}

.account__hello strong { font-weight: var(--weight-black); }

/* Two-column grid: sidebar + content (desktop). Mobile is single column. */
.account__layout {
  display:        grid;
  grid-template-columns: 1fr;
  gap:            var(--space-8);
}

@media (min-width: 1024px) {
  .account__layout {
    grid-template-columns: 248px 1fr;
    gap:                   var(--space-12);
    align-items:           start;
  }
}

.account__content {
  min-width: 0; /* allow tables to shrink inside the grid track */
}


/* ─────────────────────────────────────────────────────────────────────────────
 * NAVIGATION — sidebar on desktop, scrollable tabs on mobile
 * ───────────────────────────────────────────────────────────────────────────── */

.account-nav {
  position: relative;
  /* Grid items default to min-width:auto, which would let the no-wrap tab row
   * widen the whole page. Allow the track to shrink so the row scrolls inside
   * the viewport instead of expanding the layout. */
  min-width: 0;
}

.account-nav__list {
  display:    flex;
  gap:        var(--space-1);
  margin:     0;
  padding:    0 0 var(--space-2);
  list-style: none;
  /* Mobile: horizontal scrolling tab row. */
  overflow-x:        auto;
  scroll-snap-type:  x proximity;
  scrollbar-width:   none;
  border-bottom:     1px solid var(--color-border-subtle);
}

.account-nav__list::-webkit-scrollbar { display: none; }

.account-nav__item {
  flex:              0 0 auto;
  scroll-snap-align: start;
}

.account-nav__link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2-5, 10px);
  padding:         var(--space-3) var(--space-4);
  font-family:     var(--font-body);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  color:           var(--color-text-secondary);
  border-bottom:   2px solid transparent;
  transition:      var(--transition-color);
}

.account-nav__link:hover { color: var(--color-text-primary); }

.account-nav__icon {
  width:  18px;
  height: 18px;
  flex-shrink: 0;
}

.account-nav__item.is-active .account-nav__link {
  color:         var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}

.account-nav__link:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Desktop sidebar */
@media (min-width: 1024px) {
  .account-nav__list {
    flex-direction: column;
    gap:            var(--space-1);
    padding:        0;
    overflow:       visible;
    border-bottom:  0;
  }

  .account-nav__item { width: 100%; }

  .account-nav__link {
    width:           100%;
    padding:         var(--space-3) var(--space-4);
    border-bottom:   0;
    border-left:     2px solid transparent;
  }

  .account-nav__item.is-active .account-nav__link {
    border-bottom: 0;
    border-left-color: var(--color-text-primary);
    background:    var(--color-bg-subtle);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * CONTENT TYPOGRAPHY — keep WC headings/links on-brand inside the panel
 * ───────────────────────────────────────────────────────────────────────────── */

.account__content > h2,
.account__content > h3,
.account-section__title {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color:          var(--color-text-primary);
  margin:         0 0 var(--space-4);
}

.account__content p { color: var(--color-text-secondary); }

.account__content a:not(.btn):not(.button):not(.account-card):not(.address-card__edit) {
  color: var(--color-text-primary);
  text-underline-offset: 3px;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * DASHBOARD
 * ───────────────────────────────────────────────────────────────────────────── */

.account-dashboard__lead {
  max-width:   60ch;
  margin:      0 0 var(--space-8);
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}

.account-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   var(--space-4);
}

.account-card {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-3);
  padding:         var(--space-6);
  text-decoration: none;
  color:           var(--color-text-primary);
  background:      var(--color-bg-base);
  border:          1px solid var(--color-border-subtle);
  transition:      border-color var(--duration-150) var(--ease-standard),
                   transform var(--duration-150) var(--ease-standard);
}

.account-card:hover {
  border-color: var(--color-border-strong);
  transform:    translateY(-2px);
}

.account-card:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.account-card__icon {
  display:         inline-flex;
  width:           40px;
  height:          40px;
  align-items:     center;
  justify-content: center;
  color:           var(--color-text-primary);
  border:          1px solid var(--color-border-subtle);
  border-radius:   var(--radius-full);
}

.account-card__icon .icon { width: 20px; height: 20px; }

.account-card__title {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.account-card__text {
  margin:      0;
  font-size:   var(--text-xs);
  line-height: var(--leading-normal);
  color:       var(--color-text-tertiary);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * TABLES — orders + payment methods (responsive)
 * ───────────────────────────────────────────────────────────────────────────── */

.account-table,
.woocommerce-orders-table,
.woocommerce-MyAccount-paymentMethods {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
}

.account-table thead th,
.woocommerce-orders-table thead th,
.woocommerce-MyAccount-paymentMethods thead th {
  padding:        var(--space-3) var(--space-4);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align:     left;
  color:          var(--color-text-tertiary);
  border-bottom:  1px solid var(--color-border-strong);
}

.account-table tbody td,
.account-table tbody th,
.woocommerce-orders-table tbody td,
.woocommerce-orders-table tbody th,
.woocommerce-MyAccount-paymentMethods tbody td {
  padding:       var(--space-4);
  text-align:    left;
  font-weight:   var(--weight-normal, 400);
  color:         var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.woocommerce-orders-table tbody td a:not(.button),
.woocommerce-orders-table tbody th a:not(.button) {
  color:           var(--color-text-primary);
  font-weight:     var(--weight-medium);
  text-decoration: none;
}

.woocommerce-orders-table tbody td a:not(.button):hover { text-decoration: underline; }

.woocommerce-orders-table__cell-order-actions,
.woocommerce-MyAccount-paymentMethods .woocommerce-PaymentMethod--actions {
  text-align: right;
}

.woocommerce-orders-table__cell-order-actions .button {
  margin-left: var(--space-2);
}

/* Mobile: stack rows into labelled cards using WC's data-title attributes. */
@media (max-width: 768px) {
  .woocommerce-orders-table thead,
  .woocommerce-MyAccount-paymentMethods thead { display: none; }

  .woocommerce-orders-table tr,
  .woocommerce-MyAccount-paymentMethods tr {
    display:       block;
    margin-bottom: var(--space-4);
    border:        1px solid var(--color-border-subtle);
    padding:       var(--space-2) var(--space-4);
  }

  .woocommerce-orders-table td,
  .woocommerce-orders-table th,
  .woocommerce-MyAccount-paymentMethods td {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
    padding:         var(--space-2) 0;
    border-bottom:   0;
    text-align:      right;
  }

  .woocommerce-orders-table td::before,
  .woocommerce-MyAccount-paymentMethods td::before {
    content:        attr(data-title);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color:          var(--color-text-tertiary);
    text-align:     left;
  }

  .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
  .woocommerce-orders-table__cell-order-actions::before { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * VIEW ORDER
 * ───────────────────────────────────────────────────────────────────────────── */

.account-order-intro {
  margin-bottom: var(--space-6);
  font-size:     var(--text-sm);
  color:         var(--color-text-secondary);
}

.account-order-intro mark {
  background:  transparent;
  font-weight: var(--weight-medium);
  color:       var(--color-text-primary);
}

.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: var(--space-10);
}

.woocommerce-table--order-details {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
  margin-top:      var(--space-4);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding:       var(--space-3) var(--space-4);
  text-align:    left;
  border-bottom: 1px solid var(--color-border-subtle);
}

.woocommerce-table--order-details tfoot th {
  font-weight: var(--weight-medium);
  color:       var(--color-text-primary);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ADDRESSES
 * ───────────────────────────────────────────────────────────────────────────── */

.account-addresses {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-4);
  margin-top:            var(--space-6);
}

@media (min-width: 640px) {
  .account-addresses { grid-template-columns: 1fr 1fr; }
}

.address-card {
  display:        flex;
  flex-direction: column;
  padding:        var(--space-6);
  background:     var(--color-bg-base);
  border:         1px solid var(--color-border-subtle);
}

.address-card__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  margin-bottom:   var(--space-4);
}

.address-card__title {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  margin:          0;
  font-family:     var(--font-body);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  color:           var(--color-text-primary);
}

.address-card__title .icon { width: 16px; height: 16px; color: var(--color-text-tertiary); }

.address-card__edit {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--color-text-secondary);
  transition:      var(--transition-color);
}

.address-card__edit:hover { color: var(--color-text-primary); }
.address-card__edit .icon { width: 14px; height: 14px; }

.address-card__body {
  font-style:  normal;
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}

.address-card--empty .address-card__body { color: var(--color-text-tertiary); }


/* ─────────────────────────────────────────────────────────────────────────────
 * FORMS — edit account / edit address / lost password
 * ───────────────────────────────────────────────────────────────────────────── */

.account-form { max-width: 560px; }

.account-form__row--split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
}

@media (max-width: 480px) {
  .account-form__row--split { grid-template-columns: 1fr; }
}

/* WC-generated rows (edit address uses woocommerce_form_field). */
.account__content .form-row,
.account__content .woocommerce-form-row {
  display:       flex;
  flex-direction: column;
  margin:        0 0 var(--space-5);
}

.account__content .form-row-first,
.account__content .form-row-last {
  display: inline-flex;
  width:   calc(50% - var(--space-2));
}

.account__content .form-row-first { margin-right: var(--space-4); }

@media (max-width: 480px) {
  .account__content .form-row-first,
  .account__content .form-row-last { width: 100%; margin-right: 0; }
}

.account__content .form-row label,
.account__content .woocommerce-form-row label {
  margin-bottom:  var(--space-2);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-text-secondary);
}

.account__content .form-row .required { color: var(--color-text-primary); text-decoration: none; }

.account__content .input-text,
.account__content textarea,
.account__content select,
.account__content .select2-selection {
  width:         100%;
  height:        var(--input-height, 48px);
  padding:       0 var(--space-4);
  font-family:   var(--font-body);
  font-size:     var(--text-sm);
  color:         var(--color-text-primary);
  background:    var(--color-bg-base);
  border:        1px solid var(--color-border-strong);
  border-radius: 0;
  transition:    border-color var(--duration-150) var(--ease-standard);
  appearance:    none;
}

.account__content textarea {
  height:     auto;
  min-height: 120px;
  padding:    var(--space-3) var(--space-4);
}

.account__content .input-text:focus,
.account__content textarea:focus,
.account__content select:focus {
  outline:      none;
  border-color: var(--color-border-focus);
  box-shadow:   0 0 0 3px var(--color-border-focus-ring, rgba(38,110,241,0.15));
}

.account__content fieldset {
  margin:     var(--space-8) 0 0;
  padding:    var(--space-6) 0 0;
  border:     0;
  border-top: 1px solid var(--color-border-subtle);
}

.account__content fieldset legend {
  padding:        0;
  margin-bottom:  var(--space-4);
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color:          var(--color-text-primary);
}

.account__content .woocommerce-form-row__help,
.account__content em,
.account__content small {
  display:    block;
  margin-top: var(--space-1);
  font-size:  var(--text-xs);
  font-style: normal;
  color:      var(--color-text-tertiary);
}

.account__content .clear { clear: both; }


/* ─────────────────────────────────────────────────────────────────────────────
 * LOGIN / REGISTER (logged out)
 * ───────────────────────────────────────────────────────────────────────────── */

.auth {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
  max-width:             920px;
  margin:                var(--space-4) auto 0;
}

@media (min-width: 880px) {
  .auth--split { grid-template-columns: 1fr 1fr; }
}

.auth__card {
  padding:    var(--space-8);
  background: var(--color-bg-base);
  border:     1px solid var(--color-border-subtle);
}

.auth__title {
  margin:         0 0 var(--space-2);
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color:          var(--color-text-primary);
}

.auth__subtitle {
  margin:      0 0 var(--space-6);
  font-size:   var(--text-sm);
  color:       var(--color-text-tertiary);
}

.auth__form { margin: 0; }

.auth__meta {
  margin-top: var(--space-4);
  font-size:  var(--text-sm);
}

.auth__meta a {
  color:           var(--color-text-secondary);
  text-decoration: none;
  transition:      var(--transition-color);
}

.auth__meta a:hover { color: var(--color-text-primary); }

.auth__remember {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin:      var(--space-2) 0 var(--space-5);
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
}

.auth__note {
  margin:    var(--space-4) 0 var(--space-5);
  font-size: var(--text-sm);
  color:     var(--color-text-tertiary);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * WOOCOMMERCE BUTTONS — map auto-generated WC buttons to the theme button
 * ───────────────────────────────────────────────────────────────────────────── */

.account__content .button,
.account__content .woocommerce-button,
.woocommerce-account .button:not(.btn) {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  min-height:      44px;
  padding:         0 var(--space-5);
  font-family:     var(--font-body);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  letter-spacing:  var(--tracking-wider);
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--color-text-primary);
  background:      transparent;
  border:          1px solid var(--color-border-strong);
  border-radius:   0;
  cursor:          pointer;
  transition:      color var(--duration-150) var(--ease-standard),
                   background-color var(--duration-150) var(--ease-standard),
                   border-color var(--duration-150) var(--ease-standard);
}

.account__content .button:hover,
.account__content .woocommerce-button:hover {
  color:        var(--color-bg-base);
  background:   var(--color-text-primary);
  border-color: var(--color-text-primary);
}

/* Primary / alt actions get a filled treatment. */
.account__content .button.button--primary,
.account__content .button.wc-forward,
.account__content button[type="submit"].button {
  color:        var(--color-bg-base);
  background:   var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.account__content .button.button--primary:hover,
.account__content button[type="submit"].button:hover {
  opacity: 0.88;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * WOOCOMMERCE NOTICES (login errors, address saved, etc.)
 * account.css loads where pdp/checkout notice styles do not.
 * ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
  margin:        0 0 var(--space-6);
  padding:       var(--space-4) var(--space-5);
  font-size:     var(--text-sm);
  list-style:    none;
  border-left:   3px solid var(--color-text-primary);
  background:    var(--color-bg-subtle);
  color:         var(--color-text-primary);
}

.woocommerce-account .woocommerce-error {
  border-left-color: #ef4444;
  background:        rgba(239, 68, 68, 0.08);
}

.woocommerce-account .woocommerce-message {
  border-left-color: #22c55e;
  background:        rgba(34, 197, 94, 0.08);
}

.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-message li,
.woocommerce-account .woocommerce-info { margin: 0; }


/* ─────────────────────────────────────────────────────────────────────────────
 * PAGINATION (orders)
 * ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-pagination {
  display:     flex;
  gap:         var(--space-3);
  margin-top:  var(--space-8);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ORDER STATUS BADGE — spacing only (colour from badge.css)
 * ───────────────────────────────────────────────────────────────────────────── */

.order-status-badge { white-space: nowrap; }


/* ─────────────────────────────────────────────────────────────────────────────
 * PROSE LINK OVERRIDE
 * The account markup renders inside page.php's .entry-content.av-prose, whose
 * global rule underlines + recolours every <a>. Account links are UI, not
 * prose — opt them out. account.css loads after global.css, so equal-specificity
 * rules win on source order; component colours are re-asserted at higher
 * specificity so they survive the prose rule.
 * ───────────────────────────────────────────────────────────────────────────── */

.account a,
.auth a { text-decoration: none; }

.account .account-nav__link        { color: var(--color-text-secondary); }
.account .account-nav__link:hover  { color: var(--color-text-primary); }
.account .account-nav__item.is-active .account-nav__link { color: var(--color-text-primary); }
.account .account-card             { color: var(--color-text-primary); }
.account .address-card__edit       { color: var(--color-text-secondary); }
.account .address-card__edit:hover { color: var(--color-text-primary); }