:root {
    --primary-light: #f8f1e5;
    --secondary-light: #e8d8b5;
    --text-light: #333333;
    --primary-dark: #1a1a1a;
    --secondary-dark: #2a2a2a;
    --text-dark: #f0f0f0;
    --primary-orange: #332010;
    --secondary-orange: #663300;
    --text-orange: #ffd9b3;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover {
    background-color: #f3f4f6;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-image {
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    object-fit: cover;
    margin-left: 0.75rem;
}

.search-result-info {
    flex: 1;
}

.search-result-title {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: #6b7280;
}

.search-result-type {
    font-size: 0.75rem;
    color: #3b82f6;
    background-color: #eff6ff;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.search-loading {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
}



/* dark */
.dark .search-result-title {
    color: var(--text-dark);
}

.dark .search-result-subtitle {
    color: var(--text-dark);
}

.dark .search-result-item {
    background-color: var(--secondary-dark);
    color: var(--text-dark);
}

.dark .search-result-item:hover {
    background-color: #88827d;
}

.dark .search-result-type {
    background-color: var(--secondary-dark);
    color: var(--text-dark);
}

/* oragne */
.orange .search-result-title {
    color: var(--text-orange);
}

.orange .search-result-subtitle {
    color: var(--text-orange);
}

.orange .search-result-item {
    background-color: var(--secondary-orange);
    color: var(--text-orange);
}

.orange .search-result-item:hover {
    background-color: #97714b;
}

.orange .search-result-type {
    background-color: var(--secondary-orange);
    color: var(--text-orange);
}