/**
 * NMA account-area restyle.
 *
 * Brings the native WooCommerce /my-account views (dashboard, account details,
 * subscriptions, billing, billing history, promotional code, discord) up to the
 * v4-homepage / /my-plan design language, so moving between the v4 app and these
 * WordPress pages doesn't feel jarring. Built on the tokens in css/nma-brand.css.
 *
 * Scoped entirely under body.nma-account and enqueued only on is_account_page()
 * (see functions.php). It restyles the EXISTING markup — no template rewrites.
 * !important is used deliberately to override the legacy theme's high-specificity
 * (#id #id) account rules; it's safe because every rule here is account-scoped.
 *
 * Source of truth: github/v4-homepage (Salzburg + Inter, teal-700, rose-600).
 */

/* ============================ Layout shell ============================ */
body.nma-account #content.col-full { width:auto; max-width:none; }
body.nma-account #main-sidebar-container {
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px;
  max-width:1140px; margin:0 auto; padding:40px 24px 90px;
  font-family:var(--nma-sans); color:var(--nma-body);
}
/* Match the global header band to the account content width so the logo + top menu
   line up with the columns below (default .col-full is 960px; the teal theme only
   widens it on the logged-out homepage). Scoped to account pages — rest of site untouched. */
body.nma-account #main-header.col-full {
  max-width:1140px !important; box-sizing:border-box;
  padding-left:24px !important; padding-right:24px !important;
}
/* Page title, lifted by a tiny inline script (page.php) into a centered full-width
   row above the nav + content columns — so the sidebar no longer sits level with it. */
body.nma-account .nma-account-pagetitle { flex:0 0 100%; width:100%; order:-2; margin:0 0 6px; }
body.nma-account .nma-account-pagetitle h1.title {
  font-family:var(--nma-serif); color:var(--nma-ink); font-weight:700;
  font-size:clamp(1.95rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.015em;
  text-align:center !important; margin:0 !important; text-transform:none;
}
body.nma-account #sidebar {
  width:244px; flex:0 0 244px; order:-1;   /* nav on the left (page.php outputs #main first) */
  float:none !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:none !important;
}
body.nma-account #main.myaccount {
  flex:1 1 480px; min-width:0;
  width:auto !important; float:none !important; margin:0 !important; padding:0 !important;
}
@media (max-width:880px) {
  body.nma-account #main-sidebar-container { flex-direction:column; gap:22px; padding:26px 16px 72px; }
  body.nma-account #sidebar { width:100%; flex-basis:auto; }
}

/* ============================ Sidebar nav ============================ */
body.nma-account #sidebar .menu-myaccount-container { margin:0; padding:0; border:0 !important; background:none !important; }
body.nma-account #menu-myaccount {
  list-style:none !important; margin:0 !important; padding:6px !important;
  background:#fff; border:1px solid var(--nma-stone) !important;
  border-radius:var(--nma-radius); box-shadow:var(--nma-shadow);
}
body.nma-account #menu-myaccount .menu-item {
  list-style:none !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:none !important;
}
body.nma-account #menu-myaccount .menu-item a {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px !important; margin:1px 0;
  border:0 !important; border-radius:10px;
  color:var(--nma-body) !important; background:none !important;
  font-family:var(--nma-sans); font-weight:600; font-size:.92rem; line-height:1.2;
  text-decoration:none !important; text-transform:none;
  transition:background-color .12s ease, color .12s ease;
}
body.nma-account #menu-myaccount .menu-item a:hover {
  background:var(--nma-soft-2) !important; color:var(--nma-ink) !important;
}
body.nma-account #menu-myaccount .menu-item.current_page_item a,
body.nma-account #menu-myaccount li.current_page_item a {
  background:var(--nma-teal) !important; color:#fff !important; box-shadow:var(--nma-shadow);
}
/* count pills, if any nav item carries one */
body.nma-account #menu-myaccount .badge {
  background:var(--nma-teal-50); color:var(--nma-teal); border:0;
  border-radius:999px; padding:2px 9px; font-size:.7rem; font-weight:700; font-style:normal;
}
body.nma-account #menu-myaccount .current_page_item a .badge { background:rgba(255,255,255,.22); color:#fff; }

