/* ===== SMOOTH SHADOW FIX FOR BUTTONS ===== */

/* Fix primary button shadow to be smooth and rounded */
.hero__button--primary {
  box-shadow: 0 4px 15px -2px rgba(16, 185, 129, 0.2) !important; /* Softer default shadow */
  border-radius: 50px !important; /* Ensure perfect rounded corners */
}

.hero__button--primary:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  transform: translateY(-3px) !important;
  /* Perfect rounded shadow with spread radius */
  box-shadow: 0 12px 35px -5px rgba(16, 185, 129, 0.4) !important;
  border-radius: 50px !important; /* Maintain rounded corners */
}

/* Fix secondary button shadow */
.hero__button--secondary:hover {
  background: var(--bg-secondary) !important;
  border: 2px solid #10b981 !important;
  color: #059669 !important;
  transform: translateY(-3px) !important;
  /* Perfect rounded shadow with spread radius */
  box-shadow: 0 8px 25px -3px rgba(16, 185, 129, 0.25) !important;
  border-radius: 50px !important;
}

/* Ensure all buttons have smooth rounded corners */
.hero__button {
  border-radius: 50px !important;
  overflow: hidden !important; /* Prevent any content from breaking the rounded shape */
}

/* Enhanced shadow for focus states */
.hero__button--primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3), 0 4px 15px -2px rgba(16, 185, 129, 0.2) !important;
}

.hero__button--secondary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3), 0 4px 15px -2px rgba(16, 185, 129, 0.15) !important;
}

/* Smooth transition for all shadow changes */
.hero__button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Additional smoothness for active states */
.hero__button--primary:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px -2px rgba(16, 185, 129, 0.3) !important;
}

.hero__button--secondary:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px -1px rgba(16, 185, 129, 0.2) !important;
}

/* Dark mode shadow adjustments */
[data-theme="dark"] .hero__button--primary:hover {
  box-shadow: 0 8px 25px -3px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .hero__button--secondary:hover {
  box-shadow: 0 6px 20px -2px rgba(16, 185, 129, 0.25) !important;
}

/* Mobile optimized shadows (lighter for performance) */
@media (max-width: 768px) {
  .hero__button--primary:hover {
    box-shadow: 0 6px 20px -2px rgba(16, 185, 129, 0.25) !important;
  }
  
  .hero__button--secondary:hover {
    box-shadow: 0 4px 15px -2px rgba(16, 185, 129, 0.2) !important;
  }
}

/* Small mobile - minimal shadows for performance */
@media (max-width: 480px) {
  .hero__button--primary:hover {
    box-shadow: 0 4px 15px -2px rgba(16, 185, 129, 0.3) !important;
  }
  
  .hero__button--secondary:hover {
    box-shadow: 0 3px 12px -1px rgba(16, 185, 129, 0.25) !important;
  }
}

/* Ensure shadows don't interfere with button positioning */
.hero__button {
  position: relative !important;
  z-index: 10 !important;
}

.hero__button:hover {
  z-index: 20 !important;
}

/* Remove any conflicting box-shadow rules */
.hero__button--primary.hero__button--primary:hover {
  box-shadow: 0 12px 35px -5px rgba(16, 185, 129, 0.4) !important;
}

.hero__button--secondary.hero__button--secondary:hover {
  box-shadow: 0 8px 25px -3px rgba(16, 185, 129, 0.25) !important;
}

/* Ensure smooth corners are maintained */
.hero__button,
.hero__button::before,
.hero__button::after {
  border-radius: 50px !important;
}

/* Performance optimization for shadows */
.hero__button {
  will-change: transform, box-shadow !important;
  backface-visibility: hidden !important;
}