/* ============================================================
   CFA DESIGN SYSTEM — FORM PAGE POLISH
   Registration, KYC, Questionnaire, Investor Auth flows
   Crowd for Angels Visual Identity

   Source: design-system/ + ui-inventory/
   Role: Page-level polish for multi-step onboarding forms
   ============================================================ */

/* ── LOCAL TOKENS ── */
:root {
  --fp-card-radius: var(--cfa-radius-xl, 16px);
  --fp-card-pad:    2.5rem;
  --fp-step-size:   2rem;
  --fp-step-line:   2px;
}

/* ============================================================
   1. PAGE SHELL
   .formbg  — outer background wrapper on all form pages
   ============================================================ */

.formbg {
  background: var(--cfa-bg-soft);
  min-height: calc(100vh - 76px);
  padding: 3rem 1rem;
}

/* Some legacy templates wrap the card in an extra .formbg; add a little
   breathing room so "Complete your profile" doesn't sit too high. */
body.cfa-app .formbg .register_wrapper.register-align {
  margin-top: 1.25rem;
}

/* form card — matches .join-form.reg-form.col-lg-6 / .register_wrapper */
.join-form,
.reg-form,
.register_wrapper.register-align {
  background: var(--cfa-bg);
  border: 1px solid var(--cfa-border);
  border-radius: var(--fp-card-radius);
  box-shadow: 0 4px 24px rgba(36, 81, 209, 0.08);
  padding: var(--fp-card-pad);
}

/* ============================================================
   2. PAGE INTRO
   ============================================================ */

.formbg > div > h2,
.formbg h2.text-center {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--cfa-text);
  text-align: center;
  margin-bottom: 0.5rem;
}

.join-info p,
.join-info .normal-text {
  color: var(--cfa-text-muted);
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   3. FORM-LEVEL ERROR / WARNING BLOCKS
   ============================================================ */

.error-msg-div {
  background: var(--cfa-red-pale);
  border: 1px solid var(--cfa-red-border);
  border-radius: var(--cfa-radius-md, 8px);
  color: var(--cfa-red);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

/* inline per-field errors — also covers div.error-msg in auth templates */
label.error-msg,
span.error-msg,
div.error-msg {
  display: block;
  color: var(--cfa-red);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ============================================================
   4. ACCOUNT TYPE SELECTOR CARDS
   .register → .outter-rgbtn → .register-btn
   JS adds .join-button-pressed for selected state
   ============================================================ */

.register {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
}

.outter-rgbtn {
  flex: 1 1 140px;
  min-width: 120px;
}

.register-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--cfa-bg);
  border: 2px solid var(--cfa-border);
  border-radius: var(--cfa-radius-lg, 12px);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.register-btn img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.register-btn label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cfa-text-mid);
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}

.register-btn:hover {
  border-color: var(--cfa-cobalt);
  background: var(--cfa-cobalt-pale);
  box-shadow: 0 0 0 3px var(--cfa-cobalt-border);
}

.register-btn.join-button-pressed {
  border-color: var(--cfa-cobalt);
  background: var(--cfa-cobalt-pale);
  box-shadow: 0 0 0 3px var(--cfa-cobalt-border);
}

.register-btn.join-button-pressed label {
  color: var(--cfa-cobalt);
}

/* ============================================================
   5. CUSTOM CHECKBOXES
   .iagreechkbox, .join-checkbox, .qut-checkbox
   Pattern: <div.qut-checkbox><input><label></label></div>
   ============================================================ */

.iagreechkbox,
.join-checkbox,
.qut-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.iagreechkbox input[type="checkbox"],
.join-checkbox input[type="checkbox"],
.qut-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--cfa-border-strong);
  border-radius: 4px;
  background: var(--cfa-bg);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: border-color 0.15s, background 0.15s;
}

.iagreechkbox input[type="checkbox"]:hover,
.join-checkbox input[type="checkbox"]:hover,
.qut-checkbox input[type="checkbox"]:hover {
  border-color: var(--cfa-cobalt);
}

