/* Temporary Carousel Debug Styles */

/* Visual debug indicator for active slide */
.carousel-debug-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(245, 164, 37, 0.95);
    color: white;
    padding: 12px 18px;
    border-radius: 25px;
    font-weight: bold;
    z-index: 30;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}

/* Pulsing animation for auto-slide indicator */
.carousel-debug-indicator {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 6px 18px rgba(245, 164, 37, 0.5);
    }
}

/* Debug outline for carousel items */
.carousel-item {
    border: 2px solid transparent;
}

    .carousel-item.active {
        border-color: #8DC6D8;
    }

/* Flash effect when buttons are clicked */
@keyframes buttonFlash {
    0% { background: rgba(255, 255, 255, 0.9); }
    50% { background: rgba(245, 164, 37, 0.9); }
    100% { background: rgba(255, 255, 255, 0.9); }
}

.carousel-control-prev.debug-clicked,
.carousel-control-next.debug-clicked {
    animation: buttonFlash 0.3s ease;
}

/* Slide transition debug styles */
.carousel-item-next,
.carousel-item-prev {
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
}

.carousel-item-next {
    left: 100% !important;
}

.carousel-item-prev {
    left: -100% !important;
}

.carousel-item-left.carousel-item-next,
.carousel-item-right.carousel-item-prev {
    left: 0 !important;
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
    left: 0 !important;
}