/* ============================================================
   CFA BUTTON COMPONENT
   Phase: Components > Buttons
   Requires: cfa-tokens.css loaded first

   FIX-01 AUDIT (2026-03-12): All legacy button classes verified aliased:
   .blue_btn ✓  .investbluebtn ✓  .btn-become-investor ✓  .green_btn ✓
   .gray_btn ✓  .blue_footer_btn ✓  .invest-btn ✓  .login_btn ✓
   .logout_btn ✓  .mdr-logout ✓  .join_btn ✓
   No missing aliases found.

   APPROACH — CSS-only coexistence pass:
   Existing PHP button classes are aliased into the same selector
   blocks as their CFA equivalents. No template markup changes
   are required in this pass. When a template is later updated
   to use CFA class names directly, just remove the alias from
   the selector list here.

   PHP class → CFA equivalent mapping:
     .blue_btn           → .cfa-btn-primary
     .investbluebtn      → .cfa-btn-primary + .cfa-btn--lg
     .btn-become-investor→ .cfa-btn-primary + .cfa-btn--lg
     .green_btn          → .cfa-btn-primary  (additive context)
     .gray_btn           → .cfa-btn-secondary (disabled/funded state)
     .blue_footer_btn    → .cfa-btn-secondary
     .invest-btn         → outlined selection button (KYC investor type; see INVEST-BTN section below)
     .login_btn          → .cfa-btn-ghost + .cfa-btn--sm
     .logout_btn         → .cfa-btn-ghost + .cfa-btn--sm
     .mdr-logout         → .cfa-btn-ghost + .cfa-btn--sm
     .join_btn           → .cfa-btn-amber-pill

   NOTE: .green_btn in destructive context (e.g. "Confirm Delete")
   should be updated to .cfa-btn-danger in markup when possible.
   CSS cannot distinguish destructive vs additive use of same class.
   ============================================================ */


/* ================================================================
   SHARED BASE
   Applied to all CFA button classes and PHP aliases.
   ================================================================ */

[class*="cfa-btn"],
.blue_btn,
.investbluebtn,
.btn-become-investor,
.green_btn,
.gray_btn,
.invest-btn,
.blue_footer_btn,
.login_btn,
.logout_btn,
.mdr-logout,
.join_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cfa-space-2);
  font-family: var(--cfa-font-body);
  font-weight: var(--cfa-weight-bold);
  font-size: var(--cfa-text-base);
  text-decoration: none !important;   /* override Bootstrap <a> underline */
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: middle;
  transition:
    background var(--cfa-transition-fast),
    box-shadow var(--cfa-transition-fast),
    transform var(--cfa-transition-fast),
    border-color var(--cfa-transition-fast),
    color var(--cfa-transition-fast),
    opacity var(--cfa-transition-fast);
}


/* ================================================================
   PRIMARY  —  cobalt solid
   PHP aliases: .blue_btn, .green_btn
   ================================================================ */

.cfa-btn-primary,
.blue_btn,
.green_btn {
  background: var(--cfa-cobalt);
  color: #ffffff !important;
  padding: 13px 26px;
  border-radius: var(--cfa-radius-md);
  border: none;
  box-shadow: var(--cfa-shadow-cobalt);
}

.cfa-btn-primary:hover,
.blue_btn:hover,
.green_btn:hover {
  background: var(--cfa-cobalt-mid);
  color: #ffffff !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.cfa-btn-primary:focus-visible,
.blue_btn:focus-visible,
.green_btn:focus-visible {
  outline: 3px solid rgba(36, 81, 209, 0.30);
  outline-offset: 2px;
  background: var(--cfa-cobalt-mid);
}

.cfa-btn-primary:active,
.blue_btn:active,
.green_btn:active {
  background: var(--cfa-navy);
  transform: none;
  box-shadow: none;
}

.cfa-btn-primary:disabled,
.cfa-btn-primary[disabled],
.blue_btn:disabled,
.blue_btn[disabled] {
  opacity: 0.50;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}


/* ================================================================
   SECONDARY  —  outline
   PHP alias: .blue_footer_btn
   ================================================================ */

.cfa-btn-secondary,
.blue_footer_btn {
  background: transparent;
  color: var(--cfa-text-mid) !important;
  padding: 11px 24px;
  border-radius: var(--cfa-radius-md);
  border: 1.5px solid var(--cfa-border-strong) !important;
  box-shadow: none;
}

.cfa-btn-secondary:hover,
.blue_footer_btn:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
  text-decoration: none !important;
}

