/**
 * Woodshark Live Search — Styles
 */

:root {
    --wls-primary:       #1a1a1a;
    --wls-primary-dark:  #000000;
    --wls-primary-light: #f2f2f2;
    --wls-accent:        #444444;
    --wls-accent-dark:  #222222;
    --wls-accent-light: #f7f7f7;

    --wls-bg: #ffffff;
    --wls-bg-hover: #f6f6f6;
    --wls-bg-active: #eaeaea;
    --wls-border: #dcdcdc;
    --wls-text: #1a1a1a;
    --wls-text-sub: #666666;
    --wls-text-dim: #aaaaaa;
    --wls-sale: #d32f2f;
    --wls-ok: #2e7d32;
    --wls-no: #c62828;
    --wls-hl-bg: #fff3cd;
    --wls-hl-fg: #856404;
    --wls-sh: 0 6px 24px rgba(0,0,0,.10);
    --wls-r: 10px;
}

.wls-root {
    width:100%;
    max-width:880px;
    margin:18px auto 20px;
    position:relative;
    z-index:9999;
}

/* ── Search box + category dropdown, side by side ── */
.wls-toprow {
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.wls-box { position:relative; flex:1; min-width:0; }

.wls-cat-wrap { flex-shrink:0; }
.wls-cat-select {
    height:39px;
    min-width:170px;
    padding:0 34px 0 14px;
    border:2px solid var(--wls-border);
    border-radius:var(--wls-r);
    background:var(--wls-bg)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 10px center;
    background-size:14px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    font-size:13.5px;
    font-family:inherit;
    color:var(--wls-text);
    cursor:pointer;
    transition:border-color .2s, box-shadow .2s;
}
.wls-cat-select:hover { border-color:var(--wls-text-dim); }
.wls-cat-select:focus {
    outline:none;
    border-color:var(--wls-primary);
    box-shadow:0 0 0 3px rgba(0,0,0,.06);
}

/* ── Search field ── */
.wls-field {
    display:flex; align-items:center;
    background:var(--wls-bg);
    border:2px solid var(--wls-border);
    border-radius:var(--wls-r);
    transition:border-color .2s, box-shadow .2s;
    position:relative;
}
.wls-field:focus-within {
    border-color:var(--wls-primary);
    box-shadow:0 0 0 3px rgba(0,0,0,.06);
}

/* ── Search icon — RIGHT side ── */
.wls-ico {
    position:absolute;
    right:108px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    color:var(--wls-text-dim);
    pointer-events:none;
    transition:color .2s, right .2s;
    flex-shrink:0;
    z-index:2;
}
.wls-field:focus-within .wls-ico {
    color:var(--wls-primary);
}
.wls-field.wls-has-text .wls-ico {
    right:148px;
}

/* ── Loading spinner ── */
.wls-field.wls-busy::after {
    content:''; position:absolute; right:82px; top:50%; transform:translateY(-50%);
    width:18px; height:18px;
    border:2.5px solid rgba(0,0,0,.1);
    border-top-color:var(--wls-primary);
    border-radius:50%;
    animation:wls-spin .55s linear infinite;
    z-index:2;
}
.wls-field.wls-busy.wls-has-text::after {
    right:122px;
}
@keyframes wls-spin { to{transform:translateY(-50%) rotate(360deg)} }

/* ── Input (reduced by 1/4: 52→39px) ── */
.wls-input {
    flex:1; height:39px; padding:0 180px 0 18px;
    border:none; outline:none;
    font-size:15px; color:var(--wls-text); background:transparent; font-family:inherit;
}
.wls-input::placeholder { color:var(--wls-text-dim); }
.wls-input::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }

/* ── Clear X ── */
.wls-x {
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border:none; background:var(--wls-bg-hover);
    border-radius:50%; cursor:pointer; color:var(--wls-text-sub);
    position:absolute; right:148px; top:50%; transform:translateY(-50%);
    transition:all .15s; padding:0; z-index:3;
}
.wls-x:hover { background:var(--wls-bg-active); color:var(--wls-text); }
.wls-x svg { width:13px; height:13px; }

