/* CELLMIND local reference rebuild — generated from website/cellmind-rebuild/src/styles. Do not edit output. */
/* ---- pages/account.css ---- */
/* My account — sign-in card. Values: computed reference styles (evidence/wsC/account-*.txt) and the
   used reference rules (evidence/wsC/css-usage/account.used.css). */

/* Page frame: off-white page; header + main + footer fill at least one viewport below the fixed bar,
   the main area grows and centres the card (reference: flex column, min-height 100dvh). */
body.tpl-account {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh + var(--header-h));
  min-height: calc(100dvh + var(--header-h));
  background: var(--t-bg-off);
}
.tpl-account .page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 0 clamp(48px, 6vw, 80px);
}

/* Shrink-to-fit column (max 520px) — the card width follows its longest row, as on the reference. */
.account {
  box-sizing: content-box;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px var(--container-pad) 100px;
}
.account__card {
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--t-border-line);
}
.account__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--t-text-ink);
}
.account__body { padding: 24px; }

/* Fields */
.account-field { display: block; margin: 0 0 16px; }
.account-field__label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--t-text-ink-2);
}
.account-field__control { display: block; position: relative; }
.account-field__input {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--t-border-line-strong);
  border-radius: var(--r-sm);
  background: var(--t-bg-white);
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  color: var(--t-text-ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.account-field__input:focus { outline: none; border-color: var(--t-border-gold); box-shadow: 0 0 0 3px rgba(var(--t-shadow-gold-rgb), 0.18); }
.account-field--password .account-field__input { padding-right: 48px; }
.account-field__error {
  display: none;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--t-text-red);
}
/* Inline validation state (set by pages/account.js on blur / submit, as on the reference). */
.account-field.is-invalid .account-field__error { display: block; }
.account-field.is-invalid .account-field__input { border-color: var(--t-border-red); box-shadow: 0 0 0 3px rgba(var(--t-shadow-red-rgb), 0.08); }

/* Password visibility toggle (revealed by JS). */
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--t-text-muted);
  cursor: pointer;
}
.pw-toggle:hover, .pw-toggle.is-on { color: var(--t-text-ink); background: var(--t-bg-off); }
.pw-toggle svg { width: 18px; height: 18px; }

/* Anti-bot question (plugin markup on the reference: small uppercase prompt, bold equation, a
   browser-default 2-character input). */
.account-captcha { margin: 0 0 16px; }
.account-captcha__label {
  display: block;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}
.account-captcha__eq { margin: 0 0 16px; }
.account-captcha__eq strong { font-weight: 700; }
.captcha-answer {
  display: inline-block;
  padding: 0;
  font: 400 16px/normal Arial, sans-serif;
  color: var(--t-text-pure-black);
}
.captcha-answer:focus { outline: none; border-color: var(--t-border-gold); box-shadow: 0 0 0 1px rgba(var(--t-shadow-gold-rgb), 0.25); }

/* Remember me + forgot password */
.account-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 2px 0 18px;
}
.account-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--t-text-ink-2);
  cursor: pointer;
}
.account-check__box:focus { box-shadow: 0 0 0 1px rgba(var(--t-shadow-gold-rgb), 0.25); }
.account-check__box { width: 16px; height: 16px; margin: 0; accent-color: var(--t-accent-ink); }
.account-form__forgot {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: var(--t-text-gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.account-form__forgot:hover { color: var(--t-text-ink); }

.account-form__submit { display: flex; width: 100%; margin-top: 6px; }

.account__links { margin: 16px 0 0; font-size: 14px; line-height: 1.6; text-align: center; }
.account__links a {
  color: var(--t-text-gold-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.account__links a:hover { color: var(--t-text-ink); }

@media (max-width: 639px) {
  .account { padding-top: 24px; padding-bottom: 64px; }
  .account__head { padding: 14px 18px; }
  .account__body { padding: 18px; }
}
/* Narrow-screen container padding (3.6px ≤320px, 2.4px ≤250px) now comes from the shared token. */

/* Header on WooCommerce account routes (template-scoped override of the shared header). The reference's
   account stylesheet restyles every <button> on these pages: the desktop language toggle becomes a
   square gold-dark button with white text, and a later fix keeps the cart and menu buttons flat
   (cart icon gold-dark, no radius, no hover fill; hamburger without inner padding).
   Evidence: evidence/wsC/account-navbtns.txt vs affiliate-navbtns.txt. */
.tpl-account .lang-dd__toggle {
  padding: 14px 24px;
  border: 0;
  border-radius: 0;
  background: var(--t-bg-gold-dark);
  color: var(--t-text-white);
  letter-spacing: 0.12em;
  box-shadow: 0 4px 16px rgba(var(--t-shadow-black-rgb), 0.06);
}
.tpl-account .lang-dd__toggle:hover,
.tpl-account .lang-dd.is-open .lang-dd__toggle { background: var(--t-bg-gold-deep); }
.tpl-account .cart-btn,
.tpl-account .cart-btn:hover,
.tpl-account .cart-btn[aria-expanded="true"] { border-radius: 0; background: transparent; color: var(--t-text-gold-dark); }
.tpl-account .menu-toggle { padding: 0; }