/* ============================================================
   CFE Design System — Buttons
   ----------------------------------------------------------------
   Extends the base .cfe-btn / .cfe-btn--primary / --secondary /
   --tertiary / --inverse-* rules in cfe-styles.css with:
     - missing states (focus-visible ring, :active, disabled)
     - sizes (--xl, --sm, --micro)
     - variants (--ghost, --destructive, --destructive-outline,
       --success, --icon, --toggle)
     - states (.is-loading, .is-success transient flash)
     - FunnelKit #place_order pinning to primary look

   Scope: body.cfe-redesign only. Tokens: --cfe-ds-* only.
   ============================================================ */


/* ---------- New tokens added by this module ---------- */
:root {
  /* Alert (destructive) */
  --cfe-ds-color-alert:        #C4553D;
  --cfe-ds-color-alert-deep:   #A8412E;
  --cfe-ds-color-alert-bg:     #FFF4F1;
  --cfe-ds-color-alert-border: #F4C9BD;

  /* Mist — secondary hover, disabled border */
  --cfe-ds-color-mist:         #E8EAED;
  --cfe-ds-color-border-hover: #CBD0D8;

  /* Focus ring — single token used by every focusable cfe-btn */
  --cfe-ds-shadow-focus:       0 0 0 3px rgba(27, 42, 59, 0.18);
  --cfe-ds-shadow-focus-alert: 0 0 0 3px rgba(196, 85, 61, 0.25);

  /* Height tokens — derived (padding sets actual height); exposed so
     grids can read them */
  --cfe-ds-btn-h-xl:      56px;
  --cfe-ds-btn-h-default: 40px;
  --cfe-ds-btn-h-sm:      32px;
  --cfe-ds-btn-h-micro:   24px;
}


/* ============================================================
   Base — extend the existing .cfe-btn with missing states
   ============================================================ */
body.cfe-redesign .cfe-btn {
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    border-color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    color var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    box-shadow var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    transform var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}

/* Inline icon inside any .cfe-btn — auto-sized to font */
body.cfe-redesign .cfe-btn > svg,
body.cfe-redesign .cfe-btn > .cfe-ic {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Keyboard focus — universal ring; never remove the outline silently */
body.cfe-redesign .cfe-btn:focus-visible {
  outline: 0;
  box-shadow: var(--cfe-ds-shadow-focus);
}

/* Active (pressed) — universal subtle inset */
body.cfe-redesign .cfe-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(27, 42, 59, 0.12);
}

/* Disabled — [disabled], [aria-disabled="true"], and .cfe-btn--disabled
   (the third is for <a> tags where disabled isn't a valid attr) */
body.cfe-redesign .cfe-btn[disabled],
body.cfe-redesign .cfe-btn[aria-disabled="true"],
body.cfe-redesign .cfe-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}


/* ============================================================
   Sizes
   ============================================================ */
body.cfe-redesign .cfe-btn--xl {
  padding: var(--cfe-ds-space-4) var(--cfe-ds-space-6);
  font-size: 16px;
  gap: 10px;
}
body.cfe-redesign .cfe-btn--xl > svg,
body.cfe-redesign .cfe-btn--xl > .cfe-ic { width: 18px; height: 18px; }

body.cfe-redesign .cfe-btn--sm {
  padding: var(--cfe-ds-space-2) 14px;
  font-size: 13px;
  gap: 6px;
}

body.cfe-redesign .cfe-btn--micro {
  padding: var(--cfe-ds-space-1) 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  gap: 4px;
}


/* ============================================================
   Primary — extend hover with subtle lift + active depress
   ============================================================ */
body.cfe-redesign .cfe-btn--primary {
  border-color: var(--cfe-ds-color-ink);
  box-shadow: 0 1px 2px rgba(27, 42, 59, 0.10);
}
body.cfe-redesign .cfe-btn--primary:hover {
  border-color: var(--cfe-ds-color-ink-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 42, 59, 0.18);
}


/* ============================================================
   Ghost — used in markup, previously undefined
   ============================================================ */
body.cfe-redesign .cfe-btn--ghost {
  background: transparent;
  color: var(--cfe-ds-color-ink);
  border-color: transparent;
}
body.cfe-redesign .cfe-btn--ghost:hover {
  background: var(--cfe-ds-color-mist);
}


/* ============================================================
   Destructive
   ============================================================ */
