/* ========================================================================
   MOBILE SEARCH BAR - Below Header (Inline Search)
   ======================================================================== */

@media (max-width: 767px) {
    /* Mobile search row - separate row, appears below main header */
    #header .mobile-search-row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #fff !important;
    }

    #header .mobile-search-row .col-12 {
        padding: 0 !important;
    }

    /* Hide search icon since we have inline search bar */
    #header .nav-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Also hide the search icon link specifically */
    #header .nav-search .nav-icon-item,
    #header .nav-search a {
        display: none !important;
    }

    /* Force hide search icon in nav */
    #header .nav-icon li.nav-search {
        display: none !important;
    }

    /* Container for search bar */
    #header .mobile-search-bar {
        width: 100% !important;
        padding: 12px 16px !important;
        background-color: #fafafa !important;
        border-bottom: 1px solid #e5e5e5 !important;
        margin: 0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    }

    /* Search form styling */
    #header .mobile-search-form {
        display: flex !important;
        align-items: center !important;
        background-color: #ffffff !important;
        border: 1px solid #ddd !important;
        border-radius: 12px !important;
        padding: 0 !important;
        height: 46px !important;
        position: relative !important;
        transition: all 0.25s ease !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    #header .mobile-search-form:hover {
        border-color: #bbb !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    /* Search input field */
    #header #mobile-inline-search-input {
        flex: 1 !important;
        border: none !important;
        background: transparent !important;
        padding: 13px 90px 13px 18px !important;
        font-size: 15px !important;
        line-height: 20px !important;
        color: #1a1a1a !important;
        outline: none !important;
        height: 46px !important;
        -webkit-appearance: none !important;
        font-weight: 400 !important;
    }

    #header #mobile-inline-search-input::placeholder {
        color: #888 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    #header #mobile-inline-search-input:focus {
        color: #000 !important;
    }

    /* Clear button */
    #header .mobile-search-form .clear-btn {
        position: absolute !important;
        right: 48px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
        display: none !important; /* Hidden by default */
        align-items: center !important;
        justify-content: center !important;
        background-color: #e0e0e0 !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    /* When button is shown by JavaScript, use flex layout */
    #header .mobile-search-form .clear-btn[style*="display: flex"] {
        display: flex !important;
    }

    #header .mobile-search-form .clear-btn:hover {
        background-color: #d0d0d0 !important;
    }

    #header .mobile-search-form .clear-btn:active {
        background-color: #c0c0c0 !important;
        transform: translateY(-50%) scale(0.9) !important;
    }

    #header .mobile-search-form .clear-btn i {
        font-size: 12px !important;
        color: #666 !important;
    }

    /* Search button - cleaner look */
    #header .mobile-search-form .search-btn {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
    }

    #header .mobile-search-form .search-btn:hover {
        background-color: #f5f5f5 !important;
    }

    #header .mobile-search-form .search-btn:active {
        background-color: #e8e8e8 !important;
        transform: translateY(-50%) scale(0.95) !important;
    }

    #header .mobile-search-form .search-btn i {
        font-size: 18px !important;
        color: #555 !important;
    }

    /* Loading indicator */
    #header .mobile-inline-search-loading {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: none !important;
    }

    #header .mobile-inline-search-loading.htmx-request {
        display: flex !important;
    }

    #header .mobile-inline-search-loading i {
        font-size: 16px !important;
        color: #666 !important;
        animation: spin 1s linear infinite !important;
    }

    /* Search results dropdown - ULTRA AGGRESSIVE */
    #header #mobile-inline-search-results {
        position: absolute !important;
        top: 100% !important; /* Right below search bar */
        left: 16px !important; /* Left margin to match search bar padding */
        right: 16px !important; /* Right margin to match search bar padding */
        margin-top: 0 !important;
        background-color: #fff !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid #e0e0e0 !important;
        border-top: none !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 9999 !important; /* Above backdrop */
        display: none !important;
        width: auto !important; /* Auto width to respect left/right margins */
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
    }

    /* CRITICAL: Form inputs must be BELOW dropdown */
    #header .mobile-search-form input,
    #header .mobile-search-form button,
    #header .mobile-search-form .clear-btn,
    #header .mobile-search-form .search-btn {
        z-index: 1 !important; /* LOW z-index */
    }

    /* Form itself must not overlay dropdown */
    #header .mobile-search-form {
        z-index: auto !important;
        position: relative !important;
    }

    /* Auto-show when has inner content - MATCH DESKTOP! */
    #header #mobile-inline-search-results:has(.search-suggests-results-inner) {
        display: block !important;
        animation: slideDown 0.2s ease-out !important;
    }

    /* Also show when explicitly set by JavaScript */
    #header #mobile-inline-search-results.show {
        display: block !important;
    }

    /* Also show when has visible class */
    #header #mobile-inline-search-results.visible {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* CRITICAL: Parent must not clip dropdown */
    #header .mobile-search-bar {
        position: relative !important;
        overflow: visible !important; /* MUST be visible! */
        z-index: 100 !important;
    }

    /* CRITICAL: Form must not clip dropdown */
    #header .mobile-search-form {
        position: relative !important;
        overflow: visible !important; /* MUST be visible! */
    }

    /* Inner container with scrollbar */
    #header #mobile-inline-search-results .search-suggests-results-inner {
        display: block !important; /* MUST be visible */
        visibility: visible !important;
        opacity: 1 !important;
        max-height: calc(100vh - 200px) !important;
        min-height: 50px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        padding: 8px 15px !important; /* 8px top/bottom, 15px left/right */
        width: 100% !important; /* FORCE FULL WIDTH - FIX 425px bug */
        max-width: 100% !important; /* No max width limit */
        box-sizing: border-box !important; /* Include padding in width */
    }

    /* Make sure all child elements are visible too */
    #header #mobile-inline-search-results .search-suggests-results-inner > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Backdrop overlay - starts below header */
    #mobile-search-backdrop {
        position: fixed !important;
        top: 110px !important; /* Below fixed header + search bar + small buffer */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: -500 !important; /* Behind all content but still clickable */
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    /* Show backdrop when search has results */
    #mobile-search-backdrop.show {
        display: block !important;
        opacity: 1 !important;
    }

    /* Adjust search results z-index to be above backdrop */
    #header #mobile-inline-search-results {
        z-index: 9999 !important; /* Above backdrop */
    }

    /* Animation for dropdown */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Animation for backdrop fade in */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Smooth animations */
    #header #mobile-inline-search-results:has(.search-suggests-results-inner) {
        display: block !important;
        animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #mobile-search-backdrop.show {
        animation: fadeIn 0.3s ease !important;
    }


    /* Focus state for search form */
    #header .mobile-search-form:focus-within {
        border-color: #999 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    #header .mobile-search-form:focus-within .search-btn i {
        color: #333 !important;
    }

    /* Adjust main header for search row */
    #header .wrapper-header {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* Hide desktop search column on mobile */
    #header .desktop-search-col {
        display: none !important;
    }

    /* Ensure mobile search is visible */
    #header .mobile-search-row {
        display: block !important;
    }
}

