/* ═══════════════════════════════════════════
   WooCommerce Search Popup — style.css v1.0.3
   Developer: Aizaz Ali Afridi
═══════════════════════════════════════════ */

:root {
  --wsp-accent:  #111111;
  --wsp-radius:  4px;
  --wsp-bg:      #ffffff;
  --wsp-border:  #e0e0d8;
  --wsp-muted:   #888888;
  --wsp-hover:   #f8f8f4;
  --wsp-light:   #f5f5f0;
}

/* ── TRIGGER BUTTON ── */
.wsp-trigger {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  background:   none;
  border:       none;
  cursor:       pointer;
  font-family:  inherit;
  font-size:    14px;
  font-weight:  400;
  color:        inherit;
  padding:      8px;
  border-radius:var(--wsp-radius);
  transition:   opacity .15s;
  line-height:  1;
}
.wsp-trigger:hover { opacity: .65; }
.wsp-trigger svg   { width:20px; height:20px; display:block; }

/* ── OVERLAY ── */
#wsp-overlay {
  position:                fixed;
  inset:                   0;
  background:              rgba(0,0,0,.5);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:                 99998;
  opacity:                 0;
  pointer-events:          none;
  transition:              opacity .28s ease;
}
#wsp-overlay.wsp-open { opacity:1; pointer-events:all; }

/* ── PANEL ── */
#wsp-panel {
  position:    fixed;
  top:0; left:0; right:0;
  background:  var(--wsp-bg);
  z-index:     99999;
  padding:     36px 5vw 52px;
  max-height:  90vh;
  overflow-y:  auto;
  transform:   translateY(-100%);
  transition:  transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:  0 6px 32px rgba(0,0,0,.14);
  font-family: inherit;
}
#wsp-panel.wsp-open { transform:translateY(0); }

/* ── CLOSE ── */
#wsp-close {
  position:      absolute;
  top:16px; right:22px;
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     20px;
  line-height:   1;
  color:         #777;
  padding:       6px 8px;
  border-radius: 50%;
  transition:    background .15s;
}
#wsp-close:hover { background:var(--wsp-light); color:#111; }

/* ── HEADING ── */
.wsp-heading {
  font-family:    inherit;
  font-size:      clamp(18px,2.6vw,28px);
  font-weight:    400;
  letter-spacing: .5px;
  color:          #111;
  text-align:     center;
  margin:         0 0 22px;
}

/* ══════════════════════════════
   SEARCH BAR
   select=155px | input=flex | btn=52px square
══════════════════════════════ */
.wsp-bar {
  display:       flex;
  align-items:   stretch;
  max-width:     700px;
  margin:        0 auto 18px;
  height:        48px;
  border:        1.5px solid #111;
  border-radius: var(--wsp-radius);
  overflow:      hidden;
}
#wsp-cat-filter {
  flex:               0 0 155px;
  width:              155px;
  border:             none;
  border-right:       1.5px solid #ddd;
  outline:            none;
  padding:            0 28px 0 12px;
  font-family:        inherit;
  font-size:          13px;
  font-weight:        400;
  background:         var(--wsp-light);
  color:              #444;
  cursor:             pointer;
  -webkit-appearance: none;
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position:right 10px center;
}
#wsp-input {
  flex:               1 1 0;
  min-width:          0;
  border:             none;
  outline:            none;
  padding:            0 14px;
  font-family:        inherit;
  font-size:          15px;
  font-weight:        400;
  color:              #111;
  background:         #fff;
  -webkit-appearance: none;
}
#wsp-input::placeholder              { color:#bbb; }
#wsp-input::-webkit-search-cancel-button { -webkit-appearance:none; }

#wsp-search-btn {
  flex:            0 0 52px;
  width:           52px;
  background:      var(--wsp-accent);
  color:           #fff;
  border:          none;
  padding:         0;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      opacity .15s;
}
#wsp-search-btn:hover { opacity:.8; }
#wsp-search-btn svg   { width:18px; height:18px; display:block; }

/* ── TRENDING TAGS ── */
.wsp-trending {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  flex-wrap:       wrap;
  margin-bottom:   26px;
}
.wsp-trending-label {
  font-family:   inherit;
  font-size:     12px;
  font-weight:   400;
  color:         var(--wsp-muted);
  letter-spacing:.3px;
}
.wsp-tag {
  background:    transparent;
  color:         #111;
  border:        1.5px solid #ccc;
  padding:       4px 14px;
  border-radius: 2px;
  font-family:   inherit;
  font-size:     13px;
  font-weight:   400;
  cursor:        pointer;
  transition:    all .15s;
}
.wsp-tag:hover,
.wsp-tag.active { background:var(--wsp-accent); color:#fff; border-color:var(--wsp-accent); }

/* ── LIVE RESULTS ── */
#wsp-live {
  max-width:     700px;
  margin:        0 auto 26px;
  display:       none;
  border:        1.5px solid var(--wsp-border);
  border-radius: var(--wsp-radius);
  overflow:      hidden;
  background:    #fff;
}
#wsp-live.wsp-show { display:block; }

.wsp-result-item {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         11px 16px;
  border-bottom:   1px solid #f2f2ee;
  text-decoration: none;
  color:           inherit;
  transition:      background .12s;
}
.wsp-result-item:last-child { border-bottom:none; }
.wsp-result-item:hover      { background:var(--wsp-hover); }

