/**
 * BEFORE/AFTER CAROUSEL (lightweight, no dependencies)
 * Wraps multiple .horizontal-before-after slides per category.
 *
 * @package DrNaela
 * @version 1.0.0
 */

.before-after-carousel {
    position: relative;
    width: 100%;
}

.before-after-carousel .before-after-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.before-after-carousel .before-after-track::-webkit-scrollbar {
    height: 8px;
}

.before-after-carousel .before-after-track::-webkit-scrollbar-thumb {
    background: rgba(10, 77, 104, 0.25);
    border-radius: 9999px;
}

.before-after-carousel .before-after-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.before-after-carousel[data-slides="2"] .before-after-slide { flex-basis: 100%; }

.before-after-carousel .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(10, 77, 104, 0.75);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.before-after-carousel .carousel-nav:hover {
    background: rgba(10, 77, 104, 0.9);
}

.before-after-carousel .carousel-prev { left: 12px; }
.before-after-carousel .carousel-next { right: 12px; }

.before-after-carousel .carousel-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.before-after-carousel .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(10, 77, 104, 0.25);
    border: none;
    cursor: pointer;
}

.before-after-carousel .carousel-dot.is-active {
    background: rgba(10, 77, 104, 0.75);
    width: 18px;
}

@media (max-width: 768px) {
    .before-after-carousel .carousel-prev { left: 8px; }
    .before-after-carousel .carousel-next { right: 8px; }
}