body.cfe-redesign .cfe-btn--destructive {
  background: var(--cfe-ds-color-alert);
  color: #fff;
  border-color: var(--cfe-ds-color-alert);
}
body.cfe-redesign .cfe-btn--destructive:hover {
  background: var(--cfe-ds-color-alert-deep);
  color: #fff;
  border-color: var(--cfe-ds-color-alert-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(196, 85, 61, 0.28);
}
body.cfe-redesign .cfe-btn--destructive:focus-visible {
  box-shadow: var(--cfe-ds-shadow-focus-alert);
}

/* Outline destructive — for "Remove" pill button on the course panel */
body.cfe-redesign .cfe-btn--destructive-outline {
  background: transparent;
  color: var(--cfe-ds-color-alert);
  border-color: var(--cfe-ds-color-alert-border);
}
body.cfe-redesign .cfe-btn--destructive-outline:hover {
  background: var(--cfe-ds-color-alert);
  color: #fff;
  border-color: var(--cfe-ds-color-alert);
}


/* ============================================================
   Success — mint tint default, fills to mint-text on hover
   ============================================================ */
body.cfe-redesign .cfe-btn--success {
  background: var(--cfe-ds-color-mint-bg);
  color: var(--cfe-ds-color-mint-text);
  border-color: var(--cfe-ds-color-mint-border);
  box-shadow: 0 1px 2px rgba(15, 122, 42, 0.05);
}
body.cfe-redesign .cfe-btn--success:hover {
  background: var(--cfe-ds-color-mint-text);
  color: #fff;
  border-color: var(--cfe-ds-color-mint-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 122, 42, 0.22);
}


/* ============================================================
   Icon-only — square, tight padding, pairs with cfe-tooltip
   ============================================================ */
body.cfe-redesign .cfe-btn--icon {
  padding: 0;
  width: 40px;
  height: 40px;
  justify-content: center;
}
body.cfe-redesign .cfe-btn--icon > svg,
body.cfe-redesign .cfe-btn--icon > .cfe-ic { width: 16px; height: 16px; }

body.cfe-redesign .cfe-btn--icon.cfe-btn--sm    { width: 32px; height: 32px; }
body.cfe-redesign .cfe-btn--icon.cfe-btn--micro { width: 24px; height: 24px; }
body.cfe-redesign .cfe-btn--icon.cfe-btn--xl    { width: 56px; height: 56px; }


/* ============================================================
   Toggle — segmented / aria-pressed state
   ============================================================ */
body.cfe-redesign .cfe-btn--toggle {
  background: transparent;
  color: var(--cfe-ds-color-graphite);
  border-color: var(--cfe-ds-color-mist);
}
body.cfe-redesign .cfe-btn--toggle:hover {
  border-color: var(--cfe-ds-color-graphite);
  color: var(--cfe-ds-color-ink);
}
body.cfe-redesign .cfe-btn--toggle[aria-pressed="true"] {
  background: var(--cfe-ds-color-ink);
  color: #fff;
  border-color: var(--cfe-ds-color-ink);
}


/* ============================================================
   Loading state — drop a span.cfe-btn-loader inside or use .is-loading
   ============================================================ */
body.cfe-redesign .cfe-btn.is-loading {
  cursor: progress;
  pointer-events: none;
  color: transparent;
  position: relative;
}
body.cfe-redesign .cfe-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--cfe-ds-color-ink);
  animation: cfe-btn-spin 0.8s linear infinite;
}
body.cfe-redesign .cfe-btn--primary.is-loading::after,
body.cfe-redesign .cfe-btn--destructive.is-loading::after,
body.cfe-redesign .cfe-btn--success.is-loading::after {
  color: #fff;
}
@keyframes cfe-btn-spin { to { transform: rotate(360deg); } }


/* ============================================================
   Transient success flash — JS adds .is-success for ~1500ms
   ============================================================ */
body.cfe-redesign .cfe-btn.is-success {
  background: var(--cfe-ds-color-mint-bg);
  color: var(--cfe-ds-color-mint-text);
  border-color: var(--cfe-ds-color-mint-border);
}


/* ============================================================
   FunnelKit checkout — #place_order
   ----------------------------------------------------------------
   FK's updated_checkout JS overwrites #place_order innerHTML from
   data-value on every cart update. Visual decoration MUST come
   from CSS pseudo-elements or border treatments — NEVER inject
   spans into the button content. This rule re-applies the
   canonical primary look even after FK restamps the text.
   ============================================================ */
body.cfe-redesign #place_order,
body.cfe-redesign #place_order.button.alt {
  background: var(--cfe-ds-color-ink) !important;
  color: #fff !important;
  border: 1px solid var(--cfe-ds-color-ink) !important;
  border-radius: var(--cfe-ds-radius-sm) !important;
  font-family: var(--cfe-ds-font-body) !important;
  font-size: var(--cfe-ds-text-ui-size) !important;
  font-weight: var(--cfe-ds-text-ui-weight) !important;
  padding: var(--cfe-ds-space-3) var(--cfe-ds-space-5) !important;
  box-shadow: 0 1px 2px rgba(27, 42, 59, 0.10);
  transition:
    background var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    transform var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard),
    box-shadow var(--cfe-ds-duration-quick) var(--cfe-ds-ease-standard);
}
body.cfe-redesign #place_order:hover {
  background: var(--cfe-ds-color-ink-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 42, 59, 0.18);
}


/* ============================================================
   Composability examples (reference)
   ----------------------------------------------------------------
   <button class="cfe-btn cfe-btn--primary">Submit</button>
   <button class="cfe-btn cfe-btn--primary cfe-btn--xl">Get started</button>
   <button class="cfe-btn cfe-btn--secondary cfe-btn--sm">Learn more</button>
   <button class="cfe-btn cfe-btn--ghost cfe-btn--icon" aria-label="Close">
     <svg class="cfe-ic"><use href="#cfe-close"/></svg>
   </button>
   <button class="cfe-btn cfe-btn--destructive-outline cfe-btn--sm">Remove</button>
   <button class="cfe-btn cfe-btn--toggle" aria-pressed="false">Self-paced</button>
   <button class="cfe-btn cfe-btn--primary is-loading">Working…</button>
   <button class="cfe-btn cfe-btn--primary" disabled>Submit</button>
   ============================================================ */