/* ===================================
   Адаптация квиза для мобильных и планшетов
   =================================== */

/* Базовые стили для десктопа (по умолчанию применяются инлайн-стили) */

/* Адаптация для планшетов */
@media screen and (max-width: 1024px) {
    #calculator {
        padding: 60px 0 !important;
    }
    
    /* Контейнер квиза - уменьшена высота на 300px (250+50) */
    #calculator > .section-container > div {
        padding: 1.25rem 2rem !important;
        margin: 0.75rem 0 !important;
    }
    
    /* Заголовок квиза */
    #calculator .section-title {
        font-size: 2rem !important;
    }
    
    /* Прогресс-бар контейнер - уменьшен отступ */
    #calculator > .section-container > div > div:first-child {
        margin-bottom: 1rem !important;
    }
    
    /* Заголовок вопроса - уменьшен отступ */
    .quiz-step-content h3 {
        margin-bottom: 0.875rem !important;
    }
    
    /* Подзаголовок вопроса - уменьшен отступ */
    .quiz-step-content p {
        margin-bottom: 0.875rem !important;
    }
    
    /* Сетка опций - 2 колонки на планшетах */
    .quiz-step-content > .quiz-content-wrapper > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Сетка опций - уменьшен gap */
    .quiz-step-content > .quiz-content-wrapper > div[style*="grid"] {
        gap: 0.625rem !important;
    }
    
    /* Опции квиза */
    .quiz-option {
        padding: 0.875rem !important;
    }
    
    .quiz-option > div:first-child {
        font-size: 1.1rem !important;
    }
    
    /* Скрыть подписи в опциях на планшетах */
    .quiz-option > div:last-child {
        display: none !important;
    }
    
    /* Убрать нижний отступ у заголовков опций */
    .quiz-option > div:first-child,
    .quiz-option > div > div:first-child {
        margin-bottom: 0 !important;
    }
    
    /* Контейнер кнопок - уменьшен отступ */
    .quiz-step-content > div:last-child {
        padding-top: 1rem !important;
    }
    
    /* Адаптация результатов для планшетов */
    #quizResults > div:first-child h3 {
        font-size: 1.5rem !important;
    }
    
    #quizResults > div:first-child > div:nth-child(2) {
        font-size: 2.5rem !important;
    }
    
    #quizResults > div:nth-child(2) > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* Адаптация для мобильных */
