/* ========================================
   GLOBAL MOBILE FIXES
   Fixes for header, cart icon, and general overflow issues
   ======================================== */

/* Prevent horizontal scroll globally */
html, body {
    overflow-x: hidden !important;
}

body {
    position: relative;
}

/* Mobile specific fixes */
@media (max-width: 767px) {

    /* CRITICAL: Search results must NOT be hidden by overflow */
    .search_result,
    .mobile-search .search_result,
    .main-search .search_result,
    .main-search.mobile-search .search_result {
        position: relative !important;
        z-index: 2147483647 !important;
        overflow: visible !important;
    }

    .search_product,
    .mobile-search .search_product,
    .main-search .search_product,
    .main-search.mobile-search .search_product {
        position: absolute !important;
        z-index: 2147483647 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        top: 0 !important;
        width: 100% !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        max-height: 400px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Allow overflow on search containers */
    .main-search,
    .main-search.mobile-search,
    .mobile-header .main-search {
        overflow: visible !important;
        z-index: 2147483647 !important;
    }

    /* Do NOT set position on .mobile-search here - let critical CSS handle it */

    /* Fix all containers on mobile only */
    .container-fluid {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* Header fixes - allow vertical overflow for search */
    header,
    .header,
    .header-area,
    .header-top,
    .header-bottom {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100vw !important;
        position: relative;
    }

    /* Navigation fixes */
    nav,
    .navbar,
    .navigation {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Cart icon fixes - CRITICAL */
    .cart-icon,
    .cart-wrapper,
    .header-cart,
    .shopping-cart,
    .minicart,
    .cart-btn,
    .cart-area {
        position: relative !important;
        right: 0 !important;
        max-width: fit-content !important;
    }

    /* Cart dropdown */
    .cart-dropdown,
    .mini-cart,
    .cart-popup {
        right: 0 !important;
        left: auto !important;
        max-width: 90vw !important;
        transform: none !important;
    }

    /* Header right section */
    .header-right,
    .header-icons,
    .header-action {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    /* Logo */
    .logo,
    .header-logo {
        max-width: 150px !important;
    }

    .logo img,
    .header-logo img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Search bar */
    .search-form,
    .header-search,
    .search-wrapper {
        max-width: 100% !important;
        margin: 5px 0 !important;
    }

    .search-form input,
    .header-search input {
        max-width: 100% !important;
    }

    /* Fix rows that might overflow - allow vertical for search */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* Column padding adjustments */
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Images responsive */
    img {
        max-width: 100% !important;
        /* height: auto !important; */
    }

    /* Tables scroll */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Product grids */
    .product-grid,
    .products-wrapper,
    .product-list {
        overflow-x: hidden !important;
    }

    /* Owl carousel fixes */
    .owl-carousel,
    .owl-stage-outer {
        overflow: hidden !important;
    }

    /* Buttons full width on small screens */
    .mobile-full-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Top bar adjustments */
    .top-bar,
    .header-top-bar {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    /* Category menu */
    .category-menu,
    .main-menu,
    .primary-menu {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Dropdown menus */
    .dropdown-menu {
        position: absolute !important;
        max-width: 90vw !important;
        left: 0 !important;
        right: auto !important;
    }

    /* Social icons in header */
    .social-icons,
    .header-social {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Contact info in header */
    .header-contact,
    .contact-info {
        font-size: 12px !important;
    }

    /* User menu */
    .user-menu,
    .account-menu {
        position: relative !important;
    }

    /* Badge on cart */
    .cart-badge,
    .badge,
    .cart-count {
        font-size: 10px !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
    }

    /* Sticky header adjustments */
    .sticky-header,
    .header.sticky {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Mobile menu toggle */
    .mobile-menu-toggle,
    .menu-toggle,
    .hamburger {
        padding: 10px !important;
        margin-right: 10px !important;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    img, svg, video, canvas, audio, iframe, embed, object {
        max-width: 100% !important;
    }

    /* Header compact mode */
    .header-middle,
    .header-main {
        padding: 10px 5px !important;
    }

    /* Cart icon smaller */
    .cart-icon i,
    .cart-btn i {
        font-size: 20px !important;
    }

    /* Logo smaller */
    .logo {
        max-width: 120px !important;
    }

    /* Search more compact */
    .search-form input {
        font-size: 13px !important;
        padding: 8px !important;
    }

    /* Top bar hide if needed */
    .header-top-bar .hide-mobile {
        display: none !important;
    }

    /* Product images */
    .product-img,
    .product-image {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Forms */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        max-width: 100% !important;
    }
}

/* Landscape phone specific */
@media (max-width: 767px) and (orientation: landscape) {
    .header {
        padding: 5px 10px !important;
    }

    .logo {
        max-width: 100px !important;
    }
}

/* Fix for specific common issues */
.no-overflow {
    overflow-x: hidden !important;
}

.full-width-mobile {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure padding doesn't add to width */
* {
    box-sizing: border-box !important;
}

/* ========================================
   CRITICAL MOBILE SEARCH FIXES - FINAL
   Ensure search results are NEVER hidden
   ======================================== */
@media (max-width: 767px) {

    /* Do NOT override mobile-header or mobile-search positioning here */
    /* Let mobile-search-fix-critical.css handle all positioning */

    /* Force search elements to be visible and on top */
    .search_result,
    .mobile-search .search_result,
    .main-search.mobile-search .search_result {
        position: relative !important;
        z-index: 2147483647 !important;
        overflow: visible !important;
    }

    .search_product,
    .mobile-search .search_product,
    .main-search.mobile-search .search_product {
        position: absolute !important;
        z-index: 2147483647 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        max-height: 400px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Override any parent overflow that might hide search */
    body,
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}