/* ===================================
   GLASSMORPHISM OVERLAY SYSTEM
   Compatible with HIBP Gradient Background
   Keep the background, add glass to components
   =================================== */

/* CSS Variables for Glass Effects (Dark Theme Compatible) */
html.new-ui {
  /* Glass colors for dark theme */
  --glass-light: rgba(255, 255, 255, 0.07);
  --glass-medium: rgba(255, 255, 255, 0.1);
  --glass-heavy: rgba(255, 255, 255, 0.12);

  /* Glass borders with blue accent */
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hover: rgba(59, 130, 246, 0.4);
  --glass-border-primary: rgba(59, 130, 246, 0.3);

  /* Glass blurs */
  --glass-blur-sm: blur(6px);
  --glass-blur-md: blur(12px);
  --glass-blur-lg: blur(20px);

  /* Glass shadows */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.4);
  --glass-shadow-blue: 0 8px 32px rgba(59, 130, 246, 0.15);
}

/* ===================================
   GLASS CARDS - OVERRIDE HIBP SOLID CARDS
   =================================== */

/* Convert solid cards to glass cards */
html.new-ui .card.glass,
html.new-ui .result-card.glass,
html.new-ui .feature-card.glass,
html.new-ui .score-card.glass,
html.new-ui .dial-container .glass-card,
html.new-ui .social-platform-card.glass,
html.new-ui .pricing-card.glass {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glass card gradient overlay */
html.new-ui .card.glass::before,
html.new-ui .feature-card.glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(139, 92, 246, 0.05) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

html.new-ui .card.glass:hover::before,
html.new-ui .feature-card.glass:hover::before {
  opacity: 1;
}

/* Hover effect for glass cards */
html.new-ui .card.glass:hover,
html.new-ui .result-card.glass:hover,
html.new-ui .feature-card.glass:hover,
html.new-ui .pricing-card.glass:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: var(--glass-blur-lg);
  border-color: var(--glass-border-hover) !important;
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    var(--glass-shadow-hover),
    0 0 30px rgba(59, 130, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Keep card content above glass overlay */
html.new-ui .card.glass > *,
html.new-ui .feature-card.glass > * {
  position: relative;
  z-index: 1;
}

/* ===================================
   GLASS BUTTONS - OVERRIDE SOLID BUTTONS
   =================================== */

html.new-ui button.glass,
html.new-ui .button.glass,
html.new-ui .btn-primary.glass {
  background: rgba(59, 130, 246, 0.25) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow:
    0 4px 16px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

html.new-ui button.glass::before,
html.new-ui .button.glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.5s ease;
}

html.new-ui button.glass:hover,
html.new-ui .button.glass:hover {
  background: rgba(59, 130, 246, 0.35) !important;
  backdrop-filter: var(--glass-blur-md);
  border-color: rgba(59, 130, 246, 0.6) !important;
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(59, 130, 246, 0.3),
    0 0 20px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html.new-ui button.glass:hover::before,
html.new-ui .button.glass:hover::before {
  left: 100%;
}

/* ===================================
   GLASS MODALS & DIALOGS
   =================================== */

html.new-ui .paywall-modal.glass,
html.new-ui .modal.glass,
html.new-ui #paywall-overlay .glass-modal {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.new-ui .paywall-header.glass {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(139, 92, 246, 0.15) 100%
  ) !important;
  backdrop-filter: var(--glass-blur-md);
  border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* ===================================
   GLASS INPUTS
   =================================== */

html.new-ui input.glass,
html.new-ui textarea.glass {
  background: rgba(15, 20, 25, 0.4) !important;
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html.new-ui input.glass:focus,
html.new-ui textarea.glass:focus {
  background: rgba(15, 20, 25, 0.6) !important;
  backdrop-filter: var(--glass-blur-md);
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  outline: none;
}

/* ===================================
   GLASS SCORE DISPLAYS
   =================================== */

html.new-ui .score-showcase.glass {
  background: rgba(21, 27, 46, 0.6) !important;
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(139, 92, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html.new-ui .score-inner-circle.glass {
  background: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: var(--glass-blur-md);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.2),
    inset 0 2px 8px rgba(255, 255, 255, 0.05),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ===================================
   GLASS PREMIUM TEASER
   =================================== */

html.new-ui #premium-teaser-overlay .premium-teaser-container.glass {
  background: rgba(21, 27, 46, 0.9) !important;
  backdrop-filter: var(--glass-blur-xl);
  -webkit-backdrop-filter: var(--glass-blur-xl);
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.new-ui .lock-icon.glass {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.8) 0%,
    rgba(99, 102, 241, 0.8) 100%
  ) !important;
  backdrop-filter: var(--glass-blur-md);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 10px 40px rgba(139, 92, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ===================================
   GLASS TABS
   =================================== */

html.new-ui .tab.glass {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  transition: all 0.3s ease;
}

html.new-ui .tab.glass.active {
  background: rgba(59, 130, 246, 0.25) !important;
  backdrop-filter: var(--glass-blur-md);
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: white !important;
  box-shadow:
    0 4px 16px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.new-ui .tab.glass:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* ===================================
   GLASS METRIC BADGES
   =================================== */

html.new-ui .badge.glass {
  background: rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
  box-shadow:
    0 2px 8px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ===================================
   UTILITY CLASSES FOR MANUAL APPLICATION
   =================================== */

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-effect-hover:hover {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-4px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(59, 130, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-glow {
  animation: glassPulse 2s ease-in-out infinite;
}

@keyframes glassPulse {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.2),
      0 0 20px rgba(59, 130, 246, 0.1);
  }
  50% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.2),
      0 0 30px rgba(59, 130, 246, 0.2);
  }
}

/* ===================================
   QUICK APPLY SCRIPT
   =================================== */

/* Add this JavaScript to apply glass effects */
/*
// Apply glass effects to your HIBP design
function applyGlassToHIBP() {
  // Apply glass to main cards
  document.querySelectorAll('.dial-container .dial-face').forEach(el => {
    el.classList.add('glass');
  });
  
  document.querySelectorAll('.card-hover').forEach(el => {
    el.classList.add('glass');
  });
  
  document.querySelectorAll('.social-platform-card > div').forEach(el => {
    el.classList.add('glass');
  });
  
  // Apply glass to buttons
  document.querySelectorAll('#analyze-btn, #start-trial-btn, #upgrade-btn').forEach(btn => {
    btn.classList.add('glass');
  });
  
  // Apply glass to score showcase
  document.querySelector('.score-showcase')?.classList.add('glass');
  document.querySelector('.score-inner-circle')?.classList.add('glass');
  
  console.log('🎨 Glass effects applied to HIBP design');
}

// Run when DOM is loaded
document.addEventListener('DOMContentLoaded', applyGlassToHIBP);
*/