/* ===================================================
   ПРИНУДИТЕЛЬНЫЙ ВЕРТИКАЛЬНЫЙ LAYOUT ДЛЯ МОБИЛЕ
   Этот файл обеспечивает 100% вертикальное расположение
   ================================================= */

/* Принудительно делаем все вертикально на мобиле */
@media (max-width: 768px) {
    .hero-search-main-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 12px !important;
        
        /* Убираем grid полностью */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        grid-auto-columns: none !important;
        grid-auto-rows: none !important;
    }
    
    /* Каждый элемент занимает полную ширину */
    .hero-search-input-wrapper,
    .hero-search-category-wrapper,
    .hero-search-submit-btn {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        order: initial !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        
        /* Убираем возможные float и position */
        float: none !important;
        position: relative !important;
        
        /* Убираем возможные transform */
        transform: none !important;
    }
    
    /* Порядок элементов */
    .hero-search-input-wrapper {
        order: 1 !important;
    }
    
    .hero-search-category-wrapper {
        order: 2 !important;
    }
    
    .hero-search-submit-btn {
        order: 3 !important;
    }
}

/* Дополнительные правила для планшетов */
@media (min-width: 481px) and (max-width: 768px) {
    .hero-search-main-row {
        gap: 15px !important;
    }
    
    .hero-search-container {
        padding: 0 20px !important;
    }
    
    .hero-search-form {
        padding: 25px 20px !important;
    }
}

/* Дополнительные правила для мобиле */
@media (max-width: 480px) {
    .hero-search-main-row {
        gap: 12px !important;
    }
    
    .hero-search-container {
        padding: 0 15px !important;
    }
    
    .hero-search-form {
        padding: 20px 15px !important;
    }
    
    /* Уменьшаем высоту для лучшего помещения */
    .hero-search-input-wrapper,
    .hero-search-category-wrapper {
        min-height: 52px !important;
    }
    
    .hero-search-submit-btn {
        min-height: 52px !important;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
    .hero-search-main-row {
        gap: 10px !important;
    }
    
    .hero-search-container {
        padding: 0 12px !important;
    }
    
    .hero-search-form {
        padding: 15px 12px !important;
    }
    
    .hero-search-input-wrapper,
    .hero-search-category-wrapper {
        min-height: 48px !important;
        padding: 0 14px !important;
    }
    
    .hero-search-submit-btn {
        min-height: 48px !important;
        padding: 12px 20px !important;
    }
}

/* Для экранов iPhone SE и меньше */
@media (max-width: 320px) {
    .hero-search-main-row {
        gap: 8px !important;
    }
    
    .hero-search-container {
        padding: 0 10px !important;
    }
    
    .hero-search-form {
        padding: 12px 10px !important;
    }
    
    .hero-search-input-wrapper,
    .hero-search-category-wrapper {
        min-height: 46px !important;
        padding: 0 12px !important;
    }
    
    .hero-search-submit-btn {
        min-height: 46px !important;
        padding: 11px 18px !important;
        font-size: 14px !important;
    }
}

/* Убираем возможные конфликты с другими CSS */
@media (max-width: 768px) {
    .hero-search-main-row > * {
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Убираем возможные absolute/fixed позиционирования */
    .hero-search-input-wrapper,
    .hero-search-category-wrapper,
    .hero-search-submit-btn {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
}

/* Исправляем возможные проблемы с overflow */
@media (max-width: 768px) {
    .hero-search-container {
        overflow-x: hidden !important;
    }
    
    .hero-search-form {
        overflow-x: hidden !important;
    }
    
    .hero-search-main-row {
        overflow-x: hidden !important;
    }
}