/*Custom CSS for Sneaker Detail Carousel*/

/* ===== SNEAKER DETAIL CAROUSEL STYLING ===== */
.sneaker-detail-carousel {
    border-radius: 8px;
    overflow: hidden;
}

.sneaker-carousel-container {
    border-radius: 8px;
    overflow: hidden;
}

/* Custom Carousel Controls */
.sneaker-carousel-control {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}

    .sneaker-carousel-control:hover {
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.9) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }

.carousel-control-prev.sneaker-carousel-control {
    left: 15px !important;
}

.carousel-control-next.sneaker-carousel-control {
    right: 15px !important;
}

/* Custom Carousel Icons */
.sneaker-carousel-icon {
    width: 20px !important;
    height: 20px !important;
    background-size: 20px 20px !important;
}

/* Custom Carousel Indicators */
.sneaker-carousel-indicators {
    bottom: 15px !important;
    margin: 0 !important;
}

.sneaker-indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid rgba(0, 0, 0, 0.3) !important;
    margin: 0 4px !important;
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

    .sneaker-indicator:hover {
        opacity: 0.9 !important;
        transform: scale(1.2) !important;
        background: rgba(255, 255, 255, 0.8) !important;
    }

    .sneaker-indicator.active {
        background: #ffc107 !important;
        border-color: rgba(0, 0, 0, 0.5) !important;
        opacity: 1 !important;
        transform: scale(1.3) !important;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4) !important;
    }

/* Hide default indicators styling */
.sneaker-carousel-indicators .sneaker-indicator[data-bs-target] {
    text-indent: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sneaker-carousel-control {
        width: 35px !important;
        height: 35px !important;
    }

    .sneaker-carousel-icon {
        width: 18px !important;
        height: 18px !important;
        background-size: 18px 18px !important;
    }

    .carousel-control-prev.sneaker-carousel-control {
        left: 10px !important;
    }

    .carousel-control-next.sneaker-carousel-control {
        right: 10px !important;
    }
}