/* mobile-fixes.css - Улучшения для мобильной версии сайта SuppRate */

/* ===== ОСНОВНЫЕ ИСПРАВЛЕНИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ===== */

/* 1. Отступы по краям для мобильных устройств */
@media (max-width: 768px) {
    #wrapper {
        margin: 0 10px !important;
        padding: 10px 0 !important;
    }
    
    /* Улучшение отступов для контейнеров */
    .row {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Отступы для секций */
    section {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    #wrapper {
        margin: 0 8px !important;
        padding: 8px 0 !important;
    }
    
    .row {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    
    section {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

/* 2. Улучшение переноса текста и уменьшение шрифтов */
@media (max-width: 768px) {
    /* Принудительный перенос длинных слов */
    .section-title, .section-subtitle, 
    h1, h2, h3, h4, h5, h6, 
    p, span, div, a, li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Уменьшение размеров шрифтов */
    .section-title {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }
    
    .section-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }
    
    h1 {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
    
    h4 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }
    
    /* Улучшение читаемости текста */
    p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

/* 3. Адаптация кнопок для мобильных */
@media (max-width: 768px) {
    .button {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        margin: 15px 0 !important;
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
    }
    
    /* Особые стили для кнопок в секции вопросов */
    .questions-buttons .button {
        padding: 14px 25px !important;
        font-size: 0.85rem !important;
    }
    
    /* Кнопки в ряд превращаем в колонку */
    .questions-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* 4. Адаптация иконок и блоков с иконками */
@media (max-width: 768px) {
    .icon-block .icon {
        margin-bottom: 12px !important;
    }
    
    .icon-block .icon i {
        font-size: 1.8em !important;
    }
    
    /* Уменьшение отступов в блоках с колонками */
    .col-3, .col-2-3, .col-1 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* 5. Улучшение баннера для мобильных */
@media (max-width: 768px) {
    .banner-hero {
        padding: 80px 0 30px 0 !important;
        min-height: auto !important;
    }
    
    .banner-text {
        max-width: 100% !important;
    }
    
    .banner-hero .section-heading h1 {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .banner-hero .section-heading h2 {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }
    
    .banner-corejobs .corejobs-features {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    .banner-corejobs .corejobs-feature {
        flex: 0 0 calc(50% - 15px) !important;
        text-align: center !important;
    }
}

/* 6. Адаптация аккордеона */
@media (max-width: 768px) {
    .accordion-header {
        padding: 15px 12px !important;
    }
    
    .accordion-title {
        font-size: 0.85rem !important;
        gap: 10px !important;
    }
    
    .accordion-content-inner {
        padding: 20px 15px !important;
    }
    
    .accordion-description {
        font-size: 0.85rem !important;
    }
}

/* 7. Адаптация секции с результатами */
@media (max-width: 768px) {
    .results-features-container,
    .results-blocks-container,
    .indicators-container {
        flex-direction: column !important;
    }
    
    .results-section .icon-block,
    .results-block,
    .indicator-block {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .indicator-value {
        font-size: 2rem !important;
    }
}

/* 8. Адаптация секции сравнения */
@media (max-width: 768px) {
    .comparison-block {
        margin-bottom: 20px !important;
    }
}

/* 9. Адаптация футера */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .footer-section {
        margin-bottom: 25px !important;
    }
    
    .footer-contacts .qr-code-image {
        text-align: center !important;
    }
}

/* 10. Адаптация навигации */
@media (max-width: 768px) {
    #header nav#nav-mobile ul {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
}

/* 11. Улучшение отзывов */
@media (max-width: 768px) {
    .testimonial.classic {
        padding: 10px !important;
        margin-bottom: 20px !important;
    }
    
    .testimonial q {
        font-size: 0.9rem !important;
    }
}

/* 12. Адаптация попапа */
@media (max-width: 480px) {
    .popup-container {
        width: 95% !important;
        margin: 10px !important;
    }
    
    .popup-header {
        padding: 15px 20px !important;
    }
    
    .popup-form {
        padding: 20px !important;
    }
}

/* 13. Улучшение табличных данных */
@media (max-width: 768px) {
    /* Преобразование таблиц в блоки */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

/* 14. Улучшение форм */
@media (max-width: 768px) {
    input, textarea, select {
        font-size: 16px !important; /* Предотвращает масштабирование в iOS */
        max-width: 100% !important;
    }
    
    .form-group {
        margin-bottom: 15px !important;
    }
}

/* 15. Улучшение изображений */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .qr-code-img {
        max-width: 100px !important;
    }
}

/* 16. Специальные улучшения для очень маленьких экранов */
@media (max-width: 360px) {
    #wrapper {
        margin: 0 5px !important;
        padding: 5px 0 !important;
    }
    
    .section-title {
        font-size: 1.2rem !important;
    }
    
    h1 {
        font-size: 1.4rem !important;
    }
    
    .button {
        padding: 10px 15px !important;
        font-size: 0.8rem !important;
    }
}

/* 17. Улучшение производительности на мобильных */
@media (max-width: 768px) {
    /* Отключаем сложные анимации на мобильных */
    .wow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Упрощаем переходы */
    * {
        transition-duration: 0.2s !important;
    }
}

/* 18. Улучшение доступности для сенсорных устройств */
@media (max-width: 768px) {
    /* Увеличиваем области клика */
    a, button, .button {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Улучшаем видимость фокуса */
    a:focus, button:focus, .button:focus {
        outline: 2px solid #d2b356 !important;
        outline-offset: 2px !important;
    }
}

/* 19. Исправление специфических проблем мобильных браузеров */
@media (max-width: 768px) {
    /* Предотвращает автоматическое увеличение шрифта в iOS */
    input, textarea, select {
        font-size: 16px !important;
    }
    
    /* Исправление для viewport в iOS */
    @supports (-webkit-touch-callout: none) {
        .banner-hero {
            min-height: -webkit-fill-available !important;
        }
    }
}

/* 20. Улучшение горизонтальной прокрутки */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    .row {
        max-width: 100% !important;
    }
}

/* ===== КОНЕЦ СТИЛЕЙ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ ===== */