.vorik-password-strength {
    margin-top: 15px;
}

.vorik-password-strength-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
    color: var(--vorik-muted);
    font-size: 11px;
}

.vorik-password-strength-header strong {
    color: var(--vorik-danger);
}

.vorik-password-strength-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.vorik-password-strength-bars i {
    height: 5px;
    border-radius: 999px;
    background: #dde5ee;
    transition: background 180ms ease;
}

.vorik-password-strength[data-score="1"]
    .vorik-password-strength-bars i:nth-child(-n+1),
.vorik-password-strength[data-score="2"]
    .vorik-password-strength-bars i:nth-child(-n+2) {
    background: #e5484d;
}

.vorik-password-strength[data-score="3"]
    .vorik-password-strength-bars i:nth-child(-n+3) {
    background: #f59e0b;
}

.vorik-password-strength[data-score="4"]
    .vorik-password-strength-bars i:nth-child(-n+4),
.vorik-password-strength[data-score="5"]
    .vorik-password-strength-bars i:nth-child(-n+5) {
    background: #16a36a;
}

.vorik-password-strength[data-score="3"]
    .vorik-password-strength-header strong {
    color: #d97706;
}

.vorik-password-strength[data-score="4"]
    .vorik-password-strength-header strong,
.vorik-password-strength[data-score="5"]
    .vorik-password-strength-header strong {
    color: #12845a;
}

.vorik-password-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.vorik-password-rules span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #8190a4;
    background: #f2f5f9;
    font-size: 10px;
    font-weight: 700;
}

.vorik-password-rules span::before {
    width: 7px;
    height: 7px;
    border: 1px solid #aab7c7;
    border-radius: 999px;
    content: "";
}

.vorik-password-rules span.is-valid {
    color: #107653;
    background: #ecfdf5;
}

.vorik-password-rules span.is-valid::before {
    border-color: #16a36a;
    background: #16a36a;
}


/* =========================================================
   PASSWORD STRENGTH — TYPOGRAPHY COMFORT
   ========================================================= */

.vorik-password-strength,
.password-strength {
    font-size: 13px;
    line-height: 1.45;
}

.vorik-password-strength small,
.password-strength small,
.password-strength__label,
.password-strength__requirement {
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 680px) {

    .vorik-password-strength,
    .password-strength,
    .vorik-password-strength small,
    .password-strength small,
    .password-strength__label,
    .password-strength__requirement {
        font-size: 13px;
    }

}