/**
 * Typsense Search frontend styles.
 * Visual baseline aligned with legacy plugin.typsense-search (style.css).
 * Site overrides: CSS variables on `.tss-wrap` (and global AA tokens on `:root` if needed).
 */

:root {
    --aa-text-color-rgb: 0, 0, 0;
    --aa-primary-color-rgb: 0, 0, 0;
    --aa-muted-color-rgb: 150, 150, 150;
    --aa-input-background-color-rgb: 255, 255, 255;
    --aa-background-color-rgb: 255, 255, 255;
    --aa-selected-color-rgb: 110, 138, 186;
    --aa-description-highlight-background-color-rgb: 255, 255, 0;
    --aa-description-highlight-background-color-alpha: 0.2;
    --aa-icon-color-rgb: 0, 0, 0;
    --aa-panel-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    --aa-scrollbar-track-background-color-rgb: 240, 240, 240;
    --aa-scrollbar-thumb-background-color-rgb: 200, 200, 200;
}

.tss-wrap {
    --tss-border-color: rgba(128, 126, 163, 0.8);
    --tss-focus-color: var(--e-global-color-primary, #7e1734);
    --tss-panel-bg: #ffffff;
    --tss-text-color: inherit;
    --tss-input-color: inherit;
    --tss-input-placeholder-color: rgba(0, 0, 0, 0.45);
    --tss-icon-color: rgba(0, 0, 0, 0.35);
    --tss-name-color: #000000;
    --tss-price-color: #017e7e;
    --tss-stock-bg: #e5e7eb;
    --tss-stock-in-bg: #017e7e;
    --tss-stock-in-color: #ffffff;
    --tss-facet-color: #000000;
    --tss-facet-header-border: #00000040;
    --tss-item-hover-bg: rgba(0, 0, 0, 0.04);
    --tss-radius: 10px;
    --tss-form-width: 90%;
    --tss-img-size: 4rem;
    --tss-item-gap: 0.5rem;
    --tss-panel-z: 999;
}

/* Dark header embeds (legacy look): set these on the wrap or a parent theme class */
.tss-wrap.tss-theme-dark-header {
    --tss-input-color: #ffffff;
    --tss-input-placeholder-color: rgba(255, 255, 255, 0.75);
    --tss-icon-color: #ffffff;
    --tss-border-color: #ffffff;
}

/* Panel can render detached (body) — keep global aa-Panel parity with legacy repo */
.aa-Panel {
    z-index: var(--tss-panel-z, 999);
    background: var(--tss-panel-bg, #ffffff);
}

.aa-Panel mark {
    display: inline;
    background-color: #ffe23a33;
}

.tss-wrap .aa-DetachedSearchButton,
.aa-DetachedSearchButton {
    background: none !important;
    border: 0;
}

.tss-wrap .aa-Input,
.aa-Input {
    border: 0 !important;
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important;
}

.tss-wrap .aa-Input:focus,
.aa-Input:focus {
    border-top-color: var(--tss-focus-color, var(--e-global-color-primary, #7e1734)) !important;
    border-bottom-color: var(--tss-focus-color, var(--e-global-color-primary, #7e1734)) !important;
}

.tss-wrap .aa-ClearButton::after,
.aa-ClearButton::after {
    display: none;
}

.tss-wrap .aa-SubmitButton,
.aa-SubmitButton {
    background: none !important;
    border: none !important;
    color: var(--tss-icon-color, rgba(0, 0, 0, 0.35)) !important;
}

.tss-wrap button.aa-ClearButton,
button.aa-ClearButton {
    background: none !important;
    border: none !important;
}

.tss-wrap .aa-Form:focus-within .aa-SubmitButton,
.tss-wrap .aa-Form:focus-within .aa-ClearButton,
.aa-Form:focus-within .aa-SubmitButton,
.aa-Form:focus-within .aa-ClearButton {
    color: var(--tss-focus-color, var(--e-global-color-primary, #7e1734)) !important;
}

/* Result items — legacy sizes/gaps */
.tss-ac__link,
.tss-wrap .tss-ac__link {
    display: flex;
    gap: var(--tss-item-gap, 0.5rem);
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.5rem;
}

.tss-ac__img,
.tss-wrap .tss-ac__img {
    width: var(--tss-img-size, 4rem);
    height: var(--tss-img-size, 4rem);
    object-fit: cover;
    background: #fafafa;
}

.tss-ac__info,
.tss-wrap .tss-ac__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.tss-ac__head,
.tss-wrap .tss-ac__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tss-ac__name,
.tss-wrap .tss-ac__name {
    font-weight: 500;
    color: var(--tss-name-color, #000000) !important;
}

.tss-ac__desc,
.tss-wrap .tss-ac__desc {
    font-size: 0.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tss-ac__stock,
.tss-wrap .tss-ac__stock {
    font-size: 0.7em;
    padding: 0.1em 0.5em;
    border-radius: 10rem;
    display: inline-block;
    margin-top: 0.25rem;
    background: var(--tss-stock-bg, #e5e7eb);
}

.tss-ac__stock.in,
.tss-wrap .tss-ac__stock.in {
    background: var(--tss-stock-in-bg, #017e7e) !important;
    color: var(--tss-stock-in-color, #ffffff);
}

.tss-ac__price,
.tss-wrap .tss-ac__price {
    color: var(--tss-price-color, #017e7e) !important;
    display: flex;
    gap: 0.5rem;
}

.tss-wrap .tss-price--regular {
    opacity: 0.7;
    text-decoration: line-through;
}

/* Elementor editor placeholder */
.elementor-editor-active .tss-wrap {
    min-height: 50px;
    border: 2px dashed #ccc;
    position: relative;
}

.elementor-editor-active .tss-wrap::after {
    content: "Typesense Search Container";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 12px;
    pointer-events: none;
}

.tss-wrap .aa-Autocomplete {
    border: none !important;
}

.tss-wrap .aa-Autocomplete::after {
    display: none;
}

/* Form shell — legacy repo */
.tss-wrap .aa-Form,
.aa-Form {
    align-items: center;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha, 1));
    border: 1px solid var(--tss-border-color, rgba(128, 126, 163, 0.8));
    border-radius: var(--tss-radius, 10px) !important;
    display: flex;
    line-height: 1em;
    margin: 0;
    position: relative;
    width: var(--tss-form-width, 90%);
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Default form: transparent shell; color via vars (no forced white text) */
.tss-wrap form.aa-Form,
form.aa-Form {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tss-border-color, rgba(128, 126, 163, 0.8));
    border-radius: 0 !important;
}

.tss-wrap svg.aa-SubmitIcon,
svg.aa-SubmitIcon {
    color: var(--tss-icon-color, rgba(0, 0, 0, 0.35));
}

.tss-wrap .aa-Input,
.tss-wrap input.aa-Input,
.aa-Input {
    color: var(--tss-input-color, inherit);
    background: none;
}

.tss-wrap .aa-Input::placeholder,
.aa-Input::placeholder {
    color: var(--tss-input-placeholder-color, rgba(0, 0, 0, 0.45));
    opacity: 1;
}

.tss-wrap .aa-Form:focus-within,
.aa-Form:focus-within {
    border-color: var(--tss-focus-color, var(--e-global-color-primary, #7e1734)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tss-focus-color, var(--e-global-color-primary, #7e1734)) 35%, transparent);
}

/* Item / facet hover */
.aa-Item[aria-selected="true"] .tss-ac__link,
.aa-Item:hover .tss-ac__link,
.aa-Item[aria-selected="true"] .tss-facet__item,
.aa-Item:hover .tss-facet__item {
    background: var(--tss-item-hover-bg, rgba(0, 0, 0, 0.04));
}

.tss-ac__link:hover,
.tss-facet__item:hover {
    background: var(--tss-item-hover-bg, rgba(0, 0, 0, 0.04));
}

.tss-wrap .aa-Input,
.tss-wrap .aa-Input:focus,
.aa-Input,
.aa-Input:focus {
    border: 0 !important;
}

.tss-wrap input[type="search"]:focus,
input[type="search"]:focus {
    outline: none !important;
}

.tss-wrap button.aa-SubmitButton:hover,
.tss-wrap button.aa-ClearButton:hover {
    background: none !important;
    background-color: transparent !important;
}

.aa-DetachedSearchButtonPlaceholder {
    display: none !important;
}

/* Facets — legacy panel + link styles (panel may be outside .tss-wrap) */
.aa-Panel .tss-facets__header,
.tss-facets__header {
    padding: 6px 12px;
    padding-bottom: 5px !important;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid var(--tss-facet-header-border, #00000040) !important;
    margin-bottom: 4px;
}

.aa-Panel .tss-facet__item,
a.tss-facet__item,
.tss-facet__item {
    display: block;
    padding: 0 10px;
    text-decoration: none;
    font-size: 14px;
    color: var(--tss-facet-color, #000000) !important;
    text-transform: inherit;
    text-align: left;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}