/* ===================================
   Password Strength Indicator Styles
   =================================== */

.password-strength-container {
    margin-top: 10px;
}

/* Strength Meter Bar */
.password-strength-meter {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.strength-bar {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.strength-bar.strength-weak {
    background: #f44336;
    width: 33%;
}

.strength-bar.strength-medium {
    background: #ff9800;
    width: 66%;
}

.strength-bar.strength-strong {
    background: #4caf50;
    width: 100%;
}

/* Strength Text */
.strength-text {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: right;
}

.strength-text.strength-weak {
    color: #f44336;
}

.strength-text.strength-medium {
    color: #ff9800;
}

.strength-text.strength-strong {
    color: #4caf50;
}

/* Password Requirements List */
.password-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
    transition: all 0.3s ease;
}

.requirement i {
    font-size: 10px;
    color: #ccc;
    transition: all 0.3s ease;
}

.requirement.passed {
    color: #4caf50;
}

.requirement.passed i {
    color: #4caf50;
}

.requirement span {
    line-height: 1.4;
}

/* ===================================
   Password Match Feedback
   =================================== */

.match-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.match-feedback i {
    font-size: 14px;
}

.match-success {
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
}

.match-error {
    color: #d32f2f;
    background: #ffebee;
    border: 1px solid #ef9a9a;
}

/* ===================================
   Phone Validation Feedback
   =================================== */

.phone-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.phone-feedback i {
    font-size: 14px;
}

.phone-success {
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
}

.phone-error {
    color: #d32f2f;
    background: #ffebee;
    border: 1px solid #ef9a9a;
}

.phone-info {
    color: #1976d2;
    background: #e3f2fd;
    border: 1px solid #90caf9;
}

/* ===================================
   Mobile Responsive Adjustments
   =================================== */

@media (max-width: 768px) {
    .password-requirements {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px;
    }
    
    .requirement {
        font-size: 11px;
    }
    
    .strength-text {
        font-size: 11px;
    }
    
    .match-feedback,
    .phone-feedback {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .password-requirements {
        padding: 8px;
    }
    
    .requirement {
        font-size: 10px;
        gap: 6px;
    }
    
    .requirement i {
        font-size: 9px;
    }
}

/* ===================================
   Animation Effects
   =================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.password-strength-container,
.match-feedback,
.phone-feedback {
    animation: fadeIn 0.3s ease;
}