/* Desktop - hide mobile search */
@media (min-width: 768px) {
    #header .mobile-search-row,
    #header .mobile-search-bar {
        display: none !important;
    }
}

/* Animation for spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Touch optimization */
@media (max-width: 767px) {
    #header .mobile-search-form .search-btn {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    #header #mobile-inline-search-input {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
}

/* Focus state */
@media (max-width: 767px) {
    #header .mobile-search-form:focus-within {
        background-color: #fff !important;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
    }

    #header .mobile-search-form:focus-within .search-btn i {
        color: #333 !important;
    }
}

/* Responsive adjustments */
@media (max-width: 360px) {
    #header .mobile-search-bar {
        padding: 6px 8px !important;
    }

    #header #mobile-inline-search-input {
        font-size: 13px !important;
        padding: 8px 40px 8px 12px !important;
    }

    #header .mobile-search-form .search-btn {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    #header .mobile-search-bar {
        padding: 10px 16px !important;
    }

    #header .mobile-search-form {
        height: 44px !important;
    }

    #header #mobile-inline-search-input {
        height: 44px !important;
        font-size: 15px !important;
    }
}

/* Ensure proper stacking */
@media (max-width: 767px) {
    #header .main-header {
        position: relative !important;
        z-index: 100 !important;
    }

    #header .mobile-search-bar {
        position: relative !important;
        z-index: 99 !important;
    }

    #header #mobile-inline-search-results {
        z-index: 1000 !important;
    }
}

