/* ============================
   Pay Now Buttons (Version 2)
   - Top button shows on scroll up
   - Bottom button shows on scroll down
   - Green color: #007d4e
   - White 2px border
   - Cross-browser positioning fallbacks
   - Desktop: normal top-right, only shifts down when sticky header is active
   ============================ */

/* --- Shared button styling --- */
.pay-now-btn {
  position: fixed !important;
  z-index: 2147483647 !important; /* win against headers/overlays */

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 14px 18px;
  border-radius: 999px;

  border: 2px solid #ffffff !important; /* ✅ NEW */
  box-sizing: border-box !important;    /* ✅ NEW (keeps sizing consistent) */

  text-decoration: none !important;
  font-weight: 700;
  font-size: 16px;

  background: #007d4e !important; /* force override */
  color: #fff !important;

  box-shadow: 0 10px 25px rgba(0,0,0,0.18);

  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  /* Defensive resets (prevents weird theme overrides) */
  left: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.pay-now-btn:hover {
  filter: brightness(0.95);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

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

.pay-now-btn:focus-visible {
  outline: 3px solid rgba(0, 125, 78, 0.35);
  outline-offset: 3px;
}

/* --- Visibility states --- */
.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}

.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* -----------------------------------------
   POSITIONING (IMPORTANT)
   - Provide normal fallbacks first.
   - Apply env(safe-area-inset-*) only inside @supports for iOS.
   ----------------------------------------- */

/* Desktop/tablet defaults (normal top-right) */
.pay-now-top {
  right: 20px !important;
  top: 20px !important;
}

.pay-now-bottom {
  right: 20px !important;
  bottom: 20px !important;
}

/* When sticky header is active, push top button down a bit (Porto theme often uses this class) */
html.sticky-header-active .pay-now-top,
body.sticky-header-active .pay-now-top {
  top: 120px !important; /* adjust: try 100–140 if needed */
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .pay-now-btn {
    padding: 12px 16px;
    font-size: 15px;
  }

  .pay-now-top {
    right: 12px !important;
    top: 12px !important;
  }

  .pay-now-bottom {
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* iOS safe-area support (only where supported) */
@supports (padding: env(safe-area-inset-bottom)) {
  /* Desktop/tablet safe-area */
  .pay-now-top {
    right: calc(20px + env(safe-area-inset-right)) !important;
    top: calc(20px + env(safe-area-inset-top)) !important;
  }

  .pay-now-bottom {
    right: calc(20px + env(safe-area-inset-right)) !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* Sticky header active + safe-area */
  html.sticky-header-active .pay-now-top,
  body.sticky-header-active .pay-now-top {
    top: calc(120px + env(safe-area-inset-top)) !important;
  }

  /* Mobile safe-area */
  @media (max-width: 480px) {
    .pay-now-top {
      right: calc(12px + env(safe-area-inset-right)) !important;
      top: calc(12px + env(safe-area-inset-top)) !important;
    }

    .pay-now-bottom {
      right: calc(12px + env(safe-area-inset-right)) !important;
      bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Optional: honor reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pay-now-btn { transition: none !important; }
}