/* =========================================================================
 * CHTTI WooCommerce My Account — sub-page styling
 * Nav card + per-endpoint content card for Orders, Downloads, Addresses,
 * Account Details, etc. The dashboard landing (body.chtti-dashboard-view) is
 * excluded — it has its own template/styles in student-dashboard.css.
 * All values use design tokens from global-tokens.css.
 * ====================================================================== */

/* --- Two-column layout (nav + content) ------------------------------- */
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-10);
  font-family: var(--font-body);
  color: var(--chtti-dark);
}

/* --- Navigation card ------------------------------------------------- */
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  flex: 0 0 260px;
  background: var(--chtti-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
}
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation-link {
  margin: 0;
  border: 0;
}
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--chtti-dark);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation-link a:hover {
  background: var(--chtti-light);
  color: var(--chtti-blue);
}
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--chtti-blue);
  color: var(--chtti-white);
}

/* Redundant Sensei "Courses / My Courses" tab — courses live in the dashboard. */
.woocommerce-MyAccount-navigation-link--courses {
  display: none;
}

/* --- Nav icons (masked SVG, inherit currentColor incl. active white) - */
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation-link a::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  /* Fallback is a small dot so an unmapped item never renders as a solid square. */
  -webkit-mask-image: var(--chtti-nav-ico, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E"));
  mask-image: var(--chtti-nav-ico, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E"));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.woocommerce-MyAccount-navigation-link--dashboard a {
  --chtti-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a {
  --chtti-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--downloads a {
  --chtti-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a {
  --chtti-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a {
  --chtti-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
  --chtti-nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* --- Content column -------------------------------------------------- */
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* Per-endpoint heading (added via functions.php) */
.chtti-account-head {
  margin-bottom: var(--space-3);
}
.chtti-account-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-heading);
  color: var(--chtti-dark);
  margin: 0 0 var(--space-1);
}
.chtti-account-head__sub {
  margin: 0;
  color: color-mix(in srgb, var(--chtti-dark) 70%, transparent);
}

/* Content card wrapper (added via functions.php) */
.chtti-account-card {
  background: var(--chtti-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* --- Forms (Account Details / Addresses) ----------------------------- */
.chtti-account-card label {
  display: block;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--chtti-dark);
  margin-bottom: var(--space-1);
}
.chtti-account-card .required {
  color: var(--chtti-orange);
  border: 0;
  text-decoration: none;
}
.chtti-account-card input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.chtti-account-card select,
.chtti-account-card textarea {
  width: 100%;
  background: var(--chtti-light);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font: inherit;
  color: var(--chtti-dark);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chtti-account-card input:focus,
.chtti-account-card select:focus,
.chtti-account-card textarea:focus {
  outline: none;
  border-color: var(--chtti-blue);
  box-shadow: 0 0 0 3px rgba(26, 86, 196, 0.15);
}
.chtti-account-card .woocommerce-form-row,
.chtti-account-card .form-row {
  margin: 0 0 var(--space-3);
}
.chtti-account-card small,
.chtti-account-card .woocommerce-form-row span em {
  font-size: var(--text-caption);
  color: color-mix(in srgb, var(--chtti-dark) 65%, transparent);
  font-style: normal;
}

/* First/last name side by side; everything else full width */
.chtti-account-card .woocommerce-EditAccountForm,
.chtti-account-card form.edit-account {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}
.chtti-account-card .woocommerce-EditAccountForm > .form-row-first,
.chtti-account-card .woocommerce-EditAccountForm > .form-row-last {
  flex: 1 1 calc(50% - (var(--space-3) / 2));
}
.chtti-account-card .woocommerce-EditAccountForm > .form-row-wide,
.chtti-account-card .woocommerce-EditAccountForm > fieldset,
.chtti-account-card .woocommerce-EditAccountForm > .woocommerce-form-row:not(.form-row-first):not(.form-row-last) {
  flex: 1 1 100%;
}
.chtti-account-card .clear {
  display: none;
}

/* Password fieldset: current full width, new + confirm side by side */
.chtti-account-card fieldset {
  border: 0;
  border-top: 1px solid var(--chtti-gray);
  margin: var(--space-2) 0 0;
  padding: var(--space-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}
.chtti-account-card fieldset > legend {
  flex: 1 1 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-lg);
  color: var(--chtti-dark);
  padding: 0;
  margin-bottom: var(--space-2);
}
.chtti-account-card fieldset > .woocommerce-form-row {
  flex: 1 1 100%;
}
.chtti-account-card fieldset > .woocommerce-form-row:has(#password_1),
.chtti-account-card fieldset > .woocommerce-form-row:has(#password_2) {
  flex: 1 1 calc(50% - (var(--space-3) / 2));
}

/* --- Buttons --------------------------------------------------------- */
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-Button,
body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card .button,
body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card button[type="submit"] {
  display: inline-block;
  background: var(--chtti-blue);
  color: var(--chtti-white);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font: 600 var(--text-button) / 1 var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-Button:hover,
body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card .button:hover,
body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card button[type="submit"]:hover {
  background: #1645a1;
  transform: scale(1.02);
}
/* Secondary/outline buttons (e.g. address "Add", order actions) */
body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card .button.alt ~ .button,
body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card a.button--secondary {
  background: transparent;
  color: var(--chtti-blue);
  border-color: var(--chtti-blue);
}

/* --- Tables (Orders / Downloads) ------------------------------------- */
.chtti-account-card table.shop_table,
.chtti-account-card table.woocommerce-orders-table,
.chtti-account-card table.woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin: 0;
}
.chtti-account-card .shop_table thead th {
  text-align: left;
  font-size: var(--text-small);
  font-weight: 600;
  color: color-mix(in srgb, var(--chtti-dark) 70%, transparent);
  padding: 0 var(--space-2) var(--space-2);
  border-bottom: 2px solid var(--chtti-gray);
}
.chtti-account-card .shop_table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--chtti-gray);
  vertical-align: middle;
}
.chtti-account-card .shop_table tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Addresses ------------------------------------------------------- */
.chtti-account-card .woocommerce-Addresses.u-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.chtti-account-card .woocommerce-Address {
  flex: 1 1 calc(50% - var(--space-4));
  min-width: 240px;
}
.chtti-account-card .woocommerce-Address-title h2,
.chtti-account-card .woocommerce-Address-title h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--chtti-dark);
  margin: 0 0 var(--space-2);
}
.chtti-account-card address {
  font-style: normal;
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--chtti-dark) 80%, transparent);
}

/* --- Focus states (a11y) --------------------------------------------- */
body.woocommerce-account:not(.chtti-dashboard-view) a:focus-visible,
body.woocommerce-account:not(.chtti-dashboard-view) button:focus-visible {
  outline: 2px solid var(--chtti-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Keep active-item focus ring visible on the blue background */
body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation-link.is-active a:focus-visible {
  outline-color: var(--chtti-white);
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 782px) {
  body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce {
    flex-direction: column;
  }
  body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation {
    flex-basis: auto;
    width: 100%;
  }
  .chtti-account-card .woocommerce-EditAccountForm > .form-row-first,
  .chtti-account-card .woocommerce-EditAccountForm > .form-row-last,
  .chtti-account-card fieldset > .woocommerce-form-row:has(#password_1),
  .chtti-account-card fieldset > .woocommerce-form-row:has(#password_2) {
    flex: 1 1 100%;
  }
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-MyAccount-navigation-link a,
  body.woocommerce-account:not(.chtti-dashboard-view) .woocommerce-Button,
  body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card button[type="submit"] {
    transition: none;
  }
  body.woocommerce-account:not(.chtti-dashboard-view) .chtti-account-card button[type="submit"]:hover {
    transform: none;
  }
}