/**
 * Delowar Swipe Slider Pro — Frontend Styles
 * Layouts, Ken Burns, Multi-CTA Buttons, Synchronized Thumbnails, Popups
 */

/* ==========================================================================
   1. Pro Layouts
   ========================================================================== */

/* Hero Slider Layout */
.deloswsl-layout-hero .custom-swipe-slider {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.35);
}

.deloswsl-layout-hero .slide-content {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 40px;
    box-sizing: border-box;
}

.deloswsl-layout-hero .slide-content h2 {
    font-size: var(--title-font-size, 36px);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

/* Card Slider Layout */
.deloswsl-layout-card .custom-swipe-slider {
    padding: 20px 0;
}

.deloswsl-layout-card .swiper-slide {
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deloswsl-layout-card .swiper-slide-active {
    transform: scale(1.02);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.2);
}

/* Split Slider Layout (50/50 Content & Image) */
.deloswsl-layout-split-left .swiper-slide,
.deloswsl-layout-split-right .swiper-slide {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    background: #0f172a;
}

.deloswsl-layout-split-right .swiper-slide {
    flex-direction: row-reverse;
}

.deloswsl-layout-split-left .deloswsl-slide-media-wrap,
.deloswsl-layout-split-right .deloswsl-slide-media-wrap {
    flex: 1;
    height: 100%;
    position: relative;
}

.deloswsl-layout-split-left .slide-content,
.deloswsl-layout-split-right .slide-content {
    flex: 1;
    position: static;
    background: transparent;
    padding: 50px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 767px) {
    .deloswsl-layout-split-left .swiper-slide,
    .deloswsl-layout-split-right .swiper-slide {
        flex-direction: column;
    }
    .deloswsl-layout-split-left .slide-content,
    .deloswsl-layout-split-right .slide-content {
        padding: 24px;
        text-align: center;
    }
}

/* Fullscreen Slider (100vh) */
.deloswsl-layout-fullscreen .custom-swipe-slider {
    width: 100vw;
    height: 100vh !important;
    max-height: 100vh;
}

/* Minimal Clean Layout */
.deloswsl-layout-minimal .slide-content {
    background: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Vertical Slider Layout */
.deloswsl-layout-vertical .custom-swipe-slider,
.custom-swipe-slider.swiper-container-vertical {
    height: var(--slider-height, 500px) !important;
    max-height: var(--slider-height, 500px) !important;
    overflow: hidden !important;
}

.deloswsl-layout-vertical .swiper-wrapper,
.custom-swipe-slider.swiper-container-vertical .swiper-wrapper {
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

.deloswsl-layout-vertical .swiper-slide,
.custom-swipe-slider.swiper-container-vertical .swiper-slide {
    height: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

/* Vertical Navigation Arrows (Up / Down on Right Side) */
.deloswsl-layout-vertical .swiper-button-prev,
.custom-swipe-slider.swiper-container-vertical .swiper-button-prev {
    top: 25px !important;
    left: auto !important;
    right: 25px !important;
    transform: rotate(90deg) !important;
}

.deloswsl-layout-vertical .swiper-button-next,
.custom-swipe-slider.swiper-container-vertical .swiper-button-next {
    top: auto !important;
    bottom: 25px !important;
    left: auto !important;
    right: 25px !important;
    transform: rotate(90deg) !important;
}

/* Vertical Pagination Bullets (Right Center) */
.deloswsl-layout-vertical .swiper-pagination,
.custom-swipe-slider.swiper-container-vertical .swiper-pagination {
    left: auto !important;
    right: 20px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: auto !important;
}


/* ==========================================================================
   2. Ken Burns Effects
   ========================================================================== */

.deloswsl-kenburns .deloswsl-slide-img,
.deloswsl-kenburns .media-container img {
    transform-origin: center center;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.deloswsl-kb-zoom-in .deloswsl-slide-img,
.deloswsl-kb-zoom-in .media-container img {
    animation-name: deloswsl-kb-zoom-in-anim;
}

.deloswsl-kb-zoom-out .deloswsl-slide-img,
.deloswsl-kb-zoom-out .media-container img {
    animation-name: deloswsl-kb-zoom-out-anim;
}

.deloswsl-kb-pan-left .deloswsl-slide-img,
.deloswsl-kb-pan-left .media-container img {
    animation-name: deloswsl-kb-pan-left-anim;
}

.deloswsl-kb-pan-right .deloswsl-slide-img,
.deloswsl-kb-pan-right .media-container img {
    animation-name: deloswsl-kb-pan-right-anim;
}

@keyframes deloswsl-kb-zoom-in-anim {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes deloswsl-kb-zoom-out-anim {
    0% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes deloswsl-kb-pan-left-anim {
    0% { transform: scale(1.1) translateX(0); }
    100% { transform: scale(1.1) translateX(-4%); }
}

@keyframes deloswsl-kb-pan-right-anim {
    0% { transform: scale(1.1) translateX(0); }
    100% { transform: scale(1.1) translateX(4%); }
}

/* ==========================================================================
   3. Advanced Multi-CTA Buttons
   ========================================================================== */

.deloswsl-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
}

.deloswsl-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    line-height: 1.2;
}

/* Button Styles */
.deloswsl-btn-style-solid {
    background-color: var(--button-bg-color, #0284c7);
    color: var(--button-text-color, #ffffff) !important;
    border: 2px solid transparent;
}

.deloswsl-btn-style-outline {
    background-color: transparent !important;
    color: var(--button-text-color, #ffffff) !important;
    border: 2px solid #ffffff;
}

.deloswsl-btn-style-outline:hover {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.deloswsl-btn-style-gradient {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.39);
    border: none;
}

.deloswsl-btn-style-glass {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
}

/* Button Hover Animations */
.deloswsl-hover-grow:hover {
    transform: scale(1.06);
}

.deloswsl-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.35);
}

.deloswsl-hover-pulse:hover {
    animation: deloswsl-pulse-anim 1s infinite alternate;
}

@keyframes deloswsl-pulse-anim {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.6); }
    100% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }
}

/* ==========================================================================
   4. Synchronized Thumbnail Navigation
   ========================================================================== */

.deloswsl-thumbs-swiper {
    width: 100%;
    margin-top: var(--thumb-gap, 10px);
    padding: 4px 0;
}

.deloswsl-thumb-item {
    width: var(--thumb-w, 100px) !important;
    height: var(--thumb-h, 60px) !important;
    border-radius: var(--thumb-radius, 4px);
    overflow: hidden;
    opacity: 0.55;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.deloswsl-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deloswsl-thumb-item.swiper-slide-thumb-active,
.deloswsl-thumb-item:hover {
    opacity: 1;
    border-color: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   5. Popup / Modal Slider
   ========================================================================== */

.deloswsl-popup-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.deloswsl-popup-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.deloswsl-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
}

.deloswsl-popup-dialog {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 960px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.deloswsl-popup-modal.is-open .deloswsl-popup-dialog {
    transform: scale(1);
}

.deloswsl-popup-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 30;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: none;
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.deloswsl-popup-close-btn:hover {
    background: #ef4444;
}

/* ==========================================================================
   6. Accessibility & Reduced Motion
   ========================================================================== */

.custom-swipe-slider:focus-within .swiper-button-next,
.custom-swipe-slider:focus-within .swiper-button-prev {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .deloswsl-kenburns .deloswsl-slide-img,
    .deloswsl-kenburns .media-container img {
        animation: none !important;
    }
    .deloswsl-cta-btn,
    .swiper-slide {
        transition: none !important;
    }
}

/* ==========================================================================
   7. Content Entrance Animations
   ========================================================================== */

/* Base: animated elements start hidden, waiting for .deloswsl-animated class */
.deloswsl-animate-el {
    opacity: 0;
    will-change: opacity, transform;
}

/* Active state: added by JS when slide becomes active */
.deloswsl-animated {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Keyframes --- */
@keyframes deloswsl-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes deloswsl-fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes deloswsl-fadeDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes deloswsl-zoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes deloswsl-slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes deloswsl-slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes deloswsl-bounceIn {
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 1; transform: scale(1.05); }
    80%  { transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Animation name classes (applied by JS based on data-deloswsl-anim) --- */
.deloswsl-animated[data-deloswsl-anim="fadeIn"]       { animation-name: deloswsl-fadeIn; }
.deloswsl-animated[data-deloswsl-anim="fadeUp"]       { animation-name: deloswsl-fadeUp; }
.deloswsl-animated[data-deloswsl-anim="fadeDown"]     { animation-name: deloswsl-fadeDown; }
.deloswsl-animated[data-deloswsl-anim="zoomIn"]       { animation-name: deloswsl-zoomIn; }
.deloswsl-animated[data-deloswsl-anim="slideInLeft"]  { animation-name: deloswsl-slideInLeft; }
.deloswsl-animated[data-deloswsl-anim="slideInRight"] { animation-name: deloswsl-slideInRight; }
.deloswsl-animated[data-deloswsl-anim="bounceIn"]     { animation-name: deloswsl-bounceIn; }

/* Staggered delays (0-5 child elements) */
.deloswsl-animated:nth-child(1) { animation-delay: var(--deloswsl-anim-delay, 0ms); }
.deloswsl-animated:nth-child(2) { animation-delay: calc(var(--deloswsl-anim-delay, 0ms) + var(--deloswsl-anim-stagger, 150ms)); }
.deloswsl-animated:nth-child(3) { animation-delay: calc(var(--deloswsl-anim-delay, 0ms) + calc(var(--deloswsl-anim-stagger, 150ms) * 2)); }
.deloswsl-animated:nth-child(4) { animation-delay: calc(var(--deloswsl-anim-delay, 0ms) + calc(var(--deloswsl-anim-stagger, 150ms) * 3)); }
.deloswsl-animated:nth-child(5) { animation-delay: calc(var(--deloswsl-anim-delay, 0ms) + calc(var(--deloswsl-anim-stagger, 150ms) * 4)); }

@media (prefers-reduced-motion: reduce) {
    .deloswsl-animate-el,
    .deloswsl-animated {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   10 Unique Navigation Button Designs (swiper-button-prev / swiper-button-next)
   ========================================================================== */

/* 1. Circle (Modern Round) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-circle,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-circle {
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-circle:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-circle:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* 2. Square (Soft Rounded Square) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-square,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-square {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-square:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-square:hover {
    border-radius: 12px;
    transform: scale(1.08);
}

/* 3. Glass (Glassmorphism Blur) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-glass,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-glass {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-glass:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-glass:hover {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

/* 4. Minimal (Floating No-BG) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-minimal,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-minimal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-minimal:hover {
    transform: translateX(-4px) scale(1.15);
}

.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-minimal:hover {
    transform: translateX(4px) scale(1.15);
}

/* 5. Pill (Extended Oval Pill) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-pill,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-pill {
    width: 58px;
    height: 36px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-pill:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-pill:hover {
    width: 66px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* 6. Neon (Cyberpunk Glow) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-neon,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-neon {
    border-radius: 50%;
    background: #0f172a !important;
    border: 2px solid #0284c7 !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.6), inset 0 0 8px rgba(2, 132, 199, 0.3);
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-neon:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-neon:hover {
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.9), inset 0 0 12px rgba(56, 189, 248, 0.6);
    transform: scale(1.1);
}

/* 7. Gradient (Multi-color Vibrant Gradient) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-gradient,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-gradient {
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #0d9488 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.45);
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-gradient:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-gradient:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0f766e 100%) !important;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.6);
    transform: translateY(-2px) scale(1.08);
}

/* 8. Outlined (Dual Ring Outline) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-outlined,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-outlined {
    border-radius: 50%;
    background: transparent !important;
    border: 2px solid var(--button-icon-color, #ffffff) !important;
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-outlined:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-outlined:hover {
    background: var(--button-icon-color, #ffffff) !important;
    color: #0f172a !important;
    outline-color: var(--button-icon-color, #ffffff);
    transform: scale(1.05);
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-outlined:hover i,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-outlined:hover i {
    color: #0f172a !important;
}

/* 9. Shadow Box (Elevated Floating Card Shadow) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-shadow_box,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-shadow_box {
    border-radius: 12px;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-shadow_box i,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-shadow_box i {
    color: #0f172a !important;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-shadow_box:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-shadow_box:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 18px 32px -5px rgba(0, 0, 0, 0.35);
}

/* 10. Text Hybrid (PREV / NEXT Labels) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-text,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-text {
    width: auto;
    min-width: 76px;
    height: 38px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.custom-swipe-slider .deloswsl-nav-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--button-icon-color, #ffffff);
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-text:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-text:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 11. Diamond Tilt (45° Rotated Square) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-diamond,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-diamond {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transform: rotate(45deg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-diamond i,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-diamond i,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-diamond::after,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-diamond::after {
    transform: rotate(-45deg);
    display: inline-block;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-diamond:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-diamond:hover {
    transform: rotate(45deg) scale(1.12);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* 12. Edge Banner Ribbon (Flush Container Edge Badge) */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-ribbon {
    left: 0 !important;
    border-radius: 0 24px 24px 0;
    width: 46px;
    height: 46px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-ribbon {
    right: 0 !important;
    border-radius: 24px 0 0 24px;
    width: 46px;
    height: 46px;
    box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-ribbon:hover {
    transform: translateX(4px);
    width: 52px;
}

.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-ribbon:hover {
    transform: translateX(-4px);
    width: 52px;
}

/* 13. Soft Neumorphic Emboss */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-neumorphic,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-neumorphic {
    border-radius: 50%;
    background: #e0e5ec !important;
    color: #1e293b !important;
    box-shadow: 6px 6px 14px #b8c0cc, -6px -6px 14px #ffffff;
    border: none !important;
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-neumorphic i,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-neumorphic i {
    color: #1e293b !important;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-neumorphic:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-neumorphic:hover {
    box-shadow: inset 4px 4px 8px #b8c0cc, inset -4px -4px 8px #ffffff;
    transform: scale(0.96);
}

/* 14. Sci-Fi Tech Corner Cut */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-cyber_border,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-cyber_border {
    width: 46px;
    height: 46px;
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background: #0f172a !important;
    border: 1px solid #38bdf8 !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-cyber_border:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-cyber_border:hover {
    background: #38bdf8 !important;
    color: #0f172a !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
    transform: scale(1.08);
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-cyber_border:hover i,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-cyber_border:hover i {
    color: #0f172a !important;
}

/* 15. Orbital Sonar Pulse Ring */
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-floating_ring,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-floating_ring {
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-floating_ring::before,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-floating_ring::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 2px solid var(--button-bg-color, #0284c7);
    animation: deloswsl-sonar-pulse 2s infinite ease-out;
    pointer-events: none;
}

@keyframes deloswsl-sonar-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.custom-swipe-slider .swiper-button-prev.deloswsl-nav-style-floating_ring:hover,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-style-floating_ring:hover {
    transform: scale(1.12);
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.6);
}

/* ==========================================================================
   6 Unique Navigation Arrow Position Layouts (deloswsl-nav-pos-*)
   ========================================================================== */

/* 1. Inside Center-Sides (Default) */
.custom-swipe-slider.deloswsl-nav-pos-inside .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-inside {
    top: 50% !important;
    bottom: auto !important;
    left: 20px !important;
    right: auto !important;
    transform: translateY(-50%);
}

.custom-swipe-slider.deloswsl-nav-pos-inside .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-inside {
    top: 50% !important;
    bottom: auto !important;
    right: 20px !important;
    left: auto !important;
    transform: translateY(-50%);
}

/* 2. Outside Frame Flanking */
.custom-swipe-slider.deloswsl-nav-pos-outside {
    overflow: visible !important;
}

.custom-swipe-slider.deloswsl-nav-pos-outside .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-outside {
    top: 50% !important;
    bottom: auto !important;
    left: -50px !important;
    right: auto !important;
    transform: translateY(-50%);
}

.custom-swipe-slider.deloswsl-nav-pos-outside .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-outside {
    top: 50% !important;
    bottom: auto !important;
    right: -50px !important;
    left: auto !important;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .custom-swipe-slider.deloswsl-nav-pos-outside .swiper-button-prev,
    .custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-outside {
        left: 10px !important;
    }
    .custom-swipe-slider.deloswsl-nav-pos-outside .swiper-button-next,
    .custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-outside {
        right: 10px !important;
    }
}

/* 3. Bottom-Right Corner Stack */
.custom-swipe-slider.deloswsl-nav-pos-bottom_right .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-bottom_right {
    top: auto !important;
    bottom: 20px !important;
    right: 75px !important;
    left: auto !important;
    transform: none;
}

.custom-swipe-slider.deloswsl-nav-pos-bottom_right .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-bottom_right {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    transform: none;
}

/* 4. Bottom-Center Split Flank */
.custom-swipe-slider.deloswsl-nav-pos-bottom_center .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-bottom_center {
    top: auto !important;
    bottom: 15px !important;
    left: calc(50% - 90px) !important;
    right: auto !important;
    transform: none;
}

.custom-swipe-slider.deloswsl-nav-pos-bottom_center .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-bottom_center {
    top: auto !important;
    bottom: 15px !important;
    right: calc(50% - 90px) !important;
    left: auto !important;
    transform: none;
}

/* 5. Top-Right Header Bar */
.custom-swipe-slider.deloswsl-nav-pos-top_right .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-top_right {
    top: 20px !important;
    bottom: auto !important;
    right: 75px !important;
    left: auto !important;
    transform: none;
}

.custom-swipe-slider.deloswsl-nav-pos-top_right .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-top_right {
    top: 20px !important;
    bottom: auto !important;
    right: 20px !important;
    left: auto !important;
    transform: none;
}

/* 6. Top-Bottom Vertical Center */
.custom-swipe-slider.deloswsl-nav-pos-vertical_center .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-vertical_center {
    top: 20px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

.custom-swipe-slider.deloswsl-nav-pos-vertical_center .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-vertical_center {
    top: auto !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

/* 7. Bottom-Left Corner Stack */
.custom-swipe-slider.deloswsl-nav-pos-bottom_left .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-bottom_left {
    top: auto !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    transform: none;
}

.custom-swipe-slider.deloswsl-nav-pos-bottom_left .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-bottom_left {
    top: auto !important;
    bottom: 20px !important;
    left: 75px !important;
    right: auto !important;
    transform: none;
}

/* 8. Top-Left Header Bar */
.custom-swipe-slider.deloswsl-nav-pos-top_left .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-top_left {
    top: 20px !important;
    bottom: auto !important;
    left: 20px !important;
    right: auto !important;
    transform: none;
}

.custom-swipe-slider.deloswsl-nav-pos-top_left .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-top_left {
    top: 20px !important;
    bottom: auto !important;
    left: 75px !important;
    right: auto !important;
    transform: none;
}

/* 9. Top-Center Split Flank */
.custom-swipe-slider.deloswsl-nav-pos-top_center .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-top_center {
    top: 20px !important;
    bottom: auto !important;
    left: calc(50% - 90px) !important;
    right: auto !important;
    transform: none;
}

.custom-swipe-slider.deloswsl-nav-pos-top_center .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-top_center {
    top: 20px !important;
    bottom: auto !important;
    right: calc(50% - 90px) !important;
    left: auto !important;
    transform: none;
}

/* 10. Left-Rail Vertical Control Column */
.custom-swipe-slider.deloswsl-nav-pos-vertical_stack .swiper-button-prev,
.custom-swipe-slider .swiper-button-prev.deloswsl-nav-pos-vertical_stack {
    top: calc(50% - 30px) !important;
    bottom: auto !important;
    left: 20px !important;
    right: auto !important;
    transform: translateY(-50%);
}

.custom-swipe-slider.deloswsl-nav-pos-vertical_stack .swiper-button-next,
.custom-swipe-slider .swiper-button-next.deloswsl-nav-pos-vertical_stack {
    top: calc(50% + 25px) !important;
    bottom: auto !important;
    left: 20px !important;
    right: auto !important;
    transform: translateY(-50%);
}