/* Улучшение калькулятора на мобильных устройствах */

@media (max-width: 768px) {
    /* Убираем лишние отступы у секции */
    .calculator-section {
        padding: 2rem 0 !important;
        background: #f8fafc;
    }
    
    /* Растягиваем контейнер на всю ширину */
    .calculator-section .container {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* Делаем wrapper на всю ширину без отступов (убираем "окно в окне") */
    .calculator-wrapper {
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        border-radius: 0 !important; /* Без скруглений на мобильных - на всю ширину */
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        background: white;
    }

    /* Легкая анимация появления */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Заголовок секции */
    .calculator-section .section-header {
        padding: 0 1rem 1rem 1rem !important;
    }
    
    /* Адаптируем форму */
    .calculator-form {
        padding: 0 !important;
    }
    
    /* Поля формы на всю ширину */
    .form-field {
        margin-bottom: 1rem !important;
    }
    
    .form-field input,
    .form-field select,
    .form-field textarea,
    .input-with-autocomplete input {
        width: 100% !important;
        min-height: 48px !important; /* Touch-friendly: минимум 48px */
        padding: 14px 16px !important;
        font-size: 16px !important; /* Предотвращает зум на iOS */
        border-radius: 12px !important;
        box-sizing: border-box;
    }
    
    /* Группа с суффиксом (кг, м³) */
    .input-group {
        width: 100% !important;
    }
    
    .input-group input {
        padding-right: 3rem !important;
    }
    
    /* Прогресс бар - адаптивный без скролла */
    .calc-progress {
        padding: 0 0.5rem 1.5rem 0.5rem !important;
        margin: 0 -1rem 1.5rem -1rem !important;
        border-bottom: 1px solid #e5e7eb;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important; /* Убираем gap, используем стандартные отступы */
        overflow-x: auto; /* Оставляем скролл для очень маленьких экранов */
        -webkit-overflow-scrolling: touch;
    }

    .progress-step {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .progress-step .step-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }

    .progress-step .step-label {
        font-size: 0.75rem !important;
        margin-top: 0.25rem !important;
    }

    /* Линии между шагами - укорачиваем на мобильных */
    .progress-line {
        width: 40px !important; /* Вместо 100px */
        flex-shrink: 0;
    }
    
    /* Кнопки */
    .form-actions {
        padding: 1.5rem 0 0 0 !important;
        gap: 0.5rem !important;
        display: flex;
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary,
    .form-actions button {
        width: 100% !important;
        min-height: 44px !important; /* Touch-friendly (44px минимум для iOS) */
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        font-weight: 600;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Subtle hover эффект для кнопок */
    .btn-primary:active,
    .btn-secondary:active,
    .form-actions button:active {
        transform: scale(0.98);
    }
    
    /* Результаты */
    .calc-result {
        margin-top: 1.5rem !important;
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
    }
    
    .result-header {
        font-size: 1.25rem !important;
    }
    
    .result-price {
        font-size: 2rem !important;
    }
    
    /* Градиентные шары на фоне - убираем на мобильных */
    .gradient-orb {
        display: none !important;
    }
    
    /* Dropdown списки - обычный стиль под полем ввода */
    .autocomplete-dropdown,
    .city-dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 200px !important;
        margin-top: 4px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        -webkit-overflow-scrolling: touch;
        /* display: none по умолчанию - показывается с классом .active */
    }

    /* Показываем dropdown только с классом active */
    .autocomplete-dropdown.active,
    .city-dropdown.active {
        display: block !important;
    }

    /* Блоки выбора типа транспорта - уменьшаем на мобильных */
    .car-type-grid {
        gap: 0.5rem !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 колонки на мобильных */
    }

    .car-type-card {
        padding: 0.75rem 0.5rem !important;
    }

    .car-type-icon {
        font-size: 1.75rem !important; /* Уменьшаем иконки */
        margin-bottom: 0.25rem !important;
    }

    .car-type-card span {
        font-size: 0.85rem !important;
    }

    /* Кнопка "Далее" - центрируем на мобильных */
    .form-navigation {
        justify-content: center !important;
    }

    .btn-next,
    .btn-back,
    .btn-calculate {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        min-width: 160px !important;
        max-width: 200px !important;
        text-align: center !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Плейсхолдеры и подсказки */
    .field-hint {
        font-size: 0.8rem !important;
        margin-top: 0.25rem !important;
    }
    
    /* Блок результатов - детали */
    .result-details {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 колонки на мобильных */
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .detail-item {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .detail-icon {
        font-size: 1.25rem !important;
    }

    /* Шаги формы */
    .form-step {
        padding: 0 !important;
    }
}

/* Для маленьких экранов - 1 колонка */
@media (max-width: 375px) {
    .result-details {
        grid-template-columns: 1fr !important;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 375px) {
    .calculator-wrapper {
        padding: 1rem 0.75rem !important;
    }
    
    .calculator-section .section-title {
        font-size: 1.5rem !important;
    }
    
    .form-field input,
    .form-field select {
        padding: 0.875rem !important;
    }
}

/* Специфичные исправления для iOS */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .calculator-wrapper {
            /* Убираем возможные проблемы с Safari */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        
        input, select, textarea {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
    }
}

/* Безопасные зоны для iPhone X+ */
@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 768px) {
        .calculator-wrapper {
            padding-left: max(1rem, env(safe-area-inset-left)) !important;
            padding-right: max(1rem, env(safe-area-inset-right)) !important;
            padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
        }
    }
}