/* WooAlx Search Pro – Frontend Styles */

:root {
    --was-submit-bg:      #222222;
    --was-submit-color:   #ffffff;
    --was-icon-color:     #222222;
    --was-input-bg:       #ffffff;
    --was-input-color:    #333333;
    --was-input-border:   #dddddd;
    --was-ac-bg:          #ffffff;
    --was-ac-selected:    #f5f5f5;
    --was-ac-text:        #333333;
    --was-ac-highlight:   #e63946;
    --was-ac-border:      #e0e0e0;
    --was-ac-price:       #e63946;
    --was-ac-cat-label:   #888888;
    --was-breakpoint:     768px;
    --was-img-w:          52px;
    --was-img-h:          52px;
    --was-img-radius:     4px;
    --was-img-fit:        cover;
    --was-font:           inherit;
    --was-name-size:      14px;
    --was-name-weight:    500;
    --was-name-color:     #222222;
    --was-price-size:     14px;
    --was-price-weight:   600;
    --was-sku-size:       11px;
    --was-sku-color:      #888888;
    --was-desc-size:      12px;
    --was-desc-color:     #777777;
    --was-cat-label-size: 10px;
    --was-more-size:      13px;
    --was-more-weight:    600;
    --was-dropdown-shadow:  0 6px 24px rgba(0,0,0,.14);
    --was-dropdown-radius:  6px;
    --was-dropdown-maxh:    520px;
    --was-dropdown-w:       100%;
    --was-item-pv:          9px;
    --was-item-ph:          14px;
    --was-item-gap:         12px;
    --was-radius:           4px;
    --was-transition:       .2s ease;
}

.was-wrapper {
    position: relative; display: inline-flex; align-items: center;
    width: 100%; box-sizing: border-box; font-family: var(--was-font);
}
.was-icon-toggle {
    background: none; border: none; cursor: pointer; padding: 6px;
    color: var(--was-icon-color); display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; transition: opacity var(--was-transition);
}
.was-icon-toggle:hover { opacity: .7; }
.was-icon-toggle svg { width: 22px; height: 22px; }

.was-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 9998; animation: wasOverlayIn .2s ease;
}
.was-overlay.active { display: block; }
@keyframes wasOverlayIn { from{opacity:0}to{opacity:1} }

.was-search-panel { position: relative; width: 100%; }
.was-layout-responsive .was-search-panel { display: none; }
.was-layout-responsive.was-panel-open .was-search-panel,
.was-layout-always_bar .was-search-panel { display: block; }
.was-layout-always_icon .was-search-panel { display: none; }
.was-layout-always_icon.was-panel-open .was-search-panel {
    display: block; position: fixed; top: 60px; left: 50%;
    transform: translateX(-50%); width: min(90vw,600px); z-index: 9999;
}

.was-form {
    display: flex; align-items: stretch; width: 100%;
    border: 1px solid var(--was-input-border); border-radius: var(--was-radius);
    overflow: hidden; transition: border-color var(--was-transition), box-shadow var(--was-transition);
    background: var(--was-input-bg);
}
.was-form:focus-within { border-color: var(--was-submit-bg); box-shadow: 0 0 0 2px rgba(0,0,0,.07); }

.was-input-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.was-input {
    width: 100%; border: none; outline: none; padding: 10px 36px 10px 14px;
    font-size: 15px; line-height: 1.4; background: transparent;
    color: var(--was-input-color); font-family: var(--was-font); -webkit-appearance: none;
}
.was-input::placeholder { opacity: .55; }
.was-input::-webkit-search-cancel-button { display: none; }

.was-loading {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: none; width: 18px; height: 18px; color: var(--was-submit-bg);
}
.was-loading svg { width: 100%; height: 100%; stroke: currentColor; }
.was-loading.active { display: block; }

.was-btn {
    flex-shrink: 0; border: none; padding: 0 16px;
    background: var(--was-submit-bg); color: var(--was-submit-color);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; gap: 6px;
    transition: opacity var(--was-transition); min-width: 44px;
}
.was-btn:hover { opacity: .88; }
.was-btn svg { width: 18px; height: 18px; }

.was-close-btn {
    display: none; background: none; border: none; padding: 8px;
    cursor: pointer; color: var(--was-input-color); opacity: .6;
    transition: opacity var(--was-transition); flex-shrink: 0;
}
.was-close-btn:hover { opacity: 1; }
.was-close-btn svg { width: 20px; height: 20px; }
.was-panel-open .was-close-btn { display: flex; align-items: center; }

.was-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: var(--was-dropdown-w); min-width: 100%;
    background: var(--was-ac-bg); border: 1px solid var(--was-ac-border);
    border-radius: var(--was-dropdown-radius); box-shadow: var(--was-dropdown-shadow);
    z-index: 10000; display: none; overflow: hidden; animation: wasDropIn .15s ease;
    max-height: var(--was-dropdown-maxh); overflow-y: auto;
}
.was-dropdown.open { display: block; }
@keyframes wasDropIn { from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)} }
.was-dropdown::-webkit-scrollbar { width: 5px; }
.was-dropdown::-webkit-scrollbar-thumb { background: var(--was-ac-border); border-radius: 99px; }

