/**
 * DP Background Image Switcher - Default Styles
 */

/* Fallback for no-JS */
.no-js .dp-bg-image-container {
  background-color: #f0f0f0;
  background-image: none;
}

/* Loading state - shows a subtle background while images load */
.dp-bg-image-container {
  background-color: rgba(240, 240, 240, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease-in-out;
  /* Prevent layout shift during image loading */
  min-height: 100vh;
  /* Adjust as needed for your use case */
}

/* Enhanced styles with smooth transitions */
@media (min-width: var(--dp-bg-breakpoint)) {
  .dp-bg-image-container {
    background-image: var(--dp-bg-image-desktop-url);
  }
}

@media (max-width: var(--dp-bg-breakpoint)) {
  .dp-bg-image-container {
    background-image: var(--dp-bg-image-mobile-url) !important;
  }
}

/* Alternative approach: Overlay method for smoother transitions */
.dp-bg-image-container.dp-bg-overlay-method {
  position: relative;
}

.dp-bg-image-container.dp-bg-overlay-method::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--dp-bg-image-desktop-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  z-index: -1;
}

.dp-bg-image-container.dp-bg-overlay-method.dp-bg-loaded::before {
  opacity: 1;
}

@media (max-width: var(--dp-bg-breakpoint)) {
  .dp-bg-image-container.dp-bg-overlay-method::before {
    background-image: var(--dp-bg-image-mobile-url) !important;
  }
}