/* templates/your-template/styles/survey.css */



#modal-survey h2 {
    color: #000000;
}

/* Увеличиваем размер радио кнопок */
#step1 input[type="radio"],
#step2 input[type="radio"] {
    width: 25px;      /* Ширина радио-кнопок */
    height: 25px;     /* Высота радио-кнопок */
    cursor: pointer;  /* Указатель мыши при наведении */
}

.step-container {
    display: flex;
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: space-between; /* Распределяем элементы по горизонтали */
}

.form-check {
    display: flex; /* Используем flex для выравнивания */
    align-items: center; /* Центрируем по вертикали */
}

.form-check-label {
    margin-left: 10px; /* Отступ между радио кнопкой и текстом */
    font-size: 16px; /* Увеличиваем размер шрифта */
    line-height: 25px; /* Увеличиваем высоту строки для лучшего выравнивания */
}

.modal-survey {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Зафиксировано относительно окна */
    z-index: 1000; /* Поверх других элементов */
    left: 0;
    top: 0;
    width: 100%; /* Занимает всю ширину */
    height: 100%; /* Занимает всю высоту */
    overflow: auto; /* Позволяет прокрутку, если содержимое превышает высоту */
    backdrop-filter: blur(5px); /* Заблюривание фона */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон с черным цветом */
}

.modal-content-survey {
    position: absolute; /* Позиционирование содержимого */
    top: 50%; /* Сдвиг вниз на 50% */
    left: 50%; /* Сдвиг вбок на 50% */
    transform: translate(-50%, -50%); /* Сдвигаем его обратно на 50% по обоим осям */
    width: 90%; /* Ширина модального окна, 90% от ширины экрана */
    max-width: 800px; /* Максимальная ширина модального окна */
    background-color: var(--modal-background-color); /* Цвет фона */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень */
    padding: 30px; /* Внутренние отступы увеличены */
}
.close-survey {
    position: absolute; /* Позволяет позиционировать элемент относительно ближайшего родительского элемента с позиционированием */
    top: 15px; /* Расстояние от верхней части модального окна */
    right: 15px; /* Расстояние от правой части модального окна */
    font-size: 24px; /* Размер шрифта крестика */
    color: var(--color-primary); /* Цвет крестика */
    cursor: pointer; /* Указывает на то, что элемент кликабельный */
}

.close-survey:hover {
    color: #ef8c15; /* Цвет крестика при наведении */
}
.quizStart {
    padding: 12px 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 5px;
    background: #ffa335; /* Исходный цвет фона */
    background: linear-gradient(96deg, #ffa335 22.56%, #f16517 90.24%); /* Исходный цвет фона */
    color: #fff; /* Исходный цвет текста */
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
    border: none;
    position: relative; /* Для анимации пульсации */
    z-index:999;
    transition:.3s;
    -webkit-animation:quiz-start-an linear 2s infinite;
    animation:quiz-start-an linear 2s infinite;
}


@-webkit-keyframes quiz-start-an{
    0% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
    }
    40% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
    }
    80% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
    }
    100% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
    }
}@keyframes quiz-start-an {
     0% {
         box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
     }
     40% {
         box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
     }
     80% {
         box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
     }
     100% {
         box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
     }
 }


/* Стили для кнопки при наведении */
.btn.quizStart:hover {
    background-color: #ffa335; /* Сохраняем цвет фона */
    color: #fff; /* Сохраняем цвет текста */
    border-color: inherit; /* Отмена эффекта на границу */
    /*animation: none; !* Отключаем анимацию пульсации при наведении *!*/
}



/* Адаптивность для мобильных устройств с использованием Bootstrap классов */
@media (max-width: 576px) {
    .survey {
        padding: 15px;
    }

    h2 {
        font-size: 20px;
    }
    #step1 input[type="submit"],
    #step2 input[type="submit"]
    {
        font-size: 14px;
    }
}