<!--КОД КОЛЕСА С ПРИЗАМИ-->
<script>

//Сообщение о закончивихся призах
const outOfPrizeText = 'Увы, но все призы закончились. Подождите следующего розыгрыша';

//Режим тестирования
let testMode = false; // true - включен -- false выключен
//Через какое время в часах резрешить следующую попытку
let timeRepeat = 1000; // 48 - это 48 часов
//Версия запуска виджета
let vers = '#1';


const noCodeMessageLink = '#popup:error-no-code';
const problemMessageLink = '#popup:problem';


//Кол-во оборотов до остановки
let maxRevolution = 25;
//Время вращения
let spinTime = 5;

$( document ).ready(function() {

setTimeout(function() {

let wheelOption = [];
let probability = [];
let probabilityFinal = [];
let prob = true;
let probMem=0;
let probSumm=0;
let probAuto=0;
let sector = null;


//Получаем текcтовую итоговую ссылку
const linkText = document.querySelector('a[href="#link-text"]');
//Получаем текcтовую итоговую картинку
const prizeImage = document.querySelector('.prize-image img');


//Проверка ссылки перехода
function waitForFormRendered(selector, callback) {
    const element = document.querySelector(selector);
    if (!element) {
        console.warn(`Элемент ${selector} не найден`);
        return;
    }
    if (element.classList.contains('zero-form-rendered')) {
        callback(element);
        return;
    }
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && 
                mutation.attributeName === 'class' &&
                element.classList.contains('zero-form-rendered')) {
                observer.disconnect();
                callback(element);
            }
        });
    });
    observer.observe(element, {
        attributes: true,
        attributeFilter: ['class']
    });
    setTimeout(() => {
        observer.disconnect();
    }, 30000);
}

// Использование
waitForFormRendered('.wheel_form', function(form) {
    //Получаем параметр 'code' из URL
    const urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams);
    const codeValue = urlParams.get('code');
    // Если параметр 'code' существует
    if (codeValue) {
        // Ищем элемент input с name="wheel-code"
        const inputElement = document.querySelector('input[name="wheel-code"]');
        // Если элемент найден, вставляем значение
        if (inputElement) {
            inputElement.value = codeValue;
        }
    }
});


//Получаем сектора КОЛЕСА
let wheelData = null;
async function fetchWheelData() {
    try {
        const response = await fetch('https://moti-app.ru/webhook/get-sectors', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
        });

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();
        
        wheelData = data;
        
        //Формируем массив колеса
        wheelOption = wheelData.map(item => [
            item["Название на колесе"],
            item["Процент выдачи, %"],
            item["Количество"],
            item["Код"],
            item["Картинка"],
            item["Ссылка"],
            item["Текст ссылки"]
        ]);
        
        
       
        //Проверка закончившихся призов
        // Проверяем, все ли элементы с индексом 2 равны 0
        const allZeros = wheelOption.every(item => item[2] === 0);
        
        if (allZeros) {
            // 1. Устанавливаем текст для элемента .wheel-subtitle .tn-atom
            const subtitleElement = document.querySelector('.wheel-subtitle .tn-atom');
            if (subtitleElement) {
                subtitleElement.textContent = outOfPrizeText;
            }
            
            // 2. Скрываем элемент .wheel_form
            const wheelForm = document.querySelector('.wheel_form');
            if (wheelForm) {
                wheelForm.style.display = 'none';
            }
            
            // 3. Скрываем элемент .check-code
            const checkCode = document.querySelector('.check-code');
            if (checkCode) {
                checkCode.style.display = 'none';
            }
        };
        
        
        sector = wheelOption.length;
        creatingWheel();
        
        return wheelData;
    } catch (error) {
        console.error('Ошибка при получении данных:', error);
        return null;
    }
}
fetchWheelData();