/* ============================ Headings ============================ */
body.nma-account #main h1,
body.nma-account #main h1.title {
  font-family:var(--nma-serif) !important; color:var(--nma-ink) !important;
  font-weight:700; font-size:clamp(1.85rem,3.3vw,2.55rem); line-height:1.1; letter-spacing:-.015em;
  margin:0 0 22px !important; padding:0 !important; text-transform:none !important;
}
body.nma-account #main h2,
body.nma-account #main h3 { font-family:var(--nma-serif); color:var(--nma-ink); letter-spacing:-.01em; }
body.nma-account #main p { color:var(--nma-body); font-size:1rem; line-height:1.6; }
body.nma-account #main a { color:var(--nma-teal); }

/* ============================ Cards / panels ============================ */
body.nma-account #main .woocommerce_account_discord {
  background:#fff !important; border:1px solid var(--nma-stone) !important;
  border-radius:var(--nma-radius) !important; box-shadow:var(--nma-shadow) !important;
  padding:26px 28px !important; margin:0 0 22px !important;
}

/* Account Details avatar block. The template wraps a centered .avatar-wrapper in a
   redundant bordered .upper-form and ships its own inline button styles — neutralize
   the outer box and make .avatar-wrapper a compact on-brand card with teal buttons. */
body.nma-account #main .upper-form {
  border:0 !important; padding:0 !important; margin:0 0 26px !important;
  width:100% !important; text-align:left !important;
}
body.nma-account #main .avatar-wrapper {
  max-width:440px !important; margin:0 !important; padding:26px 28px !important;
  background:#fff !important; border:1px solid var(--nma-stone) !important;
  border-radius:var(--nma-radius) !important; box-shadow:var(--nma-shadow) !important;
  text-align:center; font-family:var(--nma-sans) !important;
}
body.nma-account #main .avatar-wrapper img {
  width:104px !important; height:104px !important;
  border:3px solid #fff !important; box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
}
body.nma-account #main .avatar-wrapper .upload-label,
body.nma-account #main .avatar-wrapper button[type="submit"] {
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:0 !important; margin-top:14px !important; padding:9px 18px !important;
  background:var(--nma-teal) !important; color:#fff !important; border:0 !important;
  border-radius:var(--nma-radius-sm) !important; font-family:var(--nma-sans) !important;
  font-weight:600 !important; font-size:.9rem !important; cursor:pointer; box-shadow:none !important;
}
body.nma-account #main .avatar-wrapper .upload-label:hover,
body.nma-account #main .avatar-wrapper button[type="submit"]:hover { background:#0c5f58 !important; }
body.nma-account #main .avatar-wrapper button[disabled] {
  background:var(--nma-stone) !important; color:var(--nma-muted) !important; cursor:not-allowed;
}
body.nma-account #main .avatar-wrapper .status-message { color:var(--nma-muted) !important; font-size:.85rem !important; margin-top:12px !important; }
body.nma-account #main .avatar-wrapper h1 {
  font-family:var(--nma-serif) !important; font-size:1.5rem !important;
  margin:12px 0 0 !important; color:var(--nma-ink) !important;
}

/* ============================ Tables (subscriptions, billing history) ============================ */
body.nma-account #main .shop_table,
body.nma-account #main .woocommerce-orders-table,
body.nma-account #main .my_account_orders,
body.nma-account #main .my_account_subscriptions {
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important;
  background:#fff !important; border:1px solid var(--nma-stone) !important;
  border-radius:var(--nma-radius) !important; overflow:hidden; box-shadow:var(--nma-shadow) !important; margin:0;
}
body.nma-account #main .shop_table thead th {
  background:var(--nma-soft) !important; color:var(--nma-muted) !important;
  font-family:var(--nma-sans) !important; font-weight:700 !important; font-size:.74rem !important;
  text-transform:uppercase; letter-spacing:.06em; text-align:left !important;
  padding:15px 18px !important; border:0 !important; border-bottom:1px solid var(--nma-line) !important;
}
body.nma-account #main .shop_table tbody td {
  padding:16px 18px !important; border:0 !important; border-bottom:1px solid var(--nma-line) !important;
  color:var(--nma-body) !important; font-size:.95rem; vertical-align:middle; background:#fff !important;
}
body.nma-account #main .shop_table tbody tr:last-child td { border-bottom:0 !important; }
body.nma-account #main .shop_table tbody tr:hover td { background:var(--nma-soft) !important; }
body.nma-account #main .shop_table a:not(.button) { color:var(--nma-teal) !important; font-weight:700; text-decoration:none; }
body.nma-account #main .shop_table a:not(.button):hover { text-decoration:underline; }
body.nma-account #main .shop_table small { color:var(--nma-muted); font-weight:400; }

