/* Carousel Indicators for All Screen Sizes
   This file extends the simple-indicators functionality to all screen sizes
*/

/* Base styles for indicators (outside of any media query) */
.simple-indicators {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}

.simple-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.simple-indicator:after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
}

.simple-indicator.active {
    background-color: #fecf6a; /* beOnd signature yellow/gold color */
    transform: scale(1.3);
    box-shadow: 0 0 8px #fecf6a; /* beOnd signature yellow/gold color */
}

/* Desktop-specific enhancements */
@media (min-width: 769px) {
    .simple-indicators {
        margin-top: 2rem;
    }
    
    .simple-indicator {
        width: 12px;
        height: 12px;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .simple-indicator:hover {
        background-color: rgba(254, 207, 106, 0.5);
        transform: scale(1.2);
    }
    
    .simple-indicator.active {
        transform: scale(1.4);
        box-shadow: 0 0 12px #fecf6a, 0 0 20px rgba(254, 207, 106, 0.3);
    }
}

/* Tablet-specific styles */
@media (min-width: 481px) and (max-width: 768px) {
    .simple-indicators {
        margin-top: 1.8rem;
    }
    
    .simple-indicator {
        width: 11px;
        height: 11px;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .simple-indicators {
        margin-top: 1.2rem;
        gap: 6px;
    }
    
    .simple-indicator {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }
}