//Отправляем код на проверку по нажатию кнопки
document.querySelectorAll('.check-code').forEach(button => {
    button.addEventListener('click', function(event) {
        const button = event.target;
        const tRecParent = button.closest('.t-rec');
        if (!tRecParent) return;
        
        const codeInput = tRecParent.querySelector('input[name="wheel-code"]');
        if (!codeInput) return;
        
        const codeValue = codeInput.value.trim();
        if (!codeValue) return;
        
        // Блокируем кнопку
        button.disabled = true;
        
        tRecParent.querySelector('.check-code').classList.add('clicked-button');
        
        const now = new Date();
        const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')} ${String(now.getDate()).padStart(2, '0')}.${String(now.getMonth() + 1).padStart(2, '0')}.${now.getFullYear()}`;
        
        
        fetch('https://moti-app.ru/webhook/check-code', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ code: codeValue, timestamp: time })
        })
        .then(response => response.json())
        .then(data => {
            if (data.answer === "success") {
                localStorage.setItem('wheelCode', codeValue);
                tRecParent.querySelector('.wheel-screen_1').style.display = 'none';
                tRecParent.querySelector('.wheel-screen_2').style.display = 'block';
            } else if (data.answer === "no code") {

                tRecParent.querySelector('.check-code').classList.remove('clicked-button');
                
                const tooltipBlock = document.querySelector(`div[data-tooltip-hook="${noCodeMessageLink}"]`);
                if (tooltipBlock) {
                    const parentElement = tooltipBlock.closest('.t-rec');
                    if (parentElement && parentElement.id) {
                        const numericId = parentElement.id.replace(/\D/g, '');
                        if (numericId)  t390_showPopup(numericId);
                    }
                }
            }
            
            
        })
        .catch(error => console.error('Ошибка:', error))
        .finally(() => {
            button.disabled = false; // Разблокируем кнопку
        });
        
        
    });
});


/**
 * Функция вращения рулетки с учетом вероятностей и остатков призов
 * @param {Array} wheelOptions - Массив секторов рулетки
 * @returns {Object|null} - Результат вращения или null если нет доступных призов
 */

function getRandomSector(wheelOptions) {
    // Фильтруем активные секторы (вероятность > 0 и количество > 0)
    const activeOptions = wheelOptions.filter((option, index) => {
        const probability = parseFloat(option[1]);  // Процент выдачи
        const quantity = option[2];                  // Количество
        return probability > 0 && quantity > 0;
    });
    
    // Если нет активных секторов, возвращаем null
    if (activeOptions.length === 0) {
        return null;
    }
    
    // Рассчитываем суммарную вероятность активных секторов
    let totalProbability = 0;
    activeOptions.forEach(option => {
        totalProbability += parseFloat(option[1]);
    });
    
    // Создаем секторы с нормализованными вероятностями и сохраняем исходные индексы
    const wheelSectors = [];
    let accumulated = 0;
    
    activeOptions.forEach(option => {
        const probability = parseFloat(option[1]);
        // Нормализуем вероятность (чтобы сумма была 100%)
        const normalizedProbability = (probability / totalProbability) * 100;
        
        // Находим исходный индекс этого сектора в wheelOptions
        const originalIndex = wheelOptions.findIndex(opt => 
            opt[0] === option[0] && opt[3] === option[3]
        );
        
        // Диапазон сектора на рулетке
        const sector = {
            option: option,                           // Исходные данные приза
            originalIndex: originalIndex,             // Индекс в исходном массиве
            name: option[0],                          // Название приза
            code: option[3],                          // Код приза
            probability: normalizedProbability,       // Нормализованная вероятность
            min: accumulated,                         // Начало диапазона (0-100)
            max: accumulated + normalizedProbability  // Конец диапазона
        };
        
        accumulated += normalizedProbability;
        wheelSectors.push(sector);
    });
    
    // Генерируем случайное число от 0 до 100
    const randomValue = Math.random() * 100;
    
    // Находим выигрышный сектор
    const winningSector = wheelSectors.find(sector => 
        randomValue >= sector.min && randomValue < sector.max
    );
    
    if (!winningSector) {
        return null;
    }
    
    // Возвращаем результат с индексом исходного сектора
    return {
        index: winningSector.originalIndex,           // Индекс в исходном массиве wheelOptions
        prize: winningSector.name,                    // Название приза
        code: winningSector.code,                     // Код приза
        originalProbability: winningSector.option[1], // Исходная вероятность
        normalizedProbability: winningSector.probability.toFixed(2) + '%', // Нормализованная
        remaining: winningSector.option[2],           // Текущее количество
        randomValue: randomValue.toFixed(2)          // Сгенерированное случайное число
    };
}


