/**
 * TextPilot – Buttons & Interactive Elements
 * Buttons, badges, dropdowns, spinner, keyboard shortcut hints.
 */

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  padding: .65rem 1.5rem;
  font-size: .875rem; font-weight: 600;
  border-radius: 10px; letter-spacing: -.01em;
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.btn-sm {
  padding: .5rem 1.15rem;
  font-size: .8125rem; min-height: 34px; border-radius: 8px;
}

/* Primary */
.btn-primary {
  background: linear-gradient(180deg, #16BDD1 0%, #0EAEC1 50%, #0B9DB0 100%);
  border-color: #0B9DB0; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 -1px 0 rgba(0,0,0,.08) inset, 0 2px 6px rgba(14,174,193,.45), 0 6px 20px rgba(14,174,193,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(180deg, #1AC5DA 0%, #13B9CC 50%, #0EAEC1 100%);
  border-color: #0EAEC1; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 -1px 0 rgba(0,0,0,.08) inset, 0 4px 12px rgba(14,174,193,.55), 0 10px 32px rgba(14,174,193,.25);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(0,0,0,.1) inset, 0 2px 6px rgba(14,174,193,.3);
}

/* Secondary */
.btn-outline-secondary {
  color: var(--tp-text-secondary); border-color: var(--tp-border);
  background: var(--tp-surface);
  box-shadow: var(--shadow-xs), var(--shadow-sm);
}
.btn-outline-secondary:hover {
  background: var(--tp-bg); color: var(--tp-text); border-color: #C5C8D5;
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs), var(--shadow-md);
}

/* Ghost white — hero card */
.btn-ghost-white {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.32); font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 2px 6px rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,.26); color: #fff;
  border-color: rgba(255,255,255,.5);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 4px 12px rgba(0,0,0,.14);
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge        { border-radius: 5px; font-weight: 700; letter-spacing: .01em; }
.tp-badge-plan { font-size: .9rem; }

/* ── Dropdowns ────────────────────────────────────────────────────────── */
.dropdown-menu  { border-radius: var(--tp-radius); border-color: var(--tp-border); box-shadow: var(--shadow-lg); }
.dropdown-item  { font-size: .875rem; }

/* ── Spinner ──────────────────────────────────────────────────────────── */
.tp-spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid var(--tp-border); border-top-color: var(--tp-brand);
  animation: tp-spin .7s linear infinite; vertical-align: middle;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* ── Dark Mode: Buttons ───────────────────────────────────────────────── */
[data-theme="dark"] .btn-outline-secondary { background: #1E2438; border-color: var(--tp-border); color: var(--tp-text-secondary); }
[data-theme="dark"] .btn-outline-secondary:hover { background: #252B3E; color: var(--tp-text); }

/* ── Dark Mode: Dropdowns ─────────────────────────────────────────────── */
[data-theme="dark"] .dropdown-menu  { background: #1E2438; border-color: var(--tp-border); }
[data-theme="dark"] .dropdown-item  { color: var(--tp-text-secondary); }
[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.06); color: var(--tp-text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--tp-border); }