@tailwind base;
@tailwind components;
@tailwind utilities;

/* -------------------------------------------------------------
   IPTV Belgique Theme - Main Custom Styles (Red & Black Edition)
------------------------------------------------------------- */

/* Font-display swap for FontAwesome icons */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: swap;
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: swap;
}

/* Glassmorphism Classes */
.glass-card {
  background: rgba(13, 13, 13, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

.glass-card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
  background: rgba(18, 18, 18, 0.9);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(239, 68, 68, 0.25);
}

/* Dynamic Active State for Pricing Cards & Screen Buttons */
.pricing-card.active {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.3) !important;
}

.screen-btn.active {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-color: #f87171 !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.45) !important;
}

/* Gradient text */
.gradient-text-red {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pulse animation helper */
@keyframes pulseGlowRed {
  0%, 100% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.8);
  }
}

.pulse-glow-red {
  animation: pulseGlowRed 2.5s infinite ease-in-out;
}

/* Accordion Smooth Expansion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
}

.faq-item.open .faq-answer {
  max-height: 500px;
  opacity: 1;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
  color: #ef4444;
}

/* Toast Notification Display */
#social-proof-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ef4444;
}