/**
 * Globale Suche — Custom Overrides
 * Datei: assets/css/mk-search-custom.css
 *
 * Hier anpassen. Wird nach dem Basis-CSS geladen.
 * Basis-Logik bleibt in mk-search.css.
 */

.mk-search {
    /* Icon (Trigger + Leiste im Popup) */
    --mk-search-icon-size: 24px;
    --mk-search-icon-color: #efcc5c;

    /* Trigger-Button (Klickfläche) */
    --mk-search-trigger-size: 44px;

    /* Popup */
    --mk-search-panel-bg: #00576a;
    --mk-search-panel-radius: 16px;
    --mk-search-panel-max-width: 640px;
    --mk-search-backdrop: rgba(0, 30, 38, 0.72);

    /* Scrollbar / Overflow */
    --mk-search-scrollbar-track: #00576a;
    --mk-search-scrollbar-thumb: #efcc5c;

    /* Text */
    --mk-search-text: #ffffff;
    --mk-search-text-muted: rgba(255, 255, 255, 0.85);
    --mk-search-type-color: #efcc5c;

    /* Treffer */
    --mk-search-result-divider: rgba(255, 255, 255, 0.22);
    --mk-search-result-divider-width: 100%;
    --mk-search-result-pad-y: 1.1rem;
    --mk-search-result-pad-x: 1rem;
    --mk-search-badge-title-gap: calc(0.45rem + 10px);
    --mk-search-result-hover-bg: rgba(255, 255, 255, 0.08);
    --mk-search-result-accent: #efcc5c;
    --mk-search-badge-bg: rgba(239, 204, 92, 0.28);
}

/* --- Icon-Größe / Farbe --- */
.mk-search .mk-search__icon,
.mk-search .mk-search__bar-icon {
    width: var(--mk-search-icon-size);
    height: var(--mk-search-icon-size);
    color: var(--mk-search-icon-color);
}

.mk-search .mk-search__trigger {
    width: var(--mk-search-trigger-size);
    height: var(--mk-search-trigger-size);
    color: var(--mk-search-icon-color);
}

/* --- Popup-Panel --- */
.mk-search .mk-search__panel {
    width: min(var(--mk-search-panel-max-width), 100%);
    background: var(--mk-search-panel-bg);
    border-radius: var(--mk-search-panel-radius);
    color: var(--mk-search-text);
}

.mk-search .mk-search__backdrop {
    background: var(--mk-search-backdrop);
}

/* --- Scrollbar (Overflow) --- */
.mk-search .mk-search__results,
.mk-search .mk-search__panel {
    scrollbar-width: thin;
    scrollbar-color: var(--mk-search-scrollbar-thumb) var(--mk-search-scrollbar-track);
}

.mk-search .mk-search__results::-webkit-scrollbar,
.mk-search .mk-search__panel::-webkit-scrollbar {
    width: 10px;
}

.mk-search .mk-search__results::-webkit-scrollbar-track,
.mk-search .mk-search__panel::-webkit-scrollbar-track {
    background: var(--mk-search-scrollbar-track);
}

.mk-search .mk-search__results::-webkit-scrollbar-thumb,
.mk-search .mk-search__panel::-webkit-scrollbar-thumb {
    background: var(--mk-search-scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid var(--mk-search-scrollbar-track);
}

.mk-search .mk-search__results::-webkit-scrollbar-thumb:hover,
.mk-search .mk-search__panel::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.08);
}

/* --- Eingabe --- */
.mk-search .mk-search__input {
    color: var(--mk-search-text) !important;
    -webkit-text-fill-color: var(--mk-search-text);
}

/* --- Treffer --- */
.mk-search .mk-search__result a {
    gap: var(--mk-search-badge-title-gap);
    padding: var(--mk-search-result-pad-y) var(--mk-search-result-pad-x);
    border-bottom-color: var(--mk-search-result-divider);
    border-bottom-width: 2px;
    width: 100%;
}

.mk-search .mk-search__result-type {
    background: var(--mk-search-badge-bg);
    color: var(--mk-search-type-color) !important;
}

.mk-search .mk-search__result-title {
    color: var(--mk-search-text) !important;
    text-align: left;
}

.mk-search .mk-search__result-excerpt {
    display: none !important;
}

.mk-search .mk-search__result a:hover,
.mk-search .mk-search__result a:focus-visible {
    background: var(--mk-search-result-hover-bg);
    border-left-color: var(--mk-search-result-accent);
}