/* Стили для форм авторизации и регистрации */



/* Общие стили форм */

.auth-container {

    max-width: 600px;

    margin: 0 auto;

    padding: 20px;

}

button.button-primary.full-width {
    justify-content: center;
}

.auth-form {

    background-color: #fff;

    border-radius: 4px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    padding: 25px;

    margin-top: 20px;

}



/* Стили для полей пароля */

.password-group {

    position: relative;

    width: 100%;

    margin-bottom: 15px;

}



.password-field {

    position: relative;

    display: flex;

    align-items: center;

}



.password-field input {

    width: 100%;

    padding-right: 40px; /* Место для иконки глаза */

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 10px;

}



.password-toggle {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    user-select: none;

    font-size: 16px;

    color: #6c757d;

    z-index: 10;

}



.password-toggle:hover {

    color: #3498db;

}



.password-strength, .password-match-indicator {

    margin-top: 5px;

    height: 5px;

    border-radius: 3px;

    transition: all 0.3s;

}



.password-strength {

    background-color: #e9ecef;

}



.password-strength.weak {

    background-color: #dc3545;

    width: 33%;

}



.password-strength.medium {

    background-color: #ffc107;

    width: 66%;

}



.password-strength.strong {

    background-color: #28a745;

    width: 100%;

}



.password-hint {

    display: block;

    font-size: 12px;

    color: #6c757d;

    margin-top: 5px;

}



.password-match-indicator.match {

    color: #28a745;

    font-size: 12px;

}



.password-match-indicator.no-match {

    color: #dc3545;

    font-size: 12px;

}



/* Стили для формы в целом */

.form-row {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 15px;

}



.form-group {

    flex: 1;

    min-width: 250px;

}



/* Стили для ссылок под формами */

.auth-links {

    text-align: center;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #e9ecef;

}



.auth-links a {

    color: #3498db;

    text-decoration: none;

    margin: 0 5px;

}



.auth-links a:hover {

    text-decoration: underline;

}



/* Стили для кнопок */

.form-actions {

    margin-top: 20px;

}



.button-primary.full-width {

    width: auto;

    padding: 12px;

    font-size: 16px;

}



/* Стили для сообщений об успехе и ошибках */

.success-message, .error-message {

    padding: 15px;

    margin: 15px 0;

    border-radius: 5px;

}



.success-message {

    background-color: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

}



.error-message {

    background-color: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

}



/* Медиа-запросы для адаптивности */

@media (max-width: 768px) {

    .form-row {

        flex-direction: column;

        gap: 10px;

    }

    

    .form-group {

        width: 100%;

    }

    

    .auth-container {

        padding: 10px;

    }

    

    .auth-form {

        padding: 15px;

    }

}