/**
 * Styled Lists - Badges circulaires pour les listes numérotées
 * 
 * Applique automatiquement un style avec badges circulaires bleus
 * aux listes <ol> dans le contenu des articles.
 *
 * @author AK Digital
 * @package xstore-child
 */

/* ==========================================================================
   Listes ordonnées avec badges circulaires
   ========================================================================== */

.content-article ol,
.content-article.entry-content ol,
.post-main-content ol,
.entry-content ol {
    counter-reset: styled-list-counter !important;
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 1.5em 0 !important;
}

.content-article ol li,
.content-article.entry-content ol li,
.post-main-content ol li,
.entry-content ol li {
    counter-increment: styled-list-counter !important;
    position: relative !important;
    padding-left: 55px !important;
    margin-bottom: 20px !important;
    min-height: 40px !important;
    line-height: 1.6 !important;
    list-style: none !important;
    list-style-type: none !important;
}

.content-article ol li::before,
.content-article.entry-content ol li::before,
.post-main-content ol li::before,
.entry-content ol li::before {
    content: counter(styled-list-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 38px !important;
    height: 38px !important;
    background: #0B3954 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 38px !important;
    box-shadow: 0 2px 8px rgba(11, 57, 84, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Effet hover sur les badges */
.content-article ol li:hover::before,
.content-article.entry-content ol li:hover::before,
.post-main-content ol li:hover::before,
.entry-content ol li:hover::before {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(11, 57, 84, 0.35) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {

    .content-article ol li,
    .content-article.entry-content ol li,
    .post-main-content ol li,
    .entry-content ol li {
        padding-left: 50px !important;
        margin-bottom: 15px !important;
    }

    .content-article ol li::before,
    .content-article.entry-content ol li::before,
    .post-main-content ol li::before,
    .entry-content ol li::before {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        line-height: 34px !important;
    }
}

@media screen and (max-width: 480px) {

    .content-article ol li,
    .content-article.entry-content ol li,
    .post-main-content ol li,
    .entry-content ol li {
        padding-left: 45px !important;
    }

    .content-article ol li::before,
    .content-article.entry-content ol li::before,
    .post-main-content ol li::before,
    .entry-content ol li::before {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        line-height: 30px !important;
    }
}