//Создаём элемент в Zero
$('.wheelfortune .tn-atom').append('<div class="wheel_wrp"></div>');
//Получаем блок с колесом
let wheelRec = $('.wheelfortune').closest('.t-rec');
$('.wheel_form').addClass('t-text');

let resizeTxt = '';
let diameter = 0;



//Функция создание колеса
function creatingWheel(){
    //Диаметр колеса
    diameter = $('.wheelfortune').width();
    
    //Угол сектора
    let angle = Number(((360*Math.PI)/(sector*180)).toFixed(3));
    //Катет сектора
    let sectorHalfWidth = 0.5*diameter*Math.tan(angle/2);

    //Заполняем сектора
    for (let i=0; i<sector; i++){
        //Структура сектора
        let sectorContent = `
            <div class="wheel_sector bg-sector${i}"></div>
            <div class="wheel_line line-sector${i}"></div>
            <div class="wheel_textcont  t-text text-sector${i}">
                <div></div>
            </div>
        `;
        //Формируем сектор
        $('.wheel_wrp').append(sectorContent);
        
        //Формируем угол поворота и задаём цвет
        $('.bg-sector'+i+'').css({
            "transform":"rotate("+(360*i/sector+90)+"deg)"
        });

        //Отрисовка границ сектора
        $('.line-sector'+i+'').css({
            "width" : diameter/2+"px",
            "transform" : "rotate("+((360*i/sector)+(180*(sector-1))/sector)+"deg)",
            "height":"1px",
            "top" : "calc(50% - 1px)",
            "transform-origin" : diameter/2+"px 1px"
        });
        
        //Расставляем текст
        $('.text-sector'+i+' div').html(wheelOption[i][0]);
        

        
        // Формируем угол для текста
        $('.text-sector'+i+'').css({"transform":"rotate("+(360*i/sector+90)+"deg)"});
    
    };


    //Форма сектора
    $('.wheel_sector').css({
        "border-width": (diameter/2)+"px "+sectorHalfWidth+"px 0",
        "transform-origin": ""+sectorHalfWidth+"px "+(diameter/2)+"px",
        "left":((diameter/2)-sectorHalfWidth)+"px"
    });

    //Форма текста
    $('.wheel_textcont').css({
        "width": (diameter/2)+"px",
        "height": (diameter/2)+"px",
        "transform-origin": ""+(diameter/4)+"px "+(diameter/2)+"px",
        "left":((diameter/2)-(diameter/4))+"px",
    });
    
    
    spinWheel(0);
    
}; 




//Проверяем, есть ли изображение у колеса
let bgUrl = $('.wheelfortune .tn-atom').attr('data-original');
//Если загружено своё изображение, то ставим его на фон колеса
if(bgUrl!=undefined){
    //Делаем невидимыми остальные сектора
    $('.wheel_wrp>div').css('opacity', '0');
    $('.wheel_wrp').css('background-image','url('+bgUrl+')');
};



//Вращение колеса
function spinWheel(deg){
    $('.wheel_wrp').css({
       "height": diameter+"px",
       "transform" : "rotate("+deg+"deg)",
       "transition": "transform "+spinTime+"s cubic-bezier(0, 0.76, 0.5, 1.01)"
    });
};


//Распределение случайного сектора
function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
let finalSector = -1;


//При отравке формы запускаем получение выигрыша
$('.wheel_form').delegate(".t-submit", "click", function(){
    //Распределяем приз
    distribution();
    //Если включен режим тестирования
    if(testMode){
        //Запускаем колесо
        startSpinWheel();
        
    }else{
    //Если включен рабочий режим
        //Проверка успешной отправки формы
        setTimeout(function(){
            //Если форма успешно отправлена с данными
            if ( $('.wheel_form .t-form').hasClass("js-send-form-success")){
                //Запускаем колесо
                startSpinWheel();
            };
        }, 1000);
    };
    
});

