/* Import common styles */
@import url('login_common.css');

/* Register-specific styles */
.register-card {
    /* Inherit from common .card class */
    max-width: 800px;
}

/* Ensure consistent form control backgrounds */
.register-card .form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

.register-card .form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

/* Validation states - only border changes, background stays consistent */
.register-card .form-control.is-valid {
    background-color: var(--input-bg) !important;
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.register-card .form-control.is-invalid {
    background-color: var(--input-bg) !important;
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Override autofill styles to maintain consistency */
.register-card .form-control:-webkit-autofill,
.register-card .form-control:-webkit-autofill:hover,
.register-card .form-control:-webkit-autofill:focus,
.register-card .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--input-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Google Register Button - inherits from login_common.css */
.google-register-container .btn-google {
    /* Uses styles from login_common.css */
}

/* Divider for registration page */
.register-card .divider-container {
    /* Uses styles from login_common.css */
}

.register-card .divider {
    /* Uses styles from login_common.css */
}

.register-card .divider span {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 0 20px;
}

/* Password requirements and validation styles */
.password-requirements {
    background-color: var(--alert-info-bg);
    border: 1px solid var(--alert-info-border);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    font-size: 13px;
}

.requirement-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.requirement-item:last-child {
    margin-bottom: 0;
}

.requirement-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.requirement-item.text-success {
    color: #28a745;
}

.requirement-item.text-danger {
    color: #dc3545;
}

/* Dark mode adjustments for password requirements */
@media (prefers-color-scheme: dark) {
    .requirement-item {
        color: var(--text-primary);
    }
    
    .password-requirements {
        color: var(--text-primary);
    }
    
    /* Softer contrast colors for success and danger in dark mode */
    .requirement-item.text-success {
        color: var(--alert-success-text) !important;
    }
    
    .requirement-item.text-danger {
        color: var(--alert-danger-text) !important;
    }
    
    /* Icon colors for better visibility */
    .requirement-item .text-success {
        color: var(--alert-success-text) !important;
    }
    
    .requirement-item .text-danger {
        color: var(--alert-danger-text) !important;
    }
}

/* Password strength indicator */
.password-strength {
    margin-top: 10px;
    font-size: 13px;
}

.password-strength .progress {
    height: 6px;
    border-radius: 3px;
    background-color: var(--border-color);
    margin-bottom: 5px;
    overflow: hidden;
}

.password-strength .progress-bar {
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 3px;
}

.progress-bar.bg-danger {
    background-color: #dc3545 !important;
}

.progress-bar.bg-warning {
    background-color: #ffc107 !important;
}

.progress-bar.bg-success {
    background-color: #28a745 !important;
}

/* Password error messages */
.password-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.confirm-password-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    background-color: var(--alert-danger-bg);
    border: 1px solid var(--alert-danger-border);
    border-radius: 6px;
    padding: 8px 12px;
}

.confirm-password-error i {
    margin-right: 5px;
}

/* Form validation feedback */
.invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

.valid-feedback {
    display: block;
    color: #28a745;
    font-size: 12px;
    margin-top: 5px;
}

/* Hide validation icons for password fields with toggles */
.password-container .form-control.is-valid,
.password-container .form-control.is-invalid {
    background-image: none;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .password-requirements {
        padding: 12px;
    }
    
    .requirement-item {
        font-size: 12px;
    }
}