.was-section-label {
    padding: 8px var(--was-item-ph) 4px;
    font-size: var(--was-cat-label-size); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--was-ac-cat-label); font-family: var(--was-font);
}

.was-cat-item {
    display: flex; align-items: center; padding: 7px var(--was-item-ph);
    cursor: pointer; color: var(--was-ac-text); text-decoration: none; gap: 8px;
    transition: background var(--was-transition); font-size: 14px; font-family: var(--was-font);
}
.was-cat-item:hover,.was-cat-item.focused { background: var(--was-ac-selected); }
.was-cat-item img { width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.was-cat-item-name { flex: 1; }
.was-cat-item-count { font-size:11px;color:var(--was-ac-cat-label);background:#f0f0f0;border-radius:999px;padding:1px 7px; }

.was-product-item {
    display: flex; align-items: center;
    padding: var(--was-item-pv) var(--was-item-ph);
    cursor: pointer; color: var(--was-ac-text); text-decoration: none;
    gap: var(--was-item-gap); transition: background var(--was-transition);
    border-top: 1px solid var(--was-ac-border); font-family: var(--was-font);
}
.was-product-item:first-of-type { border-top: none; }
.was-product-item:hover,.was-product-item.focused { background: var(--was-ac-selected); }

.was-product-img {
    flex-shrink: 0; width: var(--was-img-w); height: var(--was-img-h);
    border-radius: var(--was-img-radius); object-fit: var(--was-img-fit);
    background: #f5f5f5; display: block;
}

.was-product-info { flex: 1; min-width: 0; }

.was-product-name {
    font-size: var(--was-name-size); font-weight: var(--was-name-weight);
    color: var(--was-name-color); line-height: 1.3;
}
.was-product-name mark { background:none;color:var(--was-ac-highlight);font-weight:700;padding:0; }

.was-product-sku { font-size:var(--was-sku-size);color:var(--was-sku-color);margin-top:2px; }

.was-product-desc { font-size:var(--was-desc-size);color:var(--was-desc-color);margin-top:3px; }

.was-product-price {
    flex-shrink: 0; font-size: var(--was-price-size); font-weight: var(--was-price-weight);
    color: var(--was-ac-price); text-align: right; white-space: nowrap;
}
.was-product-price del {
    font-weight:400;color:var(--was-ac-cat-label);
    font-size:calc(var(--was-price-size) * .82);display:block;text-decoration:line-through;
}
.was-product-price ins { text-decoration:none; }

.was-oos-badge {
    font-size:10px;background:#f0f0f0;color:#999;border-radius:3px;
    padding:1px 5px;margin-left:4px;vertical-align:middle;font-weight:400;
}

.was-no-results {
    padding:20px var(--was-item-ph);text-align:center;
    color:var(--was-ac-cat-label);font-size:14px;font-family:var(--was-font);
}

.was-more-results {
    display:block;padding:10px var(--was-item-ph);text-align:center;
    font-size:var(--was-more-size);font-weight:var(--was-more-weight);
    color:var(--was-submit-bg);border-top:1px solid var(--was-ac-border);
    text-decoration:none;transition:background var(--was-transition);font-family:var(--was-font);
}
.was-more-results:hover { background:var(--was-ac-selected); }

/* ── Style variants ── */
.was-style-rounded .was-form { border-radius:999px; }
.was-style-rounded .was-btn  { border-radius:0 999px 999px 0; }
.was-style-rounded .was-dropdown { border-radius:12px; }
.was-style-minimal .was-form {
    border:none;border-bottom:2px solid var(--was-input-border);
    border-radius:0;background:transparent;
}
.was-style-minimal .was-btn { background:transparent;color:var(--was-icon-color); }
.was-style-minimal .was-form:focus-within { border-bottom-color:var(--was-submit-bg);box-shadow:none; }

/* ── Responsive ── */
@media (max-width:768px) {
    .was-layout-responsive .was-icon-toggle { display:flex; }
    .was-layout-responsive.was-panel-open .was-search-panel {
        display:block;position:fixed;top:0;left:0;right:0;z-index:9999;
        padding:12px 14px;background:var(--was-input-bg);
        box-shadow:0 2px 12px rgba(0,0,0,.15);animation:wasPanelSlide .2s ease;
    }
    .was-dropdown { width:100%;min-width:100%; }
}
@media (min-width:769px) {
    .was-layout-responsive .was-icon-toggle { display:none; }
    .was-layout-responsive .was-search-panel { display:block !important; }
}
@keyframes wasPanelSlide {
    from{transform:translateY(-100%);opacity:0}
    to{transform:translateY(0);opacity:1}
}