/* Common Password Strength Indicator - Linear Progress Bar */

/* Password Strength Progress Bar - Linear Design */
.password-input-container {
    position: relative;
    width: 100%;
}

.password-input-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem; /* Match Bootstrap form-control border-radius */
    background: linear-gradient(white, white) padding-box;
    z-index: 1;
    transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
}

/* Progress bar overlay */
.password-input-container::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    width: var(--progress-width, 0%);
    background: var(--progress-color, #dc3545);
    border-radius: 0.375rem;
    z-index: 0;
    transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
    box-sizing: border-box;
}

.password-input-container.password-weak::after {
    --progress-width: calc(25% + 1px);
    --progress-color: #dc3545;
}

.password-input-container.password-fair::after {
    --progress-width: calc(50% + 2px);
    --progress-color: #ffc107;
}

.password-input-container.password-good::after {
    --progress-width: calc(75% + 3px);
    --progress-color: #28a745;
}

.password-input-container.password-strong::after {
    --progress-width: calc(100% + 4px);
    --progress-color: #28a745;
}

/* Style the actual input to blend seamlessly */
.password-input-container input[type="password"] {
    border: none !important;
    background: transparent !important;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 12px 16px;
    border-radius: 0.375rem; /* Match Bootstrap form-control border-radius */
    outline: none;
}

.password-input-container input[type="password"]:focus {
    box-shadow: none !important;
}

/* Password strength note styling */
.password-strength-note {
    min-height: 20px;
}

.password-strength-note small {
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.3s ease;
}