/* Botões */
.btn {
  --btn-bg: var(--button-color);
  --btn-fg: var(--button-text-color);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-6);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  user-select: none;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn:hover:not(:disabled) {
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--btn-bg) 90%, #000);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: 54px;
  font-size: var(--fs-sm);
}

.btn--sm {
  min-height: 38px;
  padding: 0 var(--space-4);
  font-size: var(--fs-xs);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--primary-color);
  --btn-border: var(--line);
}

.btn--outline:hover:not(:disabled) {
  background: var(--accent-soft);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--primary-color);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--accent-soft);
  box-shadow: none;
}

.btn--gold {
  --btn-bg: var(--secondary-color);
  --btn-fg: #fff;
}

.btn--whatsapp {
  --btn-bg: #2F7D5B;
  --btn-fg: #fff;
}

.btn--danger {
  --btn-bg: var(--danger);
  --btn-fg: #fff;
}

.btn--danger-outline {
  --btn-bg: transparent;
  --btn-fg: var(--danger);
  --btn-border: color-mix(in srgb, var(--danger) 40%, transparent);
}

.btn--danger-outline:hover:not(:disabled) {
  background: var(--danger-soft);
}

.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Botão de ícone redondo */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--primary-color);
  transition: background-color var(--dur) var(--ease);
  flex: none;
}

.icon-btn:hover {
  background: var(--accent-soft);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}