/* ── Submit button (height matches input, bg #88ad35) ── */
.wls-btn {
    height:39px; padding:0 22px; border:none;
    background:#88ad35; color:#ffffff;
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
    cursor:pointer; transition:background .2s, transform .1s;
    font-family:inherit; white-space:nowrap; flex-shrink:0;
    border-radius:0 var(--wls-r) var(--wls-r) 0;
}
.wls-btn:hover { background:var(--wls-primary-dark); }
.wls-btn:active { transform:scale(.97); }

/* ── Dropdown ── */
.wls-drop {
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    background:var(--wls-bg); border:1px solid var(--wls-border);
    border-radius:var(--wls-r); box-shadow:var(--wls-sh);
    overflow:hidden; z-index:10000;
    animation:wls-in .18s ease;
}
@keyframes wls-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.wls-drop-inner { max-height:440px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#ccc transparent; }
.wls-drop-inner::-webkit-scrollbar { width:5px; }
.wls-drop-inner::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }

.wls-shdr { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 5px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--wls-text-sub); }
.wls-shdr span:last-child { font-weight:400; color:var(--wls-text-dim); text-transform:none; letter-spacing:0; }

.wls-ri {
    display:flex; align-items:center; gap:12px; padding:11px 16px;
    cursor:pointer; transition:background .15s; text-decoration:none; color:inherit;
    border-left:3px solid transparent;
}
.wls-ri:hover, .wls-ri.wls-on { background:var(--wls-bg-hover); border-left-color:var(--wls-accent); }
.wls-ri.wls-on { background:var(--wls-accent-light); }

