/* ==========================================================================
   B West Builders — button variants.
   Elementor's per-page CSS prints after ours and uses `.elementor-widget-button
   .elementor-button` (0,2,0). These selectors carry an extra class so the
   variant always wins regardless of stylesheet order.
   ========================================================================== */

.elementor-element.bw-btn .elementor-button,
a.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bw-space-2);
  padding: var(--bw-space-3) var(--bw-space-5);
  border-radius: var(--bw-radius-pill);
  font-family: var(--bw-font);
  font-size: var(--bw-fs-md);
  font-weight: var(--bw-fw-medium);
  line-height: 1;
  border: 2px solid transparent;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--bw-motion-instant) var(--bw-ease),
              color var(--bw-motion-instant) var(--bw-ease),
              border-color var(--bw-motion-instant) var(--bw-ease),
              transform var(--bw-motion-fast) var(--bw-ease);
}

.elementor-element.bw-btn .elementor-button:active,
a.bw-btn:active { transform: scale(0.98); }

.elementor-element.bw-btn-primary .elementor-button,
a.bw-btn-primary {
  background-color: var(--bw-surface-muted);
  color: var(--bw-text-inverse);
}
.elementor-element.bw-btn-primary .elementor-button:hover,
.elementor-element.bw-btn-primary .elementor-button:focus,
a.bw-btn-primary:hover,
a.bw-btn-primary:focus {
  background-color: var(--bw-surface-strong);
  color: var(--bw-text-inverse);
}
.elementor-element.bw-btn-primary .elementor-button:focus-visible { outline-color: var(--bw-text-inverse); }

.elementor-element.bw-btn-outline .elementor-button,
a.bw-btn-outline {
  background-color: transparent;
  border-color: var(--bw-text-inverse);
  color: var(--bw-text-inverse);
}
.elementor-element.bw-btn-outline .elementor-button:hover,
.elementor-element.bw-btn-outline .elementor-button:focus,
a.bw-btn-outline:hover,
a.bw-btn-outline:focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--bw-text-inverse);
}

.elementor-element.bw-btn-dark .elementor-button,
a.bw-btn-dark { background-color: var(--bw-surface-strong); color: var(--bw-text-inverse); }
.elementor-element.bw-btn-dark .elementor-button:hover { filter: brightness(0.85); }

/* Buttons sit inline, not stretched, inside flex containers */
.elementor-element.bw-btn .elementor-button-wrapper { display: inline-flex; }
.elementor-element.bw-btn .elementor-button-content-wrapper { align-items: center; }