.iagreechkbox input[type="checkbox"]:checked,
.join-checkbox input[type="checkbox"]:checked,
.qut-checkbox input[type="checkbox"]:checked {
  background: var(--cfa-cobalt);
  border-color: var(--cfa-cobalt);
}

.iagreechkbox input[type="checkbox"]:checked::after,
.join-checkbox input[type="checkbox"]:checked::after,
.qut-checkbox input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 3px;
  top: 1px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.checkbx-label {
  font-size: 0.9375rem;
  color: var(--cfa-text-mid);
  cursor: pointer;
  line-height: 1.5;
}

/* questionnaire answer states */
.ans-correct-label {
  color: var(--cfa-green) !important;
  font-weight: 600;
}

.ans-wrong-label {
  color: var(--cfa-red) !important;
  font-weight: 600;
}

/* ============================================================
   6. PASSWORD TOGGLE
   .hide-show.join-hide-show > span
   ============================================================ */

.hide-show {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.5rem;
  margin-bottom: 0.25rem;
}

.hide-show span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cfa-cobalt);
  cursor: pointer;
  user-select: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

.hide-show span:hover {
  background: var(--cfa-cobalt-pale);
}

/* ============================================================
   7. INLINE RISK WARNING
   ============================================================ */

.join_risk_warning {
  color: var(--cfa-text-muted);
  font-size: 0.875rem;
}

.join_risk_warning a {
  color: var(--cfa-cobalt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.join_risk_warning a:hover {
  color: var(--cfa-cobalt-mid);
}

/* ============================================================
   8. STEP WIZARD
   .compinvest-steps → ol.steps → li.current
   ============================================================ */

.compinvest-steps {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.compinvest-steps ol.steps {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  position: relative;
}

/* horizontal connector */
.compinvest-steps ol.steps::before {
  content: '';
  position: absolute;
  top: calc(var(--fp-step-size) / 2);
  left: calc(var(--fp-step-size) / 2);
  right: calc(var(--fp-step-size) / 2);
  height: var(--fp-step-line);
  background: var(--cfa-border);
  z-index: 0;
}

.compinvest-steps ol.steps > li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  position: relative;
  z-index: 1;
  counter-increment: step;
}

.compinvest-steps ol.steps > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--cfa-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: default;
}

/* step number circle */
.compinvest-steps ol.steps > li > a::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fp-step-size);
  height: var(--fp-step-size);
  border-radius: 50%;
  background: var(--cfa-bg);
  border: 2px solid var(--cfa-border-strong);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cfa-text-muted);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

/* active step */
.compinvest-steps ol.steps > li.current > a {
  color: var(--cfa-cobalt);
  font-weight: 700;
}

.compinvest-steps ol.steps > li.current > a::before {
  background: var(--cfa-cobalt);
  border-color: var(--cfa-cobalt);
  color: #fff;
}

/* completed steps — green bg + white check per COMPONENT_STATES §11 */
.compinvest-steps ol.steps > li.done > a::before,
.compinvest-steps ol.steps > li.complete > a::before {
  content: '✓';
  background: var(--cfa-green);
  border-color: var(--cfa-green);
  color: #fff;
}

/* ============================================================
   9. PROCESS STEPS (questionnaire flow)
   .process-divbg, .pro-number, .pro-label, .complt-pro-*
   ============================================================ */

.process-divbg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--cfa-border);
  margin-bottom: 1.5rem;
}

.process-divbg > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pro-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--cfa-border);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cfa-text-muted);
}

.complt-pro-number {
  background: var(--cfa-cobalt) !important;
  color: #fff !important;
}

.pro-label {
  font-size: 0.875rem;
  color: var(--cfa-text-muted);
  font-weight: 500;
}

.complt-pro-label {
  color: var(--cfa-cobalt) !important;
  font-weight: 600 !important;
}

