.user-challenge-progress-container {
    background: white;
    border-radius: var(--small-radius);
    border: 1px solid rgba(138, 140, 140, 0.2);
    padding: 52px;
    margin-bottom: 52px;
}

.progress-container {
    text-align: center;
}

.progress-container .progress-main {
    width: 60%;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}

.progress-header .discover-ranking {
    display: flex;
    height: 36px;
    padding: 4px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #6269FF;

    color: #FFF;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 16px;

    font-weight: 600;
    line-height: 24px;
}

.progress-header .progress-header-title {
    display: flex;
    gap: 8px;
}

.progress-header .progress-header-title .points-earned {
    display: flex;
    height: 28px;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 100px;
    border: 0.5px solid #FEC900;
    background: rgba(254, 201, 0, 0.20);
}

.progress-header .progress-header-title .points-earned span {
    color: #FEC900;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 16px;

    font-weight: 600;
    line-height: 24px;
    margin: 0;
}

/* Progress Header Style */
.progress-header span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 20px;
}

/* Badge Images Above the Timeline */
.badge-images-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    margin-bottom: 25px;
}

.badge-image {
    text-align: center;
}

.badge-image img {
    width: 83px;
    margin-bottom: 2px;
}

.badge-text {
    font-family: "Greycliff CF";
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: #0E1A38;
}

/* Timeline Badges */
.points-bar-mr {
    margin: 0 2%;
}

.points-bar {
    position: relative;
    height: 10px;
    background-color: #ECE8E8;
    border-radius: 5px;
    width: 100%;

}

.challenge-to-achieve-main .points-bar {
    margin: 0;
    height: 20px;
    width: 100%;
    border-radius: 100px;
}

.challenge-complete-main .points-bar-complete {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.challenge-complete-main .points-bar-complete span {
    color: #0E1A38;
    font-family: "Greycliff CF";
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.challenge-complete-main .points-bar {
    width: 100%;
    border-radius: 100px;
    height: 20px;
}

.points-bar .progress-novice {
    position: absolute;
    left: 0;
    top: -16px;

}

.points-bar .progress-novice img {
    width: 36px;
}

.points-bar .progress-bronze,
.points-bar .progress-argent,
.points-bar .progress-or,
.points-bar .progress-platine {
    position: absolute;
    align-content: center;
    top: -16px;

}

.points-bar .progress-bronze span,
.points-bar .progress-argent span,
.points-bar .progress-or span,
.points-bar .progress-platine span {
    font-family: "Greycliff CF";
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #0E1A38;

}

.points-bar .progress-bronze.number,
.points-bar .progress-argent.number,
.points-bar .progress-or.number,
.points-bar .progress-platine.number {
    width: 42px;
    height: 42px;
    border: 1px solid #ECE8E8;
    border-radius: 100%;
    background: #ECE8E8;
}

.points-bar .progress-bronze {
    left: 24%;
}

.points-bar .progress-argent {
    left: 47%;

}

.points-bar .progress-or {
    left: 70%;

}

.points-bar .progress-platine {
    left: 94%;

}

.points {
    height: 100%;
    background-color: #C0E2C5;
    border-radius: 5px;
    transition: width 1.2s ease-in-out;
}

.challenge-to-achieve-main .points {
    border-radius: 100px;
}

.challenge-complete-main .points {
    border-radius: 100px;
}

/* Badge Styling */
.badge-image.active img {
    filter: brightness(1.5);
    /* Highlight active badges */
}

#novice.active {
    background-color: #D64DB6;
    /* Pink */
}

#bronze.active {
    background-color: #D99732;
    /* Bronze */
}

#argent.active {
    background-color: #A9A9A9;
    /* Silver */
}

#or.active {
    background-color: #FFD700;
    /* Gold */
}

#platine.active {
    background-color: #4F89C7;
    /* Platinum */
}


.user-tabs-container {
    margin-top: 40px;
}

.tabs {
    display: flex;
    gap: 10px;
}

.tabs .tab {
    color: #FFF;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 18px;
    font-weight: 600;
    height: 44px;
    line-height: 24px;
    padding: 8px 20px;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(207, 222, 255, 0.60);
    color: #6269FF;

}

.tabs .tab.active {
    background: #6269FF;
    color: #FFFFFF;
}

.tab-content {
    display: none;
    padding-top: 32px;
}

.tab-content.active {
    display: block;
}

.challenge-participate-main .card-main,
.challenge-to-achieve-main .card-main,
.challenge-complete-main .card-main,
.event-participate-main .card-main {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.challenge-participate-main .participate-card,
.challenge-to-achieve-main .participate-card,
.challenge-complete-main .participate-card {
    display: grid;
    flex: 0 0 calc(33.3333% - 20px);
    /* height: 200px; */
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.04);
}

.challenge-to-achieve-main .participate-card .status,
.challenge-complete-main .participate-card .status {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
}

.challenge-to-achieve-main .participate-card .status span,
.challenge-complete-main .participate-card .status span {
    color: #0E1A38;
    font-family: "Greycliff CF";
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}


