/* ============================================================
   buttons.css — Botões do sistema
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ecom-space-2);
  padding: var(--ecom-space-3) var(--ecom-space-6);
  font-size: var(--ecom-text-sm);
  font-weight: var(--ecom-font-semibold);
  line-height: var(--ecom-leading-normal);
  border-radius: var(--ecom-radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--ecom-duration-fast) var(--ecom-ease-default),
    border-color var(--ecom-duration-fast) var(--ecom-ease-default),
    transform var(--ecom-duration-fast) var(--ecom-ease-default);
  white-space: nowrap;
  text-decoration: none;
}

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

/* Primário — laranja */
.btn--primary {
  background-color: var(--ecom-action-primary);
  color: var(--ecom-text-on-primary);
  border-color: var(--ecom-action-primary);
}

.btn--primary:hover {
  background-color: var(--ecom-action-primary-hover);
  border-color: var(--ecom-action-primary-hover);
}

/* Secundário — outline escuro */
.btn--secondary {
  background-color: transparent;
  color: var(--ecom-text-inverse);
  border-color: var(--ecom-color-neutral-400);
}

.btn--secondary:hover {
  background-color: rgb(255 255 255 / 0.1);
  border-color: var(--ecom-color-neutral-0);
}

/* Outline — borda escura */
.btn--outline {
  background-color: transparent;
  color: var(--ecom-text-primary);
  border-color: var(--ecom-color-neutral-800);
}

.btn--outline:hover {
  background-color: var(--ecom-color-neutral-800);
  color: var(--ecom-text-inverse);
}

/* Ghost — sem borda */
.btn--ghost {
  background-color: transparent;
  color: var(--ecom-color-primary-500);
  border-color: transparent;
  padding-inline: var(--ecom-space-2);
}

.btn--ghost:hover {
  background-color: var(--ecom-color-primary-50);
}

/* WhatsApp */
.btn--whatsapp {
  background-color: #25d366;
  color: var(--ecom-color-neutral-0);
  border-color: #25d366;
}

.btn--whatsapp:hover {
  background-color: #1da851;
  border-color: #1da851;
}

/* Tamanhos */
.btn--sm {
  padding: var(--ecom-space-2) var(--ecom-space-4);
  font-size: var(--ecom-text-xs);
}

.btn--lg {
  padding: var(--ecom-space-4) var(--ecom-space-8);
  font-size: var(--ecom-text-base);
}

/* Largura total */
.btn--full {
  width: 100%;
}

/* Botão ícone */
.btn--icon {
  padding: var(--ecom-space-2);
  border-radius: var(--ecom-radius-md);
}

.btn--icon img,
.btn--icon svg {
  width: 1.25rem;
  height: 1.25rem;
}