/* PopSearch Live for WooCommerce — style.css v1.2.0 | By Aizaz Ali Afridi */

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

/* ── TRIGGER BUTTON ── */
.ssp-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(--ssp-radius);
  transition:    opacity .15s;
  line-height:   1;
}
.ssp-trigger:hover { opacity: .65; }
.ssp-trigger svg   { width: 20px; height: 20px; display: block; }

/* ── OVERLAY ── */
#ssp-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;
}
#ssp-overlay.ssp-open { opacity: 1; pointer-events: all; }

/* ── PANEL ── */
#ssp-panel {
  position:    fixed;
  top: 0; left: 0; right: 0;
  background:  var(--ssp-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;
}
#ssp-panel.ssp-open { transform: translateY(0); }

/* ── CLOSE ── */
#ssp-close {
  position:      absolute;
  top: 16px; right: 22px;
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         #777;
  padding:       6px;
  border-radius: 50%;
  line-height:   0;
  transition:    background .15s;
}
#ssp-close:hover { background: var(--ssp-light); color: #111; }
#ssp-close svg   { width: 20px; height: 20px; display: block; }

/* ── HEADING ── */
.ssp-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 ── */
.ssp-bar {
  display:       flex;
  align-items:   stretch;
  max-width:     700px;
  margin:        0 auto 18px;
  height:        48px;
  border:        1.5px solid #111;
  border-radius: var(--ssp-radius);
  overflow:      hidden;
}

#ssp-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(--ssp-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;
}

#ssp-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;
}
#ssp-input::placeholder               { color: #bbb; }
#ssp-input::-webkit-search-cancel-button { -webkit-appearance: none; }

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

/* ── TRENDING ── */
.ssp-trending {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  flex-wrap:       wrap;
  margin-bottom:   26px;
}
.ssp-trending-label {
  font-family:   inherit;
  font-size:     12px;
  font-weight:   400;
  color:         var(--ssp-muted);
  letter-spacing:.3px;
}
.ssp-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;
}
.ssp-tag:hover,
.ssp-tag.active { background: var(--ssp-accent); color: #fff; border-color: var(--ssp-accent); }

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

.ssp-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;
}
.ssp-result-item:last-child { border-bottom: none; }
.ssp-result-item:hover      { background: var(--ssp-hover); }

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

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

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

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

/* ── SECTION TITLE ── */
.ssp-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) ── */
.ssp-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+) ── */
.ssp-slider-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  max-width:   1000px;
  margin:      0 auto 28px;
}
.ssp-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;
  line-height:     0;
}
.ssp-arrow svg             { width: 18px; height: 18px; display: block; transition: stroke .18s; }
.ssp-arrow:hover           { background: #111; }
.ssp-arrow:hover svg       { stroke: #fff !important; }
.ssp-arrow:disabled        { opacity: .3; cursor: default; pointer-events: none; }

.ssp-slider-viewport {
  flex:      1;
  overflow:  hidden;
  min-width: 0;
}
.ssp-slider-track {
  display:     flex;
  gap:         16px;
  transition:  transform .36s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ssp-slider-track .ssp-cat-card {
  flex:  0 0 148px;
  width: 148px;
}

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

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

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

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

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

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