/* status text — colored by the row's --status-* class (no pill needed) */
body.nma-account #main .order-status,
body.nma-account #main .subscription-status { font-weight:600; color:var(--nma-body-2); }
body.nma-account #main tr[class*="--status-active"] .subscription-status,
body.nma-account #main tr[class*="--status-completed"] .order-status,
body.nma-account #main tr[class*="--status-processing"] .order-status { color:var(--nma-teal); }
body.nma-account #main tr[class*="--status-pending"] .order-status,
body.nma-account #main tr[class*="--status-pending"] .subscription-status,
body.nma-account #main tr[class*="--status-on-hold"] .subscription-status,
body.nma-account #main tr[class*="--status-pending-cancel"] .subscription-status { color:#b9791a; }
body.nma-account #main tr[class*="--status-cancelled"] .order-status,
body.nma-account #main tr[class*="--status-cancelled"] .subscription-status,
body.nma-account #main tr[class*="--status-expired"] .subscription-status { color:var(--nma-rose-700); }

/* compact action button inside table rows (VIEW) */
body.nma-account #main .shop_table .button,
body.nma-account #main .shop_table td .button {
  min-height:0 !important; padding:8px 18px !important; font-size:.82rem !important;
  box-shadow:none !important; width:auto;
}

/* ============================ Buttons ============================ */
body.nma-account #main .button,
body.nma-account #main input[type="submit"],
body.nma-account #main button[type="submit"] {
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:46px; padding:12px 24px !important; width:auto;
  background:var(--nma-teal) !important; color:#fff !important;
  border:0 !important; border-radius:var(--nma-radius-sm) !important;
  font-family:var(--nma-sans) !important; font-weight:600 !important; font-size:.95rem !important; line-height:1;
  box-shadow:var(--nma-shadow) !important; text-transform:none !important;
  text-decoration:none !important; cursor:pointer; transition:background-color .15s ease;
}
body.nma-account #main .button:hover,
body.nma-account #main input[type="submit"]:hover,
body.nma-account #main button[type="submit"]:hover { background:#0c5f58 !important; color:#fff !important; }

/* ============================ Forms ============================ */
body.nma-account #main .woocommerce-EditAccountForm,
body.nma-account #main .woocommerce-address-fields,
body.nma-account #main form[method="post"],
body.nma-account #main form[method="POST"] { max-width:660px; }

body.nma-account #main label,
body.nma-account #main .form-row label,
body.nma-account #main .woocommerce-form-row label {
  display:block !important; float:none !important; width:auto !important;
  color:var(--nma-body) !important; font-family:var(--nma-sans);
  font-weight:600; font-size:.9rem; margin:0 0 7px !important; text-transform:none;
}
body.nma-account #main .woocommerce-input-wrapper { display:block; width:100%; }
body.nma-account #main input[type="text"],
body.nma-account #main input[type="email"],
body.nma-account #main input[type="password"],
body.nma-account #main input[type="tel"],
body.nma-account #main input[type="number"],
body.nma-account #main input[type="search"],
body.nma-account #main select,
body.nma-account #main textarea,
body.nma-account #main .woocommerce-Input,
body.nma-account #main .input-text {
  width:100% !important; padding:12px 14px !important;
  border:1px solid var(--nma-stone) !important; border-radius:var(--nma-radius-sm) !important;
  background:#fff !important; color:var(--nma-ink) !important;
  font-family:var(--nma-sans) !important; font-size:.97rem !important; line-height:1.4;
  box-shadow:none !important; transition:border-color .12s ease, box-shadow .12s ease;
}
body.nma-account #main input:focus,
body.nma-account #main select:focus,
body.nma-account #main textarea:focus {
  outline:0 !important; border-color:var(--nma-teal) !important;
  box-shadow:0 0 0 3px var(--nma-teal-50) !important;
}
body.nma-account #main .form-row,
body.nma-account #main .woocommerce-form-row,
body.nma-account #main p.form-row { margin:0 0 18px !important; }
/* Two-column first/last name — ONLY in the real account/address forms. The promo
   template marks every row form-row-first, so don't float that class globally. */
