/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--color-orange);
  --btn-fg: var(--color-navy);
  --btn-bg-hover: var(--color-orange-600);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
}

.btn:active { transform: translateY(1px); }

.btn .icon { transition: transform var(--duration) var(--ease); }
.btn:hover .icon-arrow { transform: translateX(3px); }

.btn--lg { min-height: 56px; padding: 1rem 1.75rem; }
.btn--sm { min-height: 44px; padding: 0.6rem 1.2rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn--outline {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-navy);
  --btn-bg-hover: var(--color-surface-alt);
  --btn-border: var(--color-border-strong);
}

.btn--navy {
  --btn-bg: var(--color-navy);
  --btn-fg: var(--color-text-on-dark);
  --btn-bg-hover: var(--color-navy-700);
}

.btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: var(--color-text-on-dark);
  --btn-bg-hover: rgba(255, 255, 255, 0.16);
  --btn-border: rgba(255, 255, 255, 0.25);
}

.btn[disabled],
.btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.btn .spinner {
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 700ms linear infinite;
}

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

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
}

.link-arrow .icon { transition: transform var(--duration) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Floating WhatsApp button ---------- */
.wa-float {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  min-width: 56px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-whatsapp);
  color: #0B3B1E;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: 0 10px 24px -8px rgba(14, 35, 64, 0.45);
  opacity: 0.94;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease), gap var(--duration) var(--ease);
}

.wa-float .icon { width: 24px; height: 24px; stroke-width: 2; }

.wa-float__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 300ms var(--ease);
}

.wa-float:hover,
.wa-float:focus-visible {
  opacity: 1;
  color: #0B3B1E;
  transform: translateY(-2px);
  gap: 0.5rem;
}

@media (hover: hover) {
  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label { max-width: 160px; }
}

/* Soft pulse once on load to draw attention, then stays still */
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  animation: wa-pulse 2.4s var(--ease) 1.5s 2;
  pointer-events: none;
}

@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Hide while the mobile menu is open */
body.nav-open .wa-float { opacity: 0; pointer-events: none; }