/* ============================================
   MOBILE.CSS - МОБИЛЬНАЯ ОПТИМИЗАЦИЯ МИРУМ
   Версия: 7.1 (07.01.2026) - С ИСПРАВЛЕННОЙ АДАПТАЦИЕЙ ДЛЯ IOS/ANDROID
   ============================================ */

/* ============ ОБЩИЕ АДАПТИВНЫЕ СТИЛИ ============ */
@media (max-width: 1024px) {
    .nav-links {
        gap: 15px;
    }
    
    .nav-links a {
        font-size: 0.9rem;
    }
    
    /* Улучшаем читаемость на планшетах */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.7rem !important; }
    h3 { font-size: 1.4rem !important; }
    p, li { font-size: 1.05rem !important; line-height: 1.7 !important; }
}

@media (max-width: 768px) {
    /* ============ КОНТЕЙНЕРЫ ============ */
    .container {
        padding: 0 15px;
        width: 100%;
    }
    
    /* ============ ШАПКА САЙТА ============ */
    .main-header {
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        z-index: 1000;
    }
    
    .main-header.hidden {
        transform: translateY(-100%);
    }
    
    .header-container {
        padding: 10px 0;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Логотип */
    .logo img {
        width: 120px;
        height: auto;
    }
    
    /* Скрываем десктопное меню и контакты */
    .desktop-nav {
        display: none !important;
    }
    
    .header-contacts {
        display: none !important;
    }
    
    /* Показываем бургер-меню */
    .mobile-menu-toggle {
        display: block;
        width: 30px;
        height: 24px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1002;
    }
    
    .mobile-menu-toggle span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: var(--primary-color);
        border-radius: 3px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }
    
    .mobile-menu-toggle span:nth-child(1) { top: 0px; }
    .mobile-menu-toggle span:nth-child(2) { top: 10px; }
    .mobile-menu-toggle span:nth-child(3) { top: 20px; }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        top: 10px;
        transform: rotate(135deg);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        top: 10px;
        transform: rotate(-135deg);
    }
    
    /* Мобильное меню */
    .mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 1001;
        padding: 80px 20px 20px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        -webkit-overflow-scrolling: touch; /* Плавный скролл для iOS */
    }
    
    .mobile-nav.active {
        transform: translateX(0);
    }
    
    /* ============ СКРЫВАЕМ ХЛЕБНЫЕ КРОШКИ ============ */
    .breadcrumbs {
        display: none;
    }
    
    /* ============ СЕКЦИИ ============ */
    section {
        padding: 60px 0 !important;
    }
    
    .section-title {
        margin-bottom: 30px !important;
    }
    
    /* Улучшаем отступы для касания */
    .btn, 
    .cookie-btn,
    .mobile-menu a,
    .footer-links a,
    .telegram-link,
    .scroll-to-top {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Предотвращаем зум в iOS на полях ввода */
    input, 
    select, 
    textarea {
        font-size: 16px !important;
        padding: 12px 15px !important;
    }
    
    /* iOS Safari specific fixes */
    @supports (-webkit-touch-callout: none) {
        select, input[type="text"], input[type="tel"], input[type="email"], input[type="number"] {
            font-size: 16px !important;
            -webkit-appearance: none;
            border-radius: 8px;
        }
        
        .calculator-form select {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
            padding-right: 40px !important;
        }
    }
    
    /* Android specific fixes */
    @supports not (-webkit-touch-callout: none) {
        select, input[type="text"], input[type="tel"], input[type="email"], input[type="number"] {
            font-size: 16px !important;
        }
    }
    
    /* ============ СЕТКИ ============ */
    .advantages-grid,
    .materials-grid,
    .faq-grid,
    .benefits-grid,
    .comparison-grid,
    .pricing-cards {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    /* Таблицы для мобильных */
    .comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.9rem;
    }
    
    /* ============ ГЕРОЙ-БАННЕР ============ */
    .hero {
        padding: 80px 0 40px !important;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .hero p {
        font-size: 1rem !important;
        margin-bottom: 25px;
    }
    
    .hero .btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 15px !important;
    }
    
    /* ============ ПЛАВАЮЩИЕ КНОПКИ ============ */
    .telegram-float {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
    }
    
    .telegram-link span {
        display: none;
    }
    
    .telegram-link {
        padding: 15px !important;
        border-radius: 50% !important;
        width: 60px !important;
        height: 60px !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        -webkit-tap-highlight-color: rgba(0, 136, 204, 0.3);
    }
    
    .telegram-link i {
        font-size: 1.8rem !important;
        margin: 0 !important;
    }
    
    .scroll-to-top {
        bottom: 90px;
        right: 20px;
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
        -webkit-tap-highlight-color: rgba(22, 160, 133, 0.3);
    }
    
    /* ============ УВЕДОМЛЕНИЕ О COOKIE ============ */
    .cookie-notice .container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .cookie-buttons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .cookie-btn {
        min-width: 120px !important;
        padding: 12px 20px !important;
    }
    
    /* ============ ФУТЕР ============ */
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .regions-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* ============ КОНТАКТНЫЕ ФОРМЫ ============ */
    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* ============ ТИПОГРАФИЯ ============ */
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }
    h4 { font-size: 1.1rem !important; }
    
    p, li, span, a, label {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Уменьшаем размер иконок на мобильных */
    i[class*="fa-"] {
        font-size: 0.9em !important;
    }
    
    .btn i, .advantage-header i, .faq-question-main i {
        font-size: 0.8em !important;
    }
    
    /* ============ ИСПРАВЛЕНИЕ КОНТРАСТНОСТИ ============ */
    /* Темный текст на светлом фоне */
    .hero h1,
    .hero p,
    .section-title h2,
    .advantage-title,
    .material-content h3,
    .faq-question-main,
    .benefit-title,
    .pricing-title,
    .contact-form h3 {
        color: #000000 !important; /* Черный для лучшей читаемости */
        text-shadow: none !important;
    }
    
    /* Светлый текст на темном фоне */
    .footer,
    .calculator-results,
    .final-block,
    .service-hero {
        color: #ffffff !important;
    }
    
    .footer h3,
    .footer h4,
    .calculator-results h3,
    .final-title {
        color: #ffffff !important;
    }
    
    .footer p,
    .footer li,
    .calculator-results p,
    .final-text {
        color: #e0e0e0 !important; /* Светло-серый для лучшей читаемости */
    }
    
    /* Улучшение контрастности ссылок */
    .footer-links a,
    .footer-bottom a {
        color: #1abc9c !important; /* Яркий акцентный цвет */
        font-weight: 600;
    }
    
    .footer-links a:hover,
    .footer-bottom a:hover {
        color: #ffffff !important;
        text-decoration: underline;
    }
    
    /* Кнопки с хорошим контрастом */
    .btn {
        color: #ffffff !important;
        font-weight: 600;
        border: 2px solid transparent;
    }
    
    .btn-telegram {
        background-color: #0088cc !important;
        border-color: #0088cc !important;
        color: #ffffff !important;
    }
    
    .btn-primary {
        background-color: #16a085 !important;
        border-color: #16a085 !important;
        color: #ffffff !important;
    }
    
    /* Карточки с четкими границами */
    .advantage-card,
    .material-card,
    .faq-item-main,
    .benefit-card,
    .pricing-card {
        border: 1px solid #e0e0e0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    .logo img {
        width: 100px;
    }
    
    .cookie-notice p {
        min-width: auto;
        font-size: 0.85rem !important;
    }
    
    /* Еще больше улучшаем контрастность на маленьких экранах */
    body {
        background-color: #ffffff !important;
    }
    
    .bg-light {
        background-color: #f8f9fa !important;
    }
    
    /* Увеличиваем контрастность текста */
    p, li, span {
        color: #333333 !important; /* Темно-серый для лучшей читаемости */
    }
    
    .text-light {
        color: #666666 !important;
    }
    
    /* Улучшаем видимость иконок */
    i[class*="fa-"] {
        color: #16a085 !important; /* Акцентный цвет для иконок */
    }
    
    /* Плавающие кнопки на очень маленьких экранах */
    .telegram-float {
        bottom: 15px;
        right: 15px;
    }
    
    .telegram-link {
        width: 55px !important;
        height: 55px !important;
    }
    
    .scroll-to-top {
        bottom: 80px;
        right: 15px;
        width: 45px !important;
        height: 45px !important;
    }
}

