/* ==========================================================================
   DigiTechzo - Universal Venom WebGL CTA Button Stylesheet
   ========================================================================== */

/* Full-bleed transparent WebGL canvas stage across Hero container */
.venom-hero-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Outer relative wrapper to hold geometry and hit target */
.venom-btn-wrapper {
  position: relative !important;
  z-index: 10 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  min-width: 270px;
  min-height: 56px;
  vertical-align: middle;
}

/* Base accessible DOM anchor button (acts as CSS Fallback and Hit Target) */
.venom-btn-target {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 270px;
  height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  text-decoration: none !important;
  cursor: pointer;
  background: #0B1120;
  color: #FFFFFF !important;
  border: 1px solid rgba(87, 183, 27, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(87, 183, 27, 0.15);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.venom-btn-target:hover {
  transform: translateY(-2px);
  color: #FFFFFF !important;
  border-color: #57B71B;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(87, 183, 27, 0.25);
}

.venom-btn-target:focus-visible {
  outline: 3px solid #57B71B !important;
  outline-offset: 4px !important;
  border-radius: 999px !important;
}

/* Once WebGL initializes (.venom-ready):
   Keep button pill background transparent so the 3D WebGL symbiote goo shines through underneath,
   while keeping the DOM text and arrow icon visible, crisp, and styled with DigiTechzo's standard brand typography */
.venom-ready .venom-btn-target,
.venom-ready .venom-btn-target:hover,
.venom-ready .venom-btn-target:focus,
.venom-ready #heroVenomBtn,
.venom-ready #heroVenomBtn:hover,
.venom-ready #heroVenomBtn:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #FFFFFF !important;
  position: relative !important;
  z-index: 11 !important;
}

.venom-ready .venom-btn-target *,
.venom-ready #heroVenomBtn * {
  opacity: 1 !important;
  visibility: visible !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 12 !important;
}

/* Apply Manrope typography strictly to text elements so icon fonts are preserved */
.venom-ready .venom-btn-target span,
.venom-ready .venom-btn-target .btn-text,
.venom-ready #heroVenomBtn span {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Protect and render Font Awesome right arrow icon crisp and clean (no tofu square) */
.venom-ready .venom-btn-target i,
.venom-ready .venom-btn-target .btn-arrow,
.venom-ready .venom-btn-target .fa-solid,
.venom-ready .venom-btn-target .fas,
.venom-ready #heroVenomBtn i,
.venom-ready #heroVenomBtn .fa-solid,
.venom-ready #heroVenomBtn .fas {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 575.98px) {
  .venom-btn-wrapper {
    width: 100%;
    max-width: 290px;
    display: flex !important;
    justify-content: center;
  }
  .venom-btn-target {
    min-width: 100%;
    width: 100%;
    padding: 0 20px;
  }
}