/* Стили для центрирования контейнера экрана загрузки */
.plaid-content#loadingScreen:not(.plaid-hidden) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}

/* По умолчанию скрываем экран загрузки */
.plaid-content#loadingScreen {
    display: none;
}

/* Когда класс plaid-hidden удаляется, показываем экран */
.plaid-content#loadingScreen:not(.plaid-hidden) {
    display: flex !important;
}

/* Стили для обертки центрирования */
.plaid-content#loadingScreen:not(.plaid-hidden) .loading-center-wrapper {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* По умолчанию скрываем эту обертку */
.loading-center-wrapper {
    display: none;
}

/* Простая, но надежная анимация загрузки */
.plaid-content#loadingScreen:not(.plaid-hidden) .plaid-loading-circle {
    width: 80px !important; /* Увеличили размер с 60px до 80px */
    height: 80px !important; /* Увеличили размер с 60px до 80px */
    position: relative !important;
    display: inline-block !important;
}

/* Стили для спиннера загрузки */
.plaid-content#loadingScreen:not(.plaid-hidden) .plaid-loading-spinner {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: 5px solid #f3f3f3 !important; /* Увеличили толщину с 4px до 5px */
    border-top: 5px solid #0a85ea !important; /* Увеличили толщину с 4px до 5px */
    animation: simple-spin 2s linear infinite !important; /* Увеличили время с 1.5s до 2s */
}

/* Скрываем исходный path */
.plaid-content#loadingScreen:not(.plaid-hidden) .plaid-loading-path {
    display: none !important;
}

/* Стили для текста загрузки */
.plaid-content#loadingScreen:not(.plaid-hidden) .plaid-loading-text {
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 300px !important;
    line-height: 1.4 !important;
}

/* Стили для индикатора загрузки */
#loading-indicator {
    display: none; /* По умолчанию скрыт */
}

/* Стили для видимого индикатора загрузки */
#loading-indicator:not([style*="display: none"]) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0.98) !important; /* Увеличили непрозрачность фона */
    transition: opacity 0.5s ease-out !important; /* Добавили плавное затухание */
}

/* Добавляем спиннер для индикатора загрузки */
#loading-indicator::before {
    content: "" !important;
    width: 80px !important; /* Увеличили размер с 60px до 80px */
    height: 80px !important; /* Увеличили размер с 60px до 80px */
    border-radius: 50% !important;
    border: 5px solid #f3f3f3 !important; /* Увеличили толщину границы с 4px до 5px */
    border-top: 5px solid #0a85ea !important; /* Увеличили толщину границы с 4px до 5px */
    animation: simple-spin 1.5s linear infinite !important;
    display: block !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; /* Добавили легкую тень */
}

/* Стили для текста индикатора загрузки */
#loading-indicator .plaid-loading-text {
    font-size: 22px !important; /* Увеличили размер шрифта с 18px до 22px */
    font-weight: 600 !important; /* Увеличили жирность с 500 до 600 */
    color: #333 !important;
    text-align: center !important;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; /* Добавили легкую тень для текста */
}

/* Простая анимация вращения */
@keyframes simple-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}