/* DISABLED/NON-FUNCTIONAL BUTTON STYLES */

/* Make non-functional buttons visually disabled */
.btn-disabled, 
.btn[href="#"], 
.btn[href="javascript:void(0)"],
.btn[onclick*="alert"],
.btn[onclick*="demo"],
.btn-demo,
.demo-btn,
a[href*="demo"]:not([href*="docs"]):not([href*="api"]):not([href*="roi-calculator"]) {
  opacity: 0.5 !important;
  background: rgba(128, 128, 128, 0.5) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  border: 2px solid rgba(128, 128, 128, 0.3) !important;
  position: relative !important;
}

.btn-disabled:hover,
.btn[href="#"]:hover,
.btn[href="javascript:void(0)"]:hover,
.btn[onclick*="alert"]:hover,
.btn[onclick*="demo"]:hover,
.btn-demo:hover,
.demo-btn:hover,
a[href*="demo"]:not([href*="docs"]):not([href*="api"]):not([href*="roi-calculator"]):hover {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(128, 128, 128, 0.5) !important;
}

/* Add "Demo Only" indicator */
.btn-disabled::after,
.btn[href="#"]::after,
.btn[href="javascript:void(0)"]::after,
.btn[onclick*="alert"]::after,
.btn[onclick*="demo"]::after,
.btn-demo::after,
.demo-btn::after,
a[href*="demo"]:not([href*="docs"]):not([href*="api"]):not([href*="roi-calculator"])::after {
  content: " (Demo Only)" !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  opacity: 0.7 !important;
}

/* Specific targeting for "View Live Demo" buttons */
.btn:contains("Demo"),
a[href="#demo"],
a[href="javascript:void(0)"],
button[onclick*="demo"],
.hero-actions a:nth-child(2),
.cta-secondary {
  opacity: 0.5 !important;
  background: rgba(128, 128, 128, 0.5) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  border: 2px solid rgba(128, 128, 128, 0.3) !important;
}

/* Override for functional buttons to ensure they remain active */
.btn[href*="/docs"],
.btn[href*="/api"],
.btn[href*="getting-started"],
.btn[href*="quickstart"],
.btn[href="#quickstart"],
.btn[href*="documentation"],
.btn-primary:not(.btn-demo):not([href="#"]):not([onclick*="demo"]) {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure functional buttons keep their original styling */
.btn-primary:not(.btn-disabled):not([href="#"]):not([onclick*="demo"]) {
  /* Restore original styling for functional buttons */
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .btn-disabled, 
  .btn[href="#"], 
  .btn[href="javascript:void(0)"],
  .btn[onclick*="alert"],
  .btn[onclick*="demo"],
  .btn-demo,
  .demo-btn,
  a[href*="demo"]:not([href*="docs"]):not([href*="api"]):not([href*="roi-calculator"]) {
    background: rgba(64, 64, 64, 0.5) !important;
    border: 2px solid rgba(64, 64, 64, 0.3) !important;
  }
}