/* ShopBooster - Smart Live Search (theme-resistant) */
.sb-search {
    --sb-accent: #00A651;
    --sb-btn-bg: #00A651;
    --sb-btn-icon: #ffffff;
    --sb-input-bg: #ffffff;
    --sb-border: #e2e6ea;
    --sb-radius: 10px;
    --sb-height: 46px;
    --sb-padx: 16px;
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-family: inherit;
    box-sizing: border-box;
}
.sb-search * { box-sizing: border-box; }

/* Reset theme button/input styling inside the widget */
.sb-search button,
.sb-search input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal;
    font: inherit;
    line-height: normal;
    min-height: 0;
    text-shadow: none;
}
.sb-search button { cursor: pointer; }

/* ---------- Desktop search box ---------- */
.sb-search-box { width: 100%; }
.sb-search-form {
    position: relative;
    display: flex !important;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--sb-input-bg);
    border: 1.5px solid var(--sb-border);
    border-radius: var(--sb-radius);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.sb-search-form:focus-within {
    border-color: var(--sb-btn-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-btn-bg) 16%, transparent) !important;
}
.sb-search-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    height: var(--sb-height);
    padding: 0 var(--sb-padx) !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 15px;
    color: #222;
    outline: none;
}
.sb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.sb-search-btn {
    flex: 0 0 auto;
    width: calc(var(--sb-height) + 14px);
    min-width: 48px;
    border: none !important;
    border-radius: 0 !important;
    background: var(--sb-btn-bg) !important;
    color: var(--sb-btn-icon) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: filter .15s;
}
.sb-search-btn:hover { filter: brightness(.94); }
.sb-search-btn svg { width: 22px; height: 22px; }

.sb-search-spin {
    position: absolute;
    right: calc(var(--sb-height) + 24px);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #e2e6ea;
    border-top-color: var(--sb-btn-bg);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: sb-spin .7s linear infinite;
}
.sb-search.sb-nobtn .sb-search-spin { right: 16px; }
.sb-search.sb-loading .sb-search-spin { opacity: 1; }
@keyframes sb-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Mobile-only controls — hidden on desktop (force over theme) */
.sb-search-trigger { display: none !important; }
.sb-search-close { display: none !important; }

/* ---------- Dropdown panel ---------- */
.sb-search-panel {
    position: absolute;
    z-index: 99999;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #edf0f2;
    border-radius: 14px;
    box-shadow: 0 12px 38px rgba(20, 30, 45, .16);
    padding: 6px;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}
.sb-search-panel[hidden] { display: none; }
.sb-grp {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #9aa3ad; padding: 10px 12px 4px;
}
.sb-item, .sb-cat, .sb-all {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 10px;
    text-decoration: none !important; color: #1f2733; transition: background .12s;
}
.sb-item:hover, .sb-cat:hover, .sb-all:hover,
.sb-item.sb-active, .sb-cat.sb-active, .sb-all.sb-active {
    background: color-mix(in srgb, var(--sb-accent) 9%, #f5f7f9);
}
.sb-item-img {
    width: 46px; height: 46px; object-fit: cover;
    border-radius: 8px; flex: 0 0 auto; background: #f3f5f7; margin: 0;
}
.sb-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-item-title {
    font-size: 14px; font-weight: 600; line-height: 1.3; color: #1f2733;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sb-item-sku { font-size: 11px; color: #9aa3ad; }
.sb-item-price { font-size: 13px; font-weight: 700; color: var(--sb-accent); }
.sb-item-price del { color: #b6bdc5; font-weight: 400; margin-right: 4px; }
.sb-item-price ins { text-decoration: none; }
.sb-cat-name { font-size: 14px; font-weight: 600; flex: 1 1 auto; }
.sb-cat-count {
    font-size: 11px; color: #6b7682; background: #f0f2f5;
    border-radius: 999px; padding: 2px 9px;
}
.sb-all {
    justify-content: center; font-size: 13px; font-weight: 700;
    color: var(--sb-accent); margin-top: 4px;
    border-top: 1px solid #f0f2f5; border-radius: 0 0 10px 10px;
}
.sb-empty { padding: 22px 16px; text-align: center; color: #8a939d; font-size: 14px; }

/* ---------- Mobile: icon trigger + overlay ---------- */
.sb-search.sb-mobile .sb-search-box { display: none; }
.sb-search.sb-mobile .sb-search-trigger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: auto; height: auto;
    border: none !important; border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 4px !important;
}
.sb-search.sb-mobile .sb-search-trigger svg { width: 24px; height: 24px; }

.sb-search.sb-mobile.sb-open-mobile .sb-search-box {
    display: block;
    position: fixed; z-index: 100000;
    top: 0; left: 0; right: 0; margin: 0; padding: 12px;
    background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.sb-search.sb-mobile.sb-open-mobile .sb-search-form { border-radius: 10px; }
.sb-search.sb-mobile.sb-open-mobile .sb-search-close {
    display: flex !important;
    align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px;
    border: none !important; background: transparent !important;
    color: #6b7682 !important; font-size: 26px; line-height: 1; padding: 0 !important;
}
.sb-search.sb-mobile.sb-open-mobile .sb-search-panel {
    position: static; margin-top: 10px;
    max-height: calc(100vh - 90px); box-shadow: none; border: none; padding: 0;
}
.sb-search.sb-mobile.sb-open-mobile .sb-search-spin { right: 56px; }

.sb-search-backdrop {
    position: fixed; inset: 0; z-index: 99998; background: rgba(15, 23, 35, .45);
}

@media (max-width: 600px) {
    .sb-item-img { width: 42px; height: 42px; }
    .sb-item-title { font-size: 13.5px; }
}