/**
 * RecodarServices_LiveSearchUnloadThemeAdapter
 *
 * Presentation only: maps the suite's design tokens onto UnloadTheme's. No search logic here.
 *
 * Copyright (c) recodar Services LLC
 */

.rcs-live-search {
    /* Theme tokens with the suite's own values as the fallback, so the panel
       still looks right if UnloadTheme is disabled and its variables vanish. */
    --rcs-ls-bg: var(--rcs-color-background, #ffffff);
    --rcs-ls-fg: var(--rcs-color-text, #1a1a1a);
    --rcs-ls-border: var(--rcs-color-border, #e0e0e0);
    --rcs-ls-accent: var(--rcs-color-accent, #1979c3);
    --rcs-ls-price: var(--rcs-price-current-color, #1a1a1a);
    --rcs-ls-price-old: var(--rcs-price-old-color, #9b9b9b);
    --rcs-ls-radius: var(--rcs-button-radius, 4px);
    /* 6px as in .rcs-product-card; the theme has no card radius token to follow. */
    --rcs-ls-image-radius: 6px;

    font-family: var(--rcs-font-body, inherit);
    font-size: var(--rcs-font-size-body, 14px);
}

.rcs-live-search__section-title {
    font-family: var(--rcs-font-heading, inherit);
}

/* UnloadTheme constrains its header to the site container. Without this the
   dropdown would be as narrow as the input rather than as wide as the header. */
@media (min-width: 769px) {
    .rcs-live-search__panel {
        min-width: min(560px, var(--rcs-container-width, 1280px));
    }
}

/* The suite's product card row - recommendations, the 404 offer of help and
   the landing page all use it - mapped the same way: theme tokens with the
   suite's own values as the fallback. */
.rcs-products {
    --rcs-p-fg: var(--rcs-color-text, #1a1a1a);
    --rcs-p-muted: var(--rcs-color-text-muted, #6b6b6b);
    --rcs-p-bg: var(--rcs-color-background, #ffffff);
    --rcs-p-border: var(--rcs-color-border, #e2e2e4);
    --rcs-p-accent: var(--rcs-color-accent, #1979c3);
    --rcs-p-radius: var(--rcs-card-radius, 10px);

    font-family: var(--rcs-font-body, inherit);
}

.rcs-block__heading {
    font-family: var(--rcs-font-heading, inherit);
}

/* ---- Inline product badges in autocomplete results (js/livesearch-badges.js) ---- */
.rcs-ls-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-left: .4rem;
    vertical-align: middle;
}

/* Inside the rating line the parent's flex gap already spaces the badges. */
.rcs-live-search__rating > .rcs-ls-badges {
    margin-left: 0;
}

/* Badges sitting on their own line at the rating slot (compact mode with no
   rating shown): align with the other body rows instead of indenting. */
.rcs-ls-badges--own-line {
    margin-left: 0;
    margin-top: 1px;
}

.rcs-ls-badges .rcs-flag {
    min-height: 0;
    font-size: .66rem;
    padding: .12rem .4rem;
    box-shadow: none;
    line-height: 1;
}

/* Font weight is switchable: "normal" matches the surrounding result line (the
   default), "bold" keeps the badges emphasised. */
.rcs-ls-badges--weight-normal .rcs-flag,
.rcs-ls-badges--weight-normal .rcs-flag__label { font-weight: 400; }
.rcs-ls-badges--weight-bold .rcs-flag,
.rcs-ls-badges--weight-bold .rcs-flag__label { font-weight: 700; }

.rcs-ls-badges .rcs-flag svg {
    width: 11px;
    height: 11px;
}

/* Pill: force the coloured background even when the badge was rendered nopill. */
.rcs-ls-badges--pill .rcs-flag,
.rcs-ls-badges--pill .rcs-flag.rcs-flag--nopill {
    background: var(--flag-bg, #111827);
    color: var(--flag-color, #fff);
    padding: .12rem .4rem;
    border-radius: 999px;
    text-shadow: none;
}

.rcs-ls-badges--pill .rcs-flag svg,
.rcs-ls-badges--pill .rcs-flag.rcs-flag--nopill svg {
    width: 11px;
    height: 11px;
    filter: none;
    color: var(--flag-color, #fff);
}

/* Clean: no background; the badge keeps its identity colour as text/icon tint
   so it stays legible on the light panel, and badges are separated. */
.rcs-ls-badges--clean .rcs-flag,
.rcs-ls-badges--clean .rcs-flag.rcs-flag--nopill {
    background: transparent;
    padding: 0;
    box-shadow: none;
    text-shadow: none;
    color: var(--flag-bg, #111827);
}

.rcs-ls-badges--clean .rcs-flag svg,
.rcs-ls-badges--clean .rcs-flag.rcs-flag--nopill svg {
    width: 12px;
    height: 12px;
    filter: none;
    color: var(--flag-bg, #111827);
}

/* Best-seller: the tier colour (--flag-color) becomes the pill (pill mode) or the text tint (clean mode). */
.rcs-ls-badges--pill .rcs-flag--bestseller,
.rcs-ls-badges--pill .rcs-flag--bestseller.rcs-flag--nopill {
    background: var(--flag-color, #c27a3e);
    color: #1f2937;
}
.rcs-ls-badges--pill .rcs-flag--bestseller svg,
.rcs-ls-badges--pill .rcs-flag--bestseller.rcs-flag--nopill svg {
    color: #1f2937;
}
.rcs-ls-badges--clean .rcs-flag--bestseller,
.rcs-ls-badges--clean .rcs-flag--bestseller.rcs-flag--nopill {
    color: var(--flag-color, #c27a3e);
}
.rcs-ls-badges--clean .rcs-flag--bestseller svg,
.rcs-ls-badges--clean .rcs-flag--bestseller.rcs-flag--nopill svg {
    color: var(--flag-color, #c27a3e);
}

/* Availability: the strong colour is --flag-color (foreground), --flag-bg is only a pale tint. */
.rcs-ls-badges--clean .rcs-flag--availability,
.rcs-ls-badges--clean .rcs-flag--availability.rcs-flag--nopill {
    color: var(--flag-color, #166534);
}
.rcs-ls-badges--clean .rcs-flag--availability svg,
.rcs-ls-badges--clean .rcs-flag--availability.rcs-flag--nopill svg {
    color: var(--flag-color, #166534);
}

.rcs-ls-badges__sep {
    color: var(--rcs-color-text-muted, #9b9b9b);
    user-select: none;
}

/* Content: icon only / text only. */
.rcs-ls-badges--icon .rcs-flag__label { display: none; }
.rcs-ls-badges--text .rcs-flag svg { display: none; }

/* Mobile: badges drop onto their own line below the rating, without the leading separator. */
@media (max-width: 767px) {
    .rcs-live-search__rating {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .rcs-live-search__rating > .rcs-ls-badges {
        flex: 1 0 100%;
        margin-left: 0;
        margin-top: 2px;
    }

    .rcs-ls-badges__sep--lead {
        display: none;
    }
}
/* Text-only clean badges no longer need the leading icon gap. */
.rcs-ls-badges--text .rcs-flag { gap: 0; }