.referral-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:260px;height:260px;margin:0 auto;border-radius:50%;border:3px solid var(--primary-color);background:rgba(0,0,0,.45);text-align:center}
.referral-badge-label{text-transform:uppercase;letter-spacing:2px;font-size:13px}
.referral-badge-amount{font-size:64px;font-weight:700;line-height:1.1;color:var(--primary-color)}
.referral-badge-text{font-size:14px}
.referral-card{padding:30px;border:1px solid rgba(128,128,128,.25);border-radius:12px}
.referral-form .form-control.is-invalid{border-color:#dc3545}
.referral-form .form-check-input{margin-top:.35rem}


.referral-success {
    text-align: center;
    padding: 32px 16px 20px;
    animation: referralFade .5s ease;
}

.referral-success__check {
    width: 74px;
    height: 74px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--primary-color, #f5c400);
    color: #1a1a1a;
    font-size: 30px;
    display: grid;
    place-items: center;
}

.referral-success h3 {
    margin: 0 0 10px;
    color: #1a1a1a;
    font-size: 28px;
    font-weight: 700;
}

.referral-success p {
    max-width: 44ch;
    margin: 0 auto 24px;
    color: #6c757d;
    font-size: 15.5px;
    line-height: 1.6;
}

@keyframes referralFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}