/*==================================================
FOUNDATION
==================================================*/

:root{

    --badge-primary:#4f46e5;
    --badge-secondary:#6366f1;

    --badge-bg:#f5f7fb;
    --badge-card:#ffffff;

    --badge-text:#172554;
    --badge-muted:#64748b;

    --badge-border:#e5eaf5;

    --badge-radius:18px;

    --badge-shadow:
    0 4px 16px rgba(15,23,42,.06);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/*==================================================
BODY
==================================================*/

body{

    background:var(--badge-bg) !important;

    color:var(--badge-text);

    font-family:'Inter',sans-serif;

}

.badge-view-page{

    padding:24px 0 42px;

}

.badge-view-page .container{

    max-width:1320px;

}

/*==================================================
BREADCRUMB
==================================================*/

.badge-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

    font-size:.84rem;

    color:var(--badge-muted);

}

.badge-breadcrumb a{

    color:var(--badge-primary);

    text-decoration:none;

    font-weight:600;

}

.badge-breadcrumb a:hover{

    color:var(--badge-secondary);

}

.badge-breadcrumb i{

    font-size:12px;

}

/*==================================================
HERO
==================================================*/

.badge-hero{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    padding:26px;

    margin-bottom:24px;

    border-radius:20px;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--badge-primary),
        var(--badge-secondary)
    );

    box-shadow:
    0 12px 30px rgba(79,70,229,.18);

}

.badge-hero::before{

    content:"";

    position:absolute;

    top:-55px;

    right:-55px;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.badge-hero::after{

    content:"";

    position:absolute;

    bottom:-40px;

    left:-40px;

    width:95px;

    height:95px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

}

.badge-hero>*{

    position:relative;

    z-index:2;

}

/*==================================================
HERO CONTENT
==================================================*/

.badge-hero__content{

    flex:1;

    max-width:760px;

}

.badge-hero__label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    height:34px;

    padding:0 14px;

    margin-bottom:14px;

    border-radius:999px;

    background:rgba(255,255,255,.16);

    font-size:.76rem;

    font-weight:700;

}

.badge-hero h1{

    margin-bottom:10px;

    font-size:2rem;

    font-weight:800;

    color:#fff;

    line-height:1.2;

}

.badge-hero p{

    max-width:620px;

    margin-bottom:18px;

    color:rgba(255,255,255,.92);

    font-size:.90rem;

    line-height:1.6;

}

/*==================================================
HERO MEMBERS
==================================================*/

.badge-hero__members{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    margin-bottom:18px;

}

.badge-hero__avatar{

    width:38px;

    height:38px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid #fff;

    margin-right:-8px;

}

.badge-hero__more{

    width:38px;

    height:38px;

    margin-left:10px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.18);

    border:2px solid #fff;

    font-size:.72rem;

    font-weight:700;

}

.badge-hero__count{

    margin-left:14px;

    font-size:.82rem;

    font-weight:600;

}

/*==================================================
HERO BUTTONS
==================================================*/

.badge-hero__actions{

    display:flex;
    flex-wrap:wrap;
    gap:8px;

}

.badge-hero__actions a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    height:34px;

    padding:0 14px;

    border-radius:10px;

    text-decoration:none;

    font-size:.78rem;

    font-weight:600;

    transition:.25s;

}

.badge-hero__actions a:first-child{

    background:#fff;

    color:var(--badge-primary);

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.badge-hero__actions a:first-child:hover{

    background:#f8f9ff;

    transform:translateY(-2px);

}

.badge-hero__actions a:last-child{

    background:rgba(255,255,255,.15);

    color:#fff;

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(8px);

}

.badge-hero__actions a:last-child:hover{

    background:rgba(255,255,255,.25);

    transform:translateY(-2px);

}

.badge-hero__actions i{

    font-size:.85rem;

}

.btn-hero-primary,
.btn-hero-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:40px;

    padding:0 18px;

    border-radius:10px;

    text-decoration:none;

    font-size:.82rem;

    font-weight:700;

    transition:.25s;

}

