/* =============================================
   UNIVERSAL SPACE LOGO THEME STYLES
   ============================================= */

/* Import Space Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* Space Logo Theme Variables */
:root {
  /* Core Space Colors */
  --space-deep-blue: #0B1426;
  --space-navy: #162447;
  --space-purple: #1F4E79;
  --space-cosmic: #2E86AB;
  --space-stellar: #A23B72;
  --space-nebula: #F18F01;
  --space-aurora: #C73E1D;
  --space-starlight: #E8F4FD;
  --space-silver: #B8C5D6;
  --space-glow: #00D4FF;
  --space-accent: #FF6B9D;
  
  /* Semantic Colors */
  --primary-color: var(--space-glow);
  --secondary-color: var(--space-cosmic);
  --accent-color: var(--space-accent);
  --text-primary: var(--space-starlight);
  --text-secondary: var(--space-silver);
  --background-primary: var(--space-deep-blue);
  --background-secondary: var(--space-navy);
  --surface-glass: rgba(22, 36, 71, 0.3);
  --border-glow: rgba(0, 212, 255, 0.3);
  
  /* Effects */
  --glow-primary: 0 0 20px rgba(0, 212, 255, 0.5);
  --glow-accent: 0 0 20px rgba(255, 107, 157, 0.5);
  --shadow-deep: 0 20px 60px rgba(11, 20, 38, 0.4);
  --shadow-glow: 0 8px 32px rgba(0, 212, 255, 0.2);
  
  /* Transitions */
  --transition-smooth: all 0.2s ease; /* Faster transitions */
  --transition-bounce: all 0.3s ease; /* Simplified transitions */
  --transition-nav: all 0.15s ease; /* Navigation specific */
}

/* Universal Space Button Styles */
.btn, .button, .action-button, .search-button, .modern-button {
  font-family: 'Orbitron', sans-serif !important;
  background: linear-gradient(135deg, 
    var(--space-glow) 0%, 
    var(--space-cosmic) 50%,
    var(--space-stellar) 100%) !important;
  color: var(--space-starlight) !important;
  border: 2px solid var(--border-glow) !important;
  border-radius: 12px !important;
  padding: 1rem 2rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: var(--transition-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--shadow-glow) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
}

.btn::before, .button::before, .action-button::before, .search-button::before, .modern-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent
  );
  transition: left 0.6s ease;
}

.btn:hover::before, .button:hover::before, .action-button:hover::before, .search-button:hover::before, .modern-button:hover::before {
  left: 100%;
}

.btn:hover, .button:hover, .action-button:hover, .search-button:hover, .modern-button:hover {
  background: linear-gradient(135deg, 
    var(--space-accent) 0%, 
    var(--space-nebula) 50%, 
    var(--space-glow) 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 
    var(--shadow-deep),
    var(--glow-accent) !important;
  border-color: var(--space-accent) !important;
}

/* Secondary Button Variant */
.btn-secondary, .button-secondary {
  background: linear-gradient(135deg, 
    rgba(46, 134, 171, 0.3) 0%, 
    rgba(162, 59, 114, 0.2) 100%) !important;
  border-color: var(--space-cosmic) !important;
}

.btn-secondary:hover, .button-secondary:hover {
  background: linear-gradient(135deg, 
    var(--space-cosmic) 0%, 
    var(--space-stellar) 100%) !important;
}

/* Outline Button Variant */
.btn-outline, .button-outline {
  background: transparent !important;
  border: 2px solid var(--space-glow) !important;
  color: var(--space-glow) !important;
}

.btn-outline:hover, .button-outline:hover {
  background: var(--space-glow) !important;
  color: var(--space-deep-blue) !important;
}

/* Universal Card Styles */
.card, .modern-content-card, .content-card, .feature-card, .podcast-card, .video-card {
  background: linear-gradient(145deg, 
    rgba(22, 36, 71, 0.4) 0%, 
    rgba(31, 78, 121, 0.3) 50%,
    rgba(11, 20, 38, 0.5) 100%) !important;
  backdrop-filter: blur(25px) !important;
  border: 2px solid var(--border-glow) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-deep), var(--shadow-glow) !important;
  transition: var(--transition-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
  color: var(--text-primary) !important;
}

.card::before, .modern-content-card::before, .content-card::before, .feature-card::before, .podcast-card::before, .video-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(0, 212, 255, 0.05) 0%, 
    transparent 50%, 
    rgba(255, 107, 157, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card:hover::before, .modern-content-card:hover::before, .content-card:hover::before, .feature-card:hover::before, .podcast-card:hover::before, .video-card:hover::before {
  opacity: 1;
}

.card:hover, .modern-content-card:hover, .content-card:hover, .feature-card:hover, .podcast-card:hover, .video-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--space-accent) !important;
  box-shadow: 
    0 25px 80px rgba(11, 20, 38, 0.6),
    0 15px 40px rgba(0, 212, 255, 0.3),
    var(--glow-accent) !important;
}