//При нажатии на кнопку Крутить колесо
$(document).on('click', '.wheel-start-btn', function(){
    document.querySelector('.wheel-start-btn').classList.add('clicked-button');
    //Распределяем приз
    distribution();
});

//Распределение выигрыша
function distribution(){
    //Если активна вероятность
    if (prob) {
        //Получаем финальный сектор ***********
        finalSector = getRandomSector(wheelOption).index;
        
        
    }else{
  
        //Если розыгрыш без вероятностей
        //Получаем финальный сектор 
        finalSector = getRandomInRange(0, sector-1);
    };
    
    //Получаем название приза
    let prizTitle = wheelOption[finalSector][0];
    //Получаем картинку приза
    let sectorImage = wheelOption[finalSector][4];
    //Получаем ссылку приза 
    let sectorLink = wheelOption[finalSector][5];
    //Получаем текст ссылки
    let sectorLinkText = wheelOption[finalSector][6];
    
    //Записываем в хранилище
    localStorage.setItem('sectorImage', sectorImage);
    localStorage.setItem('sectorLink', sectorLink);
    localStorage.setItem('sectorLinkText', sectorLinkText);
    
    
    
    
    spinFinish = true;
    resizeTxt = prizTitle.replace(/<\/?[^>]+>/g,' ');
    
    //Вписываем название приза в скрытое поле
    $('input[name="sector_prize"]').val(resizeTxt);
    localStorage.setItem('prizTitle', resizeTxt);
    
    let invite_code = localStorage.getItem('wheelCode');
    let shop_code = wheelOption[finalSector][3];//Получаем код
    let href = location.href;//Получаем ссылку
    
    
    //Запускаем колесо
    startSpinWheel();
    
    
    //Отправляем данные на получение приза
    async function sendPostRequest() {
        const url = 'https://moti-app.ru/webhook/get-prize';
        
        // Ваши данные
        const data = {
            "invite_code": invite_code,
            "shop_code": shop_code,
            "href": href,
            "prizTitle": prizTitle
        };
        
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const result = await response.json();
         
            
            // 1. Обработка положительного ответа
            if (result && result.answer) { 
                const prizeCodeWheel = result.answer;
                
                
                // Устанавливаем текст в .prize-name .tn-atom
                const prizeNameElement = document.querySelector('.prize-name .tn-atom');
                if (prizeNameElement) {
                    prizeNameElement.textContent = prizTitle;
                }
                
                // Устанавливаем код в .promocode .tn-atom
                const promocodeNameElement = document.querySelector('.promocode .tn-atom');
                if (promocodeNameElement) {
                    promocodeNameElement.textContent = prizeCodeWheel;
                }
                
                localStorage.setItem('prizeCodeWheel', prizeCodeWheel);
                
                //Устанавливаем фото
                prizeImage.setAttribute('data-original', sectorImage);
                prizeImage.setAttribute('src', sectorImage);
                //Устанавливаем ссылку
                linkText.textContent = sectorLinkText;
                linkText.setAttribute('href', sectorLink);
                
            } else {
                showAlertToolTip()
                console.log("Ответ не содержит ключ 'answer'");
            }
            
            return result;
            
        } catch (error) {
            showAlertToolTip()
            console.error(error);
            throw error;
        }
    }
    
    // Вызов функции
    sendPostRequest();
    
    function showAlertToolTip(){
        const tooltipBlock = document.querySelector(`div[data-tooltip-hook="${problemMessageLink}"]`);
                if (tooltipBlock) {
                    const parentElement = tooltipBlock.closest('.t-rec');
                    if (parentElement && parentElement.id) {
                        const numericId = parentElement.id.replace(/\D/g, '');
                        if (numericId)  t390_showPopup(numericId);
                    }
                }  
    };

};


//Функция запуска вращения колеса
function startSpinWheel(){  
    //Остановить вращения колеса ---- анимация
    $('.wheel_wrp').addClass('stop-animation');
    
    setTimeout(function(){
        //Поворачиваем колесо
        spinWheel(  (maxRevolution*360 +  (finalSector*360)/sector)*(-1) );
        //Выводим окно с призом
        setTimeout(function(){
            
            //Сохраняем результат в LS
            localStorage.setItem('_code_w', finalSector );
            let time = new Date();
            localStorage.setItem('_code_t', time.getTime() );
            localStorage.setItem('_code_v', vers );
            localStorage.setItem('_code_demo', testMode );
            
            
            showPrizeDescription();
            
            //удаляем таймер
            const timerBlock =  document.querySelector('.uc-timer-element');
            if(timerBlock) timerBlock.remove();

        }, spinTime*1000);
        
    }, 50);
};


