/* CRS.HybridSearch — InstantSearch panel chrome ("Darstellung" settings).
   Mirrors the HybridMenu dropdown stylesheet: same CSS-variable contract,
   same glass + 3D-bevel approach, scoped under `.crs-instasearch-panel` so
   nothing leaks into the rest of the search popover. */

/* Flex-Theme sets `.instasearch-drop-body { margin-top: 1.25rem }` (`_search.scss:168`)
   to push the result content down from the search bar. We don't want that gap — the
   panel should hang flush below the input. Scoped via `:has()` so only the body that
   actually contains our panel is affected; standard Smartstore behavior remains for
   anyone who disables the plugin. */
.instasearch-drop > .instasearch-drop-body:has(.crs-instasearch-panel) {
    margin-top: 0 !important;
}

/* Widen the popover to match `<section id="content" class="container">` — without this
   the dropdown stays locked to the search-input width (Flex-Theme sets `min-width:850px`
   on lg+, _search.scss:206). That leaves a lot of empty whitespace right of the panel
   and squeezes the tile grid. Widths track Bootstrap 5's responsive container max-widths
   (same breakpoints Smartstore uses for `.container`).
   Anchor the LEFT edge to the search-form's left (matches the search-input's left edge)
   and let the panel extend rightward — same alignment as the Flex-Theme's default lg+
   behaviour (`inset-inline-end: auto`), just at a wider total width. */
.instasearch-drop:has(.crs-instasearch-panel) {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    max-width: none !important;
}
@media (min-width: 576px) {
    .instasearch-drop:has(.crs-instasearch-panel) { width: 540px !important; min-width: 540px !important; }
}
@media (min-width: 768px) {
    .instasearch-drop:has(.crs-instasearch-panel) { width: 720px !important; min-width: 720px !important; }
}
@media (min-width: 992px) {
    .instasearch-drop:has(.crs-instasearch-panel) { width: 960px !important; min-width: 960px !important; }
}
@media (min-width: 1200px) {
    .instasearch-drop:has(.crs-instasearch-panel) { width: 1140px !important; min-width: 1140px !important; }
}
@media (min-width: 1400px) {
    .instasearch-drop:has(.crs-instasearch-panel) { width: 1320px !important; min-width: 1320px !important; }
}

/* Top-row group headlines ("Warengruppen" / "Hersteller" / Spellchecker) sit too close
   to the top edge of the panel. Push them down ~15px so there's breathing room between
   the search input and the labels. */
.crs-instasearch-panel .instasearch-group-header {
    margin-top: 15px;
}

/* Panel-chrome (bg-color, glass, border, radius, backdrop-filter, bg-picture) is
   emitted as an inline `<style>` block from InstantSearch.cshtml — that gives
   Razor-resolved values straight into CSS without needing JS or CSS-variable
   mirroring. The chrome sits on `#instasearch-drop-body` (not the inner wrapper)
   so the entire popover — top-row, products, async KI tiles — wears the same
   background regardless of where the inner wrapper visually ends. See
   InstantSearch.cshtml below the `<link rel=stylesheet>` tag. */

/* 3D hover lift for the result tiles (.hs-tile is set in InstantSearch.cshtml).
   Subtle translate-up + soft cascading shadow gives the floating effect without
   distracting from the search task. Only active when InstantSearchHover3D=true. */
.crs-instasearch-panel.hover3d .hs-tile {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform, box-shadow;
}
.crs-instasearch-panel.hover3d .hs-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 0, 0, 0.08);
    /* Keep the engraved insets (light top, dark bottom) AND stack a 3-step
       cascading drop shadow on top — that gives both the "etched in glass"
       look and the 3D-lift simultaneously. */
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        0  1px  2px rgba(0, 0, 0, 0.06),
        0  4px  8px rgba(0, 0, 0, 0.10),
        0 12px 24px rgba(0, 0, 0, 0.14);
}

/* `.instasearch-hit` is reused for ALL the non-tile result entries:
   - row-layout product list  (`#instasearch-rows .instasearch-hit`)
   - category hits           (HitGroup partial → "TopCategories")
   - manufacturer hits       (HitGroup partial → "TopManufacturers")
   - spellchecker hits       (`.hs-spellcheck-item`, rendered inline-block as pills)
   Same 3D treatment as the tile grid: engraving insets + translate-up + cascading
   drop-shadow on hover. `transform` doesn't disturb the layout flow, so siblings
   stay put. We do NOT force `display: block` — the spellchecker pill is set to
   `inline-block` inline, and transform works on either, so leaving the cascade
   intact avoids breaking the pill layout. */
.crs-instasearch-panel.hover3d .instasearch-hit {
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    /* Default-state engraving — same subtle 4-edge bevel as the tiles. */
    box-shadow:
        inset 0   1px 0 rgba(255, 255, 255, 0.25),
        inset 1px   0 0 rgba(255, 255, 255, 0.11),
        inset 0  -1px 0 rgba(0, 0, 0, 0.06),
        inset -1px  0 0 rgba(0, 0, 0, 0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform, box-shadow;
}
.crs-instasearch-panel.hover3d .instasearch-hit:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.05);
    /* Suppress Smartstore's default row hover background — the 3D lift + shadow is
       enough feedback. !important because the theme's hover rule has equal/higher
       specificity. */
    background-color: transparent !important;
    box-shadow:
        inset 0   1px 0 rgba(255, 255, 255, 0.32),
        inset 1px   0 0 rgba(255, 255, 255, 0.16),
        inset 0  -1px 0 rgba(0, 0, 0, 0.08),
        inset -1px  0 0 rgba(0, 0, 0, 0.04),
        0  1px  2px rgba(0, 0, 0, 0.06),
        0  4px  8px rgba(0, 0, 0, 0.10),
        0 10px 20px rgba(0, 0, 0, 0.12);
}
/* Spellcheck pills are smaller — soften the lift so the bounce is proportional. */
.crs-instasearch-panel.hover3d .hs-spellcheck-item:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.40),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.10);
}

/* Optional text color for the InstantSearch panel (shared "Textfarbe" setting). ID-prefixed so it
   beats the inline group-header rules in InstantSearch.cshtml (`.instasearch-group-header{color:#222!important}`
   and the media-query `.instasearch-row > .instasearch-col .instasearch-group-header{color:#555!important}` (0,3,1)). */
#instasearch-drop-body .crs-instasearch-panel.has-text-color,
#instasearch-drop-body .crs-instasearch-panel.has-text-color a,
#instasearch-drop-body .crs-instasearch-panel.has-text-color .instasearch-hit,
#instasearch-drop-body .crs-instasearch-panel.has-text-color .hs-header,
#instasearch-drop-body .crs-instasearch-panel.has-text-color .instasearch-group-header,
#instasearch-drop-body .crs-instasearch-panel.has-text-color h6 {
    color: var(--is-text-color) !important;
}
