/*======================================================
    SUCCESS MODAL
======================================================*/

.success-overlay{
    position:fixed;
    inset:0;

    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(0,0,0,.48);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.success-modal{
    width:min(520px,92vw);

    padding:54px 44px;

    text-align:center;

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.055)
        );

    border:1px solid rgba(255,255,255,.22);

    box-shadow:
        0 35px 100px rgba(0,0,0,.58),
        inset 0 1px rgba(255,255,255,.25);

    color:#fff;

    animation:successPop .35s ease;
}

@keyframes successPop{
    from{
        opacity:0;
        transform:translateY(18px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.success-icon{
    width:86px;
    height:86px;

    margin:0 auto 28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:var(--primary-light);

    font-size:42px;
    font-weight:700;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(217,145,82,.45);

    box-shadow:0 18px 50px rgba(184,115,51,.20);
}

.success-modal h2{
    margin-bottom:18px;

    color:#fff;

    font-size:clamp(2.1rem,4vw,3rem);
}

.success-modal p{
    margin-bottom:34px;

    color:rgba(255,255,255,.76);

    line-height:1.7;
}

.success-ok{
    min-width:220px;
    height:58px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.18);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#111;

    font-weight:700;

    box-shadow:0 18px 45px rgba(184,115,51,.28);

    transition:.3s;
}

.success-ok:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 60px rgba(184,115,51,.35);
}