.cfa-btn-secondary:focus-visible,
.blue_footer_btn:focus-visible {
  outline: 3px solid rgba(36, 81, 209, 0.20);
  outline-offset: 2px;
  border-color: var(--cfa-cobalt) !important;
}

.cfa-btn-secondary:active,
.blue_footer_btn:active {
  background: var(--cfa-cobalt-pale);
}

.cfa-btn-secondary:disabled,
.cfa-btn-secondary[disabled] {
  opacity: 0.50;
  cursor: not-allowed;
  pointer-events: none;
}


/* ================================================================
   INVEST-BTN  —  investor type selection (outlined selection)
   PHP: .invest-btn (KYC flow investor category selection buttons)
   ================================================================ */

.invest-btn {
  background: #ffffff !important;
  color: var(--cfa-text) !important;
  padding: var(--cfa-space-3) var(--cfa-space-5) !important;
  border-radius: var(--cfa-radius-md) !important;
  border: 2px solid var(--cfa-border-strong) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  cursor: pointer !important;
  box-shadow: none;
}

.invest-btn:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
  text-decoration: none !important;
}

.invest-btn:focus-visible {
  outline: 3px solid rgba(36, 81, 209, 0.20);
  outline-offset: 2px;
  border-color: var(--cfa-cobalt) !important;
}

/* Active/selected state — applies when JS adds .active or .pressed */
.invest-btn.active,
.invest-btn.pressed,
.invest-btn.change-color {
  background: var(--cfa-cobalt-pale) !important;
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
}


/* ── Gray/disabled — funded pitch, inactive states ──
   .gray_btn is always treated as disabled-secondary.
*/
.gray_btn {
  background: var(--cfa-bg-soft) !important;
  color: var(--cfa-text-muted) !important;
  padding: 11px 24px;
  border-radius: var(--cfa-radius-md);
  border: 1px solid var(--cfa-border) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}


/* ================================================================
   DANGER  —  destructive actions
   Not in components.css; defined in COMPONENT_STATES.md.
   Use on: "Delete", "Disapprove", "Deactivate", "Confirm Delete"
   ================================================================ */

.cfa-btn-danger {
  background: var(--cfa-red);
  color: #ffffff !important;
  padding: 13px 26px;
  border-radius: var(--cfa-radius-md);
  border: none;
  box-shadow: none;
}

.cfa-btn-danger:hover {
  background: var(--cfa-red-hover);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.30);
  color: #ffffff !important;
  text-decoration: none !important;
}

.cfa-btn-danger:focus-visible {
  outline: 3px solid rgba(220, 38, 38, 0.30);
  outline-offset: 2px;
  background: var(--cfa-red-hover);
}

.cfa-btn-danger:active {
  background: #991B1B;
  box-shadow: none;
}

.cfa-btn-danger:disabled,
.cfa-btn-danger[disabled] {
  opacity: 0.50;
  cursor: not-allowed;
  pointer-events: none;
}


/* ================================================================
   AMBER  —  accent CTA
   ================================================================ */

.cfa-btn-amber {
  background: var(--cfa-amber);
  color: #ffffff !important;
  padding: 13px 26px;
  border-radius: var(--cfa-radius-md);
  border: none;
}

.cfa-btn-amber:hover {
  background: var(--cfa-amber-hover);
  box-shadow: var(--cfa-shadow-amber);
  color: #ffffff !important;
  text-decoration: none !important;
}

.cfa-btn-amber:focus-visible {
  outline: 3px solid rgba(var(--cfa-amber-rgb), 0.30);
  outline-offset: 2px;
}

