/**
 * LP Enhanced Search Styles
 * Version: 1.0.1
 */

/* FORCE HIDE CATEGORIES - highest priority */
#input-dropdown ul li.lp-default-cats,
#input-dropdown ul li.lp-wrap-cats,
#input-dropdown ul li[data-catid]:not([data-tagid]),
.lp-default-cats,
.lp-wrap-cats {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* HIDE "What" label and icon before search input */
.lp-suggested-search .input-group-addon,
.lp-suggested-search .input-group-addon-what-icon,
.lp-search-form-what .input-group-addon,
.lp-search-form-what .input-group-addon-what-icon,
.form-group.lp-suggested-search > .input-group-addon,
.form-group.lp-suggested-search > .input-group-addon-what-icon {
    display: none !important;
}

/* Make search input full width and start from beginning */
.lp-suggested-search .dropdown_fields,
.lp-search-form-what .dropdown_fields,
.dropdown_fields.lp-suggested-search,
input.dropdown_fields {
    padding-left: 15px !important;
    text-indent: 0 !important;
    width: 100% !important;
}

/* Remove any left margin/padding from input container */
.what-placeholder,
.lp-search-form-what,
.pos-relative {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ensure the form group takes full width */
.form-group.lp-suggested-search {
    width: 100% !important;
}

/* Dropdown Loading State */
#input-dropdown.lpes-searching {
    position: relative;
}

#input-dropdown.lpes-searching::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: lpes-spin 0.8s linear infinite;
}

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

/* Loading Item */
#input-dropdown ul li.lpes-loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

#input-dropdown ul li.lpes-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: lpes-spin 0.8s linear infinite;
    vertical-align: middle;
}

/* Error State */
#input-dropdown ul li.lpes-error {
    color: #c00;
    text-align: center;
    padding: 15px;
    background: #fff5f5;
}

/* Selected/Highlighted Item (keyboard navigation) */
#input-dropdown ul li.lpes-selected,
#input-dropdown ul li.lpes-highlight {
    background: #363f48 !important;
    color: #fff !important;
}

#input-dropdown ul li.lpes-selected a,
#input-dropdown ul li.lpes-selected span,
#input-dropdown ul li.lpes-highlight a,
#input-dropdown ul li.lpes-highlight span {
    color: #fff !important;
}

#input-dropdown ul li.lpes-selected .lp-loc,
#input-dropdown ul li.lpes-highlight .lp-loc {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Hover enhancement */
#input-dropdown ul li:hover {
    background: #f5f5f5;
    cursor: pointer;
}

#input-dropdown ul li.lpes-selected:hover,
#input-dropdown ul li.lpes-highlight:hover {
    background: #2a3138 !important;
}

/* Content match indicator (Stage 2 results) */
#input-dropdown ul li.lp-content-match {
    border-left: 3px solid #4CAF50;
}

#input-dropdown ul li.lp-content-match::after {
    content: 'in description';
    font-size: 10px;
    color: #999;
    margin-left: 8px;
    font-style: italic;
}

/* Score badge (debug mode) */
#input-dropdown ul li .lpes-score {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #e0e0e0;
    color: #666;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
}

/* Smooth transitions */
#input-dropdown ul li {
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
}

/* No results state */
#input-dropdown ul li.lp-no-results {
    text-align: center;
    padding: 20px;
    color: #999;
}

/* Separator for Stage 2 results */
#input-dropdown ul li.lpes-stage2-separator {
    padding: 8px 15px;
    background: #f5f5f5 !important;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure ALL dropdown items have white background */
#input-dropdown {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    overflow: visible !important;
    overflow-y: auto !important;
    max-height: none !important;
    height: auto !important;
    z-index: 9999 !important;
    position: absolute !important;
    padding-bottom: 5px !important;
}

#input-dropdown ul {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 5px !important;
    list-style: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

#input-dropdown ul li {
    background: #fff !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid #eee !important;
    cursor: pointer !important;
}

#input-dropdown ul li:last-child {
    border-bottom: none !important;
    margin-bottom: 5px !important;
}

#input-dropdown ul li.lp-wrap-title,
#input-dropdown ul li.lp-content-match {
    background: #fff !important;
}

#input-dropdown ul li:hover {
    background: #f5f5f5 !important;
}

/* Fade-in animation for new results */
@keyframes lpes-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#input-dropdown ul li.lpes-new {
    animation: lpes-fadeIn 0.2s ease;
}

/* Rate limit warning */
#input-dropdown ul li.lpes-rate-limited {
    background: #fff3cd;
    color: #856404;
    text-align: center;
    padding: 15px;
    border-left: 3px solid #ffc107;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    #input-dropdown ul li {
        padding: 12px 15px;
    }

    #input-dropdown ul li .lpes-score {
        display: none;
    }

    #input-dropdown ul li.lp-content-match::after {
        display: none;
    }
}

/* Dark theme support (if theme uses dark mode) */
@media (prefers-color-scheme: dark) {
    #input-dropdown.lpes-dark ul li.lpes-loading {
        color: #aaa;
    }

    #input-dropdown.lpes-dark ul li:hover {
        background: #444;
    }
}