/* ==========================================================
   MINECRFTMODS — SOCIAL UNLOCK V41
   ========================================================== */

#social-unlock-v41{
    width:min(900px,calc(100% - 28px));
    margin:28px auto;

    box-sizing:border-box;

    position:relative;
    z-index:8;
}

.su41-card{
    position:relative;
    overflow:hidden;

    padding:28px;

    border-radius:26px;

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

    background:
        linear-gradient(
            145deg,
            rgba(10,15,24,.96),
            rgba(22,19,38,.94)
        );

    box-shadow:
        0 28px 80px rgba(0,0,0,.34),
        inset 0 1px rgba(255,255,255,.05);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
}

.su41-card::before{
    content:"";
    position:absolute;

    width:330px;
    height:330px;

    right:-130px;
    top:-170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.24),
            transparent 68%
        );

    pointer-events:none;
}

.su41-top{
    position:relative;
    z-index:2;

    text-align:center;

    margin-bottom:23px;
}

.su41-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 12px;

    border-radius:10px;

    border:1px solid rgba(157,104,255,.24);

    background:rgba(157,104,255,.09);

    color:#b994ff;

    font-size:11px;
    font-weight:900;

    letter-spacing:.15em;
    text-transform:uppercase;
}

.su41-top h2{
    margin:13px 0 8px;

    color:#fff;

    font-size:clamp(28px,4vw,39px);
    line-height:1.05;

    letter-spacing:-.035em;
}

.su41-top p{
    max-width:650px;

    margin:0 auto;

    color:#aeb6c6;

    line-height:1.6;
    font-size:14px;
}

.su41-tasks{
    position:relative;
    z-index:2;

    display:grid;
    gap:12px;
}

.su41-task{
    width:100%;

    box-sizing:border-box;

    display:grid;
    grid-template-columns:50px 1fr auto;
    align-items:center;

    gap:14px;

    min-height:74px;

    padding:11px 15px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:17px;

    cursor:pointer;

    color:#fff;

    text-align:left;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        opacity .2s ease;
}

.su41-task:hover{
    transform:translateY(-2px);
}

.su41-task.youtube{
    background:
        linear-gradient(
            135deg,
            rgba(255,35,35,.20),
            rgba(17,20,28,.93) 42%
        );
}

.su41-task.instagram{
    background:
        linear-gradient(
            135deg,
            rgba(209,58,173,.18),
            rgba(17,20,28,.93) 42%
        );
}

.su41-task.telegram{
    background:
        linear-gradient(
            135deg,
            rgba(38,164,227,.20),
            rgba(17,20,28,.93) 42%
        );
}

.su41-task.youtube:hover{
    border-color:rgba(255,60,60,.36);
}

.su41-task.instagram:hover{
    border-color:rgba(222,90,190,.36);
}

.su41-task.telegram:hover{
    border-color:rgba(61,175,230,.38);
}

.su41-task.done{
    border-color:rgba(92,224,148,.35);

    background:
        linear-gradient(
            135deg,
            rgba(43,190,112,.14),
            rgba(16,22,27,.94)
        );
}

.su41-task.verifying{
    border-color:rgba(171,126,255,.40);
}

.su41-icon{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:14px;

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

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

.su41-icon svg{
    width:27px;
    height:27px;
    display:block;
}

.su41-task-main strong{
    display:block;

    color:#fff;

    font-size:16px;
    font-weight:850;
}

.su41-task-main span{
    display:block;

    margin-top:4px;

    color:#9ca5b7;

    font-size:12px;
}

.su41-status{
    min-width:92px;

    text-align:right;

    color:#aeb6c6;

    font-size:12px;
    font-weight:800;
}

.su41-status.done{
    color:#70e2a1;
}

.su41-status.verifying{
    color:#bc9cff;
}

.su41-progress-wrap{
    position:relative;
    z-index:2;

    margin-top:20px;

    padding:18px;

    border-radius:17px;

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

    background:rgba(4,8,14,.46);
}

.su41-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:10px;
}

.su41-progress-top strong{
    color:#dfe4ee;

    font-size:13px;
}

.su41-progress-count{
    color:#ab84ff;

    font-size:13px;
    font-weight:900;
}

.su41-progress{
    height:9px;

    overflow:hidden;

    border-radius:100px;

    background:rgba(255,255,255,.09);
}

.su41-progress-bar{
    width:0%;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #9b63ff,
            #717aff,
            #42b3f5
        );

    box-shadow:
        0 0 22px rgba(139,102,255,.38);

    transition:width .4s ease;
}

.su41-unlock{
    position:relative;
    z-index:2;

    width:100%;

    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:11px;

    margin-top:15px;
    padding:18px 20px;

    border:0;
    border-radius:16px;

    color:#737987;

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

    font-size:17px;
    font-weight:900;

    cursor:not-allowed;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease;
}

.su41-unlock.ready{
    cursor:pointer;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #9d63ff,
            #6753e9 50%,
            #3faaf6
        );

    box-shadow:
        0 16px 38px rgba(103,81,232,.27);
}

.su41-unlock.ready:hover{
    transform:translateY(-2px);

    box-shadow:
        0 20px 50px rgba(103,81,232,.35);
}

.su41-lock-icon{
    width:21px;
    height:21px;
}

.su41-note{
    position:relative;
    z-index:2;

    margin:13px 0 0;

    text-align:center;

    color:#747e91;

    font-size:11px;
    line-height:1.55;
}

.su41-selected{
    position:relative;
    z-index:2;

    display:none;

    margin-bottom:16px;
    padding:11px 13px;

    border-radius:13px;

    background:rgba(140,95,255,.075);

    border:1px solid rgba(140,95,255,.16);

    color:#b8c0d0;

    font-size:12px;
}

.su41-selected.show{
    display:block;
}

.su41-selected strong{
    color:#d9c9ff;
}


/* Existing download buttons that now open the gate */

.su41-gated-download{
    scroll-margin-top:110px;
}


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

@media(max-width:600px){

    #social-unlock-v41{
        width:calc(100% - 22px);
        margin:20px auto;
    }

    .su41-card{
        padding:20px 14px;

        border-radius:22px;
    }

    .su41-top{
        margin-bottom:18px;
    }

    .su41-top h2{
        font-size:29px;
    }

    .su41-task{
        grid-template-columns:45px 1fr;

        min-height:72px;

        padding:11px;

        gap:11px;
    }

    .su41-icon{
        width:43px;
        height:43px;

        border-radius:12px;
    }

    .su41-icon svg{
        width:24px;
        height:24px;
    }

    .su41-task-main strong{
        font-size:15px;
    }

    .su41-status{
        grid-column:2;

        min-width:0;

        text-align:left;

        margin-top:-4px;
    }

    .su41-progress-wrap{
        padding:15px;
    }

    .su41-unlock{
        padding:17px 14px;

        font-size:16px;
    }

}