/* =============================== */
/* Carousel Indicators & Controls */
/* =============================== */

/* Base Carousel Indicators */
.carousel-indicators {
    bottom: 2rem;
    z-index: 5;
    margin-bottom: 0;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 6px;
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    background-color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: auto;
    height: auto;
    background: none;
    border: none;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 2rem;
    backdrop-filter: none;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: none;
    transform: translateY(-50%) scale(1.05);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 44px;
    height: 44px;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    transition: all 0.25s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: transparent;
    transform: scale(1.18);
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.75));
}

/* Carousel Fade Effect */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

/* Mobile adjustments for indicators */
@media (max-width: 576px) {
    .carousel-indicators {
        bottom: 1rem;
    }
    .carousel-indicators button {
        width: 7px;
        height: 7px;
        margin: 0 4px;
        border-width: 1px;
    }
    .carousel-indicators button.active {
        transform: scale(0.6);
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
    }
}