let twoStep = true;

//Показываем текст приза************
function showPrizeDescription(mem){
    
    if(mem=='memory'){
        
        
        let prizTitle = localStorage.getItem('prizTitle');
        if (prizTitle!=null){
            // Устанавливаем текст в .prize-name .tn-atom
            const prizeNameElement = document.querySelector('.prize-name .tn-atom');
            if (prizeNameElement) {
                prizeNameElement.textContent = prizTitle;
            }  
        };
       
        
        let prizeCodeWheel = localStorage.getItem('prizeCodeWheel');
        if (prizeCodeWheel!=null){
            // Устанавливаем код в .promocode .tn-atom
            const promocodeNameElement = document.querySelector('.promocode .tn-atom');
            if (promocodeNameElement) {
                promocodeNameElement.textContent = prizeCodeWheel;
            }  
        };
        
        //Показываем картинку
        let sectorImage = localStorage.getItem('sectorImage');
        if (sectorImage!=null){
            prizeImage.setAttribute('data-original', sectorImage);
            prizeImage.setAttribute('src', sectorImage);
        };
        
        //Вставляем ссылку
        let sectorLink = localStorage.getItem('sectorLink');
        if (sectorLink!=null){
            linkText.setAttribute('href', sectorLink);
        };
        
        //Вставляем текст в ссылку
        let sectorLinkText = localStorage.getItem('sectorLinkText');
        if (sectorLinkText!=null){
            linkText.textContent = sectorLinkText;
        };

        
        //Поворачиваем колесо
        let finalSector = localStorage.getItem('_code_w');
        if (finalSector!=null){
            spinWheel(  (maxRevolution*360 +  (finalSector*360)/sector)*(-1) );
        };
        
    };
    
    
    
    
    // Скрываем .wheel-screen_1
    const wheelScreen1 = document.querySelector('.wheel-screen_1');
    if (wheelScreen1) {
        wheelScreen1.style.display = 'none';
    }
    
    
    // Скрываем .wheel-screen_2
    const wheelScreen2 = document.querySelector('.wheel-screen_2');
    if (wheelScreen2) {
        wheelScreen2.style.display = 'none';
    }
                
    // Показываем .wheel-screen_3
    const wheelScreen3 = document.querySelector('.wheel-screen_3');
    if (wheelScreen3) {
        wheelScreen3.style.display = 'block';
    }
                
    document.querySelector('.wheel-start-btn').classList.remove('clicked-button');
};



//Проверка версий
let prevVersion = localStorage.getItem('_code_v');
if (prevVersion!=null){
    //Если версии изменились, то удаляем записи
    if(prevVersion!=vers){
        deleteLsItem()
    };
};


//Проверка предыдущего режима
let prevMode = localStorage.getItem('_code_demo');
if (prevVersion!=null){
    if(prevMode=='true'){
        prevMode = true;
    }else{
        prevMode = false;  
    };
    
    if(prevMode!=testMode) {
        deleteLsItem();
    };

};


let prevResult = localStorage.getItem('_code_w');//Данные о прошлом вращении
let prevTime = localStorage.getItem('_code_t');//Данные о прошлом вращении


//Проверка интервала времени
if(timeRepeat>0 ){
    //Получаем разницу между временем
    let currentTime = new Date();
    currentTime = currentTime.getTime();
    //Переводим разницу в часы
    let timePassed = (currentTime - prevTime)/1000/60/60;
        
    //Если прошло достаточно времени, то удаляем записи
    if(timePassed>timeRepeat){
        deleteLsItem()
    };
};



let prevList = '';

//Если есть запись в LS о прошлом вращении и это не тестовый режим
if (prevResult!=null && !testMode) {
    twoStep = false;
    //Останавливаем анимацию вращения
    $('.wheel_wrp').addClass('stop-animation');
    //Выводим данные о выигрыше
    showPrizeDescription('memory');
};


