/* Two separate search bars - one for desktop, one for mobile */

/* Desktop - Show desktop search bar with full width, hide mobile search bar */
@media (min-width: 768px) {
    /* Show desktop search bar (next to buttons) */
    #wo_home_search_desktop {
        display: inline-block !important;
        flex: 1 1 auto !important;
        max-width: none !important;
        margin: 0 20px !important;
        width: 25% !important;
    }
    
    #wo_home_search_desktop .search-container {
        width: 100% !important;
    }

    #wo_home_search_desktop .w-full {
        width: 100% !important;
    }
    
    #wo_home_search_desktop .navbar-form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #wo_home_search_desktop .form-group {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #wo_home_search_desktop .inner-addon {
        width: 100% !important;
    }
    
    #wo_home_search_desktop .form-control {
        width: 100% !important;
    }
    
    /* Hide mobile search bar */
    #wo_home_search {
        display: none !important;
    }
}

/* Mobile - Hide desktop search bar, show mobile search bar below buttons */
@media (max-width: 767px) {
    /* Hide desktop search bar */
    #wo_home_search_desktop {
        display: none !important;
    }
    
    /* Show and style mobile search bar */
    /* Prevent horizontal scroll */
    .navbar-fixed-top,
    .navbar-fixed-top .header-fixed1000 {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100vw !important;
    }
    
    /* Extend the white header background to include search bar */
    .navbar-fixed-top,
    .navbar-fixed-top .header-fixed1000,
    .navbar-fixed-top .container-fluid {
        min-height: auto !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    
    /* Prevent container from overflowing */
    .navbar .container-fluid {
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Add margin to body to prevent content being hidden under fixed header */
    body {
        padding-top: 50px !important;
        overflow-x: hidden !important;
    }
    
    /* Position search bar below all header buttons with full width */
    #wo_home_search {
        width: 100% !important;
        padding: 0 15px 12px 15px !important;
        margin: 0 !important;
        clear: both !important;
        display: block !important;
        float: none !important;
        order: 999 !important;
        box-sizing: border-box !important;
    }
    
    #wo_home_search .search-container {
        width: 100%;
        display: block;
        max-width: 100%;
    }
    
    #wo_home_search .navbar-form {
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        max-width: 100%;
    }
    
    #wo_home_search .form-group {
        width: 100%;
        margin: 0;
        max-width: 100%;
    }
    
    #wo_home_search .inner-addon {
        width: 100%;
        position: relative;
        max-width: 100%;
    }
    
    /* Better search input styling */
    #wo_home_search .mobile-search-input,
    #wo_home_search .search-input {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        padding: 12px 12px 12px 42px !important;
        border-radius: 8px !important;
        border: 1px solid #e0e0e0 !important;
        background-color: #f5f5f5 !important;
        box-sizing: border-box !important;
    }
    
    #wo_home_search .mobile-search-input:focus,
    #wo_home_search .search-input:focus {
        background-color: #fff !important;
        border-color: #1877f2 !important;
        outline: none !important;
    }
    
    /* Search icon positioning - make it visible */
    #wo_home_search .glyphicon {
        position: absolute !important;
        left: -5px !important;
        top: 30% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #wo_home_search .glyphicon svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Make container-fluid use flexbox to control order */
    .navbar .container-fluid {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    
    /* Ensure left side (logo, toggle) stays on left */
    .wow_hdr_innr_left {
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
        flex: 0 0 auto !important;
    }
    
    /* Ensure header buttons stay on right */
    #head_menu_rght {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        order: 2 !important;
        flex: 1 1 auto !important;
        margin-left: auto !important;
    }
}