.password-wrapper {
     position: relative;
     width: 100%;
 }

 .password-wrapper input {
     padding-right: 40px;
     width: 100%;
 }

 .toggle-password {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: #666;
     cursor: pointer;
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.2s;
 }

 .toggle-password:hover {
     color: var(--primary-color);
 }

 .password-strength {
     margin-top: 5px;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 5px;
     height: 20px;
 }

 .password-strength.weak {
     color: var(--warning-color);
 }

 .password-strength.medium {
     color: var(--accent-color);
 }

 .password-strength.strong {
     color: var(--success-color);
 }

 .password-match {
     margin-top: 5px;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 5px;
     height: 20px;
 }

 .password-match.valid {
     color: var(--success-color);
 }

 .password-match.invalid {
     color: var(--warning-color);
 }

 .forgot-password {
     text-align: right;
     margin-top: 5px;
     margin-bottom: 20px;
 }

 .forgot-password a {
     color: var(--primary-color);
     text-decoration: none;
     font-size: 14px;
     transition: color 0.2s;
 }

 .forgot-password a:hover {
     color: var(--secondary-color);
     text-decoration: underline;
 }

 /* Modal Styles */
 .modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     animation: fadeIn 0.3s ease;
     display: none;
 }

 .modal.active {
     display: flex;
 }

 .modal-content {
     background-color: white;
     padding: 40px;
     border-radius: 20px;
     max-width: 500px;
     width: 90%;
     text-align: center;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     animation: slideUp 0.3s ease;
 }

 .modal-icon {
     font-size: 60px;
     color: var(--primary-color);
     margin-bottom: 20px;
 }

 .modal-content h2 {
     margin-bottom: 15px;
     color: #333;
 }

 .modal-content p {
     margin-bottom: 20px;
     color: #666;
     line-height: 1.5;
 }

 .modal-steps {
     background-color: #f8f9fa;
     padding: 15px;
     border-radius: 10px;
     margin: 20px 0;
     text-align: left;
 }

 .modal-steps ol {
     margin: 10px 0 0 0;
     padding-left: 20px;
 }

 .modal-steps li {
     margin-bottom: 8px;
     font-size: 14px;
 }

 .modal-actions {
     display: flex;
     flex-direction: column;
     gap: 15px;
     margin: 25px 0;
 }

 .modal-back {
     margin-top: 15px;
     padding-top: 15px;
     border-top: 1px solid #eee;
 }

 .modal-back a {
     color: var(--primary-color);
     text-decoration: none;
     font-size: 14px;
 }

 .modal-back a:hover {
     text-decoration: underline;
 }

 .success-message {
     background-color: #d4edda;
     color: #155724;
     padding: 15px;
     border-radius: 10px;
     margin: 15px 0;
     border-left: 4px solid #28a745;
     display: none;
     align-items: center;
     gap: 10px;
 }

 .success-message.show {
     display: flex;
     animation: fadeIn 0.3s ease;
 }

 .error-message-modal {
     background-color: #f8d7da;
     color: #721c24;
     padding: 15px;
     border-radius: 10px;
     margin: 15px 0;
     border-left: 4px solid #dc3545;
     display: none;
     align-items: center;
     gap: 10px;
 }

 .error-message-modal.show {
     display: flex;
     animation: fadeIn 0.3s ease;
 }

 /* Verification Code Input */
 .verification-code-container {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin: 20px 0;
 }

 .verification-input {
     width: 50px;
     height: 60px;
     text-align: center;
     font-size: 24px;
     font-weight: bold;
     border: 2px solid #ddd;
     border-radius: 10px;
     transition: all 0.2s;
 }

 .verification-input:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
     outline: none;
 }

 .verification-input.filled {
     border-color: var(--success-color);
     background-color: rgba(46, 196, 182, 0.05);
 }

 .countdown-timer {
     margin-top: 10px;
     font-size: 14px;
     color: #666;
 }

 .countdown-timer.warning {
     color: var(--warning-color);
     font-weight: bold;
 }

 .resend-link {
     margin-top: 10px;
 }

 .resend-link a {
     color: var(--primary-color);
     text-decoration: none;
 }

 .resend-link a:hover {
     text-decoration: underline;
 }

 .resend-link.disabled {
     color: #999;
     cursor: not-allowed;
 }

 .resend-link.disabled a {
     color: #999;
     cursor: not-allowed;
     text-decoration: none;
 }

 /* Reset Password Steps */
 .reset-step {
     display: none;
 }

 .reset-step.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes slideUp {
     from {
         transform: translateY(50px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @media (max-width: 768px) {
     .modal-content {
         padding: 25px;
         width: 95%;
     }

     .modal-actions {
         flex-direction: column;
     }

     .verification-input {
         width: 40px;
         height: 50px;
         font-size: 20px;
     }
 }