/* ============ ОСОБЫЕ СТИЛИ ДЛЯ КАЛЬКУЛЯТОРА НА МОБИЛЬНЫХ ============ */
@media (max-width: 768px) {
    .calculator-form {
        padding: 20px;
    }
    
    .calculator-form select,
    .calculator-form input {
        font-size: 16px !important;
        padding: 14px !important;
        margin-bottom: 15px;
    }
    
    #calculateBtn {
        padding: 16px;
        font-size: 1.1rem;
    }
    
    .calculator-results {
        padding: 20px;
    }
    
    .result-item {
        padding: 15px;
        margin-bottom: 10px;
    }
    
    .result-value {
        font-size: 1.2rem;
    }
    
    .results-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .results-actions .btn {
        padding: 14px;
        font-size: 0.95rem;
    }
    
    /* Исправление текста совета в результатах */
    .calculator-results .result-hint,
    .calculator-results p {
        color: #ffffff !important;
    }
    
    .calculator-results div[style*="background: rgba(255, 255, 255, 0.1)"] p {
        color: #ffffff !important;
    }
}

/* ============ ПОДДЕРЖКА ТЕМНОЙ ТЕМЫ ============ */
@media (prefers-color-scheme: dark) {
    /* Базовая поддержка темной темы */
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    
    .main-header {
        background-color: #2c2c2c;
    }
    
    .nav-links a {
        color: #e0e0e0;
    }
    
    .mobile-nav {
        background-color: #2c2c2c;
    }
    
    .mobile-menu a {
        color: #e0e0e0;
    }
    
    .advantage-card,
    .material-card,
    .faq-item-main,
    .benefit-card {
        background-color: #2c2c2c;
        border-color: #444;
    }
    
    .footer {
        background-color: #1a252f;
    }
}