.btn-hero-primary{

    background:#fff;

    color:var(--badge-primary);

}

.btn-hero-primary:hover{

    color:var(--badge-primary);

    background:#f8f9ff;

}

.btn-hero-secondary{

    color:#fff;

    border:1px solid rgba(255,255,255,.22);

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(10px);

}

.btn-hero-secondary:hover{

    color:#fff;

    background:rgba(255,255,255,.18);

}

/*==================================================
HERO ILLUSTRATION
==================================================*/

.badge-hero__illustration{

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-badge-circle{

    width:110px;

    height:110px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:54px;

    color:#fff;

    border:1px solid rgba(255,255,255,.20);

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

    .badge-hero{

        flex-direction:column;

        text-align:center;

    }

    .badge-hero__members{

        justify-content:center;

    }

    .badge-hero__actions{

        justify-content:center;

    }

}

@media(max-width:768px){

    .badge-view-page{

        padding:18px 0 34px;

    }

    .badge-hero{

        padding:20px;

        gap:18px;

        border-radius:18px;

    }

    .badge-hero h1{

        font-size:1.65rem;

    }

    .hero-badge-circle{

        width:90px;

        height:90px;

        font-size:42px;

    }

}

@media(max-width:480px){

    .badge-view-page .container{

        padding-left:12px;

        padding-right:12px;

    }

    .badge-hero{

        padding:18px;

    }

    .badge-hero h1{

        font-size:1.45rem;

    }

    .badge-hero p{

        font-size:.84rem;

    }

    .badge-hero__actions{

        width:100%;

    }

    .btn-hero-primary,
    .btn-hero-secondary{

        flex:1;

    }

}    
    

/*==================================================
MAIN LAYOUT
==================================================*/

.badge-main-layout{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:18px;

    margin-bottom:22px;

}

/*==================================================
PREMIUM CARDS
==================================================*/

.premium-card,
.badge-showcase-card,
.badge-info-card{

    background:var(--badge-card);

    border:1px solid var(--badge-border);

    border-radius:18px;

    padding:18px;

    box-shadow:var(--badge-shadow);

}

/*==================================================
SECTION TITLE
==================================================*/

.section-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}

.section-title__icon{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    flex-shrink:0;

}

.section-title h3{

    margin:0;

    font-size:1.05rem;

    font-weight:700;

    color:var(--badge-text);

}

.section-title p{

    margin:2px 0 0;

    font-size:.78rem;

    color:var(--badge-muted);

    line-height:1.45;

}

/*==================================================
BADGE SHOWCASE
==================================================*/

.badge-showcase-card{

    text-align:center;

}

.badge-showcase__inner{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.badge-showcase__circle{

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:14px;

    font-size:58px;

    color:#fff;

    box-shadow:
    0 8px 24px rgba(79,70,229,.18);

}

.badge-showcase__inner h2{

    margin-bottom:6px;

    font-size:1.25rem;

    font-weight:800;

    color:var(--badge-text);

}

.badge-showcase__inner p{

    margin:0;

    font-size:.82rem;

    color:var(--badge-muted);

}

/*==================================================
BADGE INFORMATION
==================================================*/

.badge-card-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}

.badge-card-title__icon{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef2ff;

    color:var(--badge-primary);

    font-size:18px;

}

.badge-card-title h3{

    margin:0;

    font-size:1.05rem;

    font-weight:700;

}

.badge-info-list{

    display:flex;

    flex-direction:column;

    gap:0;

}

.badge-info-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    padding:12px 0;

    border-bottom:1px solid #edf2f7;

}

.badge-info-item:last-child{

    border-bottom:none;

}

.badge-info-label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.84rem;

    font-weight:600;

    color:var(--badge-muted);

}

.badge-info-label i{

    color:var(--badge-primary);

}

.badge-info-value{

    font-size:.86rem;

    font-weight:700;

    color:var(--badge-text);

    text-align:right;

}

.badge-difficulty{

    font-weight:800;

}

/*==================================================
CARD HOVER
==================================================*/