body.nma-account #main .woocommerce-EditAccountForm .form-row-first,
body.nma-account #main .woocommerce-address-fields .form-row-first { float:left; width:48% !important; clear:none; }
body.nma-account #main .woocommerce-EditAccountForm .form-row-last,
body.nma-account #main .woocommerce-address-fields .form-row-last { float:right; width:48% !important; clear:none; }
body.nma-account #main .woocommerce-EditAccountForm .form-row-wide,
body.nma-account #main .woocommerce-address-fields .form-row-wide { clear:both; width:100% !important; }
body.nma-account #main .woocommerce-EditAccountForm::after,
body.nma-account #main .woocommerce-address-fields__field-wrapper::after { content:""; display:table; clear:both; }
body.nma-account #main fieldset { border:0; padding:0; margin:24px 0 0; }
body.nma-account #main fieldset legend { font-family:var(--nma-serif); color:var(--nma-ink); font-size:1.15rem; font-weight:700; padding:0; margin:0 0 14px; }
/* the "update all renewals" checkbox label stays inline next to its box */
body.nma-account #main .woocommerce-form__label-for-checkbox {
  display:inline !important; float:none !important; width:auto !important;
  font-weight:500 !important; color:var(--nma-body) !important; margin:0 0 0 6px !important;
}
body.nma-account #main em,
body.nma-account #main .description { color:var(--nma-muted); font-size:.88rem; }

/* ============================ Promotional code ============================ */
/* The template marks every row form-row-first; un-float them and stack cleanly. */
body.nma-account #main #promotional-codes-content .form-row,
body.nma-account #main #promotional-codes-content .form-row-first {
  float:none !important; width:auto !important; margin:0 0 14px !important;
}
body.nma-account #main #promotional-codes-content #promotional-code { max-width:420px; }
body.nma-account #main #promotional-codes-content a { color:var(--nma-teal); font-weight:600; }

/* ============================ Discord card ============================ */
body.nma-account #main .woocommerce_account_discord { text-align:left; }
body.nma-account #main .woocommerce_account_discord h2,
body.nma-account #main .woocommerce_account_discord h3 { font-family:var(--nma-sans); font-weight:700; color:var(--nma-ink); }
body.nma-account #main .woocommerce_account_discord hr { border:0; border-top:1px solid var(--nma-line); margin:18px 0; }
body.nma-account #main .woocommerce_account_discord img { border-radius:10px; }
/* keep the Disconnect button destructive (rose), not teal */
body.nma-account #main .woocommerce_account_discord .button[href*="disconnect"],
body.nma-account #main .woocommerce_account_discord a.disconnect,
body.nma-account #main .woocommerce_account_discord .btn-disconnect {
  background:var(--nma-rose-50) !important; color:var(--nma-rose-700) !important;
  border:1px solid #f3c2c2 !important; box-shadow:none !important;
}
body.nma-account #main .woocommerce_account_discord .button[href*="disconnect"]:hover { background:#fde7e7 !important; }

/* ============================ Dashboard (overview hub) ============================ */
body.nma-account #main .nma-dash-welcome { color:var(--nma-body-2); font-size:1.05rem; margin:0 0 22px; }
body.nma-account #main .nma-dash-welcome strong { color:var(--nma-ink); font-weight:600; }

body.nma-account #main .nma-dash-plan {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid var(--nma-stone); border-radius:var(--nma-radius);
  box-shadow:var(--nma-shadow); padding:22px 26px; margin:0 0 30px;
}
body.nma-account #main .nma-dash-plan .pl {
  font-family:var(--nma-serif); font-weight:700; font-size:1.45rem; color:var(--nma-ink);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