.challenge-participate-main .participate-card .card-info,
.challenge-to-achieve-main .participate-card .card-info,
.challenge-complete-main .participate-card .card-info {
    display: flex;
    height: 56px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.challenge-participate-main .participate-card h4,
.challenge-to-achieve-main .participate-card h4,
.challenge-complete-main .participate-card h4 {
    color: var(--Bleu-fonc, #0E1A38);
    font-family: "Greycliff CF";
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

.challenge-participate-main .participate-card .plane-cleanup,
.challenge-to-achieve-main .participate-card .plane-cleanup {
    display: flex;
    height: 40px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 100px;
    border: 1px solid rgba(183, 182, 181, 0.30);
    background: #EE7203;
    color: #FFF;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.challenge-to-achieve-main .participate-card .plane-cleanup {
    color: #0E1A38;
    border: 1px solid rgba(183, 182, 181, 0.30);
    background: #ECE8E8;
}

.challenge-to-achieve-main .participate-card .plane-cleanup.enable {
    background: #EE7203;
    color: #FFF;
}

.challenge-participate-main .participate-card .card-info .points-earned,
.event-participate-main .event-participate-card .card-info .points-earned,
.challenge-to-achieve-main .participate-card .card-info .points-earned,
.challenge-complete-main .participate-card .card-info .points-earned {
    display: flex;
    align-items: center;
    gap: 12px;
}

.challenge-participate-main .participate-card .card-info .points-earned span,
.event-participate-main .event-participate-card .card-info .points-earned span,
.challenge-to-achieve-main .participate-card .card-info .points-earned span,
.challenge-complete-main .participate-card .card-info .points-earned span {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid #FEC900;
    background: #FFF4CC;

    color: #FEC900;
    font-family: "Greycliff CF";
    font-size: 12px;
    font-weight: 800;
    line-height: 24px;
}

.challenge-to-achieve-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.challenge-to-achieve-main .achieve-cleanup {
    width: max-content;
    display: flex;
    height: 44px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #EE7203;
    color: #FFF;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.challenge-to-achieve-main .achieve-cleanup:hover {
    border-color: #EE7203;
}


.event-participate-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-top: 32px;

}

.event-participate-main .event-participate-card {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;

    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.04);
    width: 381px;
}

.event-participate-main .event-participate-card .card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.event-participate-main .event-participate-card .card-info span {
    display: flex;
    height: 28px;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid #EE7203;
    background: rgba(238, 114, 3, 0.30);

    color: #EE7203;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.event-participate-main .event-participate-card .card-info h3 {
    color: var(--Bleu-fonc, #0E1A38);
    font-family: "Greycliff CF";
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 0;
}

.event-participate-main .event-participate-card .event-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-participate-main .event-participate-card .event-info span {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    color: #0E1A38;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    text-align: left;
}

.event-participate-main .event-participate-card .participate-cta {
    padding: 8px 20px;
    border-radius: 100px;
    border: 1px solid rgba(183, 182, 181, 0.30);
    background: #EE7203;

    color: #FFF;
    text-align: center;
    font-family: "Greycliff CF";
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    width: 100%;
}


@media(max-width: 1024px) {

    .user-challenge-progress-container {
        border: none;
        padding: 52px 16px;
    }

    .progress-container .progress-main {
        width: 100%;
    }

    .progress-header .progress-header-title {
        width: 100%;
        justify-content: space-between;
    }

    .challenge-to-achieve-main .achieve-cleanup {
        width: 100%;
    }

    .progress-header .discover-ranking {
        display: none;
    }

    .badge-image img {
        width: 50px;
    }

    .badge-text {
        font-size: 12px;
    }

    .tabs {
        display: ruby-text;
    }

    .tabs .tab {
        font-size: 16px;
        line-height: 24px;
    }


}

@media(max-width: 500px) {
    .points-bar .progress-bronze {
        left: 22%;
    }

    .points-bar .progress-argent {
        left: 45%;
    }

    .points-bar .progress-or {
        left: 67%;
    }

    .points-bar .progress-platine {
        left: 90%;
    }

}

/* Sidebar Panel */
.points-earned-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.points-earned-sidebar-overlay.active {
    display: block;
}

.points-earned-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: white;
    z-index: 1001;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    overflow-y: auto;
}

.points-earned-sidebar.active {
    right: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 32px;
    border-bottom: 1px solid #C8C8C8;
    background: #FFF;
}

.sidebar-header h2 {
    color: #0E1A38;
    font-family: "Greycliff CF";
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #777;
    transition: color 0.3s;
}

.close-sidebar:hover {
    color: var(--secondary-color);
}

.side-bar-content-main {
    padding: 32px;
}

.side-bar-content-main h3 {
    color: #0E1A38;
    font-family: "Greycliff CF";
    font-size: 28.382px;
    font-weight: 700;
    line-height: 36.491px;
}

.side-bar-content-main p {
    color: #0E1A38;
    font-family: "Greycliff CF";
    font-size: 16.218px;
    font-weight: 400;
    line-height: 24.328px;
    /* 150% */
}

.open-sidebar {
    cursor: pointer;
}

/* Responsive */
@media(max-width: 768px) {
    .points-earned-sidebar {
        width: 85%;
        right: -85%;
    }

    .event-participate-main .card-main,
    .challenge-participate-main .card-main,
    .challenge-to-achieve-main .card-main,
    .challenge-complete-main .card-main {
        flex-direction: column;
    }

    .challenge-participate-main .participate-card,
    .challenge-to-achieve-main .participate-card,
    .challenge-complete-main .participate-card {
        width: 100%;
    }
}

@media(max-width: 480px) {
    .points-earned-sidebar {
        width: 100%;
        right: -100%;
        padding: 15px;
    }

    .points-summary {
        padding: 15px;
    }

    .points-total {
        font-size: 36px;
    }
}

.modal_cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}