/* ============ ВЫСОКАЯ КОНТРАСТНОСТЬ (ДЛЯ СЛАБОВИДЯЩИХ) ============ */
@media (prefers-contrast: high) {
    * {
        border-color: #000000 !important;
    }
    
    .btn {
        border: 2px solid #000000 !important;
    }
    
    .advantage-card,
    .material-card {
        border: 2px solid #000000 !important;
    }
    
    .nav-links a.active {
        border-bottom: 3px solid #000000 !important;
    }
}

/* ============ АДАПТИВНОСТЬ ДЛЯ ЛАНДШАФТНОЙ ОРИЕНТАЦИИ ============ */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-nav {
        padding-top: 60px;
    }
    
    .mobile-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .hero {
        padding: 60px 0 30px !important;
    }
    
    .hero h1 {
        font-size: 1.6rem !important;
    }
}

/* ============ АНИМАЦИИ ДЛЯ УБИРАЮЩЕГОСЯ ХЕДЕРА И ГЕРОЯ ============ */
@media (max-width: 768px) {
    .hero {
        transition: all 0.3s ease !important;
    }
    
    .hero.hidden {
        opacity: 0 !important;
        transform: translateY(-50px) !important;
        height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    
    /* Быстрое скрытие для калькулятора */
    .calculator-page .main-header.hidden,
    .calculator-page .hero.hidden {
        transform: translateY(-100%) !important;
    }
    
    .calculator-page .hero.hidden {
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
    }
}

/* ============ КОНЕЦ MOBILE.CSS ============ */