.cfa-btn-amber:active {
  background: var(--cfa-amber-hover);
  box-shadow: none;
}

.cfa-btn-amber:disabled,
.cfa-btn-amber[disabled] {
  opacity: 0.50;
  cursor: not-allowed;
  pointer-events: none;
}


/* ================================================================
   AMBER PILL  —  nav signup / join CTA
   PHP alias: .join_btn
   ================================================================ */

.cfa-btn-amber-pill,
.join_btn {
  background: var(--cfa-amber);
  color: #ffffff !important;
  padding: 10px 24px;
  border-radius: var(--cfa-radius-full);
  border: none;
  box-shadow: var(--cfa-shadow-amber);
}

.cfa-btn-amber-pill:hover,
.join_btn:hover {
  background: var(--cfa-amber-hover);
  color: #ffffff !important;
  text-decoration: none !important;
}

.cfa-btn-amber-pill:focus-visible,
.join_btn:focus-visible {
  outline: 3px solid rgba(var(--cfa-amber-rgb), 0.30);
  outline-offset: 2px;
}

.cfa-btn-amber-pill:active,
.join_btn:active {
  background: var(--cfa-amber-hover);
  box-shadow: none;
}

/* ================================================================
   POPUP BUTTONS (legacy .sm-btn)
   Used in cooling-off popups and other JS-generated dialogs.
   Scoped to main platform to avoid admin differences.
   ================================================================ */

body.cfa-app .popup_dialog_c_c .sm-btn,
body.cfa-app #popup_dialog_content_placement .sm-btn,
body.cfa-app #my_popup_dialog_content_placement .sm-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--cfa-space-2) !important;
  font-family: var(--cfa-font-body) !important;
  font-weight: var(--cfa-weight-bold) !important;
  font-size: var(--cfa-text-base) !important;
  line-height: 1.2 !important;
  padding: 13px 22px !important;
  min-height: 44px !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--cfa-radius-md) !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

/* Primary action */
body.cfa-app #btn_accept.sm-btn {
  background: var(--cfa-cobalt) !important;
  color: #ffffff !important;
  box-shadow: var(--cfa-shadow-cobalt) !important;
}
body.cfa-app #btn_accept.sm-btn:hover {
  background: var(--cfa-cobalt-mid) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Secondary action */
body.cfa-app #btn_cancel.sm-btn {
  background: transparent !important;
  color: var(--cfa-text-mid) !important;
  border-color: var(--cfa-border-strong) !important;
}
body.cfa-app #btn_cancel.sm-btn:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
  background: rgba(36, 81, 209, 0.08) !important;
}


/* ================================================================
   GHOST  —  subtle bordered, nav-level actions
   PHP aliases: .login_btn, .logout_btn, .mdr-logout
   ================================================================ */

.cfa-btn-ghost,
.login_btn,
.logout_btn,
.mdr-logout {
  background: transparent;
  color: var(--cfa-text-mid) !important;
  padding: 9px 20px;
  border-radius: var(--cfa-radius-sm);
  border: 1px solid var(--cfa-border-strong) !important;
  font-weight: var(--cfa-weight-semibold);
  font-size: var(--cfa-text-sm);
}

.cfa-btn-ghost:hover,
.login_btn:hover,
.logout_btn:hover,
.mdr-logout:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
  text-decoration: none !important;
}

.cfa-btn-ghost:focus-visible,
.login_btn:focus-visible,
.logout_btn:focus-visible {
  outline: 3px solid rgba(36, 81, 209, 0.20);
  outline-offset: 2px;
  border-color: var(--cfa-cobalt) !important;
}

.cfa-btn-ghost:active,
.login_btn:active,
.logout_btn:active {
  background: var(--cfa-cobalt-pale);
}

.cfa-btn-ghost:disabled,
.cfa-btn-ghost[disabled] {
  opacity: 0.50;
  cursor: not-allowed;
  pointer-events: none;
}


/* ================================================================
   WHITE VARIANTS  —  for dark / navy surfaces
   ================================================================ */