@media screen and (max-width: 768px) {
    #calculator {
        padding: 20px 0 !important;
    }
    
    /* Заголовки секции */
    #calculator .section-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    #calculator .section-subtitle {
        font-size: 0.95rem !important;
    }
    
    #calculator .section-header {
        margin-bottom: 0.875rem !important;
    }
    
    /* Контейнер квиза - уменьшена высота на 300px (250+50) */
    #calculator > .section-container > div {
        padding: 0.875rem 1rem !important;
        margin: 0.375rem 0 !important;
        border-radius: 16px !important;
    }
    
    /* Прогресс-бар контейнер - уменьшен отступ */
    #calculator > .section-container > div > div:first-child {
        margin-bottom: 0.875rem !important;
    }
    
    /* Заголовок вопроса - уменьшен отступ */
    .quiz-step-content h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.625rem !important;
        line-height: 1.3 !important;
    }
    
    /* Подзаголовок вопроса - уменьшен отступ */
    .quiz-step-content p {
        font-size: 0.85rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    /* Сетка опций - 1 колонка на мобильных */
    .quiz-step-content > .quiz-content-wrapper > div[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    
    /* Опции квиза - уменьшен padding */
    .quiz-option {
        padding: 0.65rem !important;
    }
    
    .quiz-option > div:first-child {
        font-size: 0.95rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Скрыть подписи в опциях на мобильных */
    .quiz-option > div:last-child {
        display: none !important;
    }
    
    /* Убрать нижний отступ у заголовков опций */
    .quiz-option > div > div:first-child {
        margin-bottom: 0 !important;
    }
    
    /* Иконки в опциях */
    .quiz-option img,
    .quiz-option svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Контейнер с иконкой и текстом */
    .quiz-option > div > div[style*="display: flex"] {
        gap: 0.5rem !important;
        margin-bottom: 0 !important;
    }
    
    .quiz-option > div > div[style*="display: flex"] span {
        font-size: 0.95rem !important;
    }
    
    /* Кнопки навигации - размеры БЕЗ ИЗМЕНЕНИЙ */
    .quiz-step-content button {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Контейнер кнопок - уменьшен отступ */
    .quiz-step-content > div:last-child {
        padding-top: 0.875rem !important;
    }
    
    /* Поле ввода */
    #employeesInput,
    #salaryInput {
        padding: 0.875rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Подсказка под полем ввода */
    #employeesInput + div,
    #salarySlider + div {
        margin-top: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Слайдер зарплаты - уменьшен отступ */
    #salarySlider {
        margin: 0.625rem 0 !important;
    }
    
    /* Результаты */
    #quizResult h3 {
        font-size: 1.25rem !important;
    }
    
    #quizResult > div:first-child {
        font-size: 1.75rem !important;
    }
    
    /* Карточки результатов */
    #quizResult > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    #quizResult > div[style*="display: grid"] > div {
        padding: 1rem !important;
    }
    
    #quizResult > div[style*="display: grid"] > div > div:first-child {
        font-size: 1.25rem !important;
    }
    
    #quizResult > div[style*="display: grid"] > div > div:last-child {
        font-size: 0.8rem !important;
    }
    
    /* Адаптация блока результатов квиза */
    #quizResults {
        padding: 0 !important;
    }
    
    #quizResults > div:first-child {
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
    
    #quizResults > div:first-child h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #quizResults > div:first-child > div:nth-child(2) {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #quizResults > div:first-child > div:nth-child(3) {
        font-size: 1rem !important;
    }
    
    /* Детализация расходов */
    #quizResults > div:nth-child(2) {
        padding: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    #quizResults > div:nth-child(2) h4 {
        font-size: 1.125rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Карточки сравнения - 1 колонка */
    #quizResults > div:nth-child(2) > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    #quizResults > div:nth-child(2) > div[style*="display: grid"] > div {
        padding: 1.25rem !important;
    }
    
    #quizResults > div:nth-child(2) > div[style*="display: grid"] > div > div > div:first-child {
        font-size: 1.75rem !important;
    }
    
    #quizResults > div:nth-child(2) > div[style*="display: grid"] > div > div > div:nth-child(2) {
        font-size: 1rem !important;
    }
    
    #quizResults > div:nth-child(2) > div[style*="display: grid"] > div > div > div:nth-child(3) {
        font-size: 0.8rem !important;
    }
    
    #quizResults > div:nth-child(2) > div[style*="display: grid"] > div > div > div:nth-child(3) > div {
        font-size: 0.8rem !important;
    }
    
    /* Экономия в месяц */
    #quizResults > div:nth-child(2) > div:last-child {
        padding: 1rem !important;
    }
    
    #quizResults > div:nth-child(2) > div:last-child > div:first-child {
        font-size: 0.95rem !important;
    }
    
    #quizResults > div:nth-child(2) > div:last-child > div:last-child {
        font-size: 1.5rem !important;
    }
    
    /* Призыв к действию */
    #quizResults > div:nth-child(3) {
        margin-top: 2rem !important;
    }
    
    #quizResults > div:nth-child(3) > div:first-child {
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    #quizResults > div:nth-child(3) > div:first-child > button,
    #quizResults > div:nth-child(3) > div:first-child > a {
        width: 100% !important;
        justify-content: center !important;
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
    
    #quizResults > div:nth-child(3) > div:first-child > a span {
        font-size: 0.95rem !important;
    }
    
    /* Дополнительные действия */
    #quizResults > div:nth-child(3) > div:last-child {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    #quizResults > div:nth-child(3) > div:last-child > span {
        display: none !important;
    }
}

/* Дополнительная адаптация для очень маленьких экранов */
@media screen and (max-width: 480px) {
    #calculator {
        padding: 16px 0 !important;
    }
    
    #calculator .section-title {
        font-size: 1.375rem !important;
    }
    
    #calculator .section-subtitle {
        font-size: 0.875rem !important;
    }
    
    #calculator > .section-container > div {
        padding: 0.75rem 0.75rem !important;
        border-radius: 12px !important;
    }
    
    .quiz-step-content h3 {
        font-size: 1rem !important;
    }
    
    .quiz-option {
        padding: 0.5rem !important;
    }
    
    .quiz-option > div:first-child {
        font-size: 0.9rem !important;
    }
    
    /* Скрыть подписи */
    .quiz-option > div:last-child {
        display: none !important;
    }
    
    /* Кнопки навигации - размеры БЕЗ ИЗМЕНЕНИЙ */
    .quiz-step-content button {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
}

