.wc-search-wrapper {position: relative;display: flex;align-items: center;}

/* Spinner Styles 
.wc-search-spinner {display: none;position: absolute;right: 25px;top: 10px;width: 18px;height: 18px;border: 2px solid rgba(0,0,0,0.1);
    border-top-color: #007cba; border-radius: 50%;animation: wc-spin 0.6s linear infinite;
    z-index: 5;}*/
/* Better spinner for bottom search bars */
.wc-search-spinner { display: none;position: absolute;right: 10px;top: 50%;
/*transform: translateY(-50%);*/width: 16px;height: 16px;border: 2px solid rgba(0,0,0,0.1);border-top-color: #007cba;border-radius: 50%;animation: wc-spin 0.6s linear infinite;}

.wc-search-wrapper.is-loading .wc-search-spinner {display: block;}

@keyframes wc-spin {to { transform: rotate(360deg); }}

/* Results Dropdown Styling */
.wc-search-results {position: absolute;top: 100%;left: 0;width: 100%;background: #ffffff;
border: 1px solid #e2e8f0;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);z-index: 999999;
display: none;border-radius: 8px;
    /* THE SCROLLBAR MAGIC */
    max-height: 500px;    /* Limits the height so it doesn't cover the whole screen */
    overflow-y: auto;     /* Enables the scrollbar when content exceeds max-height */
    overflow-x: hidden;   /* Prevents horizontal wobbling */
    
    /* Custom Scrollbar Styling (Chrome, Safari, Edge) */
    scrollbar-width: thin;          /* For Firefox */
    scrollbar-color: #007cba #f1f1f1; /* For Firefox (Thumb & Track) */
}

/* Chrome, Safari, and newer Edge scrollbar styling */
.wc-search-results::-webkit-scrollbar {width: 8px;}

.wc-search-results::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 0 8px 8px 0; /* Matches the dropdown corner */
}

.wc-search-results::-webkit-scrollbar-thumb {
    background: #007cba; /* Matches your theme's blue */
    border-radius: 10px;
    border: 2px solid #f1f1f1; /* Creates a padding effect */
}

.wc-search-results::-webkit-scrollbar-thumb:hover {
    background: #005a87; /* Darker blue on hover */
}

.search-item {display: flex;
    /* padding: 10px; */padding: 15px 12px; border-bottom: 1px solid #f0f0f0;text-decoration: none;
    align-items: center;color: #333;
}

.search-item:hover { background: #f9f9f9; }

.search-item img { margin-right: 12px; border-radius: 3px; }

.search-item .title { font-weight: bold; font-size: 14px; display: block; color: black;}

.search-item .price { font-size: 12px; color: #666; }
.search-item .woocommerce-Price-amount.amount {
    margin: 5px;
    position: relative;
    font-size: 16px;
    top: -15px;
}

span.woocommerce-Price-amount.amount {margin: 5px;}

p.no-results {color: black;padding: 5px;}

.view-all-link {display: block;text-align: center;padding: 10px;background: #f1f1f1;font-weight: bold;font-size: 12px;color: #007cba !important;}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .wc-search-results {
        width: 93vw; /* Almost full width on mobile */
        left: 50% !important;
        transform: translateX(-50%);
        max-height: 50vh; /* Don't cover the whole screen */
    }
    .search-item .title {
        font-weight: bold;
        font-size: 12px;
        display: block;
        color: black;
    }
        .single-product .price del+ins {
        font-size: 12px;
        font-weight: normal;
    }
}

/* Class to flip the dropdown upward */
.wc-search-results.open-upward {
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 0px;
    margin-top: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.15);
}
.wc-search-results.open-upward::-webkit-scrollbar-track {
    border-radius: 8px 8px 0 0;
}
/* Ensure the footer bar doesn't hide our results */
.wc-search-wrapper {
    z-index: 99999;
}
.search-group {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    background: #f3f4f6;
    color: #555;
    border-bottom: 1px solid #e5e7eb;
}
.search-item.type-writer img {
    background: #f9fafb;
    padding: 6px;
}