/**
 * Beepex Typsense override
 * themes/astra-child/grupoeon-enhancements/typsense-search.css
 */

:root {
    --tss-beepex-primary: var(--e-global-color-primary, #fab80d);
    --tss-beepex-input-text: #475569;
    --tss-beepex-name-hover: #c38d04; /* prod a:hover measured */
    --aa-selected-color-rgb: 179, 173, 214;
    --aa-selected-color-alpha: 0.205;
}

body.tss-theme-beepex-site .tss-wrap,
body.tss-theme-beepex-site .tss-wrap.tss-theme-beepex {
    --tss-focus-color: var(--tss-beepex-primary);
    --tss-price-color: var(--tss-beepex-primary);
    --tss-stock-in-bg: var(--tss-beepex-primary);
    --tss-stock-in-color: #ffffff;
    --tss-input-color: var(--tss-beepex-input-text);
    --tss-input-placeholder-color: rgba(71, 85, 105, 0.7);
    --tss-icon-color: #000000;
    --tss-border-color: var(--tss-beepex-primary);
    --tss-item-hover-bg: transparent;
    --tss-name-color: #000000;
    --tss-facet-color: #000000;
    --tss-radius: 10px;
    --tss-img-size: 5.5rem; /* larger thumbs — visual parity with prod list density */
}

/* ===== Form ===== */
body.tss-theme-beepex-site .tss-wrap .aa-Form,
body.tss-theme-beepex-site .tss-wrap form.aa-Form,
body.tss-theme-beepex-site form.aa-Form {
    align-items: center !important;
    background: #fff !important;
    border: 1px solid var(--tss-beepex-primary) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    display: flex !important;
    line-height: 1em !important;
    margin: 0 !important;
    width: 90% !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

body.tss-theme-beepex-site .tss-wrap .aa-Form:focus-within,
body.tss-theme-beepex-site form.aa-Form:focus-within {
    border: 1px solid var(--tss-beepex-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tss-beepex-primary) 35%, transparent) !important;
}

body.tss-theme-beepex-site .tss-wrap .aa-Input,
body.tss-theme-beepex-site .aa-Input,
body.tss-theme-beepex-site input.aa-Input {
    background: #fff !important;
    border: 0 !important;
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    color: var(--tss-beepex-input-text) !important;
    font-size: 15px !important;
    outline: none !important;
    padding: 12px 16px !important;
}

body.tss-theme-beepex-site .aa-Input:focus {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    color: var(--tss-beepex-input-text) !important;
}

body.tss-theme-beepex-site .aa-Input::placeholder {
    color: rgba(71, 85, 105, 0.7) !important;
    opacity: 1 !important;
}

body.tss-theme-beepex-site .aa-SubmitButton,
body.tss-theme-beepex-site .aa-ClearButton,
body.tss-theme-beepex-site .aa-Form:focus-within .aa-SubmitButton,
body.tss-theme-beepex-site .aa-Form:focus-within .aa-ClearButton {
    background: transparent !important;
    border: 0 !important;
    color: #000 !important;
}

body.tss-theme-beepex-site svg.aa-SubmitIcon,
body.tss-theme-beepex-site .aa-SubmitIcon {
    color: #000 !important;
    fill: currentColor !important;
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px !important;
    height: 20px !important;
}

/* ===== Row hover bg (Algolia selected) ===== */
body.tss-theme-beepex-site .aa-Panel,
body.tss-theme-beepex-site .aa-Panel * {
    --tss-item-hover-bg: transparent;
}

body.tss-theme-beepex-site .aa-Item {
    transition: background-color 0.12s ease !important;
}

body.tss-theme-beepex-site .aa-Item[aria-selected="true"],
body.tss-theme-beepex-site .aa-Item:hover,
body.tss-theme-beepex-site .aa-Item.aa-Item--active {
    background: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha)) !important;
}

body.tss-theme-beepex-site .aa-Item .tss-ac__link,
body.tss-theme-beepex-site .aa-Item:hover .tss-ac__link,
body.tss-theme-beepex-site .aa-Item[aria-selected="true"] .tss-ac__link,
body.tss-theme-beepex-site .tss-ac__link:hover {
    background: transparent !important;
    text-decoration: none !important;
}

/* Link shell stays black; name is what turns yellow */
body.tss-theme-beepex-site .aa-Panel a.tss-ac__link,
body.tss-theme-beepex-site .aa-Panel a.tss-ac__link:hover,
body.tss-theme-beepex-site .aa-Panel a.tss-ac__link:focus {
    color: #000 !important;
}

