/* ═══════════════════════════════════════════════════════════════════════════
   GO PRO BUTTON STYLING — Task #812967 (rewrite)
   Applies green gradient + shimmer to Go Pro buttons.

   IMPORTANT: This file MUST NOT set `display` on any element.
   Display/visibility is controlled by styles.css responsive rules.
   Only appearance (colors, fonts, borders, shadows) should be set here.

   Targets:
   - .nav-upgrade-btn  → desktop header Go Pro (logged-out in nav-plain-auth)
   - .nav-mobile-go-pro → mobile header Go Pro pill (in nav-brand-row)
   - .mega-btn--gold    → Row 2 desktop nav "Go Pro" text link (lighter treatment)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Desktop header Go Pro button (inside .nav-plain-auth) ── */
.nav-upgrade-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.nav-upgrade-btn:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.nav-upgrade-btn:active {
  transform: translateY(0) !important;
}

/* Shimmer sweep on desktop Go Pro */
.nav-upgrade-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  animation: go-pro-shimmer 3s infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Ensure button text stays above shimmer */
.nav-upgrade-btn * {
  position: relative !important;
  z-index: 2 !important;
}

/* ── 2. Mobile header Go Pro pill ── */
/* Base styles already set in styles.css line 8884 for .nav-mobile-pricing.nav-mobile-go-pro.
   These are supplemental refinements only. */
.nav-mobile-go-pro {
  font-weight: 900 !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.nav-mobile-go-pro:hover {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Shimmer sweep on mobile Go Pro */
.nav-mobile-go-pro::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  animation: go-pro-shimmer 3s infinite !important;
  pointer-events: none !important;
}

/* ── 3. Row 2 desktop nav "Go Pro" text link ── */
/* mega-btn--gold is styled in styles.css as bold green text.
   Override the gold name to green gradient text treatment. */
.mega-btn--gold {
  color: #15803d !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.mega-btn--gold:hover,
.mega-btn--gold.open {
  color: #166534 !important;
}

/* ── Shimmer animation ── */
@keyframes go-pro-shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}