/**
 * BMP Unified Button System
 * Single source of truth for all button styles across buildmyprompts.com
 *
 * ─── CANONICAL CLASSES ──────────────────────────────────────────────────────
 *
 *   .bmp-btn                   Base — apply to every button alongside a variant
 *   .bmp-btn-primary           Gold gradient, pill, black text — main CTA
 *   .bmp-btn-outline           Transparent + border, pill — secondary action
 *   .bmp-btn-secondary         Transparent + border, 8px radius — form/modal context
 *   .bmp-btn-ghost             No border, subtle hover — low-emphasis utility
 *   .bmp-btn-danger            Red-tint — destructive actions
 *
 *   Size modifiers (stack with any variant):
 *   .bmp-btn-sm                Compact — 6px 16px padding, 12px text
 *   .bmp-btn-lg                Hero — 16px 40px padding, 16px text
 *
 * ─── LEGACY ALIASES ─────────────────────────────────────────────────────────
 *   The rules below re-declare every cross-page button class to the same
 *   canonical tokens so all existing HTML keeps working without change.
 *   This file is loaded LAST in every <head>, so same-specificity rules here
 *   override per-page <style> block definitions.
 *
 * ─── NOT COVERED ────────────────────────────────────────────────────────────
 *   App-specific interaction buttons (.send-btn, .suggest-btn, .session-btn,
 *   .tab-btn, .act-btn, .page-btn, .mic-btn, .upload-btn, etc.) stay local
 *   to their pages — their sizing/layout is tightly coupled to the UI context.
 */

/* ─── Shared Tokens ─────────────────────────────────────────────────────────
   Fallbacks ensure the file works even if a page hasn't declared :root vars. */
:root {
  --bmp-gold:   #FFD700;
  --bmp-amber:  #E8742A;
  --bmp-cream:  #E8DDD0;
  --bmp-border: #333;
  --bmp-grad:   linear-gradient(90deg, #FFD700, #E8742A);
  --bmp-grad-glow: rgba(255, 215, 0, 0.25);
  --bmp-danger: #ff3b30;
  --bmp-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */
.bmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border: none;
  border-radius: 50px;
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.bmp-btn:disabled,
.bmp-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary — gold gradient pill */
.bmp-btn-primary {
  background: var(--bmp-grad);
  color: #000;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15);
}
.bmp-btn-primary:hover {
  opacity: 0.88;
  box-shadow: 0 4px 20px var(--bmp-grad-glow);
  transform: translateY(-1px);
}
.bmp-btn-primary:active {
  opacity: 1;
  transform: translateY(0);
  box-shadow: none;
}

/* Outline — transparent with border, pill */
.bmp-btn-outline {
  background: transparent;
  color: var(--cream, var(--bmp-cream));
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 600;
}
.bmp-btn-outline:hover {
  border-color: var(--amber, var(--bmp-amber));
  color: var(--amber, var(--bmp-amber));
}

/* Secondary — outline but rectangular (8px) for form/modal contexts */
.bmp-btn-secondary {
  background: transparent;
  color: var(--cream, var(--bmp-cream));
  border: 1px solid var(--border, var(--bmp-border));
  border-radius: 8px;
  font-weight: 600;
}
.bmp-btn-secondary:hover {
  border-color: var(--amber, var(--bmp-amber));
  color: var(--amber, var(--bmp-amber));
}

/* Ghost — no border, very subtle hover fill */
.bmp-btn-ghost {
  background: transparent;
  color: var(--gray, #888);
  border: none;
  border-radius: 8px;
  font-weight: 500;
}
.bmp-btn-ghost:hover {
  color: var(--cream, var(--bmp-cream));
  background: rgba(255, 255, 255, 0.05);
}

/* Danger — red-tint */
.bmp-btn-danger {
  background: rgba(255, 59, 48, 0.1);
  color: var(--bmp-danger);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 8px;
  font-weight: 600;
}
.bmp-btn-danger:hover {
  background: rgba(255, 59, 48, 0.2);
  border-color: rgba(255, 59, 48, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIZE MODIFIERS
   ═══════════════════════════════════════════════════════════════════════════ */
.bmp-btn-sm {
  padding: 6px 16px;
  font-size: 12px;
}
.bmp-btn-lg {
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY ALIASES
   Cross-page class names unified to canonical tokens.
   Each rule here replaces the fragmented per-page definitions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── index.html ─────────────────────────────────────────────────────── */

/* Hero CTA — large gradient pill */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 50px;
  background: var(--bmp-grad);
  color: #000;
  font-family: var(--mono, 'Courier New', monospace);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15);
}
.cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232, 116, 42, 0.3);
}

/* Pill buttons (mobile register, nav pills) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-pill.btn-filled {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.btn-pill.btn-filled:hover {
  background: rgba(255, 255, 255, 0.18);
}
.btn-pill.btn-outline,
.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--cream, var(--bmp-cream));
}
.btn-pill.btn-outline:hover,
.btn-outline:hover {
  border-color: var(--amber, var(--bmp-amber));
  color: var(--amber, var(--bmp-amber));
}

/* ── pricing.html ───────────────────────────────────────────────────── */
.plan-cta {
  display: block;
  width: 100%;
  padding: 13px 24px;
  border-radius: 50px;
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease,
              color 0.2s ease;
}
.plan-cta.primary {
  background: var(--bmp-grad);
  color: #000;
  border: none;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15);
}
.plan-cta.primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--bmp-grad-glow);
}
.plan-cta.secondary {
  background: transparent;
  color: var(--cream, var(--bmp-cream));
  border: 1px solid var(--border, var(--bmp-border));
}
.plan-cta.secondary:hover {
  border-color: var(--amber, var(--bmp-amber));
  color: var(--amber, var(--bmp-amber));
}

/* ── faq.html ───────────────────────────────────────────────────────── */
.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 50px;
  background: var(--bmp-grad);
  color: #000;
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15);
}
.cta-btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--bmp-grad-glow);
}
.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 50px;
  background: transparent;
  color: var(--cream, var(--bmp-cream));
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cta-btn-outline:hover {
  border-color: var(--amber, var(--bmp-amber));
  color: var(--amber, var(--bmp-amber));
}

/* ── manage-profile.html / dashboard.html / marketplace.html ────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 24px;
  border-radius: 8px;
  background: var(--bmp-grad);
  color: #000;
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15);
}
.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--bmp-grad-glow);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 23px;
  border-radius: 8px;
  background: transparent;
  color: var(--cream, var(--bmp-cream));
  border: 1px solid var(--border, var(--bmp-border));
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover {
  border-color: var(--amber, var(--bmp-amber));
  color: var(--amber, var(--bmp-amber));
}
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 23px;
  border-radius: 8px;
  background: rgba(255, 59, 48, 0.1);
  color: var(--bmp-danger);
  border: 1px solid rgba(255, 59, 48, 0.3);
  font-family: var(--sans, var(--bmp-sans));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-danger:hover {
  background: rgba(255, 59, 48, 0.2);
  border-color: rgba(255, 59, 48, 0.5);
}

/* ── register.html ──────────────────────────────────────────────────── */
.register-button {
  display: block;
  width: 100%;
  padding: 13px 24px;
  border-radius: 8px;
  background: var(--bmp-grad);
  color: #000;
  font-family: var(--sans, var(--bmp-sans));
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.15);
}
.register-button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--bmp-grad-glow);
}

/* ── roadmap.html / story.html hero inline CTA ─────────────────────── */
/* (These are inline-style <a> tags — covered by .cta-btn-primary above) */
