/**
 * RecodarServices_LiveSearchFrontend - storefront autocomplete.
 *
 * Every themeable value is a CSS custom property on .rcs-live-search.
 *
 * Class names are all rcs- prefixed so they cannot collide with a theme's own.
 *
 * Copyright (c) recodar Services LLC
 */

.rcs-live-search {
    --rcs-ls-bg: #ffffff;
    --rcs-ls-fg: #1a1a1a;
    --rcs-ls-muted: #6b6b6b;
    --rcs-ls-border: #e0e0e0;
    --rcs-ls-accent: #1979c3;
    --rcs-ls-active-bg: #f2f7fb;
    --rcs-ls-mark-bg: #fff3bf;
    --rcs-ls-price: #1a1a1a;
    --rcs-ls-price-old: #9b9b9b;
    --rcs-ls-radius: 4px;
    --rcs-ls-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    --rcs-ls-gap: 12px;
    --rcs-ls-panel-max-height: 70vh;
    --rcs-ls-z: 1000;
    --rcs-ls-image-size: 48px;
    --rcs-ls-image-radius: var(--rcs-ls-radius);
    --rcs-ls-font-size: 14px;

    position: relative;
    display: block;
}

/* ------------------------------------------------------- field and controls */

.rcs-live-search__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* The theme owns the input's look; all this does is let it take the row. */
.rcs-live-search__field > input {
    flex: 1 1 auto;
    min-width: 0;
}

.rcs-live-search__control {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rcs-ls-muted);
    cursor: pointer;
}

.rcs-live-search__control:hover,
.rcs-live-search__control:focus-visible {
    color: var(--rcs-ls-fg);
    background: var(--rcs-ls-active-bg);
}

.rcs-live-search__control svg {
    width: 1rem;
    height: 1rem;
}

.rcs-live-search__control[hidden] {
    display: none;
}

/* Hidden until the overlay turns it on - see the overlay block below. */
.rcs-live-search__control--close {
    display: none;
}

/*
 * The clear control overlaps the end of the input rather than sitting beside
 * it, so switching it on and off does not make the field jump in width.
 */
.rcs-live-search__control--clear {
    position: absolute;
    right: 6px;
}

.rcs-live-search--overlay .rcs-live-search__control--clear {
    right: 2.4rem;
}

/* -------------------------------------------------------------- the panel */

.rcs-live-search__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--rcs-ls-z);
    max-height: var(--rcs-ls-panel-max-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--rcs-ls-bg);
    color: var(--rcs-ls-fg);
    border: 1px solid var(--rcs-ls-border);
    border-radius: var(--rcs-ls-radius);
    box-shadow: var(--rcs-ls-shadow);
    font-size: var(--rcs-ls-font-size);
    text-align: left;
}

.rcs-live-search__panel[hidden] {
    display: none;
}

/* ------------------------------------------------------------- sections */

.rcs-live-search__section + .rcs-live-search__section {
    border-top: 1px solid var(--rcs-ls-border);
}

/*
 * Sticky, so the heading of the section being read stays on screen instead of
 * scrolling away and leaving a list of results with nothing saying what they
 * are. Each heading gives way to the next as its own section ends.
 *
 * It needs an opaque background - results pass underneath - and a z-index above
 * the rows but below nothing else; the pinned footer sits at the other edge and
 * the two never meet.
 */
.rcs-live-search__section-title {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rcs-ls-bg);
    padding: 10px var(--rcs-ls-gap) 4px;
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rcs-ls-muted);
}

/* ---------------------------------------------------------------- items */

.rcs-live-search__item {
    display: flex;
    align-items: center;
    gap: var(--rcs-ls-gap);
    padding: 8px var(--rcs-ls-gap);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.rcs-live-search__item:hover,
.rcs-live-search__item--active {
    background: var(--rcs-ls-active-bg);
    text-decoration: none;
}

/* Keyboard focus must stay visible even though focus never leaves the input:
   the active option is the only thing telling a sighted keyboard user where
   they are. */
.rcs-live-search__item--active {
    outline: 2px solid var(--rcs-ls-accent);
    outline-offset: -2px;
}

.rcs-live-search__image {
    flex: 0 0 var(--rcs-ls-image-size);
    width: var(--rcs-ls-image-size);
    height: var(--rcs-ls-image-size);
    object-fit: contain;
    /* Own token: a thumbnail should follow the theme's product cards, and those
       rarely share a radius with the panel's own corners. */
    border-radius: var(--rcs-ls-image-radius);
}

.rcs-live-search__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.rcs-live-search__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcs-live-search__label mark {
    padding: 0;
    background: var(--rcs-ls-mark-bg);
    color: inherit;
    font-weight: 600;
}

.rcs-live-search__meta {
    font-size: .84em;
    color: var(--rcs-ls-muted);
}

.rcs-live-search__meta--in-stock {
    color: #2b8a3e;
}

.rcs-live-search__meta--out-of-stock {
    color: #c92a2a;
}

.rcs-live-search__price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--rcs-ls-price);
    white-space: nowrap;
}

