.strength-meter {
    height: 8px;
    background-color: #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.strength-meter-fill {
    height: 100%;
    width: 0;
    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
    border-radius: 4px;
}

.password-criteria .criteria {
    font-size: 0.9em;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.tooltip-inner {
    text-align: left;
    max-width: 300px;
}

.criteria.valid {
    color: #198754;
}

.criteria.invalid {
    color: #dc3545;
}

.strength-meter-container {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.strength-segment {
    height: 8px;
    flex: 1;
    background-color: #e9ecef;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.strength-text {
    margin-left: 4px;
}

/* Initial empty state - all segments grey */
.strength-empty .strength-segment {
    background-color: #e9ecef;
}

/* Weak - first segment red */
.strength-weak .strength-segment:nth-child(1) {
    background-color: #dc3545;
}

/* Weak - first two segments orange */
.strength-weak-2 .strength-segment:nth-child(1),
.strength-weak-2 .strength-segment:nth-child(2) {
    background-color: #fd7e14;
}

/* Good - first three segments green */
.strength-good .strength-segment:nth-child(1),
.strength-good .strength-segment:nth-child(2),
.strength-good .strength-segment:nth-child(3) {
    background-color: #28a745;
}

/* Strong - all segments green */
.strength-strong .strength-segment {
    background-color: #28a745;
}