/* White solid */
.cfa-btn-white {
  background: #ffffff;
  color: var(--cfa-cobalt) !important;
  padding: 13px 26px;
  border-radius: var(--cfa-radius-md);
  border: none;
}
.cfa-btn-white:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  text-decoration: none !important;
  color: var(--cfa-cobalt) !important;
}

/* White outline */
.cfa-btn-white-outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.90) !important;
  padding: 13px 26px;
  border-radius: var(--cfa-radius-md);
  border: 2px solid rgba(255, 255, 255, 0.40) !important;
}
.cfa-btn-white-outline:hover {
  border-color: rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* White ghost */
.cfa-btn-white-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 13px 26px;
  border-radius: var(--cfa-radius-md);
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
}
.cfa-btn-white-ghost:hover {
  border-color: rgba(255, 255, 255, 0.70) !important;
  text-decoration: none !important;
}

.cfa-btn-white-outline:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.60);
  outline-offset: 2px;
}

.cfa-btn-white-ghost:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.60);
  outline-offset: 2px;
}

/* Amber on dark */
.cfa-btn-amber-on-dark {
  background: var(--cfa-amber);
  color: #ffffff !important;
  padding: 13px 26px;
  border-radius: var(--cfa-radius-md);
  border: none;
}
.cfa-btn-amber-on-dark:hover {
  background: var(--cfa-amber-hover);
  color: #ffffff !important;
  text-decoration: none !important;
}


/* ================================================================
   SIZE MODIFIERS
   ================================================================ */

/* Small — applied to ghost nav buttons by default above;
   explicit modifier for other variants */
.cfa-btn--sm {
  font-size: var(--cfa-text-sm) !important;
  padding: 9px 18px !important;
}

/* Large — heavy CTAs */
.cfa-btn--lg,
.investbluebtn,
.btn-become-investor {
  font-size: var(--cfa-text-lg) !important;
  padding: 16px 36px !important;
}

/* Large primary styles for PHP aliases */
.investbluebtn,
.btn-become-investor {
  background: var(--cfa-cobalt);
  color: #ffffff !important;
  border-radius: var(--cfa-radius-md);
  border: none;
  box-shadow: var(--cfa-shadow-cobalt);
}
.investbluebtn:hover,
.btn-become-investor:hover {
  background: var(--cfa-cobalt-mid);
  color: #ffffff !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}
.investbluebtn:focus-visible,
.btn-become-investor:focus-visible {
  outline: 3px solid rgba(36, 81, 209, 0.30);
  outline-offset: 2px;
}
.investbluebtn:active,
.btn-become-investor:active {
  background: var(--cfa-navy);
  transform: none;
  box-shadow: none;
}


/* ================================================================
   LOADING STATE
   Applied to any button variant while an async action is pending.
   Usage: add class="loading" and disabled attribute.
   ================================================================ */

[class*="cfa-btn"].loading,
.blue_btn.loading,
.investbluebtn.loading {
  pointer-events: none;
  opacity: 0.75;
}


/* ================================================================
   GLOBAL DISABLED — universal fallback
   ================================================================ */

[class*="cfa-btn"][disabled],
[class*="cfa-btn"]:disabled,
.blue_btn[disabled],
.join_btn[disabled] {
  opacity: 0.50 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ================================================================
   BOOTSTRAP CLASS ALIASES
   Map Bootstrap button classes to CFA equivalents so templates
   using .btn-primary / .btn-default / .btn-success etc. get
   the correct CFA token styling without markup changes.
   ================================================================ */

/* Base typography applied to all Bootstrap .btn elements */
.btn {
  font-family: var(--cfa-font-body) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  font-size: var(--cfa-text-sm) !important;
  border-radius: var(--cfa-radius-md) !important;
  transition:
    background var(--cfa-transition-fast),
    border-color var(--cfa-transition-fast),
    color var(--cfa-transition-fast),
    box-shadow var(--cfa-transition-fast) !important;
  cursor: pointer;
}

/* .btn-primary → CFA cobalt primary */
.btn-primary,
.btn.btn-primary {
  background: var(--cfa-cobalt) !important;
  color: #fff !important;
  border-color: var(--cfa-cobalt) !important;
  box-shadow: var(--cfa-shadow-cobalt) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--cfa-cobalt-mid) !important;
  border-color: var(--cfa-cobalt-mid) !important;
  color: #fff !important;
}
.btn-primary:active,
.btn.btn-primary:active {
  background: var(--cfa-navy) !important;
  border-color: var(--cfa-navy) !important;
  box-shadow: none !important;
}
.btn-primary:focus,
.btn.btn-primary:focus {
  outline: 3px solid rgba(36, 81, 209, 0.30) !important;
  outline-offset: 2px;
}
.btn-primary[disabled],
.btn-primary:disabled {
  opacity: 0.50 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* .btn-success → also cobalt (no separate green CTA in design system) */
.btn-success,
.btn.btn-success {
  background: var(--cfa-cobalt) !important;
  color: #fff !important;
  border-color: var(--cfa-cobalt) !important;
}
.btn-success:hover,
.btn.btn-success:hover {
  background: var(--cfa-cobalt-mid) !important;
  border-color: var(--cfa-cobalt-mid) !important;
  color: #fff !important;
}

/* .btn-default / bare .btn (no variant) → secondary outline */
.btn-default,
.btn.btn-default {
  background: transparent !important;
  color: var(--cfa-text-mid) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
}
.btn-default:hover,
.btn.btn-default:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
  background: transparent !important;
}

/* .btn-danger / .btn-warning → danger red */
.btn-danger,
.btn.btn-danger {
  background: var(--cfa-red) !important;
  color: #fff !important;
  border-color: var(--cfa-red) !important;
}
.btn-danger:hover,
.btn.btn-danger:hover {
  background: var(--cfa-red-hover) !important;
  border-color: var(--cfa-red-hover) !important;
  color: #fff !important;
}

/* .btn-sqr (CFA custom square variant) → secondary ghost */
.btn-sqr {
  background: transparent !important;
  color: var(--cfa-text-mid) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  border-radius: var(--cfa-radius-sm) !important;
}
.btn-sqr:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
  background: var(--cfa-cobalt-pale) !important;
}

