.bg-soft {
    background: #f7f4f2;
}

.brand {
    color: #7a1e3a;
    font-weight: 600;
}

.verification-box {
    max-width: 420px;
    background: #ffffff;
    padding: 2.25rem;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* ---------- STATUS ---------- */

.success {
    color: #198754;
}

.failure {
    color: #dc3545;
}


/* ---------- CHECKMARK ---------- */

.checkmark-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    animation: popIn 0.9s cubic-bezier(.2,.8,.2,1) both;
}

.checkmark-circle {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #198754;
}

/* Pure CSS checkmark (Safari safe) */
.checkmark-css {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 20px;
    border-left: 6px solid #ffffff;
    border-bottom: 6px solid #ffffff;
    transform: translate(-50%, -55%) rotate(-45deg);
}

/* Animation ONLY on wrapper */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    60% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}