/**
 * Quick Search v1.6.3 CSS
 * Fixed CSS scope - all rules now scoped to Quick Search only
 * Mobile-optimized with collapsible header and subcategory bar
 */
.quick-search-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:99999; }
body.quick-search-open { overflow:hidden; }
.quick-search-container { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; height:90%; max-width:1600px; background:#fff; border-radius:12px; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }

/* Header wrapper - collapsible on scroll */
.quick-search-header-wrapper { flex-shrink:0; transition:all 0.3s ease; overflow:hidden; }
.quick-search-header-wrapper.collapsed .quick-search-header > *:not(.search-input-wrapper):not(.quick-search-close) { display:none; }
.quick-search-header-wrapper.collapsed .quick-search-header { padding:10px 15px; }
.quick-search-header-wrapper.collapsed #quick-search-input { padding:10px 40px 10px 40px; font-size:16px; }
.quick-search-header-wrapper.collapsed .quick-search-filters,
.quick-search-header-wrapper.collapsed .subcategory-bar,
.quick-search-header-wrapper.collapsed .recent-searches,
.quick-search-header-wrapper.collapsed .mobile-filters-expanded { display:none !important; }

.quick-search-header { display:flex; align-items:center; gap:15px; padding:20px; border-bottom:1px solid #eee; background:#f8f9fa; border-radius:12px 12px 0 0; flex-wrap:wrap; }
.search-input-wrapper { flex:1; position:relative; min-width:200px; }
#quick-search-input { width:100%; padding:14px 45px 14px 50px; font-size:18px; border:2px solid #ddd; border-radius:8px; outline:none; transition:all 0.2s; }
#quick-search-input:focus { border-color:#3c8dbc; box-shadow:0 0 0 3px rgba(60,141,188,0.15); }
.search-input-wrapper .search-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#888; font-size:18px; }
.search-clear-btn { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:#999; font-size:18px; cursor:pointer; padding:5px; display:none; }
.search-clear-btn:hover { color:#333; }

/* Subcategory bar - Desktop: wrapping chips, Mobile: dropdown */
.subcategory-bar { padding:12px 20px; background:#f0f7fc; border-bottom:1px solid #ddd; }
.subcategory-label { font-size:13px; font-weight:600; color:#3c8dbc; margin-right:10px; }
.subcategory-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.subcategory-chip { padding:6px 14px; background:#fff; border:1px solid #ddd; border-radius:20px; font-size:12px; cursor:pointer; white-space:nowrap; transition:all 0.2s; }
.subcategory-chip:hover { border-color:#3c8dbc; background:#e8f4fc; }
.subcategory-chip.active { background:#3c8dbc; color:#fff; border-color:#3c8dbc; }
/* Mobile subcategory dropdown - hidden on desktop */
.subcategory-dropdown { display:none; }
.subcategory-select { padding:8px 12px; font-size:14px; border:1px solid #ddd; border-radius:6px; background:#fff; flex:1; min-width:150px; }

.category-filter, .brand-filter { padding:14px 20px; font-size:16px; border:2px solid #ddd; border-radius:8px; background:#fff; min-width:180px; transition:all 0.2s; }
.category-filter:focus, .brand-filter:focus { border-color:#3c8dbc; box-shadow:0 0 0 3px rgba(60,141,188,0.15); outline:none; }
.quick-search-close { width:48px; height:48px; min-width:48px; background:#fff; border:2px solid #ddd; border-radius:8px; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#666; transition:all 0.2s; }
.quick-search-close:hover { background:#ff4444; border-color:#ff4444; color:#fff; }
.recent-searches { display:flex; align-items:center; gap:10px; padding:10px 20px; background:#f8f9fa; border-bottom:1px solid #eee; flex-wrap:wrap; }
.recent-label { font-size:13px; color:#888; }
.recent-term { padding:4px 12px; background:#e9ecef; border-radius:15px; font-size:13px; color:#555; cursor:pointer; transition:all 0.2s; }
.recent-term:hover { background:#3c8dbc; color:#fff; }
.quick-search-filters { display:flex; align-items:center; gap:15px; padding:12px 20px; background:#fff; border-bottom:1px solid #eee; flex-wrap:wrap; }
.stock-filter { display:flex; align-items:center; gap:6px; font-size:14px; color:#555; cursor:pointer; }
.stock-filter input { width:18px; height:18px; accent-color:#3c8dbc; }
.sort-filter { padding:8px 15px; font-size:14px; border:1px solid #ddd; border-radius:6px; background:#fff; transition:all 0.2s; }
.sort-filter:focus { border-color:#3c8dbc; outline:none; }
.display-mode { margin-left:auto; font-size:14px; font-weight:600; color:#3c8dbc; }
.quick-search-results { flex:1; overflow-y:auto; padding:20px; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; }
.quick-search-product { background:#fff; border:1px solid #eee; border-radius:8px; padding:15px; cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.quick-search-product:hover { border-color:#3c8dbc; box-shadow:0 4px 12px rgba(60,141,188,0.2); transform:translateY(-2px); }
.quick-search-product.out-of-stock { opacity:0.7; }
.quick-search-product .product-image { position:relative; width:100%; padding-bottom:100%; margin-bottom:8px; background:#f8f9fa; border-radius:6px; overflow:hidden; }
.quick-search-product .product-image img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:90%; max-height:90%; object-fit:contain; }
.quick-search-product .options-badge { position:absolute; top:5px; right:5px; background:#f39c12; color:#fff; width:22px; height:22px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:10px; }
.quick-search-product .product-info { text-align:center; display:flex; flex-direction:column; align-items:center; flex:1; }
.quick-search-product .product-name { font-size:12px; font-weight:600; color:#333; margin-bottom:4px; line-height:1.3; max-height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.quick-search-product .product-model { font-size:10px; color:#888; margin-bottom:4px; }
.quick-search-product .product-price { font-size:14px; font-weight:bold; color:#3c8dbc; margin-bottom:4px; }
.quick-search-product .product-price .price-old { text-decoration:line-through; color:#999; font-weight:normal; font-size:11px; margin-right:5px; }
.quick-search-product .product-price .price-new { color:#dd4b39; }
.quick-search-product .product-stock { font-size:10px; padding:2px 6px; border-radius:3px; margin-top:auto; }
.quick-search-product.in-stock .product-stock { color:#00a65a; background:#e8f5e9; }
.quick-search-product.out-of-stock .product-stock { color:#dd4b39; background:#ffebee; }
.search-loading, .search-empty { text-align:center; padding:60px 20px; color:#888; }
.search-loading i, .search-empty i { font-size:48px; margin-bottom:15px; display:block; }
.search-empty p { margin-bottom:15px; }
.deep-search-btn { padding:10px 20px; background:#28a745; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; margin-bottom:10px; display:block; margin:0 auto 10px auto; }
.deep-search-btn:hover { background:#1e7e34; }
.deep-search-btn i { margin-right:8px; }
.clear-filters-btn { padding:10px 20px; background:#3c8dbc; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; }
.clear-filters-btn:hover { background:#2d6a8a; }
.quick-search-footer { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-top:1px solid #eee; background:#f8f9fa; border-radius:0 0 12px 12px; }
.results-count { color:#666; font-size:14px; }
.load-more-btn { padding:10px 24px; background:#007bff; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; }
.load-more-btn:hover { background:#0056b3; }

/* Active filter states */
.filter-active { border-color:#3c8dbc !important; background:#f0f7fc !important; }
.filter-active.stock-filter { background:#e8f5e9 !important; border-color:#00a65a !important; }
.clear-all-filters { padding:10px 16px; background:#fff; border:2px solid #ddd; border-radius:6px; font-size:13px; cursor:pointer; color:#666; transition:all 0.2s; margin-left:auto; }
.clear-all-filters:hover { background:#ff4444; border-color:#ff4444; color:#fff; }
.clear-all-filters i { margin-right:5px; }

/* Mobile filter toggle button - hidden on desktop */
.mobile-filter-toggle { display:none; padding:8px 16px; background:#e9ecef; border:1px solid #ddd; border-radius:6px; font-size:13px; color:#555; cursor:pointer; }
.mobile-filter-toggle i { margin-right:5px; }
.mobile-filter-toggle.active { background:#007bff; color:#fff; border-color:#007bff; }

/* Mobile filters container - hidden on desktop */
.mobile-filters-expanded { display:none !important; }

/* ==================== */
/* MOBILE OPTIMIZATIONS */
/* ==================== */
@media (max-width:768px) {
    .quick-search-container { width:100%; height:100%; border-radius:0; top:0; left:0; transform:none; }
    
    /* Compact header - single row with search and close */
    .quick-search-header { 
        padding:10px; 
        border-radius:0; 
        gap:8px; 
        flex-wrap:nowrap;
        background:#fff;
    }
    .search-input-wrapper { flex:1; min-width:0; }
    #quick-search-input { 
        padding:10px 10px 10px 38px; 
        font-size:16px; 
        border-width:1px;
        border-radius:6px;
    }
    .search-input-wrapper .search-icon { left:12px; font-size:16px; }
    .quick-search-close { 
        width:40px; 
        height:40px; 
        min-width:40px; 
        font-size:18px;
        border-width:1px;
    }
    
    /* Hide dropdowns in header on mobile - move to filters */
    .quick-search-header .category-filter,
    .quick-search-header .brand-filter { 
        display:none; 
    }
    
    /* Compact filters row */
    .quick-search-filters {
        padding:8px 10px;
        gap:8px;
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .quick-search-filters::-webkit-scrollbar { display:none; }
    
    /* Show mobile filter toggle */
    .mobile-filter-toggle { display:inline-flex; align-items:center; flex-shrink:0; }
    
    /* Mobile category/brand in filters area */
    .mobile-filters-expanded { 
        display:none !important; 
        padding:8px 10px;
        background:#f8f9fa;
        border-bottom:1px solid #eee;
        gap:8px;
    }
    .mobile-filters-expanded.show { display:flex !important; flex-wrap:wrap; }
    .mobile-filters-expanded select {
        flex:1;
        min-width:45%;
        padding:8px 10px;
        font-size:14px;
        border:1px solid #ddd;
        border-radius:6px;
    }
    
    .stock-filter { font-size:13px; flex-shrink:0; }
    .stock-filter input { width:16px; height:16px; }
    .sort-filter { 
        padding:6px 10px; 
        font-size:13px; 
        flex-shrink:0;
        min-width:auto;
    }
    .display-mode { 
        font-size:12px; 
        white-space:nowrap;
        flex-shrink:0;
    }
    
    /* Hide recent searches on mobile to save space */
    .recent-searches { 
        display:none; 
    }
    
    /* Mobile subcategory bar - show dropdown instead of chips */
    .subcategory-bar {
        padding:8px 10px;
    }
    .subcategory-chips { display:none !important; }
    .subcategory-dropdown { display:flex !important; align-items:center; gap:8px; flex:1; }
    .subcategory-label { margin-right:0; font-size:12px; flex-shrink:0; }
    
    /* Results area - more padding for scroll */
    .quick-search-results { padding:10px; }
    
    /* 2 column grid on mobile */
    .products-grid { 
        grid-template-columns:repeat(2,1fr); 
        gap:10px; 
    }
    
    /* Compact product cards */
    .quick-search-product { 
        padding:8px; 
        border-radius:6px;
    }
    .quick-search-product .product-image { 
        padding-bottom:80%; 
        margin-bottom:8px;
        border-radius:4px;
    }
    .quick-search-product .product-name { 
        font-size:12px; 
        margin-bottom:4px;
        -webkit-line-clamp:2;
    }
    .quick-search-product .product-model { 
        font-size:10px; 
        margin-bottom:4px; 
    }
    .quick-search-product .product-price { 
        font-size:14px; 
        margin-bottom:4px; 
    }
    .quick-search-product .product-price .price-old { font-size:11px; }
    .quick-search-product .product-stock { font-size:10px; }
    .quick-search-product .options-badge { 
        width:20px; 
        height:20px; 
        font-size:10px;
        top:4px;
        right:4px;
    }
    
    /* Compact footer */
    .quick-search-footer { 
        padding:10px; 
        border-radius:0;
        gap:10px;
    }
    .results-count { font-size:12px; }
    .load-more-btn { 
        padding:10px 20px; 
        font-size:13px;
        flex:1;
    }
}

/* Extra small screens - list view */
@media (max-width:400px) {
    .products-grid { 
        grid-template-columns:1fr; 
        gap:8px;
    }
    .quick-search-product { 
        flex-direction:row; 
        padding:10px;
        align-items:center;
    }
    .quick-search-product .product-image { 
        width:70px; 
        min-width:70px; 
        padding-bottom:0;
        height:70px;
        margin-bottom:0; 
        margin-right:12px; 
    }
    .quick-search-product .product-info {
        flex:1;
        min-width:0;
    }
    .quick-search-product .product-name { 
        font-size:13px;
        -webkit-line-clamp:1;
    }
    .quick-search-product .product-price { font-size:15px; }
}