/* Адаптация для средних планшетов (портрет) */
@media screen and (min-width: 768px) and (max-width: 900px) {
    #calculator {
        padding: 50px 0 !important;
    }
    
    #calculator > .section-container > div {
        max-width: 700px;
        margin: 0.75rem auto !important;
        padding: 1.25rem 1.5rem !important;
    }
    
    /* Сетка опций - 2 колонки */
    .quiz-step-content > .quiz-content-wrapper > div[style*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }
    
    /* Скрыть подписи в опциях */
    .quiz-option > div:last-child {
        display: none !important;
    }
    
    /* Убрать нижний отступ у заголовков опций */
    .quiz-option > div:first-child,
    .quiz-option > div > div:first-child {
        margin-bottom: 0 !important;
    }
    
    .quiz-option {
        padding: 0.875rem !important;
    }
}

/* Убрать минимальную высоту для мобильных */
@media screen and (max-width: 768px) {
    .quiz-step-content {
        min-height: auto !important;
    }
}

/* Фикс для контейнеров с flex */
.quiz-step-content {
    min-height: 400px;
}

/* Адаптация блока интеграции с CRM для мобильных и планшетов */
@media screen and (max-width: 1024px) {
    #crm-integrations .messengers-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    #crm-integrations .messenger-card {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        scroll-snap-align: start !important;
    }
    
    /* Адаптация блока отзывов компаний */
    .testimonials-track {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 1rem !important;
    }
    
    .testimonial-card {
        flex: 0 0 85% !important;
        min-width: 85% !important;
        scroll-snap-align: center !important;
    }
    
    /* Скрыть кнопки слайдера на планшетах/мобильных */
    .slider-controls {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    #crm-integrations .messengers-grid {
        gap: 0.75rem !important;
    }
    
    #crm-integrations .messenger-card {
        flex: 0 0 260px !important;
        min-width: 260px !important;
    }
    
    /* Отзывы компаний - карточки на всю ширину на мобильных */
    .testimonial-card {
        flex: 0 0 90% !important;
        min-width: 90% !important;
    }
    
    .testimonials-track {
        gap: 1rem !important;
    }
}

@media screen and (max-width: 480px) {
    #crm-integrations .messengers-grid {
        gap: 0.625rem !important;
    }
    
    #crm-integrations .messenger-card {
        flex: 0 0 240px !important;
        min-width: 240px !important;
    }
    
    /* Отзывы компаний - карточки почти на всю ширину */
    .testimonial-card {
        flex: 0 0 95% !important;
        min-width: 95% !important;
    }
    
    .testimonials-track {
        gap: 0.75rem !important;
    }
}

@media screen and (max-width: 768px) {
    .quiz-step-content {
        min-height: 350px;
    }
}

/* Адаптация подвала (footer) для мобильных и планшетов */
@media screen and (max-width: 1024px) {
    .footer {
        padding: 2rem 0 1.5rem !important;
    }
    
    .footer-container {
        padding: 0 1.5rem !important;
    }
    
    /* Основная сетка подвала - 2 колонки на планшетах */
    .footer-container > div:first-child {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
    
    /* Логотип и описание на всю ширину */
    .footer-container > div:first-child > div:first-child {
        grid-column: 1 / -1 !important;
    }
}

@media screen and (max-width: 768px) {
    .footer {
        padding: 2rem 0 1rem !important;
    }
    
    .footer-container {
        padding: 0 1rem !important;
    }
    
    /* Основная сетка подвала - 1 колонка на мобильных */
    .footer-container > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    /* Логотип */
    .footer-container > div:first-child > div:first-child h3 {
        font-size: 1.25rem !important;
    }
    
    .footer-container > div:first-child > div:first-child p {
        font-size: 0.9rem !important;
    }
    
    /* Кнопки в подвале */
    .footer-container > div:first-child > div:first-child > div {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .footer-container > div:first-child > div:first-child > div a {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Заголовки секций */
    .footer-container > div:first-child > div h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Ссылки в секциях */
    .footer-container > div:first-child > div ul li {
        margin-bottom: 0.4rem !important;
    }
    
    .footer-container > div:first-child > div ul li a {
        font-size: 0.85rem !important;
    }
    
    /* Нижняя часть */
    .footer-container > div:last-child {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    .footer-container > div:last-child > div:last-child {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
    }
}

@media screen and (max-width: 480px) {
    .footer-container > div:first-child > div:first-child h3 {
        font-size: 1.125rem !important;
    }
    
    .footer-container > div:first-child > div:first-child p {
        font-size: 0.85rem !important;
    }
    
    .footer-container > div:last-child p {
        font-size: 0.8rem !important;
    }
    
    .footer-container > div:last-child > div:last-child a {
        font-size: 0.8rem !important;
    }
}