/* Indikátor počtu boxů pro mobilní verzi */

/* Skrýt na desktopu */
.box-indicators {
    display: none;
}

/* Zobrazit pouze na mobilu */
@media (max-width: 768px) {
    .box-indicators {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 12px;
        padding: 8px 0;
    }
    
    .box-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #e0e0e0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
    }
    
    .box-indicator.active {
        background-color: #00466A;
        width: 24px;
        height: 8px;
        border-radius: 4px;
    }
    
    /* Hover efekt pro neaktivní tečky */
    .box-indicator:not(.active):hover {
        background-color: #b0b0b0;
        transform: scale(1.2);
    }
    
    
    /* Alternativní styl s čísly */
    .box-indicators.numbered {
        gap: 10px;
    }
    
    .box-indicators.numbered .box-indicator {
        width: 24px;
        height: 24px;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        color: #666;
        position: relative;
    }
    
    .box-indicators.numbered .box-indicator.active {
        background-color: #00466A;
        color: white;
    }
    
    .box-indicators.numbered .box-indicator::before {
        content: attr(data-index);
    }
    
    /* Přidat spodní padding pro container, aby byl indikátor vždy vidět */
    .predplatne-boxes {
        padding-bottom: 20px;
    }
    
    /* Stylování pro různé sekce */
    .druh-boxes + .box-indicators,
    .chut-boxes + .box-indicators,
    .jak-casto-boxes + .box-indicators,
    .balicky-boxes + .box-indicators,
    .doba-boxes + .box-indicators {
        margin-bottom: 10px;
    }
}