/* Inline-Schnellsuche in der Einkaufsliste (shopping-list-inline-search.js).
   Suchzeile direkt in der Liste + kompakte Produktvorschläge darunter. */

.sl-inline-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--space-8) 0 var(--space-4);
}

/* Lupe als CSS-Icon, damit Label und Input direkt benachbart bleiben (a11y). */
.sl-inline-search::before {
    content: "🔍";
    position: absolute;
    left: 12px;
    font-size: var(--text-15);
    pointer-events: none;
    opacity: 0.7;
}

.sl-inline-search-input {
    width: 100%;
    padding: 11px 38px 11px 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--text-16);
}

.sl-inline-search-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.sl-inline-search-clear {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-14);
}

/* Vorschlagsliste */
.sl-inline-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: var(--space-4) 0 var(--space-12);
}

.sl-inline-results[hidden] {
    display: none;
}

.sl-inline-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    width: 100%;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-size: var(--text-15);
    transition:
        background 0.15s,
        border-color 0.15s;
}

.sl-inline-card:focus-visible {
    background: var(--accent-bg);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.sl-inline-thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--input-bg);
    border: 1px solid var(--border);
}

/* Platzhalter-SVG ("Kein Bild") füllt den Rahmen statt gedehnt zu wirken. */
.sl-inline-thumb.list-item-image--fallback {
    object-fit: contain;
    padding: 3px;
}

.sl-inline-card-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-inline-card-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.sl-inline-store {
    font-size: var(--text-12);
    color: var(--accent);
    white-space: nowrap;
}

.sl-inline-score {
    font-size: var(--text-12);
    font-weight: 600;
    padding: var(--space-2) 7px;
    border-radius: var(--radius-pill);
    color: #fff;
    white-space: nowrap;
    /* Grau als Default; die data-tier-Regeln unten setzen die Ampelfarbe. */
    background: #6b7280;
}

.sl-inline-score[data-tier="green"] {
    background: var(--color-eco);
}

.sl-inline-score[data-tier="amber"] {
    background: var(--warning);
}

.sl-inline-score[data-tier="red"] {
    background: #ef4444;
}

.sl-inline-card-plus {
    font-size: var(--text-18);
    color: var(--accent);
    line-height: 1;
}

/* "Weitere anzeigen" am Ende der Store-Browse-Liste (store-catalog.js). */
.sl-inline-load-more {
    align-self: center;
    margin-top: var(--space-4);
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--accent);
    font-size: var(--text-14);
    cursor: pointer;
}

/* Hover-Effekte nur für echte Zeigegeräte: auf Touch bleibt der
   Hover-Zustand nach dem Tap kleben, bis woanders hingetippt wird. */
@media (hover: hover) and (pointer: fine) {
    .sl-inline-search-clear:hover {
        background: var(--accent-bg);
        color: var(--accent);
    }

    .sl-inline-card:hover {
        background: var(--accent-bg);
        border-color: var(--accent);
    }
}