/* Universal Input Styles */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], 
select, textarea, .form-control, .search-input, .category-select {
  background: linear-gradient(135deg, 
    rgba(22, 36, 71, 0.6) 0%, 
    rgba(31, 78, 121, 0.4) 100%) !important;
  border: 2px solid var(--border-glow) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  padding: 1rem !important;
  backdrop-filter: blur(15px) !important;
  transition: var(--transition-smooth) !important;
  font-family: 'Inter', sans-serif !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, 
select:focus, textarea:focus, .form-control:focus, .search-input:focus, .category-select:focus {
  outline: none !important;
  border-color: var(--space-glow) !important;
  background: linear-gradient(135deg, 
    rgba(31, 78, 121, 0.8) 0%, 
    rgba(46, 134, 171, 0.6) 100%) !important;
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.2) !important;
  transform: scale(1.02) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.8 !important;
}

/* Universal Heading Styles */
h1, h2, h3, h4, h5, h6, .card_title, .modern-video-title, .podcast-title {
  font-family: 'Orbitron', sans-serif !important;
  color: var(--text-primary) !important;
  text-shadow: var(--glow-primary) !important;
}

h1, .hero-title {
  background: linear-gradient(135deg, 
    var(--space-glow) 0%, 
    var(--space-accent) 50%, 
    var(--space-nebula) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Universal Text Styles */
p, .card_paragraph, .list_text, .modern-video-meta {
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Universal Link Styles */
a {
  color: var(--space-glow) !important;
  transition: color 0.2s ease !important; /* Faster, simpler transition */
  text-decoration: none !important;
}

a:hover {
  color: var(--space-accent) !important;
  text-shadow: 0 0 10px rgba(255, 107, 157, 0.5) !important; /* Simplified glow */
}

/* Navigation specific overrides */
.user-main-nav a, .desktop-nav a {
  transition: all 0.15s ease !important; /* Fast transitions for nav */
}

.user-main-nav a:hover, .desktop-nav a:hover {
  text-shadow: none !important; /* Remove text glow on nav items */
}

/* Universal Icon Styles */
.check, .meta-icon, .modern-stat-icon, .feature-icon {
  background: linear-gradient(135deg, 
    var(--space-glow) 0%, 
    var(--space-cosmic) 100%) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-glow) !important;
  border-radius: 50% !important;
}

/* Universal Pagination Styles */
.pagination, .modern-pagination-nav, .page-item, .modern-page-item {
  z-index: 10 !important;
}

.page-link, .modern-page-link {
  background: var(--surface-glass) !important;
  border: 2px solid var(--border-glow) !important;
  color: var(--text-secondary) !important;
  backdrop-filter: blur(15px) !important;
  transition: var(--transition-smooth) !important;
}

.page-link:hover, .modern-page-link:hover {
  background: linear-gradient(135deg, 
    rgba(0, 212, 255, 0.3) 0%, 
    rgba(255, 107, 157, 0.2) 100%) !important;
  color: var(--text-primary) !important;
  border-color: var(--space-glow) !important;
  transform: translateY(-2px) !important;
}

.page-item.active .page-link, .modern-page-item.active .modern-page-link {
  background: linear-gradient(135deg, 
    var(--space-glow) 0%, 
    var(--space-cosmic) 100%) !important;
  color: var(--text-primary) !important;
  border-color: var(--space-accent) !important;
}

/* Hero/Welcome Sections */
.hero-section, .welcome-section, .modern-dashboard-hero {
  background: linear-gradient(135deg, 
    rgba(46, 134, 171, 0.25) 0%, 
    rgba(162, 59, 114, 0.2) 50%, 
    rgba(241, 143, 1, 0.15) 100%) !important;
  backdrop-filter: blur(25px) !important;
  border: 2px solid var(--border-glow) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-deep), var(--shadow-glow) !important;
}

/* Fixed Navigation - Reduced Flickering */
.user-main-nav ul li a {
  background: var(--surface-glass) !important;
  border: 2px solid var(--border-glow) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-nav) !important; /* Fast nav transition */
  z-index: 100 !important;
  position: relative !important;
  will-change: transform, background, border-color !important;
}

