/* Fix for form button design issues on submit */

/* Ensure button maintains its styling when disabled */
.button-primary:disabled {
  opacity: 0.8 !important;
  cursor: not-allowed !important;
  /* Maintain all other button styles */
  border-radius: 40px !important;
  overflow: hidden !important;
  background-color: transparent !important;
  color: var(--white) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
  border: 1px solid var(--white) !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Maintain the before pseudo-element for disabled state */
.button-primary:disabled:before {
  animation: opacityFallbackOut 0.5s step-end forwards !important;
  backface-visibility: hidden !important;
  background-color: var(--primary) !important;
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%) !important;
  content: '' !important;
  height: 100% !important;
  left: 0 !important;
  position: absolute !important;
  top: 0 !important;
  transform: translateZ(0) !important;
  width: 100% !important;
  z-index: -1 !important;
}

/* Loading state specific styling */
.button-primary.loading-state {
  pointer-events: none !important;
  position: relative !important;
  opacity: 0.8 !important;
}

.button-primary.loading-state:before {
  background-color: var(--primary) !important;
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%) !important;
  animation: none !important;
}

/* Fix for button-third variant when disabled */
.button-third:disabled {
  border: 1px solid var(--white) !important;
  color: var(--white) !important;
}

.button-third:disabled:before {
  background-color: var(--white) !important;
}

/* Fix for button-second variant when disabled */
.button-second:disabled {
  color: var(--black) !important;
  border-color: var(--black) !important;
}

/* Ensure spinner and text alignment */
.button-primary .hidden {
  display: none !important;
}

.button-primary svg {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Prevent hover effects on disabled buttons */
.button-primary:disabled:hover {
  color: var(--white) !important;
  border: 1px solid var(--white) !important;
}

.button-primary:disabled:hover:before {
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%) !important;
}

.button-third:disabled:hover {
  border: 1px solid var(--white) !important;
  color: var(--white) !important;
}

.button-second:disabled:hover {
  color: var(--black) !important;
  border-color: var(--black) !important;
}

/* Ensure proper text and icon spacing during loading */
.button-primary span {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Fix for home page form button styling */
#homeContactSubmitBtn:disabled {
  background-color: var(--accent) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
  opacity: 0.8 !important;
}

#homeContactSubmitBtn:disabled:hover {
  background-color: var(--accent) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
}

/* Specific fix for home page button loading state */
#homeContactSubmitBtn.loading-state {
  background-color: var(--accent) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
  opacity: 0.9 !important;
  position: relative !important;
  overflow: hidden !important;
}

#homeContactSubmitBtn.loading-state:after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}