.badge-showcase-card,
.badge-info-card,
.premium-card{

    transition:.25s;

}

.badge-showcase-card:hover,
.badge-info-card:hover,
.premium-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 12px 28px rgba(15,23,42,.08);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

    .badge-main-layout{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .premium-card,
    .badge-showcase-card,
    .badge-info-card{

        padding:16px;

    }

    .badge-showcase__circle{

        width:95px;

        height:95px;

        font-size:46px;

    }

    .badge-showcase__inner h2{

        font-size:1.1rem;

    }

    .badge-info-item{

        padding:10px 0;

    }

}

@media(max-width:480px){

    .section-title{

        margin-bottom:14px;

    }

    .section-title__icon,
    .badge-card-title__icon{

        width:38px;

        height:38px;

        font-size:16px;

    }

    .section-title h3,
    .badge-card-title h3{

        font-size:1rem;

    }

    .badge-info-item{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .badge-info-value{

        text-align:left;

    }

}


/*==================================================
TIMELINE
==================================================*/

.timeline-steps{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.timeline-step{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.timeline-step__number{

    width:38px;

    height:38px;

    flex-shrink:0;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.78rem;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--badge-primary),
        var(--badge-secondary)
    );

    box-shadow:
    0 4px 12px rgba(79,70,229,.18);

}

.timeline-step__content{

    flex:1;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:14px;

    padding:12px 14px;

    border-radius:14px;

    background:#fafbff;

    border:1px solid var(--badge-border);

    transition:.25s;

}

.timeline-step:hover .timeline-step__content{

    background:#f3f5ff;

    border-color:#d9e1ff;

}

.timeline-step__title{

    font-size:.84rem;

    font-weight:600;

    color:var(--badge-text);

    line-height:1.45;

}

.timeline-step__check{

    flex-shrink:0;

    font-size:18px;

    color:#22c55e;

}

/*==================================================
STATISTICS
==================================================*/

.stats-premium-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.stats-premium-card{

    background:#fff;

    border:1px solid var(--badge-border);

    border-radius:16px;

    padding:16px;

    text-align:center;

    box-shadow:var(--badge-shadow);

    transition:.25s;

}

.stats-premium-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 12px 26px rgba(15,23,42,.08);

}

.stats-premium-icon{

    width:44px;

    height:44px;

    margin:0 auto 10px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef2ff;

    color:var(--badge-primary);

    font-size:18px;

}

.stats-premium-card strong{

    display:block;

    margin-bottom:4px;

    font-size:1.15rem;

    font-weight:800;

    color:var(--badge-text);

    line-height:1.2;

}

.stats-premium-card span{

    display:block;

    font-size:.78rem;

    color:var(--badge-muted);

}

/*==================================================
SECTION SPACING
==================================================*/

.premium-card .section-title{

    margin-bottom:16px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

    .timeline-step{

        gap:10px;

    }

    .timeline-step__number{

        width:34px;

        height:34px;

        font-size:.72rem;

    }

    .timeline-step__content{

        padding:10px 12px;

    }

    .timeline-step__title{

        font-size:.80rem;

    }

    .timeline-step__check{

        font-size:16px;

    }

    .stats-premium-grid{

        gap:10px;

    }

    .stats-premium-card{

        padding:14px;

    }

    .stats-premium-icon{

        width:40px;

        height:40px;

        font-size:16px;

    }

    .stats-premium-card strong{

        font-size:1rem;

    }

    .stats-premium-card span{

        font-size:.74rem;

    }

}

@media(max-width:480px){

    .stats-premium-grid{

        grid-template-columns:repeat(2,1fr);

        gap:8px;

    }

    .timeline-step{

        align-items:flex-start;

    }

    .timeline-step__content{

        padding:10px;

    }

    .timeline-step__title{

        font-size:.76rem;

    }

    .stats-premium-card{

        padding:12px 10px;

        border-radius:14px;

    }

    .stats-premium-icon{

        width:36px;

        height:36px;

        margin-bottom:8px;

        font-size:15px;

    }

    .stats-premium-card strong{

        font-size:.95rem;

    }

    .stats-premium-card span{

        font-size:.70rem;

    }

}