.user-main-nav ul li a:hover, .user-main-nav ul li a.active {
  background: linear-gradient(135deg, 
    rgba(0, 212, 255, 0.3) 0%, 
    rgba(255, 107, 157, 0.2) 100%) !important;
  border-color: var(--space-glow) !important;
  transform: translateY(-1px) !important; /* Reduced movement */
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important; /* Simplified shadow */
}

/* Desktop navigation specific fixes */
.desktop-nav a {
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transform: translateZ(0) !important; /* Force hardware acceleration */
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.desktop-nav a:active {
  transform: translateY(0px) translateZ(0) !important; /* No movement on click */
  transition: none !important; /* Instant feedback */
}

/* Prevent layout shifts and flickering */
.user-main-header, .user-main-nav, .user-main-nav ul, .user-main-nav ul li {
  transform: translateZ(0) !important; /* Hardware acceleration */
  -webkit-transform: translateZ(0) !important;
}

/* Smooth scrolling and stable positioning */
.user-main-header {
  contain: layout style !important; /* CSS containment for performance */
}

/* Search Form Enhancements */
.search-form, .modern-videos-filters {
  background: linear-gradient(135deg, 
    rgba(22, 36, 71, 0.4) 0%, 
    rgba(31, 78, 121, 0.3) 100%) !important;
  backdrop-filter: blur(20px) !important;
  border: 2px solid var(--border-glow) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Mobile Navigation */
.mobile-nav {
  background: linear-gradient(135deg, 
    rgba(11, 20, 38, 0.95) 0%, 
    rgba(22, 36, 71, 0.9) 100%) !important;
  backdrop-filter: blur(25px) !important;
  border-left: 3px solid var(--space-glow) !important;
}

.mobile-nav ul li a {
  color: var(--text-primary) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
  transition: var(--transition-smooth) !important;
}

.mobile-nav ul li a:hover {
  background: linear-gradient(135deg, 
    rgba(0, 212, 255, 0.2) 0%, 
    rgba(255, 107, 157, 0.1) 100%) !important;
  color: var(--space-glow) !important;
  padding-left: 2rem !important;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
  .btn, .button, .action-button, .search-button, .modern-button {
    padding: 0.8rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
  
  .card, .modern-content-card, .content-card, .feature-card, .podcast-card, .video-card {
    border-radius: 16px !important;
    padding: 1rem !important;
  }
  
  h1, .hero-title {
    font-size: 2rem !important;
  }
  
  .hero-section, .welcome-section, .modern-dashboard-hero {
    border-radius: 16px !important;
    margin: 1rem !important;
    padding: 2rem 1rem !important;
  }
}

@media (max-width: 480px) {
  .btn, .button, .action-button, .search-button, .modern-button {
    width: 100% !important;
    padding: 1rem !important;
  }
}

/* Utility Classes */
.space-glow {
  box-shadow: var(--glow-primary) !important;
}

.space-accent-glow {
  box-shadow: var(--glow-accent) !important;
}

.space-border {
  border: 2px solid var(--border-glow) !important;
}

.space-glass {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(20px) !important;
}

.space-text-primary {
  color: var(--text-primary) !important;
}

.space-text-secondary {
  color: var(--text-secondary) !important;
}

.space-text-glow {
  text-shadow: var(--glow-primary) !important;
}

/* Animation Keyframes */
@keyframes spaceFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes spaceGlow {
  0%, 100% {
    box-shadow: var(--shadow-glow);
  }
  50% {
    box-shadow: var(--glow-primary);
  }
}

.space-float {
  animation: spaceFloat 3s ease-in-out infinite;
}

.space-glow-pulse {
  animation: spaceGlow 2s ease-in-out infinite;
}