/* ════════════════════════════════════════════════════════════
   BluCruise Design System — buttons.css
   Four variants only. Never add new button styles.
   Primary / Secondary / Outline / Text link
   Requires: variables.css
════════════════════════════════════════════════════════════ */

/* ── Base ───────────────────────────────────────────────────── */
.bc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-n);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 12px 24px;
  border-radius: var(--rad);
  border: none;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans),
              transform .1s, box-shadow var(--trans);
  white-space: nowrap;
  text-decoration: none;
}

.bc-btn:active { transform: scale(.97); }

.bc-btn i { font-size: 16px; }

/* ── Primary (coral) ────────────────────────────────────────── */
.bc-btn--primary {
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(232,80,58,.28);
}

.bc-btn--primary:hover {
  background: var(--coral-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(232,80,58,.36);
}

/* ── Secondary (gold) ───────────────────────────────────────── */
.bc-btn--secondary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(196,154,42,.30);
}

.bc-btn--secondary:hover {
  background: var(--gold-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(196,154,42,.40);
}

/* ── Outline (white on dark) ─────────────────────────────────── */
.bc-btn--outline {
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.38);
}

.bc-btn--outline:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.65);
}

/* ── Outline dark (on light backgrounds) ────────────────────── */
.bc-btn--outline-dark {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--br);
}

.bc-btn--outline-dark:hover {
  border-color: var(--navy);
  background: rgba(27,45,79,.04);
}

/* ── Ghost (on dark backgrounds) ────────────────────────────── */
.bc-btn--ghost {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.14);
}

.bc-btn--ghost:hover {
  background: rgba(255,255,255,.12);
}

/* ── Text link ───────────────────────────────────────────────── */
.bc-btn--text {
  background: none;
  color: var(--coral);
  padding: 0;
  border: none;
  box-shadow: none;
  font-size: 13px;
}

.bc-btn--text:hover { opacity: .7; }
.bc-btn--text:active { transform: none; }

/* ── Sizes ──────────────────────────────────────────────────── */
.bc-btn--sm {
  font-size: 12px;
  padding: 8px 16px;
}

.bc-btn--lg {
  font-size: 15px;
  padding: 14px 28px;
}

.bc-btn--full {
  width: 100%;
  justify-content: center;
}

/* ── Planner save button ────────────────────────────────────── */
.bc-btn--save {
  background: rgba(196,154,42,.1);
  color: var(--gold);
  border: 1.5px solid rgba(196,154,42,.3);
  font-size: 13px;
  padding: 9px 18px;
}

.bc-btn--save:hover {
  background: rgba(196,154,42,.18);
  border-color: rgba(196,154,42,.55);
}

.bc-btn--save.saved {
  background: rgba(22,163,74,.1);
  color: #16A34A;
  border-color: rgba(22,163,74,.3);
}

.bc-btn--save.saved:hover {
  background: rgba(22,163,74,.18);
}