/* Стили для исправления проблемы с сообщениями об ошибке на форме аутентификации */

/* Уменьшаем отступы между полями ввода */
#enterCredentialsScreen .plaid-input-group {
    margin-bottom: 6px !important; /* Уменьшаем отступ между полями */
}

/* Фиксированная высота для контейнера сообщения об ошибке */
#enterCredentialsScreen .plaid-error-message {
    min-height: 30px !important; /* Фиксированная высота для сообщения об ошибке */
    margin-top: 5px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important; /* Уменьшаем размер шрифта */
    line-height: 1.3 !important; /* Уменьшаем высоту строки */
    display: block !important; /* Всегда показываем контейнер */
    color: transparent !important; /* Делаем текст прозрачным, когда нет ошибки */
    transition: color 0.3s ease !important; /* Плавный переход цвета */
    background-color: transparent !important; /* Убираем фон полностью */
    padding: 0 !important; /* Убираем отступы */
}

/* Когда есть ошибка, показываем текст и фон */
#enterCredentialsScreen .plaid-error-message.visible {
    color: #f44e66 !important; /* Красный цвет для текста ошибки */
    background-color: rgba(244, 78, 102, 0.1) !important; /* Светло-красный фон */
    padding: 4px 8px !important; /* Добавляем отступы */
    border-radius: 4px !important; /* Скругляем углы */
}

/* Стилизация формы учетных данных */
#enterCredentialsScreen .plaid-credentials-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Убираем gap, используем margin-bottom */
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

/* Кнопка отправки формы */
#enterCredentialsScreen .plaid-submit-button {
    height: 44px !important; /* Стандартная высота кнопки */
    padding: 10px 0 !important; /* Стандартные отступы */
    font-size: 16px !important; /* Нормальный размер шрифта */
    background-color: #111 !important; /* Оригинальный черный цвет */
    color: white !important; /* Белый текст */
    margin-top: 8px !important; /* Небольшой отступ сверху */
}

/* Описание под заголовком */
#enterCredentialsScreen .plaid-description {
    margin-bottom: 12px !important; /* Уменьшаем отступ под описанием */
    text-align: center !important;
    padding: 0 8px !important;
}

/* Иконка банка */
#enterCredentialsScreen .plaid-bank-icon-container {
    padding-bottom: 8px !important; /* Уменьшаем отступ под иконкой */
}

/* Заголовок */
#enterCredentialsScreen .plaid-title {
    margin-bottom: 12px !important; /* Уменьшаем отступ под заголовком */
}

/* Ограничение высоты экрана ввода учетных данных */
#enterCredentialsScreen {
    max-height: 580px !important; /* Максимальная высота модального окна */
    overflow: hidden !important; /* Предотвращаем прокрутку */
}

/* Уменьшаем высоту всех элементов на экране ввода учетных данных */
#enterCredentialsScreen .plaid-bank-icon-container {
    min-height: 60px !important; /* Уменьшаем минимальную высоту контейнера иконки */
    padding: 8px 16px !important; /* Уменьшаем отступы */
}

#enterCredentialsScreen .plaid-bank-icon-circle {
    width: 48px !important; /* Уменьшаем размер */
    height: 48px !important; /* Уменьшаем размер */
}

#enterCredentialsScreen .plaid-title {
    font-size: 16px !important; /* Уменьшаем размер заголовка */
    margin-top: 10px !important;
    margin-bottom: 8px !important;
}

#enterCredentialsScreen .plaid-description {
    font-size: 13px !important; /* Уменьшаем размер описания */
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

/* Уменьшаем высоту и отступы полей ввода */
#enterCredentialsScreen .plaid-input {
    height: 44px !important; /* Стандартная высота */
    line-height: 44px !important; /* Соответствующая высота строки */
    padding: 0 12px !important; /* Стандартные отступы */
    font-size: 16px !important; /* Стандартный размер шрифта */
    border: 1px solid #e0e0e0 !important; /* Стандартная граница */
}

/* Улучшаем стиль при фокусе */
#enterCredentialsScreen .plaid-input:focus {
    border-color: #0a85ea !important; /* Синий цвет при фокусе */
    box-shadow: 0 0 0 2px rgba(10, 133, 234, 0.1) !important; /* Мягкое свечение */
}

/* Улучшаем отступы для группы полей ввода */
#enterCredentialsScreen .plaid-input-group {
    margin-bottom: 8px !important; /* Небольшой отступ между полями */
    position: relative !important;
}

/* Гарантируем правильное положение лейблов */
#enterCredentialsScreen .plaid-input-label {
    top: 50% !important; /* Центрируем по вертикали */
    transform: translateY(-50%) !important; /* Центрирование */
    left: 12px !important; /* Отступ слева */
    background-color: transparent !important; /* Прозрачный фон */
}

/* Анимация метки при фокусе или когда поле заполнено */
#enterCredentialsScreen .plaid-input:focus + .plaid-input-label,
#enterCredentialsScreen .plaid-input:not(:placeholder-shown) + .plaid-input-label {
    transform: translateY(-28px) scale(0.85) !important; /* Поднимаем выше */
    color: #0a85ea !important; /* Синий цвет для активного состояния */
    top: 20px !important; /* Фиксированное положение сверху */
}