/* <wa-cta-button> — shared CTA button, all routes */

wa-cta-button { display: inline-block; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 999px; font: 600 14.5px / 1 var(--font-display); text-decoration: none; border: none; cursor: pointer; white-space: nowrap; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.16s ease; }

.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(255, 58, 29, 0.35); }
.btn-accent:hover { transform: translateY(-2px); }

.btn-wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.36); }
.btn-wa:hover { transform: translateY(-2px); }

.btn-ghost-dark { background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }

.btn-dark { background: #0C0C11; color: #fff; }
.btn-dark:hover { opacity: 0.85; }

.btn-lg { height: 56px; padding: 0 28px; font-size: 15.5px; }
.btn-xl { height: 58px; padding: 0 32px; font-size: 16.5px; }
.btn-nav { height: 42px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-disabled { opacity: 0.6; pointer-events: none; }

.btn-icon { display: block; width: 17px; height: 17px; flex: none; }

/* "special" pulsing corner badge, used for the promo nav button */
.btn-special { position: relative; }
.btn-special::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-dark); animation: waSpecialPulse 2.2s ease-out infinite; }
@keyframes waSpecialPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 58, 29, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(255, 58, 29, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 58, 29, 0); } }

@media (max-width: 560px) {
  .btn-nav span:not(.btn-icon) { display: none; }
}