/* ============================================================
   10. WARNING BAR
   ============================================================ */

.warning_bar {
  background: var(--cfa-amber-pale);
  border: 1px solid var(--cfa-amber-border);
  border-radius: var(--cfa-radius-md, 8px);
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.warning_bar_content {
  flex: 1;
  font-size: 0.875rem;
  color: var(--cfa-amber);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   11. INVESTOR CATEGORISATION
   .invest-container, .invest-innerCont, .invest-btn,
   .invest-button1/.2/.3/.4, .cont-btn
   ============================================================ */

.invest-container {
  padding: 1.5rem var(--fp-card-pad);
  border-bottom: 1px solid var(--cfa-border);
  margin-bottom: 1.5rem;
}

.invest-container h3 {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--cfa-text);
  margin-bottom: 0.5rem;
}

.invest-container p {
  color: var(--cfa-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.invest-innerCont {
  padding: 1rem var(--fp-card-pad) 2rem;
  background: var(--cfa-bg-soft, #f7f8fa) !important;
  border-radius: var(--cfa-radius-lg, 12px) !important;
  margin: 0 !important;
}

.invest-button1,
.invest-button2,
.invest-button3,
.invest-button4 {
  padding: 0.5rem 0.5rem 0 !important;
  margin-bottom: 0.75rem;
  display: flex !important;
  flex-direction: column;
}

/* categorisation choice buttons
   NOTE: Base .invest-btn styling is also defined in cfa-buttons.css (with !important).
   Rules here provide contextual layout overrides (block/full-width card pattern).
   The !important values from cfa-buttons.css win for colors/borders/interactions. */
.invest-btn {
  display: block;
  width: 100%;
  padding: 1rem 0.75rem;
  background: var(--cfa-bg);
  border: 2px solid var(--cfa-border);
  border-radius: var(--cfa-radius-lg, 12px);
  color: var(--cfa-text-mid);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
  height: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, color 0.18s;
}

.invest-btn:hover {
  border-color: var(--cfa-cobalt);
  background: var(--cfa-cobalt-pale);
  color: var(--cfa-cobalt);
  box-shadow: 0 0 0 3px var(--cfa-cobalt-border);
}

.invest-btn.selected,
.invest-btn.active,
.invest-btn.change-color {
  border-color: var(--cfa-cobalt) !important;
  background: var(--cfa-cobalt-pale) !important;
  color: var(--cfa-cobalt) !important;
  box-shadow: 0 0 0 3px var(--cfa-cobalt-border) !important;
}

/* JS-toggled active container state */
.hover-background-new {
  background: transparent !important;
  border: none !important;
}

.investbtn-label {
  font-size: 0.8125rem;
  color: var(--cfa-text-muted);
  margin-top: 0.375rem;
  line-height: 1.5;
}

/* up-arrow indicators — JS shows/hides */
.invest-uparrow1,
.invest-uparrow2,
.invest-uparrow3,
.invest-uparrow4 {
  display: none;
}

/* document viewer */
.invest-info {
  width: 100% !important;
  height: auto !important;
  min-height: 320px;
  max-height: 520px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #fff !important;
  border: 1.5px solid var(--cfa-border) !important;
  border-radius: var(--cfa-radius-md, 8px) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0.75rem 0 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  color: var(--cfa-text) !important;
}

/* continue / submit button */
.cont-btn {
  /* Form controls (input[type=button]) don't reliably respect flex centering. */
  display: inline-block;
  box-sizing: border-box;
  /* Keep vertical centering via height + line-height; use horizontal padding for width. */
  padding: 0 2rem;
  background: var(--cfa-cobalt);
  color: #fff;
  border: none;
  border-radius: var(--cfa-radius-full, 9999px);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  margin-top: 1.5rem;

  /* Keep label perfectly centered inside the fixed-height button. */
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
}

.invest-submit-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cont-btn:hover {
  background: var(--cfa-cobalt-mid);
  box-shadow: 0 4px 12px rgba(36, 81, 209, 0.30);
}

.cont-btn:active {
  background: var(--cfa-navy);
  box-shadow: none;
  transform: none;
}

.cont-btn:disabled,
.cont-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   12. QUESTIONNAIRE CONTENT
   .quest-cont, .quest-iagree, .questionnaire-fail
   ============================================================ */

.quest-cont {
  background: var(--cfa-bg);
  border: 1px solid var(--cfa-border);
  border-radius: var(--cfa-radius-md, 8px);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.quest-cont > p {
  font-weight: 600;
  color: var(--cfa-text);
  margin-bottom: 0.75rem;
}

.quest-cont > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.25rem;
}

.quest-iagree {
  background: var(--cfa-cobalt-pale);
  border: 1px solid var(--cfa-cobalt-border);
  border-radius: var(--cfa-radius-md, 8px);
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.questionnaire-fail {
  color: var(--cfa-red) !important;
  font-weight: 700;
}

.quest-flr-font {
  font-weight: 600;
  color: var(--cfa-text-mid);
  border-top: 1px solid var(--cfa-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

/* ============================================================
   13. SUCCESS / CONFIRMATION STATE
   ============================================================ */

.register-success {
  text-align: center;
  padding: 2.5rem var(--fp-card-pad);
}

.register-success h3.miantle {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--cfa-cobalt);
  margin-bottom: 0.75rem;
}

.register-success h5 {
  color: var(--cfa-text-muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

/* ============================================================
   14. CONTENT WRAPPER (questionnaire / investmentauth shell)
   ============================================================ */

.content_wrapper > .formbg {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--cfa-bg);
  border: 1px solid var(--cfa-border);
  border-radius: var(--fp-card-radius);
  box-shadow: 0 4px 24px rgba(36, 81, 209, 0.08);
  padding: 0;
  min-height: unset;
}

.transation-container {
  padding: 1.5rem var(--fp-card-pad);
}

.transaction-preview-con {
  padding: 1.5rem var(--fp-card-pad);
}

/* ============================================================
   15. ACCOUNT SECTION — TWO-COLUMN LAYOUT
   .formbg.mrportfolio  — outer wrapper used by all market/ account pages
   Left col: leftpanel-partial  |  Right col: investment-rightcont
   ============================================================ */

/* Override formbg padding for the two-column account layout */
.formbg.mrportfolio {
  padding: 0 !important;
  min-height: calc(100vh - 76px);
  align-items: stretch;
  background: var(--cfa-bg-soft) !important;
}

/* Left column: sidebar panel */
.mrportleftsect {
  background: var(--cfa-bg) !important;
  border-right: 1px solid var(--cfa-border) !important;
  min-height: calc(100vh - 76px);
  padding: 0 !important;
}

/* Right column: content area */
.investment-rightcont {
  padding: 0 !important;
  min-height: calc(100vh - 76px);
  color: var(--cfa-text-mid);
}

/* Tab nav bar above content */
.invest-topnav {
  background: var(--cfa-bg) !important;
  border-bottom: 1px solid var(--cfa-border) !important;
  padding: 0 var(--cfa-space-5) !important;
}

/* Content area below tabs */
.invest-content {
  background: var(--cfa-bg-soft) !important;
  padding: var(--cfa-space-6) var(--cfa-space-5) !important;
}

/* Portfolio / debt investment section */
.portdebtivest {
  min-height: unset !important;
}

/* Section titles within content */
.ei-title p {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  color: var(--cfa-text) !important;
  padding: 0 0 var(--cfa-space-2) 0 !important;
  margin-bottom: var(--cfa-space-4) !important;
  border-bottom: 1px solid var(--cfa-border) !important;
}

.ei-title h4,
.invest-content .ei-title h4 {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-normal) !important;
  color: var(--cfa-text-muted) !important;
  padding: 0 !important;
  margin-bottom: var(--cfa-space-4) !important;
}

@media (max-width: 768px) {
  .mrportleftsect {
    border-right: none !important;
    border-bottom: 1px solid var(--cfa-border) !important;
    min-height: unset;
  }

  .investment-rightcont {
    min-height: unset;
  }

  .invest-content {
    padding: var(--cfa-space-4) var(--cfa-space-3) !important;
  }
}


/* ============================================================
   17. PITCH EDIT FORM LAYOUT
   pitches-my-account/edit*.phtml — two-column fundraiser form
   Left (.mrportleftsect): pitch progress nav from PitchProgress.php
   Right (.mrportrghtsect): white card form container
   ============================================================ */

/* Right content column — pitch edit right rail */
.mrportrghtsect,
.containerlabel-input {
  padding: var(--cfa-space-6) var(--cfa-space-5) !important;
  background: var(--cfa-bg-soft) !important;
}

/* Inner form card */
.ac-rightcontainer,
.equity-ac-container {
  background: var(--cfa-bg) !important;
  border: 1px solid var(--cfa-border) !important;
  border-radius: var(--cfa-radius-xl) !important;
  box-shadow: var(--cfa-shadow-sm) !important;
  padding: var(--cfa-space-6) var(--cfa-space-7) !important;
  position: relative;
}

/* Section heading inside form card */
.ac-rightcontainer h3,
.equity-ac-container h3 {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-xl) !important;
  font-weight: var(--cfa-weight-extrabold) !important;
  color: var(--cfa-text) !important;
  margin: 0 0 var(--cfa-space-4) !important;
  padding: 0 !important;
}

/* Section arrow indicators — hide legacy image arrows */
.basicinfo-selector,
.basicinfo-selector2,
.upload-pictures-selector,
.rewards_selector-arrow {
  display: none !important;
}

/* Informational paragraph */
.bi-info {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  color: var(--cfa-text-muted) !important;
  line-height: var(--cfa-leading-normal) !important;
  margin-bottom: var(--cfa-space-4) !important;
}

/* Individual form section wrappers — position anchor for #data_loader */
.basicinfo-form,
.fundraisinginfo-form {
  position: relative;
}

/* Inline .errors from edit1.phtml inline <style> tag */
.errors {
  float: none !important;
  width: auto !important;
}

/* Form navigation button wrappers */
.bi-back,
.bi-save,
.bi-save-cont {
  margin-top: var(--cfa-space-5) !important;
}

/* Form navigation buttons */
.bi-btn,
.bi-btn-new {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: var(--cfa-space-3) var(--cfa-space-5) !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  border-radius: var(--cfa-radius-full) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  background: transparent !important;
  color: var(--cfa-text-mid) !important;
  cursor: pointer !important;
  transition: border-color var(--cfa-transition-fast),
              color var(--cfa-transition-fast) !important;
}

.bi-btn:hover,
.bi-btn-new:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
}

.bi-btn:focus-visible,
.bi-btn-new:focus-visible {
  outline: 2px solid var(--cfa-cobalt) !important;
  outline-offset: 2px !important;
}

.review-btn input[type="button"]:focus-visible,
.previewpitch-btn input[type="button"]:focus-visible {
  outline: 2px solid var(--cfa-cobalt) !important;
  outline-offset: 2px !important;
}

/* Sidebar action buttons */
.ac-buttons {
  padding: var(--cfa-space-5) var(--cfa-space-4);
  border-top: 1px solid var(--cfa-border);
  display: flex;
  flex-direction: column;
  gap: var(--cfa-space-3);
}

.review-btn input[type="button"],
.previewpitch-btn input[type="button"] {
  display: block !important;
  width: 100% !important;
  padding: var(--cfa-space-3) var(--cfa-space-5) !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  border-radius: var(--cfa-radius-full) !important;
  cursor: pointer !important;
  transition: background var(--cfa-transition-fast),
              border-color var(--cfa-transition-fast),
              color var(--cfa-transition-fast) !important;
}

.review-btn input[type="button"] {
  background: var(--cfa-cobalt) !important;
  color: var(--cfa-on-dark) !important;
  border: 1.5px solid var(--cfa-cobalt) !important;
  box-shadow: var(--cfa-shadow-cobalt) !important;
}

.review-btn input[type="button"]:hover {
  background: var(--cfa-cobalt-mid) !important;
  border-color: var(--cfa-cobalt-mid) !important;
}

.previewpitch-btn input[type="button"] {
  background: transparent !important;
  color: var(--cfa-cobalt) !important;
  border: 1.5px solid var(--cfa-cobalt-border) !important;
}

.previewpitch-btn input[type="button"]:hover {
  background: var(--cfa-cobalt-pale) !important;
  border-color: var(--cfa-cobalt) !important;
}


/* ============================================================
   18. PITCH EDIT LEFT NAV
   Generated by PitchProgress.php / PitchProgressPlc.php
   .abtcompany-leftnav > .ac-leftnavmenu > a > div + img + label
   .navbtn-info (legend) | .listing-agreement (PDF link)
   ============================================================ */

.abtcompany-leftnav {
  padding: var(--cfa-space-5) var(--cfa-space-4);
}

/* Nav links container */
.ac-leftnavmenu {
  display: flex;
  flex-direction: column;
  gap: var(--cfa-space-1);
  margin-bottom: var(--cfa-space-5);
}

.ac-leftnavmenu a {
  display: block !important;
  text-decoration: none !important;
}

/* Each nav item row */
.ac-leftnavmenu a > div {
  display: flex !important;
  align-items: center !important;
  gap: var(--cfa-space-3) !important;
  padding: var(--cfa-space-2) var(--cfa-space-3) !important;
  border-radius: var(--cfa-radius-sm) !important;
  transition: background var(--cfa-transition-fast) !important;
}

.ac-leftnavmenu a > div:hover {
  background: var(--cfa-bg-soft) !important;
}

/* Status icon — sized, controller-provided png */
.ac-leftnavmenu a > div img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  flex-shrink: 0;
}

.ac-leftnavmenu a > div label {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-medium) !important;
  color: var(--cfa-text-muted) !important;
  cursor: pointer;
  flex: 1;
}

/* Active nav item (.abtcomp-abtn added by controller) */
.ac-leftnavmenu a > div.abtcomp-abtn {
  background: var(--cfa-cobalt-pale) !important;
}

.ac-leftnavmenu a > div.abtcomp-abtn label {
  color: var(--cfa-cobalt) !important;
  font-weight: var(--cfa-weight-semibold) !important;
}

/* Legend section */
.navbtn-info {
  border-top: 1px solid var(--cfa-border);
  padding: var(--cfa-space-4) 0 var(--cfa-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--cfa-space-2);
}

.navbtn-info > div {
  display: flex !important;
  align-items: center !important;
  gap: var(--cfa-space-2) !important;
}

.navbtn-info > div img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  flex-shrink: 0;
  opacity: 0.8;
}

.navbtn-info > div label {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-xs) !important;
  color: var(--cfa-text-muted) !important;
  cursor: default;
}

