/**
 * MOBILE FIXES & OPTIMIZATIONS (v5.0 - ПРАВИЛЬНЫЙ ПОДХОД)
 * 
 * ПРАВИЛЬНОЕ отключение hover-эффектов на мобильных
 * НЕ используем revert/inherit - просто отключаем изменения
 */

/* ============================================================================
   1. ОТКЛЮЧЕНИЕ HOVER НА МОБИЛЬНЫХ УСТРОЙСТВАХ
   ============================================================================ */

@media (hover: none) and (pointer: coarse), (max-width: 1199px) {
    
    /* Убираем tap highlight на всех элементах */
    * {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* ===== УБИРАЕМ КОНКРЕТНЫЕ HOVER ЭФФЕКТЫ ===== */
    
    /* Header */
    .explore_item:hover {
        border-radius: 24px 12px 12px 24px;
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .user_item:hover {
        box-shadow: none;
    }
    
    .user_item:hover span {
        color: #555555;
    }
    
    .overhead_rightBlock .overhead_item:hover span {
        color: #555555;
    }
    
    /* Hero Section */
    .hero_btn_primary:hover {
        background-color: #FF2469;
        border-radius: 24px 8px 8px 24px;
    }
    
    .hero_btn_secondary:hover {
        border-radius: 8px 24px 24px 8px;
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .hero_slide_btn:hover {
        border-radius: 12px;
        background-color: #F8F8F8;
    }
    
    .hero_slider_nav {
        display: none !important;
    }
    
    .hero_slider_dot:hover {
        background-color: #EFEFEF;
    }
    
    /* Categories */
    .categories_item:hover {
        border-radius: 12px;
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .categories_item:hover .categoriy_arrow {
        transform: none;
    }
    
    /* Products */
    .products_item:hover {
        transform: none;
        box-shadow: none;
    }
    
    .products_item:hover .products_item_imageBlock img {
        transform: none;
    }
    
    .product_btn:hover {
        background-color: #FF2469;
        border-radius: 12px;
    }
    
    .products_more-btn:hover {
        box-shadow: inset 0 0 0 1px #EFEFEF;
        border-radius: 12px;
    }
    
    /* Custom Order */
    .custom-order__input:hover {
        border-radius: 12px;
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .custom-order__submit:hover {
        background-color: #FF2469;
        border-radius: 12px;
    }
    
    /* Custom Select */
    .custom-select__trigger:hover {
        background-color: #F8F8F8;
    }
    
    .custom-select__option:hover {
        background-color: transparent;
        color: #555555;
    }
    
    /* Footer */
    .footer__social-link:hover {
        opacity: 1;
    }
    
    .footer__nav-link:hover {
        color: #FFFFFF;
    }
    
    /* Cart */
    .cartItem:hover {
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .cartItem_name a:hover {
        color: #181818;
    }
    
    .cartQty_btn:hover {
        background-color: transparent;
    }
    
    .cartItem_editBtn:hover {
        background-color: #F8F8F8;
    }
    
    .cartItem_remove:hover {
        background-color: transparent;
        color: #AAAAAA;
    }
    
    .cartSubmit:hover {
        background-color: #FF2469;
        border-radius: 12px 12px 24px 24px;
    }
    
    .cartEmpty_button:hover {
        background-color: #FF2469;
        border-radius: 12px;
    }
    
    /* Catalog */
    .catalog_product:hover {
        transform: none;
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .catalog_product:hover .product_image img {
        transform: none;
    }
    
    .filters_close:hover {
        background-color: transparent;
        color: #181818;
    }
    
    .filter_price_input:hover {
        box-shadow: inset 0 0 0 1px #F4F4F4;
    }
    
    .filter_action_reset:hover {
        border-radius: 12px;
        color: #555555;
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .filter_action_apply:hover {
        background-color: #FF2469;
        border-radius: 12px 12px 24px 24px;
    }
    
    .toolbar_filter_toggle:hover {
        background-color: #FF2469;
        border-radius: 12px;
    }
    
    .pagination_btn:hover {
        background-color: transparent;
        box-shadow: none;
    }
    
    .pagination_btn_next:hover {
        border-radius: 12px;
        background-color: #FFFFFF;
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    /* Checkout */
    .checkoutCheckbox_box:hover {
        border-color: #EFEFEF;
    }
    
    .checkoutCheckbox_label:hover {
        color: #181818;
    }
    
    .checkoutField_input:hover,
    .checkoutDiscount_field:hover,
    .checkoutField_textarea:hover {
        box-shadow: inset 0 0 0 1px #EFEFEF;
    }
    
    .checkoutDiscount_btn:hover {
        background-color: #FF2469;
    }
    
    .checkoutSubmit:hover {
        background-color: #FF2469;
        border-radius: 12px 12px 24px 24px;
    }
    
    /* Product Page */
    .breadcrumbs_link:hover {
        color: #555555;
    }
    
    .gallery_main:hover .gallery_mainImg {
        transform: none;
    }
    
    .gallery_arrow:hover {
        background-color: rgba(255, 255, 255, 0.95);
        transform: translateY(-50%);
    }
    
    .gallery_thumb:hover {
        border-color: #F5F5F5;
        transform: none;
    }
    
    .gallery_dot:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }
    
    .compositionToggle:hover {
        color: #181818;
    }
    
    .quantity_btn:hover {
        opacity: 1;
    }
    
    .addToCart:hover {
        background-color: #FF2469;
        border-radius: 12px;
    }
    
    .addonTab:hover {
        color: #555555;
        box-shadow: none;
    }
    
    .addonCard_add:hover {
        background-color: #FF2469;
    }
    
    /* Profile Page */
    .profileCard_logout:hover {
        background-color: #FFFFFF;
        border-color: #EFEFEF;
        color: #555555;
    }
    
    .profileTab:hover {
        color: #555555;
        background-color: transparent;
    }
    
    .orderCard_pay:hover {
        background-color: #FF2469;
    }
    
    .orderCard_details:hover,
    .orderCard_repeat:hover {
        background-color: #FFFFFF;
        border-color: #EFEFEF;
        color: #181818;
    }
    
    .settingsField_input:hover {
        box-shadow: inset 0 0 0 1px #F4F4F4;
    }
    
    .settingsSubmit:hover {
        background-color: #FF2469;
    }
    
    .telegramConnect_button:hover {
        background-color: #FFFFFF;
        color: #229ED9;
    }
    
    .telegramCode_link:hover {
        color: #229ED9;
    }
    
    .telegramCode_copy:hover {
        background-color: #FFFFFF;
        border-color: #EFEFEF;
        color: #555555;
    }
    
    .telegramConnected_disconnect:hover {
        background-color: #FFFFFF;
        border-color: #EFEFEF;
        color: #555555;
    }
    
    .orderPopup_close:hover {
        background-color: #FFFFFF;
        border-color: #EFEFEF;
        color: #555555;
    }
    
    /* Mobile Navigation */
    .mobile-nav__item:hover {
        background-color: transparent;
    }
    
    /* ===== ACTIVE состояния для обратной связи ===== */
    button:active:not(:disabled),
    a:active,
    .btn:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }
    
    .mobile-nav__item:active {
        background-color: #F8F8F8;
        opacity: 0.8;
    }
    
    .products_item:active,
    .catalog_product:active {
        opacity: 0.9;
        transition: opacity 0.1s ease;
    }
    
    /* Touch-friendly размеры кнопок (исключая точки пагинации) */
    button:not(.hero_slider_dot),
    a.btn,
    .button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Убираем outline при фокусе */
    button:focus,
    a:focus {
        outline: none;
    }
    
    /* Предотвращаем zoom при фокусе на input */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* Разрешаем выделение текста в инпутах */
    input,
    textarea,
    [contenteditable="true"] {
        -webkit-user-select: text;
        user-select: text;
    }
}


/* ============================================================================
   2. ФИКС НИЖНЕГО МЕНЮ ПРИ СКРОЛЛЕ
   ============================================================================ */

/* Базовое правило - скрываем на десктопе */
.mobile-nav {
    display: none;
}

@media (max-width: 1199px) {
    .mobile-nav {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        /* Используем min-height вместо фиксированной height для гибкости */
        min-height: calc(72px + env(safe-area-inset-bottom)) !important;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) 16px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-around;
        gap: 8px;
        background-color: #FFFFFF;
        border-top: 1px solid #EFEFEF;
        z-index: 998 !important;  /* ✅ НИЖЕ фильтров (999) */
        transform: none !important;
        will-change: auto;
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Добавляем box-sizing для правильного расчета размеров */
        box-sizing: border-box !important;
    }
    
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Скрываем футер на мобильных, так как используется mobile-nav */
    .footer {
        display: none !important;
    }
    
    .mobile-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px;
        border-radius: 12px;
        text-decoration: none;
        transition: background-color 0.15s ease, opacity 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-nav__item_active {
        background-color: #FFE4EC !important;
    }
    
    .mobile-nav__item_active .mobile-nav__label {
        color: #FF0050 !important;
        font-weight: 700;
    }
    
    .mobile-nav__icon-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-nav__icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
    
    .mobile-nav__label {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        color: #555555;
        text-align: center;
        white-space: nowrap;
    }
}


/* ============================================================================
   3. ФИКС ДЛЯ iOS SAFARI
   ============================================================================ */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 1199px) {
        .mobile-nav {
            position: fixed !important;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        
        body {
            overscroll-behavior-y: none;
            -webkit-overflow-scrolling: touch;
        }
    }
}


/* ============================================================================
   4. МОДАЛЬНЫЕ ОКНА И OVERLAY
   ============================================================================ */

@media (max-width: 1199px) {
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    .modal,
    .overlay {
        z-index: 2000 !important;
    }
}


/* ============================================================================
   5. ДОПОЛНИТЕЛЬНЫЕ ФИКСЫ
   ============================================================================ */

@media (max-width: 1199px) {
    .header {
        position: relative;
        z-index: 500;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .header_overhead_mobile,
    .header_main_mobile {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
}