/* ================================================================
   OPTION CARD  —  investor type selection (future markup upgrade)
   PHP: .invest-btn is handled above with its own block.
   This .cfa-option-card pattern is the future label/radio version.
   New pattern (requires markup update):
     <label class="cfa-option-card">
       <input type="radio" name="investor_type" value="hnwi">
       <span class="cfa-option-card-label">High Net Worth Investor</span>
     </label>
   This CSS is ready; PHP template update is a separate task.
   ================================================================ */

.cfa-option-card {
  display: block;
  padding: var(--cfa-space-5) var(--cfa-space-6);
  border: 1.5px solid var(--cfa-border-strong);
  border-radius: var(--cfa-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-align: center;
  font-family: var(--cfa-font-body);
  font-weight: var(--cfa-weight-semibold);
  font-size: var(--cfa-text-base);
  color: var(--cfa-text-mid);
  user-select: none;
  background: var(--cfa-bg);
}

.cfa-option-card input[type="radio"],
.cfa-option-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.cfa-option-card:hover {
  border-color: var(--cfa-cobalt);
  color: var(--cfa-cobalt);
}

.cfa-option-card.selected,
.cfa-option-card:has(input:checked) {
  border-color: var(--cfa-cobalt);
  background: var(--cfa-cobalt-pale);
  color: var(--cfa-cobalt);
}

.cfa-option-card:focus-within {
  outline: 3px solid rgba(36, 81, 209, 0.20);
  outline-offset: 2px;
}

.cfa-option-card-label {
  display: block;
  font-size: var(--cfa-text-base);
  font-weight: var(--cfa-weight-semibold);
  line-height: 1.4;
}

.cfa-option-card-desc {
  display: block;
  font-size: var(--cfa-text-sm);
  font-weight: var(--cfa-weight-normal);
  color: var(--cfa-text-muted);
  margin-top: var(--cfa-space-1);
  line-height: 1.5;
}