.incomplete-class img {
  opacity: 0.5;
}

/* Listing agreement PDF link */
.listing-agreement {
  border-top: 1px solid var(--cfa-border);
  padding-top: var(--cfa-space-3);
  margin-top: var(--cfa-space-2);
}

.listing-agreement a {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--cfa-space-2) !important;
  text-decoration: none !important;
  color: var(--cfa-cobalt) !important;
}

.listing-agreement a:hover {
  text-decoration: underline !important;
}

.listing-agreement a img {
  width: 18px !important;
  object-fit: contain !important;
  flex-shrink: 0;
}

.listing-agreement a label {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-xs) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  cursor: pointer;
  color: inherit !important;
}


/* ============================================================
   19. ACCOUNT SETTINGS FORM PAGES
   editprofile.phtml, changepassword.phtml
   Uses .myaccount_content_wrapper (not .mrportfolio two-column layout)
   ============================================================ */

/* Outer container — center-constrain the form */
.inlineblock_container {
  max-width: var(--cfa-container-narrow);
  margin: 0 auto;
}

/* Form wrapper */
.myprofile_edit_form,
.mrmyprofile_edit_form {
  padding: 45px !important;
}

.myprofile_edit_formpart,
.edit-profile-form {
  padding-top: var(--cfa-space-4) !important;
}