.wsp-result-img   { width:50px; height:50px; object-fit:cover; border-radius:3px; background:var(--wsp-light); flex-shrink:0; }
.wsp-result-info  { flex:1; min-width:0; }
.wsp-result-name  { font-size:14px; font-weight:400; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:inherit; }
.wsp-result-cat   { font-size:12px; font-weight:400; color:var(--wsp-muted); margin-top:2px; font-family:inherit; }
.wsp-result-price { font-size:14px; font-weight:400; color:#111; white-space:nowrap; font-family:inherit; }
.wsp-result-price del { color:var(--wsp-muted); font-size:12px; margin-right:4px; }

.wsp-no-results,
.wsp-loading {
  padding:    20px; text-align:center;
  color:      var(--wsp-muted); font-size:14px;
  font-weight:400; font-family:inherit;
}
.wsp-loading { display:flex; align-items:center; justify-content:center; gap:10px; }
.wsp-spinner { width:18px; height:18px; border:2px solid #eee; border-top:2px solid var(--wsp-accent); border-radius:50%; animation:wsp-spin .7s linear infinite; }
@keyframes wsp-spin { to { transform:rotate(360deg); } }

.wsp-view-results {
  display:block; text-align:center; padding:10px;
  font-size:13px; font-weight:400; color:var(--wsp-accent);
  text-decoration:none; border-top:1px solid #f2f2ee; font-family:inherit;
}
.wsp-view-results:hover { background:var(--wsp-hover); }

mark.wsp-hl { background:#f5e642; border-radius:2px; padding:0 1px; color:inherit; }

/* ── SECTION TITLE ── */
.wsp-pop-title {
  font-family:    inherit;
  font-size:      clamp(15px,2vw,20px);
  font-weight:    400;
  letter-spacing: .8px;
  text-align:     center;
  color:          #111;
  margin-bottom:  18px;
}

/* ══════════════════════════════
   CATEGORY GRID (≤6 items)
══════════════════════════════ */
.wsp-cat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill,minmax(130px,1fr));
  gap:                   16px;
  max-width:             960px;
  margin:                0 auto 28px;
}

/* ══════════════════════════════
   CATEGORY SLIDER (7+ items)
══════════════════════════════ */
.wsp-slider-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  max-width:   1000px;
  margin:      0 auto 28px;
}

/* Arrow buttons — black border, black icon */
.wsp-arrow {
  flex-shrink:     0;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          2px solid #111;
  background:      #fff;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .18s;
  padding:         0;
  z-index:         2;
}
.wsp-arrow svg               { width:18px; height:18px; display:block; transition:stroke .18s; }
.wsp-arrow:hover             { background:#111; }
.wsp-arrow:hover svg         { stroke:#fff !important; }
.wsp-arrow:disabled          { opacity:.3; cursor:default; pointer-events:none; }

/* Viewport clips the track */
.wsp-slider-viewport {
  flex:     1;
  overflow: hidden;
  min-width:0;
}

/* Track — horizontal row of cards */
.wsp-slider-track {
  display:     flex;
  gap:         16px;
  transition:  transform .36s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Each slider card — fixed width */
.wsp-slider-track .wsp-cat-card {
  flex:  0 0 148px;
  width: 148px;
}

/* ── SHARED CARD STYLES ── */
.wsp-cat-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  color:           inherit;
}
.wsp-cat-img {
  width:         100%;
  aspect-ratio:  1;
  background:    var(--wsp-light);
  border-radius: var(--wsp-radius);
  overflow:      hidden;
  transition:    transform .2s, box-shadow .2s;
}
.wsp-cat-card:hover .wsp-cat-img { transform:scale(1.04); box-shadow:0 4px 14px rgba(0,0,0,.1); }
.wsp-cat-img img { width:100%; height:100%; object-fit:cover; display:block; }

.wsp-cat-name  { font-family:inherit; font-size:13px; font-weight:400; color:#111; text-align:center; line-height:1.3; }
.wsp-cat-count { font-family:inherit; font-size:11px; font-weight:400; color:var(--wsp-muted); text-align:center; margin-top:-4px; }
.wsp-no-cats   { text-align:center; color:var(--wsp-muted); font-size:14px; padding:20px 0; font-family:inherit; }

/* ── VIEW ALL BUTTON ── */
.wsp-view-all {
  display:         block;
  width:           fit-content;
  margin:          0 auto;
  background:      var(--wsp-accent);
  color:           #fff;
  text-decoration: none;
  font-family:     inherit;
  font-size:       13px;
  font-weight:     400;
  letter-spacing:  .6px;
  padding:         12px 40px;
  border-radius:   var(--wsp-radius);
  transition:      opacity .15s;
}
.wsp-view-all:hover { opacity:.8; color:#fff; }

/* ── MOBILE ── */
@media (max-width:640px) {
  #wsp-panel { padding:28px 4vw 40px; }

  .wsp-bar { flex-wrap:wrap; height:auto; border:none; gap:8px; }
  #wsp-cat-filter { flex:unset; width:100%; height:44px; border:1.5px solid #ccc; border-radius:var(--wsp-radius); background-color:var(--wsp-light); }
  #wsp-input      { width:100%; height:44px; border:1.5px solid #ccc; border-radius:var(--wsp-radius); padding:0 14px; }
  #wsp-search-btn { flex:unset; width:100%; height:44px; border-radius:var(--wsp-radius); justify-content:center; }

  .wsp-cat-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
  .wsp-slider-track .wsp-cat-card { flex:0 0 108px; width:108px; }
  .wsp-arrow { width:34px; height:34px; }
  .wsp-arrow svg { width:16px; height:16px; }
}