/*==================================================
RECENT MEMBERS
==================================================*/

.member-premium-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    height:100%;

    padding:16px;

    background:#fff;

    border:1px solid var(--badge-border);

    border-radius:16px;

    box-shadow:var(--badge-shadow);

    transition:.25s;

}

.member-premium-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 24px rgba(15,23,42,.08);

}

.member-premium-avatar{

    width:62px;

    height:62px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:10px;

    border:3px solid #fff;

    box-shadow:
    0 4px 12px rgba(15,23,42,.08);

}

.member-premium-card h5{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:6px;

    margin-bottom:8px;

    font-size:.90rem;

    font-weight:700;

    text-align:center;

    color:var(--badge-text);

}

.member-flag{

    width:18px;

    height:13px;

    object-fit:cover;

    border-radius:2px;

}

.member-earned-date{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin-bottom:12px;

    font-size:.72rem;

    color:var(--badge-muted);

}

.member-earned-date i{

    color:var(--badge-primary);

}

.member-profile-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:36px;

    border-radius:10px;

    background:linear-gradient(
        135deg,
        var(--badge-primary),
        var(--badge-secondary)
    );

    color:#fff !important;

    text-decoration:none;

    font-size:.76rem;

    font-weight:700;

    transition:.25s;

}

.member-profile-btn:hover{

    color:#fff;

    transform:translateY(-2px);

}

/*==================================================
RELATED BADGES
==================================================*/

.badge-premium-card{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:16px;

    background:#fff;

    border:1px solid var(--badge-border);

    border-radius:16px;

    box-shadow:var(--badge-shadow);

    transition:.25s;

}

.badge-premium-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 24px rgba(15,23,42,.08);

}

.badge-premium-icon{

    width:62px;

    height:62px;

    margin:0 auto 12px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#fff;

}

.badge-premium-title{

    margin-bottom:8px;

    font-size:.96rem;

    font-weight:700;

    text-align:center;

    color:var(--badge-text);

}

.badge-premium-description{

    flex:1;

    margin-bottom:14px;

    font-size:.76rem;

    line-height:1.5;

    text-align:center;

    color:var(--badge-muted);

}

/*==================================================
CARD FOOTER
==================================================*/

.badge-premium-footer{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px 0;

    margin-bottom:12px;

    border-top:1px solid #eef2f7;

    border-bottom:1px solid #eef2f7;

}

.badge-premium-members-count{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:.74rem;

    color:var(--badge-muted);

}

.badge-premium-members-count i{

    color:var(--badge-primary);

}

/*==================================================
BUTTON
==================================================*/

.badge-premium-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:36px;

    border-radius:10px;

    background:linear-gradient(
        135deg,
        var(--badge-primary),
        var(--badge-secondary)
    );

    color:#fff;

    text-decoration:none;

    font-size:.76rem;

    font-weight:700;

    transition:.25s;

}

.badge-premium-button:hover{

    color:#fff;

    transform:translateY(-2px);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

    .member-premium-card,
    .badge-premium-card{

        padding:14px;

    }

    .member-premium-avatar{

        width:56px;

        height:56px;

    }

    .badge-premium-icon{

        width:56px;

        height:56px;

        font-size:26px;

    }

}

@media(max-width:576px){

    .member-premium-card,
    .badge-premium-card{

        padding:12px;

        border-radius:14px;

    }

    .member-premium-avatar{

        width:52px;

        height:52px;

    }

    .badge-premium-icon{

        width:52px;

        height:52px;

        font-size:24px;

    }

    .member-premium-card h5{

        font-size:.82rem;

    }

    .badge-premium-title{

        font-size:.88rem;

    }

    .badge-premium-description{

        font-size:.72rem;

    }

    .member-profile-btn,
    .badge-premium-button{

        height:34px;

        font-size:.72rem;

    }
    
    .row.g-4{

        --bs-gutter-x:.75rem;
        --bs-gutter-y:.75rem;

    }

}


