/**
 * C&S Drainage Button Utilities & WPBakery Integration
 * 
 * Ensures all buttons across the site use standardized styling
 * Overrides WPBakery default button styles
 */

/* === WPBAKERY BUTTON OVERRIDES === */

/* Force all WPBakery buttons to use our system */
.vc_btn3-container .vc_btn3,
.vc_btn3,
.vc_general.vc_btn3,
a.vc_btn3,
button.vc_btn3 {
  /* Reset WPBakery defaults */
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: none !important;
  
  /* Apply our button system */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--csd-font-heading) !important;
  font-weight: var(--csd-font-weight-semibold) !important;
  line-height: var(--csd-line-height-tight) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  padding: var(--csd-form-padding) var(--csd-space-lg) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
}

/* Primary style (default) */
.vc_btn3-color-yellow,
.vc_btn3-color-warning,
.vc_btn3-color-juicy-pink,
.vc_btn3-color-sandy-brown,
.vc_btn3-color-orange {
  background-color: var(--csd-accent) !important;
  color: var(--csd-grey) !important;
  border: 2px solid var(--csd-accent) !important;
}

.vc_btn3-color-yellow:hover,
.vc_btn3-color-warning:hover,
.vc_btn3-color-juicy-pink:hover,
.vc_btn3-color-sandy-brown:hover,
.vc_btn3-color-orange:hover {
  background-color: var(--csd-accent-hover) !important;
  border-color: var(--csd-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--csd-shadow-md) !important;
}

/* Secondary style */
.vc_btn3-color-grey,
.vc_btn3-color-default,
.vc_btn3-color-classic {
  background-color: var(--csd-grey) !important;
  color: var(--csd-white) !important;
  border: 2px solid var(--csd-grey) !important;
}

.vc_btn3-color-grey:hover,
.vc_btn3-color-default:hover,
.vc_btn3-color-classic:hover {
  background-color: var(--csd-text-primary) !important;
  border-color: var(--csd-text-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--csd-shadow-md) !important;
}

/* Outline style */
.vc_btn3-style-outline,
.vc_btn3-style-modern {
  background-color: transparent !important;
  color: var(--csd-accent) !important;
  border: 2px solid var(--csd-accent) !important;
}

.vc_btn3-style-outline:hover,
.vc_btn3-style-modern:hover {
  background-color: var(--csd-accent) !important;
  color: var(--csd-grey) !important;
  transform: translateY(-1px) !important;
}

/* WPBakery button sizes */
.vc_btn3-size-xs {
  padding: var(--csd-space-xs) var(--csd-space-sm) !important;
  font-size: var(--csd-font-size-xs) !important;
}

.vc_btn3-size-sm {
  padding: var(--csd-space-xs) var(--csd-space-md) !important;
  font-size: var(--csd-font-size-sm) !important;
}

.vc_btn3-size-md {
  padding: var(--csd-form-padding) var(--csd-space-lg) !important;
  font-size: var(--csd-font-size-base) !important;
}

.vc_btn3-size-lg {
  padding: var(--csd-space-md) var(--csd-space-2xl) !important;
  font-size: var(--csd-font-size-lg) !important;
  font-weight: var(--csd-font-weight-bold) !important;
}

/* === CONTACT FORM 7 BUTTON OVERRIDES === */

.wpcf7 input[type="submit"],
.wpcf7-submit {
  /* Apply primary button style */
  background-color: var(--csd-accent) !important;
  color: var(--csd-grey) !important;
  border: 2px solid var(--csd-accent) !important;
  font-family: var(--csd-font-heading) !important;
  font-weight: var(--csd-font-weight-semibold) !important;
  font-size: var(--csd-font-size-base) !important;
  padding: var(--csd-form-padding) var(--csd-space-lg) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 200px;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: var(--csd-accent-hover) !important;
  border-color: var(--csd-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--csd-shadow-md) !important;
}

/* === GRAVITY FORMS BUTTON OVERRIDES === */

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
  /* Apply primary button style */
  background-color: var(--csd-accent) !important;
  color: var(--csd-grey) !important;
  border: 2px solid var(--csd-accent) !important;
  font-family: var(--csd-font-heading) !important;
  font-weight: var(--csd-font-weight-semibold) !important;
  font-size: var(--csd-font-size-base) !important;
  padding: var(--csd-form-padding) var(--csd-space-lg) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background-color: var(--csd-accent-hover) !important;
  border-color: var(--csd-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--csd-shadow-md) !important;
}

/* === THEGEM BUTTON OVERRIDES === */

.gem-button,
.gem-button-container .gem-button {
  /* Reset TheGem button styles */
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  
  /* Apply our button system */
  font-family: var(--csd-font-heading) !important;
  font-weight: var(--csd-font-weight-semibold) !important;
  line-height: var(--csd-line-height-tight) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  padding: var(--csd-form-padding) var(--csd-space-lg) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
}

/* TheGem primary button */
.gem-button-style-flat {
  background-color: var(--csd-accent) !important;
  color: var(--csd-grey) !important;
  border: 2px solid var(--csd-accent) !important;
}

.gem-button-style-flat:hover {
  background-color: var(--csd-accent-hover) !important;
  border-color: var(--csd-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--csd-shadow-md) !important;
}

/* TheGem outline button */
.gem-button-style-outline {
  background-color: transparent !important;
  color: var(--csd-accent) !important;
  border: 2px solid var(--csd-accent) !important;
}

.gem-button-style-outline:hover {
  background-color: var(--csd-accent) !important;
  color: var(--csd-grey) !important;
}

/* === UTILITY BUTTON CLASSES === */

/* Button group */
.csd-button-group {
  display: flex;
  gap: var(--csd-space-md);
  flex-wrap: wrap;
  align-items: center;
}

/* Full width button */
.csd-button--full {
  width: 100%;
  justify-content: center;
}

/* Button with icon */
.csd-button--icon {
  gap: var(--csd-space-sm);
}

.csd-button--icon svg,
.csd-button--icon i {
  width: 1.2em;
  height: 1.2em;
}

/* Loading state */
.csd-button--loading {
  color: transparent !important;
  pointer-events: none;
}

.csd-button--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* === MOBILE BUTTON ADJUSTMENTS === */

@media (max-width: 768px) {
  /* Stack buttons on mobile */
  .csd-button-group {
    flex-direction: column;
    width: 100%;
  }
  
  .csd-button-group .csd-button,
  .csd-button-group .vc_btn3 {
    width: 100%;
  }
  
  /* Larger touch targets on mobile */
  .csd-button,
  .vc_btn3,
  .gem-button,
  .wpcf7-submit {
    min-height: 48px;
    min-width: 48px;
  }
}

/* === FOCUS STATES FOR ACCESSIBILITY === */

.csd-button:focus-visible,
.vc_btn3:focus-visible,
.gem-button:focus-visible,
.wpcf7-submit:focus-visible {
  outline: 2px solid var(--csd-grey) !important;
  outline-offset: 2px !important;
}

/* Yellow buttons get grey focus */
.csd-button--primary:focus-visible,
.vc_btn3-color-yellow:focus-visible {
  outline-color: var(--csd-grey) !important;
}

/* Dark buttons get yellow focus */
.csd-button--secondary:focus-visible,
.vc_btn3-color-grey:focus-visible {
  outline-color: var(--csd-accent) !important;
}