/* Button hover effect: smooth background reveal + zoom */

button:not(.floating-btn), .btn:not(.floating-btn), .button:not(.floating-btn), a[class*="btn"]:not(.floating-btn):not(.floating-btn-whatsapp):not(.floating-btn-call) {
  position: relative;
  overflow: hidden;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1), color 300ms ease, background-color 300ms ease;
  will-change: transform;
  border-radius: 100px;
  isolation: isolate;
  cursor: pointer;
  border: none;
}

/* Ensure all direct children (spans, text, icons) always sit above the ::before */
button:not(.floating-btn) > *, .btn:not(.floating-btn) > *, .button:not(.floating-btn) > *, a[class*="btn"]:not(.floating-btn):not(.floating-btn-whatsapp):not(.floating-btn-call) > * {
  position: relative;
  z-index: 2;
}

button:not(.floating-btn)::before, .btn:not(.floating-btn)::before, .button:not(.floating-btn)::before, a[class*="btn"]:not(.floating-btn):not(.floating-btn-whatsapp):not(.floating-btn-call)::before {
  content: "";
  position: absolute;
  inset: 0;
 
  transform: scale(0.88);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 520ms ease;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}

button:not(.floating-btn):hover, .btn:not(.floating-btn):hover, .button:not(.floating-btn):hover, a[class*="btn"]:not(.floating-btn):not(.floating-btn-whatsapp):not(.floating-btn-call):hover {
  transform: scale(1.04);
  color: #fff;
}

button:not(.floating-btn):hover::before, .btn:not(.floating-btn):hover::before, .button:not(.floating-btn):hover::before, a[class*="btn"]:not(.floating-btn):not(.floating-btn-whatsapp):not(.floating-btn-call):hover::before {
  transform: scale(1);
  opacity: 1;
}

button:not(.floating-btn):active, .btn:not(.floating-btn):active, .button:not(.floating-btn):active, a[class*="btn"]:not(.floating-btn):not(.floating-btn-whatsapp):not(.floating-btn-call):active {
  transform: scale(0.98);
}

/* Accessibility: keyboard focus */
button:focus-visible, .btn:focus-visible, .button:focus-visible, a[class*="btn"]:focus-visible {
  outline: 3px solid rgba(230,0,92,0.12);
  outline-offset: 3px;
}

/* Primary Custom Button - base styling + hover effect */
.btn-primary-custom {
  background: linear-gradient(135deg, #e6005c, #ad0043) !important;
  color: var(--white) !important;
  padding: 12px 36px !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

.btn-primary-custom:hover {
  background: linear-gradient(135deg, #ff1a7a, #e6005c) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(230, 0, 92, 0.4) !important;
  color: var(--white) !important;
}

/* Override for footer audit button to keep pink text visible on white background */
.btn-primary-custom.btn-footer-audit {
  background: #fff !important;
  color: #e6005c !important;
  border: 2px solid #e6005c !important;
  padding: 11px 34px !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary-custom.btn-footer-audit::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #e6005c, #ff1a7a) !important;
  z-index: -1 !important;
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-primary-custom.btn-footer-audit:hover {
  background: linear-gradient(135deg, #e6005c, #ff1a7a) !important;
  color: #fff !important;
  border-color: #e6005c !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(230, 0, 92, 0.35) !important;
}

.btn-primary-custom.btn-footer-audit:hover::before {
  left: 0 !important;
}

.btn-primary-custom:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 15px rgba(230, 0, 92, 0.3) !important;
}

.btn-primary-custom::before {
  background: linear-gradient(135deg, #e6005c, #a30042);
}

.btn-ghost-custom::before {
  background: rgba(255,255,255,0.06);
}

/* Nav pill buttons — disable the pink overlay effect entirely */
.how-nav-pills .nav-link::before {
  display: none !important;
}
.how-nav-pills .nav-link:hover {
  transform: none !important;
  color: var(--primary) !important;
}
