/*
 * Ersatzteilkatalog Search Component
 *
 * All visual properties are exposed as CSS custom properties on .etk-search-wrapper.
 * Override them in your theme to match your brand — no need to touch selectors.
 *
 * Example theme override:
 *
 *   .etk-search-wrapper {
 *     --etk-input-border: 1px solid #333;
 *     --etk-button-bg: #c00;
 *     --etk-button-color: #fff;
 *     --etk-results-shadow: 0 8px 24px rgba(0,0,0,.15);
 *   }
 */

/* ── Variables ──────────────────────────────────────────── */

.etk-search-wrapper {
    /* Spacing */
    --etk-search-gap: 0;

    /* Input */
    --etk-input-padding: 0.6em 0.8em;
    --etk-input-font-size: inherit;
    --etk-input-bg: #fff;
    --etk-input-color: inherit;
    --etk-input-border: 1px solid #ccc;
    --etk-input-radius: 0;
    --etk-input-focus-border-color: currentColor;

    /* Button */
    --etk-button-padding: 0.6em 1.2em;
    --etk-button-font-size: inherit;
    --etk-button-bg: #333;
    --etk-button-color: #fff;
    --etk-button-border: 1px solid #333;
    --etk-button-radius: 0;
    --etk-button-hover-bg: #555;
    --etk-button-hover-border: 1px solid #555;

    /* Dropdown */
    --etk-results-bg: #fff;
    --etk-results-border: 1px solid #ccc;
    --etk-results-radius: 0;
    --etk-results-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --etk-results-max-height: 400px;

    /* Result items */
    --etk-item-padding: 0.6em 0.8em;
    --etk-item-border-bottom: 1px solid #eee;
    --etk-item-hover-bg: #f5f5f5;
    --etk-item-active-bg: #f0f0f0;

    /* Text */
    --etk-text-color: inherit;
    --etk-meta-color: #666;
    --etk-meta-font-size: 0.85em;
    --etk-highlight-weight: 700;
    --etk-no-results-color: #666;

    /* Focus */
    --etk-focus-outline: 2px solid currentColor;
    --etk-focus-outline-offset: -2px;
}

/* ── Structure ──────────────────────────────────────────── */

.etk-search-wrapper {
    position: relative;
    font-family: inherit;
}

.etk-search-form {
    position: relative;
}

.etk-search-input-wrapper {
    display: flex;
    gap: var(--etk-search-gap);
}

/* ── Input ──────────────────────────────────────────────── */

.etk-search-input {
    flex: 1;
    min-width: 0;
    padding: var(--etk-input-padding);
    font-family: inherit;
    font-size: var(--etk-input-font-size);
    color: var(--etk-input-color);
    background: var(--etk-input-bg);
    border: var(--etk-input-border);
    border-radius: var(--etk-input-radius);
    outline: none;
    -webkit-appearance: none;
}

.etk-search-input:focus {
    border-color: var(--etk-input-focus-border-color);
}

.etk-search-input:focus-visible {
    outline: var(--etk-focus-outline);
    outline-offset: var(--etk-focus-outline-offset);
}

/* ── Button ─────────────────────────────────────────────── */

.etk-search-button {
    cursor: pointer;
    padding: var(--etk-button-padding);
    font-family: inherit;
    font-size: var(--etk-button-font-size);
    color: var(--etk-button-color);
    background: var(--etk-button-bg);
    border: var(--etk-button-border);
    border-radius: var(--etk-button-radius);
    -webkit-appearance: none;
}

.etk-search-button:hover {
    background: var(--etk-button-hover-bg);
    border: var(--etk-button-hover-border);
}

.etk-search-button:focus-visible {
    outline: var(--etk-focus-outline);
    outline-offset: var(--etk-focus-outline-offset);
}

/* ── Results dropdown ───────────────────────────────────── */

.etk-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow-y: auto;
    max-height: var(--etk-results-max-height);
    background: var(--etk-results-bg);
    border: var(--etk-results-border);
    border-radius: var(--etk-results-radius);
    box-shadow: var(--etk-results-shadow);
}

/* ── Result items ───────────────────────────────────────── */

.etk-search-result-item {
    display: block;
    padding: var(--etk-item-padding);
    color: var(--etk-text-color);
    text-decoration: none;
    border-bottom: var(--etk-item-border-bottom);
    cursor: pointer;
    background-color: #FFFFFF;
}

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

.etk-search-result-item:hover,
.etk-search-result-item:focus {
    background: var(--etk-item-hover-bg);
}

.etk-search-result-item[aria-selected="true"] {
    background: var(--etk-item-active-bg);
}

.etk-search-result-artikelnummer {
    color: var(--etk-text-color);
}

.etk-search-result-artikelnummer strong {
    font-weight: var(--etk-highlight-weight);
}

.etk-search-result-meta {
    font-size: var(--etk-meta-font-size);
    color: var(--etk-meta-color);
}

/* ── States ─────────────────────────────────────────────── */

.etk-search-no-results,
.etk-search-loading {
    padding: var(--etk-item-padding);
    color: var(--etk-no-results-color);
    text-align: center;
}