.dw-slider-wrapper { position: relative; width: 100%; height: 500px; overflow: hidden; background: #111; }
.dw-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease-in-out; display: flex; align-items: center; justify-content: center; }
.dw-slide.active { opacity: 1; z-index: 10; }

.dw-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.6; }

.dw-slide-content { position: relative; z-index: 20; max-width: 800px; box-sizing: border-box; }

/* Subtitle styling */
.dw-subtitle { margin: 0 0 15px 0; font-size: 16px; font-weight: 500; }

/* Full viewport width handling when enabled in admin */
.dw-slider-wrapper[data-full-width="1"] {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    left: 0;
}

/* When admin sets a max width, inner content will be limited via inline style from JS or server */
.dw-slider-wrapper .dw-slide-content { box-sizing: border-box; }

/* Slide banner / subtitle */
.dw-slide-banner { position: absolute; bottom: 24px; left: 24px; z-index: 25; background: rgba(0,0,0,0.6); color: #fff; padding: 10px 14px; border-radius: 4px; max-width: calc(100% - 48px); box-shadow: 0 6px 18px rgba(0,0,0,0.4); font-size: 15px; }
.dw-animate-banner { opacity: 0; transform: translateX(-18px); }
.active .dw-animate-banner { animation: dwBannerIn 0.6s 0.15s forwards; }

@keyframes dwBannerIn {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Animation Classes */
.active .dw-animate-up { animation: dwFadeUp 0.8s forwards; }
.active .dw-animate-up-delay { animation: dwFadeUp 0.8s 0.3s forwards; opacity: 0; }

@keyframes dwFadeUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.dw-slider-nav button { position: absolute; top: 50%; z-index: 30; background: rgba(0,0,0,0.5); color: white; border: none; padding: 15px; cursor: pointer; }
#dw-next { right: 0; }