/* Clean appearance */
@media (max-width: 767px) {
    #header .mobile-search-form * {
        box-sizing: border-box !important;
    }

    /* Remove default form styles */
    #header .mobile-search-form input[type="text"] {
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }

    #header .mobile-search-form button[type="submit"] {
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }
}

/* Extra specificity to hide search icon */
@media (max-width: 767px) {
    body #header .nav-search,
    body #header li.nav-search,
    body #header .nav-icon li.nav-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    body #header .nav-search * {
        display: none !important;
    }
}

/* ========================================================================
   ULTRA NUCLEAR - Force EVERYTHING (Element exists but not showing!)
   ======================================================================== */
@media (max-width: 767px) {
    /* FORCE SHOW - Element exists but hidden */
    body #header #mobile-inline-search-results.show,
    body #header #mobile-inline-search-results.visible,
    body #header #mobile-inline-search-results:has(.search-suggests-results-inner) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important; /* ULTRA HIGH - Above form inputs */
        position: absolute !important;
        top: 100% !important;
        left: 16px !important; /* Left margin */
        right: 16px !important; /* Right margin */
        width: auto !important; /* Auto width to respect margins */
        min-height: 50px !important; /* Force height */
        max-height: none !important;
        height: auto !important;
        pointer-events: auto !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important; /* Force white bg */
        border: 1px solid #e0e0e0 !important; /* Clean border */
        border-top: none !important; /* No top border (connects to search bar) */
        border-radius: 0 0 8px 8px !important; /* Rounded bottom corners */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* Subtle shadow */
    }

    /* CRITICAL: Form elements must be BELOW dropdown */
    body #header .mobile-search-form,
    body #header .mobile-search-form input,
    body #header .mobile-search-form button,
    body #header .mobile-search-form .clear-btn,
    body #header .mobile-search-form .search-btn,
    body #header .mobile-search-form .tf-btn {
        z-index: 1 !important; /* LOW - below dropdown */
    }

    /* Search input specifically */
    body #header #mobile-inline-search-input {
        z-index: 1 !important;
    }

    /* Inner content must be visible */
    body #header #mobile-inline-search-results .search-suggests-results-inner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 50px !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
        background: white !important;
        padding: 8px 15px !important; /* 8px top/bottom, 15px left/right */
        width: 100% !important; /* FORCE FULL WIDTH */
        max-width: 100% !important; /* No max width */
        box-sizing: border-box !important; /* Include padding */
    }

    /* All children must be visible */
    body #header #mobile-inline-search-results .search-suggests-results-inner * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Suggestion groups must be visible */
    body #header #mobile-inline-search-results .suggestion-group {
        display: block !important;
        visibility: visible !important;
    }

    /* ALL parent containers MUST not hide */
    body #header .mobile-search-row,
    body #header .mobile-search-row .col-12,
    body #header .mobile-search-bar,
    body #header .mobile-search-form,
    body #header .tf-form-search {
        overflow: visible !important;
        position: relative !important;
        z-index: auto !important;
        height: auto !important;
        max-height: none !important;
        clip: auto !important;
        clip-path: none !important;
    }

    /* Header itself must not hide */
    body #header {
        overflow: visible !important;
        z-index: 100 !important;
    }

    /* Container must not hide */
    body .container,
    body .container-fluid,
    body .row {
        overflow: visible !important;
    }
}

