/* ==========================================================================
   WK Header – Top-Bar (USP + Service-Links) & Suchfeld im Marken-Stil.
   Unterstrich/aktiv-Linie + „Angebote"-Orange macht YOOtheme selbst.
   ========================================================================== */

:root {
    --wk-blue: #E5762A;
    --wk-blue-deep: #D0661F;
    --wk-slate: #2F2C2A;
}

/* ==========================================================================
   Drittanbieter-Floating-Widgets unter Suche/Menü legen
   (Superchat unten rechts + Clickskeks-Datenschutz-Icon unten links).
   Das blockierende Cookie-Banner (#ccm-widget / #ccm-control-panel) bleibt oben!
   Suche: mobil z-index 1010, Desktop 1090, Drawer ~1060 -> Widgets auf 900.
   ========================================================================== */
/* Superchat: Shadow-Host zu eigenem Stacking-Context machen, damit das innere
   position:fixed nicht ausbricht. isolation:isolate kappt den inneren z-index. */
#superchat-widget-protected-component-root,
.superchat-widget-protected-component-root,
#superchat-widget,
div[id^="superchat-widget"] {
    /* NUR Stacking-Context kappen – Position NICHT ändern, sonst fällt das
       schwebende Widget in den Fluss (rendert unterm Footer). isolation:isolate
       fängt das innere position:fixed ein, ohne es aus dem Viewport zu lösen. */
    isolation: isolate !important;
}
/* Clickskeks-Datenschutz-Icon (das blockierende Banner selbst bleibt oben) */
.ccm-settings-summoner {
    z-index: 900 !important;
}

