.t-inputpromocode__wrapper {
    width: calc(100% + 30px) !important;
    position: relative;
    left: -15px;
    border-collapse: separate;
    border-spacing: 15px 0px;
}
.t-inputpromocode__btn.t-btn {
    color: #ffffff !important;
    background-color: #ff6f61 !important;
    border: 1px solid #ff6f61;
    transition: all .2s ease;
}
.t-inputpromocode__btn.t-btn:hover {
    color: #ffffff !important;
    background-color: #ff6f61 !important;
    border: 1px solid #ff6f61;
}


.t-inputpromocode__btn.t-btn {
    color: #ffffff !important; /* Цвет текста */
    background-color: #ff6f61 !important; /* Исходный цвет фона */
    border: 1px solid #ff6f61;
    position: relative; /* Для псевдоэлементов */
    overflow: hidden; /* Скрываем выходящие элементы */
    transition: all 0.3s ease; /* Плавный переход */
}

/* Создаем проценты при наведении */
.t-inputpromocode__btn.t-btn::after {
    content: ''; /* Нет текста, используем только фон */
    position: absolute;
    top: 0;
    left: -100%; /* Сначала за пределами кнопки */
    width: 200%; /* Покрывает всю кнопку по диагонали */
    height: 200%; /* Покрывает всю кнопку по диагонали */
    background: repeating-linear-gradient(
        45deg, 
        rgba(255, 255, 255, 0.1) 0, 
        rgba(255, 255, 255, 0.1) 10px, 
        rgba(255, 255, 255, 0.3) 10px, 
        rgba(255, 255, 255, 0.3) 20px
    );
    z-index: 0; /* Уходит под текст кнопки */
    transition: all 0.3s ease; /* Плавность появления */
    opacity: 0; /* Прозрачность до наведения */
}

/* При наведении проценты начинают появляться */
.t-inputpromocode__btn.t-btn:hover::after {
    left: 0; /* Перемещается внутрь кнопки */
    opacity: 1; /* Делается видимым */
}

/* Чтобы текст всегда был поверх фона */
.t-inputpromocode__btn.t-btn span {
    position: relative;
    z-index: 1; /* Над псевдоэлементом */
}

}


    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.t-inputpromocode__btn.t-btn:hover::after {
    opacity: 1;
}