/* Form row wrapper */
.myprofile_row,
.mmyprofile_row {
  margin-bottom: var(--cfa-space-6) !important;
}

/* Date dropdown group */
.date-dropdowns {
  display: flex;
  align-items: center;
  gap: var(--cfa-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--cfa-space-2);
}

.date-dropdowns select {
  flex: 1;
  min-width: 80px;
}

/* Helper text — e.g. password length instructions */
h6.font12 {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-normal) !important;
  color: var(--cfa-text-muted) !important;
  line-height: var(--cfa-leading-normal) !important;
  margin-bottom: var(--cfa-space-4) !important;
}

/* Required field note */
.short_info_text {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  color: var(--cfa-text-muted) !important;
  margin-bottom: var(--cfa-space-4) !important;
}

/* Required asterisk */
i.text-red,
span.text-red {
  color: var(--cfa-red) !important;
  font-style: normal;
}

/* Rounded content box — intro/edit0 inner card */
.myaccount_rounded_box {
  background: var(--cfa-bg);
  border: 1px solid var(--cfa-border);
  border-radius: var(--cfa-radius-lg);
  overflow: hidden;
  margin-bottom: var(--cfa-space-5);
}


/* ============================================================
   20. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .formbg {
    padding: 1.5rem 0.75rem;
  }

  :root {
    --fp-card-pad: 1.25rem;
  }

  .join-form,
  .reg-form,
  .register_wrapper.register-align {
    border-radius: var(--cfa-radius-lg, 12px);
  }

  .register {
    flex-direction: column;
  }

  .outter-rgbtn {
    flex: none;
    width: 100%;
  }

  .register-btn {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }

  .register-btn img {
    width: 36px;
    height: 36px;
  }

  /* mobile steps: vertical layout */
  .compinvest-steps ol.steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .compinvest-steps ol.steps::before {
    display: none;
  }

  .compinvest-steps ol.steps > li {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.75rem;
  }

  .compinvest-steps ol.steps > li > a {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .process-divbg {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .invest-container,
  .invest-innerCont,
  .transation-container,
  .transaction-preview-con {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 768px) {
  /* Pitch edit form — stack columns on mobile */
  .mrportrghtsect,
  .containerlabel-input {
    padding: var(--cfa-space-4) var(--cfa-space-3) !important;
  }

  .ac-rightcontainer,
  .equity-ac-container {
    padding: var(--cfa-space-5) var(--cfa-space-4) !important;
  }

  /* Pitch edit nav — compact on mobile */
  .abtcompany-leftnav {
    padding: var(--cfa-space-3) var(--cfa-space-3);
  }

  .ac-leftnavmenu {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--cfa-space-2) !important;
  }

  .ac-leftnavmenu a > div {
    padding: var(--cfa-space-2) var(--cfa-space-3) !important;
  }

  .navbtn-info {
    display: none; /* legend not needed on mobile */
  }

  /* Account settings — full width */
  .inlineblock_container {
    max-width: 100%;
  }

  /* Form wrapper — reduce padding on mobile */
  .myprofile_edit_form,
  .mrmyprofile_edit_form {
    padding: 20px !important;
  }

  .date-dropdowns {
    flex-direction: column;
    align-items: flex-start;
  }

  .date-dropdowns select {
    width: 100%;
    min-width: unset;
  }
}