/* ================================================================
   BGS BUTTONS — Premium Institutional
   Primary: Deep Blue (NOT orange/gold)
   Secondary: Outlined blue
   Ghost: For dark backgrounds
   ================================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--fw-semi);
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out),
    color var(--dur-normal) var(--ease-out),
    transform var(--dur-fast),
    box-shadow var(--dur-normal);
  -webkit-tap-highlight-color: transparent;
}
.btn svg { flex-shrink: 0; width: 18px; height: 18px; transition: transform var(--dur-fast); }
.btn:hover svg { transform: translateX(2px); }

/* Primary — deep confident blue */
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-lg);
}
.btn--primary:active { transform: translateY(0); }

/* Secondary — outlined */
.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--blue-50);
  transform: translateY(-1px);
}

/* Ghost — for dark/blue backgrounds */
.btn--ghost {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.30);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.55);
}

/* Ghost dark — for light backgrounds */
.btn--ghost-dark {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.btn--ghost-dark:hover {
  background: var(--grey-50);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* WhatsApp specific */
.btn--whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
}
.btn--whatsapp:hover {
  background: #1DAF55;
  border-color: #1DAF55;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  transform: translateY(-2px);
}

/* Sizes */
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--text-sm); }
.btn--sm svg { width: 15px; height: 15px; }
.btn--lg { padding: 1rem 2.25rem; font-size: 1.0625rem; }
.btn--lg svg { width: 20px; height: 20px; }
.btn--xl { padding: 1.125rem 2.75rem; font-size: 1.125rem; }
.btn--xl svg { width: 22px; height: 22px; }
.btn--full { width: 100%; }