/* ===== .tss-ac__name: black -> yellow with transition (prod behavior) ===== */
body.tss-theme-beepex-site .tss-ac__name,
body.tss-theme-beepex-site .aa-Panel .tss-ac__name,
body.tss-theme-beepex-site .aa-Item .tss-ac__name {
    color: #000000 !important;
    transition: color 0.2s linear !important;
}

body.tss-theme-beepex-site .aa-Item:hover .tss-ac__name,
body.tss-theme-beepex-site .aa-Item[aria-selected="true"] .tss-ac__name,
body.tss-theme-beepex-site .aa-Item.aa-Item--active .tss-ac__name,
body.tss-theme-beepex-site .tss-ac__link:hover .tss-ac__name,
body.tss-theme-beepex-site .tss-ac__link:focus .tss-ac__name {
    color: var(--tss-beepex-name-hover) !important;
}

/* facets: same yellow hover as prod links */
body.tss-theme-beepex-site .tss-facet__item {
    color: #000 !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: color 0.2s linear !important;
}

body.tss-theme-beepex-site .aa-Item:hover .tss-facet__item,
body.tss-theme-beepex-site .aa-Item[aria-selected="true"] .tss-facet__item,
body.tss-theme-beepex-site .tss-facet__item:hover,
body.tss-theme-beepex-site .tss-facet__item:focus {
    color: var(--tss-beepex-name-hover) !important;
    background: transparent !important;
}

/* Product image size */
body.tss-theme-beepex-site .tss-ac__img,
body.tss-theme-beepex-site .aa-Panel .tss-ac__img {
    width: var(--tss-img-size, 5.5rem) !important;
    height: var(--tss-img-size, 5.5rem) !important;
    min-width: var(--tss-img-size, 5.5rem) !important;
    min-height: var(--tss-img-size, 5.5rem) !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

body.tss-theme-beepex-site .tss-ac__name {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

/* Prod JS does not render prices in autocomplete — hide on Beepex */
body.tss-theme-beepex-site .tss-ac__price,
body.tss-theme-beepex-site .aa-Panel .tss-ac__price {
    display: none !important;
}

/* stock */
body.tss-theme-beepex-site .tss-ac__stock.in,
body.tss-theme-beepex-site .aa-Item:hover .tss-ac__stock.in,
body.tss-theme-beepex-site .aa-Item[aria-selected="true"] .tss-ac__stock.in {
    background: var(--tss-beepex-primary) !important;
    color: #fff !important;
}

/* ===== Mobile detached button (prod look) =====
 * Prod shows pill button with "Buscar..." + yellow 2px border.
 * Base Enhancements CSS hides placeholder (display:none !important).
 */
body.tss-theme-beepex-site .aa-DetachedSearchButton,
body.tss-theme-beepex-site .tss-wrap .aa-DetachedSearchButton {
    align-items: center !important;
    background: #fff !important;
    border: 2px solid var(--tss-beepex-primary) !important;
    border-radius: 50px !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0 !important;
    color: #3b3b3b !important;
    display: flex !important;
    padding: 10px !important;
    width: 100% !important;
}

body.tss-theme-beepex-site .aa-DetachedSearchButtonPlaceholder,
body.tss-theme-beepex-site .tss-wrap .aa-DetachedSearchButtonPlaceholder {
    color: #3b3b3b !important;
    display: block !important;
    font-size: 16px !important;
    text-transform: capitalize !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.tss-theme-beepex-site .aa-DetachedSearchButtonIcon,
body.tss-theme-beepex-site .aa-DetachedSearchButtonIcon .aa-SubmitIcon {
    color: #000 !important;
    fill: currentColor !important;
}

body.tss-theme-beepex-site .aa-DetachedSearchButtonQuery {
    text-transform: lowercase !important;
}

/* Opened detached form: rest = muted border (prod), yellow only on focus */
body.tss-theme-beepex-site .aa-DetachedContainer .aa-Form,
body.tss-theme-beepex-site.aa-Detached .aa-Form {
    border: 1px solid rgba(128, 126, 163, 0.8) !important;
    box-shadow: none !important;
}

body.tss-theme-beepex-site .aa-DetachedContainer .aa-Form:focus-within,
body.tss-theme-beepex-site.aa-Detached .aa-Form:focus-within {
    border: 1px solid var(--tss-beepex-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tss-beepex-primary) 35%, transparent) !important;
}