/* ==========================================================================
   Dreamstour Dynamic Preloader Styles
   ========================================================================== */

:root {
  --loader-primary-color: #cf3425;
  --loader-bg-color: #ffffff;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--loader-bg-color, #ffffff);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.dark-mode #loader-wrapper {
  background-color: #0f172a;
}

#loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 1. Classic Spinner */
.loader-classic-spinner {
  width: var(--loader-width, 50px);
  height: var(--loader-height, 50px);
  border: 4px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--loader-primary-color, #cf3425);
  border-radius: 50%;
  animation: dt-spin var(--loader-duration, 0.8s) linear infinite;
}

/* 2. Dual Ring */
.loader-dual-ring {
  width: var(--loader-width, 56px);
  height: var(--loader-height, 56px);
}

.loader-dual-ring:after {
  content: " ";
  display: block;
  width: calc(var(--loader-width, 56px) - 8px);
  height: calc(var(--loader-height, 56px) - 8px);
  margin: 4px;
  border-radius: 50%;
  border: 4px solid var(--loader-primary-color, #cf3425);
  border-color: var(--loader-primary-color, #cf3425) transparent var(--loader-primary-color, #cf3425) transparent;
  animation: dt-spin var(--loader-duration, 1.2s) linear infinite;
}

/* 3. Dots Loader (3 Bouncing Dots) */
.loader-dots {
  display: flex;
  gap: 8px;
}

.loader-dots span {
  width: 14px;
  height: 14px;
  background-color: var(--loader-primary-color, #cf3425);
  border-radius: 50%;
  animation: dt-bounce 1.4s infinite ease-in-out both;
}

.loader-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loader-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

/* 4. Pulse Loader */
.loader-pulse {
  width: 52px;
  height: 52px;
  background-color: var(--loader-primary-color, #cf3425);
  border-radius: 50%;
  animation: dt-scale-pulse 1s infinite ease-in-out;
}

/* 5. Progress Bar */
.loader-progress-bar-wrap {
  width: 220px;
  height: 6px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.loader-progress-bar {
  width: 100%;
  height: 100%;
  background: var(--loader-primary-color, #cf3425);
  position: absolute;
  left: -100%;
  animation: dt-progress-slide 1.5s infinite ease-in-out;
  border-radius: 10px;
}

/* 6. Circular Progress */
.loader-circular-progress {
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
}

.loader-circular-progress circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.loader-circular-progress .circle-bg {
  stroke: rgba(0, 0, 0, 0.08);
}

.loader-circular-progress .circle-val {
  stroke: var(--loader-primary-color, #cf3425);
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: dt-circ-fill 1.6s ease-in-out infinite;
}

/* 7. Skeleton Loader */
.loader-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 240px;
}

.loader-skeleton .sk-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 6px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: dt-shimmer 1.5s infinite;
}

.loader-skeleton .sk-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: dt-shimmer 1.5s infinite;
}

.loader-skeleton .sk-line.short {
  width: 60%;
  margin: 0 auto;
}

/* 8. Wave Loader */
.loader-wave {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 40px;
}

.loader-wave span {
  display: block;
  width: 5px;
  height: 100%;
  background-color: var(--loader-primary-color, #cf3425);
  border-radius: 3px;
  animation: dt-wave 1.2s infinite ease-in-out;
}

.loader-wave span:nth-child(1) {
  animation-delay: -1.2s;
}

.loader-wave span:nth-child(2) {
  animation-delay: -1.1s;
}

.loader-wave span:nth-child(3) {
  animation-delay: -1.0s;
}

.loader-wave span:nth-child(4) {
  animation-delay: -0.9s;
}

.loader-wave span:nth-child(5) {
  animation-delay: -0.8s;
}

/* 9. Bounce Loader */
.loader-bounce {
  width: 50px;
  height: 50px;
  position: relative;
}

.loader-bounce .bounce1,
.loader-bounce .bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--loader-primary-color, #cf3425);
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: dt-bounce-double 2s infinite ease-in-out;
}

.loader-bounce .bounce2 {
  animation-delay: -1s;
}

/* 10. Rotating Logo */
.loader-rotating-logo {
  max-width: 130px;
  animation: dt-spin-slow 6s linear infinite;
}

/* 11. Logo Pulse */
.loader-logo-pulse {
  max-width: 140px;
  animation: dt-logo-pulse 1.8s ease-in-out infinite;
}

/* 12. Shopping Cart Loader */
.loader-shopping-cart {
  font-size: 38px;
  color: var(--loader-primary-color, #cf3425);
  position: relative;
  display: inline-block;
  animation: dt-cart-move 1.6s ease-in-out infinite;
}

/* 13. Shimmer Loader */
.loader-shimmer-box {
  width: 200px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(207, 52, 37, 0.08) 0%, rgba(207, 52, 37, 0.25) 50%, rgba(207, 52, 37, 0.08) 100%);
  background-size: 200% 100%;
  animation: dt-shimmer 1.4s infinite linear;
}

/* 14. Full-Screen Overlay */
.loader-fullscreen-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loader-fullscreen-overlay .overlay-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(207, 52, 37, 0.2);
  border-left-color: var(--loader-primary-color, #cf3425);
  border-radius: 50%;
  animation: dt-spin 0.9s linear infinite;
}

.loader-fullscreen-overlay .overlay-text {
  font-size: 15px;
  font-weight: 500;
  color: #334155;
  letter-spacing: 0.5px;
}

/* 15. Minimal Fade Loader */
.loader-minimal-fade {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loader-minimal-fade span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--loader-primary-color, #cf3425);
  animation: dt-fade-in-out 1.2s infinite ease-in-out;
}

.loader-minimal-fade span:nth-child(1) {
  animation-delay: 0s;
}

.loader-minimal-fade span:nth-child(2) {
  animation-delay: 0.3s;
}

.loader-minimal-fade span:nth-child(3) {
  animation-delay: 0.6s;
}

/* Custom Image & SVG Format */
.loader-custom-img,
.loader-custom-img img {
  width: var(--loader-width, 80px);
  height: var(--loader-height, 80px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.loader-custom-svg {
  width: var(--loader-width, 80px);
  height: var(--loader-height, 80px);
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.loader-custom-svg svg,
.loader-custom-svg img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes dt-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes dt-spin-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes dt-bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes dt-scale-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
}

@keyframes dt-progress-slide {
  0% {
    left: -100%;
    width: 30%;
  }

  50% {
    left: 20%;
    width: 70%;
  }

  100% {
    left: 100%;
    width: 30%;
  }
}

@keyframes dt-circ-fill {
  0% {
    stroke-dashoffset: 140;
  }

  50% {
    stroke-dashoffset: 35;
  }

  100% {
    stroke-dashoffset: 140;
    transform: rotate(360deg);
  }
}

@keyframes dt-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes dt-wave {

  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1);
  }
}

@keyframes dt-bounce-double {

  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

@keyframes dt-logo-pulse {

  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes dt-cart-move {

  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  25% {
    transform: translateX(-6px) rotate(-6deg);
  }

  75% {
    transform: translateX(6px) rotate(6deg);
  }
}

@keyframes dt-fade-in-out {

  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Flight Preloader Wrapper */
.loader-flight-wrap {
  width: var(--loader-width, 220px);
  height: var(--loader-height, auto);
  max-width: 90vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-flight-wrap svg,
.loader-flight-wrap img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}

.flight-plane-group {
  offset-path: path("M 60,135 C 100,155 135,145 160,115 C 175,95 185,60 160,40 C 135,22 110,48 122,82 C 135,118 190,135 235,110 C 265,95 280,80 295,75");
  offset-distance: 0%;
  offset-rotate: auto;
  offset-anchor: 0 0;
  offset-position: 0 0;
  animation: dt-plane-motion 3.5s linear infinite;
}

@keyframes dt-plane-motion {
  0% {
    offset-distance: 0%;
  }

  100% {
    offset-distance: 100%;
  }
}