//Очистка данных
function deleteLsItem(){
    //Удаляем переменные из localStorage если они существуют
    const localStorageKeys = ['wheelCode', '_code_w', '_code_t', '_code_v', '_code_demo', 'prizTitle', 'prizeCodeWheel', 'sectorImage', 'sectorLink', 'sectorLinkText'];
    localStorageKeys.forEach(key => {
        if (localStorage.getItem(key)) {
            localStorage.removeItem(key);
        }
    });
};



//Копировать промокод
    $('.copy-icon').on('click', function() {
        // Копируем текстовое содержимое элемента .promocode .tn-atom
        var textToCopy = $('.promocode .tn-atom').text();
        
        // Используем современный Clipboard API
        navigator.clipboard.writeText(textToCopy).then(function() {
           
            let elem = $(this);
            elem.addClass('copy-mode');
            
            // Удаляем класс через 300мс
            setTimeout(function() {
                elem.removeClass('copy-mode');
            }, 300);
        }.bind(this)).catch(function(err) {
            console.error('Ошибка при копировании: ', err);
        });
    });




//Кнопка рестарт - Обработка
document.addEventListener('click', function(event) {
    if (event.target.closest('.restart-wheel')) {
        
        //Получаем заново сектора
        fetchWheelData();
        
        // 1. Обновляем текст приза
        const prizeElement = document.querySelector('.prize-name .tn-atom');
        if (prizeElement) {
            prizeElement.textContent = "..........";
        }
        
        // 2. Обновляем текст промокода
        const promocodeElement = document.querySelector('.promocode .tn-atom');
        if (promocodeElement) {
            promocodeElement.textContent = "..........";
        }
        
        // 3. Очищаем input[name="sector_prize"]
        const sectorPrizeInput = document.querySelector('input[name="sector_prize"]');
        if (sectorPrizeInput) {
            sectorPrizeInput.value = "";
        }
        
        // 4. Очищаем input[name="wheel-code"]
        const wheelCodeInput = document.querySelector('input[name="wheel-code"]');
        if (wheelCodeInput) {
            wheelCodeInput.value = "";
        }
        
        // 5. Скрываем .wheel-screen_2 и .wheel-screen_3
        const screen2 = document.querySelector('.wheel-screen_2');
        const screen3 = document.querySelector('.wheel-screen_3');
        
        if (screen2) screen2.style.display = 'none';
        if (screen3) screen3.style.display = 'none';
        
        // 6. Показываем .wheel-screen_1
        const screen1 = document.querySelector('.wheel-screen_1');
        if (screen1) screen1.style.display = 'block';
        
        // 7. Очистка данных
        deleteLsItem();
        
        //8.0 Восстанавливаем обороты колеса
        spinWheel(0);
        
        // 8. Удаялем класс stop-animation у .wheel_wrp
        const wheelWrapper = document.querySelector('.wheel_wrp');
        if (wheelWrapper) {
            wheelWrapper.classList.remove('stop-animation');
        }
        
        //9. Убираем анимацию с кнопки
        document.querySelector('.check-code').classList.remove('clicked-button');
        
        
    }
});

    
}, 350);


});
</script>   


<style>

/*Общий Контейнер*/
.wheel_wrp {
    width: inherit;
    height: inherit;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*Ось колеса в центре*/
.wheel_wrp:after {
    content: "";
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    border: 10px solid #A53A37;
    z-index: 99;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 25%);
}