/*==================================================
PREMIUM ANIMATIONS
==================================================*/

.badge-hero,
.premium-card,
.badge-showcase-card,
.badge-info-card,
.member-premium-card,
.badge-premium-card,
.stats-premium-card{

    animation:fadeUp .45s ease both;

}

.member-premium-card:nth-child(2),
.badge-premium-card:nth-child(2){

    animation-delay:.05s;

}

.member-premium-card:nth-child(3),
.badge-premium-card:nth-child(3){

    animation-delay:.1s;

}

.member-premium-card:nth-child(4),
.badge-premium-card:nth-child(4){

    animation-delay:.15s;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(14px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==================================================
GLOBAL HOVER
==================================================*/

.premium-card,
.badge-showcase-card,
.badge-info-card,
.member-premium-card,
.badge-premium-card,
.stats-premium-card{

    transition:
    transform .25s,
    box-shadow .25s,
    border-color .25s;

}

.premium-card:hover,
.badge-showcase-card:hover,
.badge-info-card:hover,
.member-premium-card:hover,
.badge-premium-card:hover,
.stats-premium-card:hover{

    border-color:#d9e3ff;

}

/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;
    height:8px;

}

::-webkit-scrollbar-track{

    background:#eef2f8;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        var(--badge-primary),
        var(--badge-secondary)
    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--badge-secondary);

}

/*==================================================
TABLET
==================================================*/

@media (max-width:991px){

    .badge-view-page{

        padding:18px 0 30px;

    }

    .premium-card,
    .badge-showcase-card,
    .badge-info-card{

        margin-bottom:16px;

    }

    .stats-premium-grid{

        gap:12px;

    }

}

/*==================================================
PHONE
==================================================*/

@media (max-width:768px){

    .badge-view-page .container{

        padding-left:14px;
        padding-right:14px;

    }

    .badge-main-layout{

        gap:14px;

    }

    .premium-card,
    .badge-showcase-card,
    .badge-info-card,
    .member-premium-card,
    .badge-premium-card{

        border-radius:15px;

    }

    .section-title{

        margin-bottom:12px;

    }

    .badge-info-item{

        padding:9px 0;

    }

}

/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .badge-view-page{

        padding:14px 0 24px;

    }

    .badge-view-page .container{

        padding-left:10px;
        padding-right:10px;

    }

    .badge-main-layout{

        gap:12px;

    }

    .premium-card,
    .badge-showcase-card,
    .badge-info-card,
    .member-premium-card,
    .badge-premium-card,
    .stats-premium-card{

        padding:12px;

        border-radius:14px;

    }

    .section-title{

        gap:10px;

    }

    .section-title h3{

        font-size:.95rem;

    }

    .section-title p{

        font-size:.72rem;

    }

}

/*==================================================
VERY SMALL DEVICES
==================================================*/

@media (max-width:380px){

    .badge-view-page .container{

        padding-left:8px;
        padding-right:8px;

    }

    .premium-card,
    .badge-showcase-card,
    .badge-info-card,
    .member-premium-card,
    .badge-premium-card,
    .stats-premium-card{

        padding:10px;

    }

    .section-title__icon,
    .badge-card-title__icon{

        width:34px;
        height:34px;

        font-size:14px;

    }

    .btn-hero-primary,
    .btn-hero-secondary,
    .member-profile-btn,
    .badge-premium-button{

        height:32px;

        font-size:.70rem;

    }

}

/*==================================================
FINAL OPTIMIZATIONS
==================================================*/

.badge-view-page img{

    max-width:100%;
    height:auto;

}

.badge-showcase-card,
.badge-info-card,
.member-premium-card,
.badge-premium-card,
.stats-premium-card{

    overflow:hidden;

}

.badge-view-page .row{

    --bs-gutter-x:1rem;
    --bs-gutter-y:1rem;

}

@media (max-width:576px){

    .badge-view-page .row{

        --bs-gutter-x:.75rem;
        --bs-gutter-y:.75rem;

    }

}