/* ---- Ankündigungs-/Trust-Leiste ganz oben ---- */
.wk-topbar {
    background: var(--wk-slate);
    color: #BDBDBD;
    font-family: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    position: relative;
    z-index: 1000;
}
.wk-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 26px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.wk-topbar-usp { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Grüner „Live"-Punkt mit Puls an der Versand-USP */
.wk-topbar-live {
    position: relative; flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: 50%;
    background: #27c93f; box-shadow: 0 0 6px rgba(39,201,63,.8);
}
.wk-topbar-live::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    background: rgba(39,201,63,.55); animation: wk-live-pulse 1.8s ease-out infinite;
}
@keyframes wk-live-pulse {
    0%   { transform: scale(.5); opacity: .85; }
    100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-topbar-live::before { animation: none; }
}
.wk-topbar-usp svg { color: var(--wk-blue); flex: 0 0 auto; }
.wk-topbar-usp strong { color: #fff; font-weight: 600; }
.wk-topbar-links { display: inline-flex; align-items: center; gap: 4px; }
.wk-topbar-links a {
    display: inline-flex; align-items: center; gap: 6px;
    color: #BDBDBD; text-decoration: none; font-weight: 500;
    padding: 6px 11px; border-radius: 7px; transition: background .15s, color .15s;
    white-space: nowrap;
}
.wk-topbar-links a svg { color: #9fc6e8; }
.wk-topbar-links a:hover { color: #fff; background: rgba(255,255,255,.09); }
.wk-topbar-links a:hover svg { color: #fff; }

@media (max-width: 959px) {
    /* Topbar auf Mobil/Tablet (gleicher Breakpoint wie der mobile Header):
       nur die USP-Trust-Zeile, Service/Sprache sind im Drawer. */
    .wk-topbar-inner { justify-content: center; height: 32px; padding: 0 14px; }
    .wk-topbar-right { display: none; }
    .wk-topbar { font-size: 12px; }
}

/* ---- Sprach-Umschalter (gTranslate) in der Topbar ---- */
.wk-topbar-right { display: inline-flex; align-items: center; gap: 10px; }
.wk-topbar-lang { display: inline-flex; }
.wk-topbar-lang-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    color: #BDBDBD; cursor: pointer; padding: 5px 9px; border-radius: 7px;
    transition: background .15s, border-color .15s;
}
.wk-topbar-lang-trigger:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); }
.wk-topbar-lang-trigger img {
    width: 22px; height: 15px; border-radius: 3px; display: block;
    object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.wk-topbar-lang-trigger [uk-icon] { color: #9fc6e8; }
.wk-topbar-lang-dropdown { min-width: 180px; padding: 8px; }
.wk-topbar-lang-dropdown .uk-nav > li > a {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 7px; font-size: 14px; color: var(--wk-slate);
}
.wk-topbar-lang-dropdown .uk-nav > li > a:hover { background: #eef3f8; color: var(--wk-blue-deep); }
.wk-topbar-lang-dropdown .uk-nav > li.uk-active > a { color: var(--wk-blue-deep); font-weight: 600; }
.wk-topbar-lang-dropdown img { width: 20px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

/* ==========================================================================
   Desktop Live-Suche (schnelles Store-API-Dropdown)
   ========================================================================== */
.wk-ds-panel {
    position: fixed; z-index: 1090;
    background: #fff; border: 1px solid var(--wk-line, #E6EAEE);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 26px 60px -28px rgba(28,42,56,.42), 0 8px 22px -16px rgba(28,42,56,.30);
    font-family: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
    animation: wk-ds-in .16s ease;
}
@keyframes wk-ds-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.wk-ds-list { padding: 6px; max-height: 60vh; overflow-y: auto; }
.wk-ds-item {
    display: flex; align-items: center; gap: 13px;
    padding: 9px 10px; border-radius: 10px; text-decoration: none;
    color: var(--wk-slate, #2F2C2A); transition: background .12s;
}
.wk-ds-item:hover, .wk-ds-item.is-active { background: var(--wk-tint, #FCEFE4); }
.wk-ds-thumb {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 9px; overflow: hidden;
    background: radial-gradient(circle at 50% 36%, #fff, #eef2f6);
    border: 1px solid var(--wk-line, #E6EAEE);
    display: flex; align-items: center; justify-content: center;
}
.wk-ds-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-ds-thumb .wk-ds-ph { color: #8D8E8F; }
.wk-ds-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-ds-name {
    font-size: 14px; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-ds-price { font-size: 13.5px; font-weight: 700; color: var(--wk-blue-deep, #D0661F); }

.wk-ds-all {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px; text-decoration: none; font-weight: 700; font-size: 13.5px;
    color: var(--wk-blue-deep, #D0661F); border-top: 1px solid var(--wk-line, #E6EAEE);
    background: #FAFAFA; transition: background .12s, color .12s;
}
.wk-ds-all:hover, .wk-ds-all.is-active { background: var(--wk-tint, #FCEFE4); color: var(--wk-blue-ink, #B45A1C); }

.wk-ds-loading, .wk-ds-empty {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 26px 18px; color: var(--wk-muted, #69757F); font-size: 14px;
}
.wk-ds-empty { flex-direction: column; gap: 8px; text-align: center; }
.wk-ds-empty span[uk-icon] { color: var(--wk-muted-2, #8D8E8F); }
.wk-ds-empty p { margin: 0; }

/* ---- Suchfeld im Marken-Stil ---- */
.tm-header .uk-search-input {
    border-radius: 999px;
    border: 1px solid #E0E5EA;
    transition: box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.tm-header .uk-search-input:focus {
    border-color: var(--wk-blue);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, .28);
    background-color: #fff;
}
.tm-header .uk-search .uk-search-icon { color: var(--wk-blue-deep); }

/* ---- Bike-Badge als Pill (Moto-Finder im Header) ---- */
.tm-header .wk-vehicle-badge .wk-vehicle-badge-inner,
.tm-headerbar .wk-vehicle-badge .wk-vehicle-badge-inner,
.tm-header .wk-vehicle-badge-toggle,
.tm-headerbar .wk-vehicle-badge-toggle,
.tm-header .wk-vehicle-badge > a,
.tm-headerbar .wk-vehicle-badge > a {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    border: 1px solid #E0E5EA;
    border-radius: 13px;
    background: #fff;
    padding: 7px 12px;
    cursor: pointer;
    line-height: 1.05;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.tm-header .wk-vehicle-badge .wk-vehicle-badge-inner:hover,
.tm-headerbar .wk-vehicle-badge .wk-vehicle-badge-inner:hover,
.tm-header .wk-vehicle-badge-toggle:hover,
.tm-headerbar .wk-vehicle-badge-toggle:hover,
.tm-header .wk-vehicle-badge > a:hover,
.tm-headerbar .wk-vehicle-badge > a:hover {
    border-color: var(--wk-blue);
    box-shadow: 0 6px 16px -10px rgba(229,118,42,.6);
}
.tm-header .wk-vehicle-badge .wk-vehicle-badge-icon svg,
.tm-headerbar .wk-vehicle-badge .wk-vehicle-badge-icon svg {
    color: var(--wk-slate);
    width: 26px; height: 26px;
}
/* „Mein Bike"-Kicker über dem Modellnamen (nur wenn Fahrzeug gewählt) */
.tm-header .wk-vehicle-badge.has-vehicle .wk-vehicle-badge-text,
.tm-headerbar .wk-vehicle-badge.has-vehicle .wk-vehicle-badge-text {
    display: inline-block;
    font-weight: 700;
    color: var(--wk-slate);
    font-size: 13.5px;
    line-height: 1.12;
    text-align: left;
}
.tm-header .wk-vehicle-badge.has-vehicle .wk-vehicle-badge-text::before,
.tm-headerbar .wk-vehicle-badge.has-vehicle .wk-vehicle-badge-text::before {
    content: "Mein Bike";
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 8.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8D8E8F;
    font-weight: 600;
    margin-bottom: 1px;
}
.tm-header .wk-vehicle-badge .wk-vehicle-badge-arrow svg,
.tm-headerbar .wk-vehicle-badge .wk-vehicle-badge-arrow svg {
    color: #8D8E8F;
}

/* ==========================================================================
   A11y & Politur (UI-Review)
   ========================================================================== */
/* P1: Topbar-Link-Kontrast auf WCAG AA anheben */
.wk-topbar-links a { color: #dde5eb; }
.wk-topbar-links a svg { color: #b8d0e6; }
/* P2: Bike-Badge-Kicker etwas größer/lesbarer */
.tm-header .wk-vehicle-badge.has-vehicle .wk-vehicle-badge-text::before,
.tm-headerbar .wk-vehicle-badge.has-vehicle .wk-vehicle-badge-text::before {
    font-size: 9.5px; letter-spacing: .14em;
}
/* Desktop-Live-Suche Fokus-Ring (Items) */
.wk-ds-item:focus-visible, .wk-ds-all:focus-visible { outline: 2px solid var(--wk-blue); outline-offset: -2px; }

/* ---- Desktop-Suche: Recent Searches ---- */
.wk-ds-recent-head {
    padding: 12px 14px 4px; font-family: "IBM Plex Mono", monospace;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: #8D8E8F; font-weight: 600;
}
.wk-ds-recent {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 10px; text-decoration: none; color: var(--wk-slate, #2F2C2A);
}
.wk-ds-recent:hover, .wk-ds-recent.is-active { background: var(--wk-tint, #FCEFE4); }
.wk-ds-recent [uk-icon] { color: #8D8E8F; flex: 0 0 auto; }
.wk-ds-recent-q { font-size: 14px; font-weight: 600; }

/* Topbar-Service auf Mobil sicher ausblenden (Basis-Regel steht im Source NACH
   der Media-Query und würde sonst gewinnen). */
@media (max-width: 959px) {
    .wk-topbar-right { display: none !important; }
}