/**
 * Call Button Styles - Electric Blue
 * Mr Splash Plumbing
 * Leading with bright gradient + smooth glow animation
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  --cta-blue: #0099ff;
  --cta-blue-light: #33b5ff;
  --cta-blue-bright: #00d4ff;
  --cta-blue-dark: #0077cc;
}

/* ============================================
   DEFAULT: Bright blue gradient with glow
   For use on light/white backgrounds
   ============================================ */
.call-btn-glow,
a.call-btn-glow,
button.call-btn-glow,
.btn.call-btn-glow,
.btn-light.call-btn-glow,
.btn-primary.call-btn-glow {
  color: #fff !important;
  /* Lead with the bright gradient */
  background: linear-gradient(135deg, var(--cta-blue-bright) 0%, var(--cta-blue) 100%) !important;
  background-color: var(--cta-blue-bright) !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(0, 153, 255, 0.4) !important;

  /* Smooth breathing + glow + color shift animation */
  animation: buttonGlowPulse 2.5s ease-in-out infinite !important;
}

/* Force white text and icons on default button */
.call-btn-glow,
.call-btn-glow span,
.call-btn-glow i,
.call-btn-glow svg,
.call-btn-glow *,
a.call-btn-glow,
a.call-btn-glow span,
a.call-btn-glow i,
.btn.call-btn-glow,
.btn.call-btn-glow span,
.btn.call-btn-glow i {
  color: #fff !important;
  fill: #fff !important;
}

/* ============================================
   VARIANT: White button with blue text
   For use on blue/primary backgrounds
   ============================================ */
.bg-primary .call-btn-glow,
.bg-primary a.call-btn-glow,
.bg-primary .btn.call-btn-glow,
.bg-blue .call-btn-glow,
.bg-blue a.call-btn-glow,
[class*="bg-primary"] .call-btn-glow,
[style*="background"] .call-btn-glow.btn-light {
  color: var(--cta-blue) !important;
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4) !important;
  animation: buttonGlowPulseWhite 2.5s ease-in-out infinite !important;
}

/* Blue text and icons on white button */
.bg-primary .call-btn-glow,
.bg-primary .call-btn-glow span,
.bg-primary .call-btn-glow i,
.bg-primary .call-btn-glow *,
.bg-blue .call-btn-glow,
.bg-blue .call-btn-glow span,
.bg-blue .call-btn-glow i,
.bg-blue .call-btn-glow *,
[class*="bg-primary"] .call-btn-glow,
[class*="bg-primary"] .call-btn-glow span,
[class*="bg-primary"] .call-btn-glow i,
[class*="bg-primary"] .call-btn-glow * {
  color: var(--cta-blue) !important;
  fill: var(--cta-blue) !important;
}

/* ============================================
   Hover States
   ============================================ */
.call-btn-glow:hover,
a.call-btn-glow:hover,
.btn.call-btn-glow:hover,
.btn-light.call-btn-glow:hover,
.btn-primary.call-btn-glow:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #00e5ff 0%, var(--cta-blue-bright) 100%) !important;
  box-shadow: 0 8px 35px rgba(0, 212, 255, 0.6) !important;
  animation: none !important;
  transform: scale(1.05) translateY(-2px) !important;
}

/* Hover for white variant */
.bg-primary .call-btn-glow:hover,
.bg-blue .call-btn-glow:hover,
[class*="bg-primary"] .call-btn-glow:hover {
  color: var(--cta-blue-dark) !important;
  background: #f0f8ff !important;
  box-shadow: 0 8px 35px rgba(255, 255, 255, 0.6) !important;
  animation: none !important;
  transform: scale(1.05) translateY(-2px) !important;
}

.bg-primary .call-btn-glow:hover *,
.bg-blue .call-btn-glow:hover *,
[class*="bg-primary"] .call-btn-glow:hover * {
  color: var(--cta-blue-dark) !important;
  fill: var(--cta-blue-dark) !important;
}

.call-btn-glow:active,
a.call-btn-glow:active,
.btn.call-btn-glow:active {
  transform: scale(0.98) !important;
}

.call-btn-glow:focus,
a.call-btn-glow:focus,
.btn.call-btn-glow:focus {
  outline: none !important;
}

/* ============================================
   Glow Pulse Animation - Scale + Glow + Color Shift
   ============================================ */
@keyframes buttonGlowPulse {
  0%, 100% {
    transform: scale(1);
    background: linear-gradient(135deg, var(--cta-blue-bright) 0%, var(--cta-blue) 100%);
    box-shadow: 0 4px 20px rgba(0, 153, 255, 0.4);
  }
  50% {
    transform: scale(1.02);
    background: linear-gradient(135deg, #00e5ff 0%, var(--cta-blue-bright) 100%);
    box-shadow: 0 6px 30px rgba(0, 212, 255, 0.55);
  }
}

/* Breathing for white button variant */
@keyframes buttonGlowPulseWhite {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 6px 30px rgba(255, 255, 255, 0.6);
  }
}

/* ============================================
   Reduced Motion Preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .call-btn-glow {
    animation: none !important;
  }
}