/* ========================================================================
   MOBILE SEARCH SUGGESTIONS - IMPROVED STYLING
   ======================================================================== */
@media (max-width: 767px) {
    /* Suggestion group container - add margin for backdrop visibility */
    .search-suggests-results-inner {
        padding: 8px 12px !important; /* Add horizontal padding */
    }

    /* Group titles - simple text with line below */
    .search-suggests-results-inner .suggestion-group-title {
        padding: 10px 0 8px 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #666 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        background: transparent !important;
        border-bottom: 1px solid #e5e5e5 !important;
        margin-bottom: 8px !important;
        position: static !important;
    }

    .search-suggests-results-inner .suggestion-group-title span {
        display: inline-block !important;
    }

    /* Remove sticky behavior on mobile */
    .search-suggests-results-inner .suggestion-group {
        border-bottom: none !important;
        margin-bottom: 16px !important;
    }

    .search-suggests-results-inner .suggestion-group:last-child {
        margin-bottom: 0 !important;
    }

    /* Filter suggestions - outline icons instead of filled */
    .search-suggests-results-inner .filter-suggestion .icon-box {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 1.5px solid #333 !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }

    .search-suggests-results-inner .filter-suggestion .icon-box i {
        font-size: 16px !important;
        color: #333 !important;
    }

    .search-suggests-results-inner .filter-suggestion:hover .icon-box {
        background: #f5f5f5 !important;
        border-color: #000 !important;
        transform: scale(1.05) !important;
    }

    .search-suggests-results-inner .filter-suggestion:hover .icon-box i {
        color: #000 !important;
    }

    /* Search result items */
    .search-suggests-results-inner .search-result-item {
        display: flex !important;
        align-items: center !important;
        padding: 12px 8px !important;
        gap: 12px !important;
        border-radius: 8px !important;
        border-bottom: none !important;
        margin-bottom: 4px !important;
        transition: all 0.15s ease !important;
    }

    .search-suggests-results-inner .search-result-item:hover {
        background: #f8f8f8 !important;
        transform: translateX(2px) !important;
    }

    .search-suggests-results-inner .search-result-item:active {
        background: #f0f0f0 !important;
    }

    /* Product suggestions styling */
    .search-suggests-results-inner .product-suggestion .img-box {
        width: 56px !important;
        height: 56px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #f5f5f5 !important;
        flex-shrink: 0 !important;
    }

    .search-suggests-results-inner .product-suggestion .img-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .search-suggests-results-inner .product-suggestion .box-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .search-suggests-results-inner .product-suggestion .title {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .search-suggests-results-inner .product-suggestion .product-meta {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 4px 0 !important;
        flex-wrap: wrap !important;
    }

    .search-suggests-results-inner .product-suggestion .product-meta span {
        font-size: 9px !important;
        padding: 2px 6px !important;
        background: #000 !important;
        color: #fff !important;
        border-radius: 3px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }

    .search-suggests-results-inner .product-suggestion .price {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #000 !important;
    }

    /* View all button */
    .search-suggests-results-inner .btn-outline-dark {
        padding: 12px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: 1.5px solid #333 !important;
        color: #333 !important;
        transition: all 0.2s ease !important;
    }

    .search-suggests-results-inner .btn-outline-dark:hover {
        background: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
    }

    .search-suggests-results-inner .btn-outline-dark i {
        font-size: 14px !important;
    }

    /* No results styling */
    .search-suggests-results-inner .no-results {
        padding: 32px 16px !important;
        text-align: center !important;
    }

    .search-suggests-results-inner .no-results i {
        font-size: 40px !important;
        color: #d1d5db !important;
        margin-bottom: 12px !important;
    }

    .search-suggests-results-inner .no-results p {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        margin: 0 0 8px 0 !important;
    }

    .search-suggests-results-inner .no-results small {
        font-size: 12px !important;
        color: #6b7280 !important;
    }
}