body.nma-account #main .nma-dash-plan .meta { color:var(--nma-body-2); font-size:.95rem; margin-top:5px; }
body.nma-account #main .nma-dash-plan .meta .amt { color:var(--nma-ink); }
body.nma-account #main .nma-dash-plan .badge {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  padding:4px 11px; border-radius:999px;
}
body.nma-account #main .nma-dash-plan .badge.ok { background:var(--nma-teal-50); color:var(--nma-teal); }
body.nma-account #main .nma-dash-plan .badge.warn { background:#fdf0dd; color:#b9791a; }
body.nma-account #main .nma-dash-plan .badge.bad { background:#fde7e7; color:var(--nma-rose-700); }
body.nma-account #main .nma-dash-plan .button { flex:0 0 auto; }

/* Evergreen annual-savings nudge: tucks directly under the plan card for active monthly members. */
body.nma-account #main .nma-dash-m2a {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  background:var(--nma-teal-50); border:1px solid rgba(15,118,110,.25); border-radius:var(--nma-radius);
  padding:16px 22px; margin:-16px 0 30px;
}
body.nma-account #main .nma-dash-m2a-copy { flex:1 1 300px; min-width:0; margin:0; font-size:.95rem; line-height:1.5; color:var(--nma-body); }
body.nma-account #main .nma-dash-m2a-copy strong { color:var(--nma-ink); }
body.nma-account #main .nma-dash-m2a .button { flex:0 0 auto; }

body.nma-account #main .nma-dash-eyebrow {
  text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:600;
  color:var(--nma-muted); margin:0 0 12px;
}
body.nma-account #main .nma-dash-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(208px, 1fr)); gap:14px; margin:0 0 26px;
}
body.nma-account #main a.nma-dash-card {
  display:flex; flex-direction:column; gap:3px;
  background:#fff; border:1px solid var(--nma-stone); border-radius:14px; box-shadow:var(--nma-shadow);
  padding:18px 20px; text-decoration:none; color:var(--nma-ink) !important;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.nma-account #main a.nma-dash-card:hover { border-color:var(--nma-teal); transform:translateY(-1px); }
body.nma-account #main a.nma-dash-card.go { background:var(--nma-teal-50); border-color:rgba(15,118,110,.25); }
body.nma-account #main .nma-dash-card .t { font-weight:700; font-size:1.02rem; color:var(--nma-ink); }
body.nma-account #main .nma-dash-card .s { font-size:.85rem; color:var(--nma-body-2); }
body.nma-account #main .nma-dash-card .s.ok { color:var(--nma-teal); font-weight:600; }

body.nma-account #main .nma-dash-signout { color:var(--nma-muted); font-size:.92rem; margin:8px 0 0; }
body.nma-account #main .nma-dash-signout a { color:var(--nma-teal); }

/* ============================ Notices ============================ */
body.nma-account #main .woocommerce-message,
body.nma-account #main .woocommerce-info,
body.nma-account #main .woocommerce-error {
  border-radius:12px !important; border:1px solid var(--nma-line) !important;
  font-family:var(--nma-sans); font-size:.95rem; padding:14px 18px !important;
  box-shadow:none !important; list-style:none; overflow:hidden;
}
/* WC prints a font-icon (checkmark / warning) via ::before that collides with our
   padding and overlaps the text — drop it; the colored panel carries the meaning. */
body.nma-account #main .woocommerce-message::before,
body.nma-account #main .woocommerce-info::before,
body.nma-account #main .woocommerce-error::before { display:none !important; }
body.nma-account #main .woocommerce-message .button { float:none; }
body.nma-account #main .woocommerce-message { background:var(--nma-teal-50) !important; color:#0c5a53 !important; border-color:rgba(15,118,110,.22) !important; }
body.nma-account #main .woocommerce-info { background:var(--nma-soft) !important; color:var(--nma-body) !important; }
body.nma-account #main .woocommerce-error { background:#fde7e7 !important; color:#9a2f2f !important; border-color:#f3c2c2 !important; }