/**
 * WBD Coverflow Slider Styles
 * Version: 1.0.0
 * Author: mke
 */

/* Container */
.wbd-coverflow-container {
    --wbd-coverflow-height: 400px;
    --wbd-coverflow-slide-width: 200px;
    --wbd-coverflow-slide-height: 280px;
    --wbd-coverflow-margin-left: -100px;
    --wbd-coverflow-margin-top: -140px;
    --wbd-coverflow-perspective: 1000px;
    --wbd-coverflow-transition: 0.5s ease;
    --wbd-coverflow-nav-size: 50px;
    --wbd-coverflow-nav-bg: #ffffff;
    --wbd-coverflow-nav-color: #00064d;
    --wbd-coverflow-nav-hover-bg: #00064d;
    --wbd-coverflow-nav-hover-color: #ffffff;
    --wbd-coverflow-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --wbd-coverflow-radius: 16px;

    width: 100%;
    max-width: 1200px;
    height: var(--wbd-coverflow-height);
    position: relative;
    perspective: var(--wbd-coverflow-perspective);
    margin: 0 auto;
    overflow: hidden;
}

/* Track */
.wbd-coverflow-track {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

/* Slide */
.wbd-coverflow-slide {
    position: absolute;
    width: var(--wbd-coverflow-slide-width);
    height: var(--wbd-coverflow-slide-height);
    left: 50%;
    top: 50%;
    margin-left: var(--wbd-coverflow-margin-left);
    margin-top: var(--wbd-coverflow-margin-top);
    border-radius: var(--wbd-coverflow-radius);
    overflow: hidden;
    box-shadow: var(--wbd-coverflow-shadow);
    transition: all var(--wbd-coverflow-transition);
    cursor: pointer;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.wbd-coverflow-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Position styles */
.wbd-coverflow-slide[data-pos="-4"],
.wbd-coverflow-slide[data-pos="4"],
.wbd-coverflow-slide[data-pos="-5"],
.wbd-coverflow-slide[data-pos="5"],
.wbd-coverflow-slide[data-pos="-6"],
.wbd-coverflow-slide[data-pos="6"],
.wbd-coverflow-slide[data-pos="-7"],
.wbd-coverflow-slide[data-pos="7"] {
    opacity: 0;
    pointer-events: none;
}

.wbd-coverflow-slide[data-pos="-3"] {
    transform: translateX(-420px) rotateY(45deg) scale(0.6);
    opacity: 0.4;
    z-index: 1;
}

.wbd-coverflow-slide[data-pos="-2"] {
    transform: translateX(-300px) rotateY(40deg) scale(0.7);
    opacity: 0.6;
    z-index: 2;
}

.wbd-coverflow-slide[data-pos="-1"] {
    transform: translateX(-180px) rotateY(35deg) scale(0.85);
    opacity: 0.8;
    z-index: 3;
}

.wbd-coverflow-slide[data-pos="0"] {
    transform: translateX(0) rotateY(0deg) scale(1);
    opacity: 1;
    z-index: 4;
}

.wbd-coverflow-slide[data-pos="1"] {
    transform: translateX(180px) rotateY(-35deg) scale(0.85);
    opacity: 0.8;
    z-index: 3;
}

.wbd-coverflow-slide[data-pos="2"] {
    transform: translateX(300px) rotateY(-40deg) scale(0.7);
    opacity: 0.6;
    z-index: 2;
}

.wbd-coverflow-slide[data-pos="3"] {
    transform: translateX(420px) rotateY(-45deg) scale(0.6);
    opacity: 0.4;
    z-index: 1;
}

/* Navigation buttons */
.wbd-coverflow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--wbd-coverflow-nav-size);
    height: var(--wbd-coverflow-nav-size);
    border: none;
    background: var(--wbd-coverflow-nav-bg);
    color: var(--wbd-coverflow-nav-color);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.wbd-coverflow-nav:hover {
    background: var(--wbd-coverflow-nav-hover-bg);
    color: var(--wbd-coverflow-nav-hover-color);
}

.wbd-coverflow-nav:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

.wbd-coverflow-prev {
    left: 40px;
}

.wbd-coverflow-next {
    right: 40px;
}

/* Error message */
.wbd-coverflow-error {
    padding: 20px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    text-align: center;
}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .wbd-coverflow-container {
        --wbd-coverflow-nav-size: 44px;
    }

    .wbd-coverflow-slide[data-pos="-3"],
    .wbd-coverflow-slide[data-pos="3"] {
        opacity: 0;
        pointer-events: none;
    }

    .wbd-coverflow-slide[data-pos="-2"] {
        transform: translateX(-220px) rotateY(40deg) scale(0.7);
        opacity: 0.5;
    }

    .wbd-coverflow-slide[data-pos="-1"] {
        transform: translateX(-140px) rotateY(35deg) scale(0.85);
    }

    .wbd-coverflow-slide[data-pos="1"] {
        transform: translateX(140px) rotateY(-35deg) scale(0.85);
    }

    .wbd-coverflow-slide[data-pos="2"] {
        transform: translateX(220px) rotateY(-40deg) scale(0.7);
        opacity: 0.5;
    }

    .wbd-coverflow-prev {
        left: 10px;
    }

    .wbd-coverflow-next {
        right: 10px;
    }
}

/* Mobile (< 768px) */
@media screen and (max-width: 767px) {
    .wbd-coverflow-container {
        --wbd-coverflow-height: 320px;
        --wbd-coverflow-nav-size: 40px;
    }

    .wbd-coverflow-slide[data-pos="-2"],
    .wbd-coverflow-slide[data-pos="2"],
    .wbd-coverflow-slide[data-pos="-3"],
    .wbd-coverflow-slide[data-pos="3"] {
        opacity: 0;
        pointer-events: none;
    }

    .wbd-coverflow-slide[data-pos="-1"] {
        transform: translateX(-100px) rotateY(30deg) scale(0.75);
        opacity: 0.6;
    }

    .wbd-coverflow-slide[data-pos="0"] {
        transform: translateX(0) rotateY(0deg) scale(0.9);
    }

    .wbd-coverflow-slide[data-pos="1"] {
        transform: translateX(100px) rotateY(-30deg) scale(0.75);
        opacity: 0.6;
    }

    .wbd-coverflow-nav {
        font-size: 20px;
    }

    .wbd-coverflow-prev {
        left: 5px;
    }

    .wbd-coverflow-next {
        right: 5px;
    }
}

/* Small mobile (< 480px) */
@media screen and (max-width: 479px) {
    .wbd-coverflow-container {
        --wbd-coverflow-height: 280px;
        --wbd-coverflow-nav-size: 36px;
    }

    .wbd-coverflow-slide[data-pos="-1"] {
        transform: translateX(-70px) rotateY(25deg) scale(0.7);
        opacity: 0.5;
    }

    .wbd-coverflow-slide[data-pos="0"] {
        transform: translateX(0) rotateY(0deg) scale(0.85);
    }

    .wbd-coverflow-slide[data-pos="1"] {
        transform: translateX(70px) rotateY(-25deg) scale(0.7);
        opacity: 0.5;
    }

    .wbd-coverflow-nav {
        font-size: 18px;
    }
}