.wls-ri-img { width:52px; height:52px; border-radius:6px; object-fit:cover; background:#f0f0f0; flex-shrink:0; border:1px solid #eee; }
.wls-ri-body { flex:1; min-width:0; }
.wls-ri-title { font-size:13.5px; font-weight:600; color:var(--wls-text); line-height:1.3; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wls-ri-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11px; color:var(--wls-text-dim); }
.wls-ri-stock { font-weight:600; }
.wls-ri-stock.ok { color:var(--wls-ok); }
.wls-ri-stock.no { color:var(--wls-no); }

.wls-ri-right { text-align:right; flex-shrink:0; }
.wls-ri-price { font-size:14.5px; font-weight:700; color:var(--wls-text); line-height:1.2; }
.wls-ri-price .wls-price-sale { color:var(--wls-sale); }
.wls-ri-price .wls-price-sale del { color:var(--wls-text-dim); font-weight:400; font-size:11.5px; }
.wls-ri-price .wls-price-sale ins { text-decoration:none; }
.wls-ri-badge { display:inline-block; font-size:9.5px; font-weight:700; color:#fff; background:var(--wls-sale); padding:1px 5px; border-radius:3px; text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

.wls-ci { display:flex; align-items:center; gap:11px; padding:9px 16px; cursor:pointer; transition:background .15s; text-decoration:none; color:inherit; border-left:3px solid transparent; }
.wls-ci:hover, .wls-ci.wls-on { background:var(--wls-bg-hover); border-left-color:var(--wls-accent); }
.wls-ci-img { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#f0f0f0; flex-shrink:0; border:1px solid #eee; }
.wls-ci-name { font-size:13px; font-weight:600; color:var(--wls-text); }
.wls-ci-count { font-size:11px; color:var(--wls-text-dim); }

.wls-div { height:1px; background:var(--wls-border); margin:4px 16px; }

.wls-empty { padding:28px 16px; text-align:center; }
.wls-empty svg { display:block; margin:0 auto 10px; opacity:.25; }
.wls-empty-t { font-size:14px; font-weight:600; color:var(--wls-text); margin-bottom:3px; }
.wls-empty-d { font-size:12.5px; color:var(--wls-text-sub); max-width:280px; margin:0 auto; line-height:1.5; }

.wls-hl { background:var(--wls-hl-bg); color:var(--wls-hl-fg); padding:0 1px; border-radius:2px; font-weight:700; }

.wls-drop-foot { border-top:1px solid var(--wls-border); }
.wls-viewall { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; padding:11px; border:none; background:var(--wls-primary-light); color:var(--wls-primary); font-size:13px; font-weight:700; cursor:pointer; transition:background .15s; font-family:inherit; }
.wls-viewall:hover { background:var(--wls-bg-active); }
.wls-viewall svg { width:16px; height:16px; }

.wls-overlay { position:fixed; inset:0; z-index:9998; }

/* ══════════════════════════════════════════
   FILTER BAR — NEUTRAL
══════════════════════════════════════════ */
.wls-filter-bar {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:10px; padding:10px 16px;
    background:var(--wls-primary-light);
    border:1px solid var(--wls-border);
    border-radius:var(--wls-r);
    animation:wls-in .2s ease;
}
.wls-filter-label { font-size:13px; color:var(--wls-text-sub); font-weight:500; }
.wls-filter-label strong { font-weight:700; color:var(--wls-text); }
.wls-filter-clear {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 14px; border:1.5px solid var(--wls-primary);
    background:transparent; color:var(--wls-primary);
    font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    border-radius:6px; cursor:pointer; transition:all .15s; font-family:inherit;
    white-space:nowrap;
}
.wls-filter-clear:hover { background:var(--wls-primary); color:#fff; }
.wls-filter-clear svg { width:13px; height:13px; }

/* ══════════════════════════════════════════
   LOADING & EMPTY
══════════════════════════════════════════ */
.wls-prods-loading { position:relative; min-height:200px; }
.wls-prods-loading::after {
    content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:36px; height:36px;
    border:3px solid var(--wls-border);
    border-top-color:var(--wls-primary);
    border-radius:50%;
    animation:wls-spin .6s linear infinite;
}
.wls-empty-page { text-align:center; padding:60px 20px; color:var(--wls-text-sub); }
.wls-empty-page svg { color:var(--wls-text-dim); margin-bottom:14px; }
.wls-empty-page h3 { font-size:17px; color:var(--wls-text); margin-bottom:6px; font-weight:600; }
.wls-empty-page p { font-size:14px; }
.wls-fadein { animation:wls-fade .35s ease; }
@keyframes wls-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Responsive ── */
@media(max-width:600px) {
    .wls-root { margin-bottom:14px; }
    .wls-toprow { flex-direction:column; }
    .wls-cat-wrap { width:100%; }
    .wls-cat-select { width:100%; min-width:0; height:35px; font-size:13px; }
    .wls-input { height:35px; font-size:14px; padding:0 150px 0 14px; }
    .wls-btn { height:35px; padding:0 12px; font-size:11px; }
    .wls-ico { right:78px; }
    .wls-field.wls-has-text .wls-ico { right:112px; }
    .wls-x { right:112px; width:26px; height:26px; }
    .wls-field.wls-busy::after { right:56px; }
    .wls-field.wls-busy.wls-has-text::after { right:90px; }
    .wls-ri { padding:9px 12px; gap:10px; }
    .wls-ri-img { width:44px; height:44px; }
    .wls-ri-title { font-size:12.5px; }
    .wls-ri-price { font-size:13px; }
    .wls-drop-inner { max-height:340px; }
    .wls-filter-bar { flex-direction:column; align-items:flex-start; gap:8px; }
    .wls-filter-clear { align-self:flex-end; }
}

/* ── Dark mode ── */
@media(prefers-color-scheme:dark) {
    :root {
        --wls-bg:#1a1a1a; --wls-bg-hover:#242424; --wls-bg-active:#2e2e2e;
        --wls-border:#3a3a3a; --wls-text:#e0e0e0; --wls-text-sub:#999;
        --wls-text-dim:#666; --wls-hl-bg:rgba(255,243,205,.12); --wls-hl-fg:#ffc107;
        --wls-sh:0 6px 24px rgba(0,0,0,.35); --wls-primary-light:rgba(255,255,255,.06);
    }
    .wls-ri-img,.wls-ci-img { border-color:#333; background:#242424; }
}