/* =========================================
   STUNNING PRELOADER STYLES COLLECTION
   ========================================= */

/* Style 1: Black Semi-Transparent Background (Default) */
.preloader-modern {
  background: rgba(0, 0, 0, 0.3);
}

/* Style 1b: Alternative Black with subtle gradient */
.preloader-black {
  background: rgba(0, 0, 0, 0.3);
}

/* Style 2: Car Rental Theme */
.preloader-car-theme {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.preloader-car-theme .progress-ring .progress-bar {
  stroke: #ffd700;
}

.preloader-car-theme::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10,50 Q30,30 50,50 T90,50" stroke="rgba(255,215,0,0.1)" stroke-width="2" fill="none"><animate attributeName="stroke-dasharray" values="0,100;50,50;100,0" dur="3s" repeatCount="indefinite"/></path></svg>');
}

/* Style 3: Luxury Dark Theme */
.preloader-luxury {
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 50%, #2d2d2d 100%);
}

.preloader-luxury .progress-ring .progress-bar {
  stroke: #c9b037;
}

.preloader-luxury .loading-text {
  color: #c9b037;
  font-family: 'Georgia', serif;
}

/* Style 4: Vibrant Colorful */
.preloader-vibrant {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Style 5: Minimalist Clean */
.preloader-minimal {
  background: #ffffff;
}

.preloader-minimal .progress-ring .progress-bar {
  stroke: #333333;
}

.preloader-minimal .loading-text {
  color: #333333;
}

.preloader-minimal .loading-dots span {
  background-color: #333333;
}

/* Style 6: Neon Glow */
.preloader-neon {
  background: #0a0a0a;
}

.preloader-neon .logo-container img {
  filter: drop-shadow(0 0 20px #00ffff) drop-shadow(0 0 40px #00ffff);
}

.preloader-neon .progress-ring .progress-bar {
  stroke: #00ffff;
  filter: drop-shadow(0 0 10px #00ffff);
}

.preloader-neon .loading-text {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
}

.preloader-neon .loading-dots span {
  background-color: #00ffff;
  box-shadow: 0 0 10px #00ffff;
}

/* Enhanced Animations */
.preloader-enhanced .logo-container img {
  animation: logoFloat 3s ease-in-out infinite, logoRotate 8s linear infinite;
}

@keyframes logoRotate {
  0% { transform: translateY(0px) scale(1) rotate(0deg); }
  25% { transform: translateY(-10px) scale(1.05) rotate(90deg); }
  50% { transform: translateY(0px) scale(1) rotate(180deg); }
  75% { transform: translateY(-10px) scale(1.05) rotate(270deg); }
  100% { transform: translateY(0px) scale(1) rotate(360deg); }
}

/* Pulse Effect */
.preloader-pulse .logo-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  #preLoader .logo-container img {
    max-width: 80px;
    max-height: 80px;
  }
  
  #preLoader .progress-ring {
    width: 120px;
    height: 120px;
  }
  
  #preLoader .loading-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  #preLoader .logo-container img {
    max-width: 60px;
    max-height: 60px;
  }
  
  #preLoader .progress-ring {
    width: 100px;
    height: 100px;
  }
  
  #preLoader .loading-text {
    font-size: 14px;
    letter-spacing: 1px;
  }
}

/* Performance optimizations */
#preLoader * {
  will-change: transform, opacity;
}

/* Smooth fade out */
#preLoader.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}