/* Контейнер калькулятора */
.api-calc-container {
    position: relative;
}

/* Оптимизированное матовое окно лоадера */
.calc-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Убираем тяжелый blur()! Вместо него делаем плотный матово-белый фон */
    background: rgba(245, 245, 247, 0.85); 
    
    /* Включаем аппаратное ускорение видеокарты (GPU) */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: opacity, background-position; /* Подсказываем браузеру, что оптимизировать */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    
    /* Используем простую прозрачность без размытия */
    transition: opacity 0.25s ease;
    border-radius: 8px;
}

/* Элемент-подложка для создания легкой бегущей волны */
.calc-loader-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Выносим волну за пределы экрана */
    width: 150%;
    height: 100%;
    
    /* Делаем градиент максимально простым (всего 3 точки вместо 5) */
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* Класс активации лоадера из JS */
.calc-loader-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Запускаем анимацию только для псевдоэлемента, двигая его через аппаратный transform */
.calc-loader-overlay.is-active::before {
    animation: fast-wave 1.5s infinite ease-in-out;
}

/* Легкий текст по центру */
.calc-loader-text {
    font-family: Arial, sans-serif;
    color: #1d1d1f;
    font-size: 16px;
    font-weight: 600;
    z-index: 101; /* Поверх волны */
}

/* Самая экономичная анимация для GPU (использует только translateX вместо background-position) */
@keyframes fast-wave {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(166%); /* Волна плавно пробегает всю форму */
    }
}