.rcs-live-search__price-old {
    /* Diagonal strike like the theme's product cards; colour from the theme accent. */
    position: relative;
    display: inline-block;
    font-size: .84em;
    color: var(--rcs-ls-price-old);
    text-decoration: none;
}

.rcs-live-search__price-old::after {
    content: "";
    position: absolute;
    left: -.08em;
    right: -.08em;
    top: 50%;
    height: 2px;
    background: var(--rcs-color-accent, var(--rcs-ls-price-old));
    transform: rotate(-14deg);
    transform-origin: center;
}

.rcs-live-search__empty {
    padding: 12px var(--rcs-ls-gap);
    color: var(--rcs-ls-muted);
}

/*
 * Sticky inside the listbox, so keyboard order and ARIA stay intact.
 * Needs its own opaque background: results scroll underneath.
 */
.rcs-live-search__all-results {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--rcs-ls-bg);
    justify-content: center;
    font-weight: 600;
    color: var(--rcs-ls-accent);
    border-top: 1px solid var(--rcs-ls-border);
}

/* Re-applies the highlight the later opaque background would otherwise hide. */
.rcs-live-search__all-results:hover,
.rcs-live-search__all-results.rcs-live-search__item--active {
    background: var(--rcs-ls-active-bg);
}

/* ------------------------------------------------------------- loading */

.rcs-live-search--loading .rcs-live-search__panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--rcs-ls-accent);
    animation: rcs-ls-progress 1.2s ease-in-out infinite;
}

@keyframes rcs-ls-progress {
    0%   { transform: scaleX(0); transform-origin: left; }
    50%  { transform: scaleX(1); transform-origin: left; }
    51%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* --------------------------------------------------------- mobile overlay */

/* The WRAPPER goes full-screen, not the panel, so the input stays visible. */
.rcs-live-search--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--rcs-ls-z) + 1);
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--rcs-ls-bg);
}

.rcs-live-search--overlay .rcs-live-search__panel {
    position: static;
    flex: 1 1 auto;
    margin-top: 8px;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The close control is for the overlay only; on a desktop dropdown, clicking
   away or pressing Escape is the expected way out and a button would be
   clutter. */
.rcs-live-search--overlay .rcs-live-search__control--close {
    display: inline-flex;
}

.rcs-live-search-locked {
    overflow: hidden;
}

/* ----------------------------------------------------- screen reader only */

.rcs-live-search__status,
.rcs-live-search__hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce) {
    .rcs-live-search--loading .rcs-live-search__panel::after {
        animation: none;
    }
}

@media (prefers-color-scheme: dark) {
    /* Only applied when the theme has opted in by setting this flag, so the
       panel never turns dark inside a light theme that did not ask for it. */
    .rcs-live-search[data-rcs-color-scheme="auto"] {
        --rcs-ls-bg: #1c1c1e;
        --rcs-ls-fg: #f2f2f2;
        --rcs-ls-muted: #a0a0a5;
        --rcs-ls-border: #3a3a3d;
        --rcs-ls-active-bg: #2a2a2e;
        --rcs-ls-mark-bg: #5c4b00;
        --rcs-ls-price: #f2f2f2;
        --rcs-ls-price-old: #7a7a80;
    }
}

/* ---------------------------------------------------- recent searches */

.rcs-live-search__item--recent {
    display: block;
    padding: 8px var(--rcs-ls-gap);
    color: inherit;
    text-decoration: none;
}

.rcs-live-search__item--recent::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border: 1px solid currentColor;
    border-radius: 50%;
    /* A plain ring rather than an icon font or an inline SVG: both add a
       dependency, and the marker only has to say "this is history". */
    opacity: .45;
}

.rcs-live-search__clear-recent {
    display: block;
    width: 100%;
    padding: 8px var(--rcs-ls-gap);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    opacity: .7;
}

.rcs-live-search__clear-recent:hover,
.rcs-live-search__clear-recent:focus {
    opacity: 1;
    text-decoration: underline;
}

/* ------------------------------------------------------- did you mean */

.rcs-live-search__correction {
    display: block;
    padding: 12px var(--rcs-ls-gap);
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--rcs-ls-border);
}

.rcs-live-search__correction-lead {
    color: var(--rcs-ls-muted);
    margin-right: .35em;
}

.rcs-live-search__correction-term {
    color: var(--rcs-ls-accent);
    text-decoration: underline;
}

/* Rating stars: a filled row clipped over a grey row, like the product cards. */
.rcs-live-search__rating {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .84em;
    color: var(--rcs-ls-muted);
}

.rcs-live-search__stars {
    position: relative;
    display: inline-block;
    letter-spacing: .14em;
    line-height: 1;
    white-space: nowrap;
}

.rcs-live-search__stars-base {
    color: var(--rcs-ls-star-empty, #d1d5db);
}

.rcs-live-search__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: var(--rcs-ls-star-full, #f59e0b);
    white-space: nowrap;
}

.rcs-live-search__rating-count {
    color: var(--rcs-ls-muted);
}

/*
 * The "Art.-Nr.:" prefix sits back a little so the number itself stays the
 * thing the eye lands on.
 */
.rcs-live-search__sku-label {
    color: var(--rcs-ls-muted);
}