/*Оформление сектора*/
.wheel_sector{
    width: 0px;
    height: 0px;
    border-style: solid;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Оформление разделительных линий*/
.wheel_line {
    background-color: #dedede; /*Цвет линии*/
    transform: rotate(0deg);
    height: 2px;
    position: absolute;
    z-index: 99;
}

/*Оформление текста*/
.wheel_textcont {
    position: absolute;
    top: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    font-weight: 400;
    color: #FEFFF4;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}

.wheel_textcont div {
    transform: rotate(-90deg);
    margin-top: 80px;
    width: 130px;
}

.wheel_textcont div b {
    font-size: 20px;
}

.uc-wheel-content,
.uc-prize-product


{
    /*display: none;*/
}

.form_noactive .t-form {
    /*display: none;*/
    opacity: 0.3;
    pointer-events: none !important;
}

.wheel_form  .js-successbox.t-form__successbox {
    /*display: none !important;*/
}


/*Анимация постоянного вращения колеса*/
.wheel_wrp.stop-animation{
    animation: none;
}
.wheel_wrp {
    animation: idle-rotation linear 60s infinite;
}
@keyframes idle-rotation{
    0% {
        transform: rotate(0);
    }
    
    100% {
        transform: rotate(360deg);
    }
}

.spin_wheel , 
.open-wheel , 
.close-wheel ,
.wheel-start-btn
{
    cursor:pointer
}
    
.spin_wheel {  
    transition: all 0.2s linear
}

.spin_wheel:hover {
    filter: sepia(1)
}

.wheel_form , .form_noactive  {
    color: #fff;
}


.tn-atom.prize-text-show {
    background: none !important;
    text-align: left;
}.tn-atom.prize-text-show {}

.uc-wheel-popup .t-popup__container.t-popup__container-static{
    margin: 0;
}

.title_noactive
{
    opacity: 0.3;
    pointer-events: none !important;
}

.spin_wheel {
    opacity: 0;
    pointer-events: none;
}
.spin_wheel.show-btn {
    opacity: 1;
    pointer-events: auto;
}

/*Скрыть окно успешной отправки*/
div#tildaformsuccesspopup {
    /*display: none !important;*/
}

.form_noactive a {
    background-color: #1F61EB;
    color: #fff !important;
    padding: 15px 20px;
    display: inline-block;
    border-radius: 5px;
}




.uc-wheel-popup label.t-checkbox__control.t-checkbox__control_flex {
    justify-content: center;
}

.uc-wheel-popup  .t-checkbox__indicator {
    border-radius: 50%;
}


.wheel-start {
    pointer-events: none !important;
    filter: grayscale(1);
}

.wheel-start.wheel-start-active {
    pointer-events: auto !important;
    filter: none;
    cursor: pointer;
}

.copy-icon{
    cursor: pointer;
}

.copy-mode {
    border-radius: 6px !important;
    box-shadow: 0 0 0 2px #335b29;
    filter: hue-rotate(260deg);
}



.uc-wheel-popup .t-form__successbox {
    background: #2a9488;
}


input[name="wheel-code"] {
    text-align: center;
}

.wheel_sector:nth-child(odd) {
    border-color: rgb(165, 58, 55) transparent !important;
}

.wheel_sector:nth-child(even) {
    border-color: #FEFFF4  transparent !important;
}


.wheelfortune .tn-atom:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    border: 12px #A53A37 solid;
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%), inset 0 0 10px 0 rgb(0 0 0 / 25%);
}

#allrecords .t-rec .wheelfortune .tn-atom {
    box-shadow: none;
    background-color: #FEFFF4;
    height: inherit;
}

.wheel_textcont:nth-child(even) {
    color: #a53a37;
}


.wheelfortune .tn-atom:before {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3439-3362-4264-b963-323365303630/Polygon_3.svg);
    width: 60px;
    height: 60px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    right: -29px;
    top: 50%;
    z-index: 99;
    transform: translateY(-50%);
}


.check-code,
.spin-wheel,
.restart-wheel

{
    cursor: pointer;
    user-select: none;
}

.promocode .tn-atom {
    text-decoration: underline;
    cursor: pointer;
}


#allrecords .t-rec .wheel-screen_2,
#allrecords .t-rec .wheel-screen_3

{
    display:none;
}

@media screen and (max-width: 479px) {
.uc-wheel-popup .t396__artboard,
.uc-wheel-popup .t396__carrier,
.uc-wheel-popup .t396__filter
{
    min-height: 100svh !important;
    overflow-y: auto;
}
}



.clicked-button .tn-atom {
    filter: blur(4px);
    opacity: 0.5;
}

.clicked-button {
    background-image: url(https://tilda.ru/tpl/img/ajax-loader.gif);
    background-size: 35px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

</style>