/* ========================================================
   button.css - Pill buttons (links and <button>s alike)

   .btn + one variant (--primary, --secondary, --ghost)
   + one size (--md, --sm).
   ======================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.btn--md {
  padding: 12px 22px;
  font-size: 0.95rem;
}

.btn--sm {
  padding: 9px 16px;
  font-size: 0.85rem;
}

.btn--primary {
  background: linear-gradient(145deg, var(--color-orange-light), var(--color-orange));
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(242, 100, 25, 0.8);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-navy);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}

.btn--ghost {
  background: transparent;
  color: var(--color-navy);
}

/* Hover effects only where there is a real pointer, so they don't stick after a tap */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .btn--ghost:hover {
    background: rgba(19, 36, 92, 0.06);
  }
}