/* ───────────────────────────────────────────────
   Woo Smart Search — search.css  v1.4
   ─────────────────────────────────────────────── */

:root {
  --wss-primary:      #1d6ef5;
  --wss-bg:           #ffffff;
  --wss-border:       #d8dde6;
  --wss-hover:        #f4f7ff;
  --wss-text:         #1a1a2e;
  --wss-muted:        #6b7280;
  --wss-icon-color:   #1a1a2e;
  --wss-underlay:     rgba(0,0,0,0.5);
  --wss-radius:       10px;
  --wss-shadow:       0 8px 32px rgba(0,0,0,.14);
  --wss-badge-bg:     #eef2ff;
  --wss-badge-color:  #4361ee;
  --wss-dd-width:     420px;
  --wss-dd-offset-x:  0px;
  --wss-dd-offset-y:  8px;
}

/* ══════════════════════════════════════════════
   WRAPPER — always inline, no full-page takeover
   ══════════════════════════════════════════════ */
.wss-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  box-sizing: border-box;
}

/* BAR mode: full-width block */
.wss-mode-bar {
  display: block;
  width: 100%;
  max-width: 520px;
}
.wss-mode-bar .wss-panel {
  width: 100%;
}

/* ══════════════════════════════════════════════
   ICON TRIGGER
   ══════════════════════════════════════════════ */
.wss-icon-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wss-icon-color);
  transition: opacity .15s;
  border-radius: 50%;
}
.wss-icon-trigger:hover { opacity: .7; }

/* ══════════════════════════════════════════════
   OVERLAY — only shown when darken_bg is on
   Sits behind the dropdown, dims the page
   Does NOT create a full-page takeover bar
   ══════════════════════════════════════════════ */
.wss-overlay {
  position: fixed;
  inset: 0;
  background: var(--wss-underlay);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.wss-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════
   PANEL — the input row
   In BAR mode: always visible, sits in DOM
   In ICON mode: toggles visibility, stays in place
   NEVER becomes a fixed top bar
   ══════════════════════════════════════════════ */
.wss-panel {
  position: relative;
  width: 100%;
}

/* Icon mode: panel hidden until icon clicked */
.wss-panel-hidden {
  display: none;
}

/* When open in icon mode: panel appears inline below icon */
.wss-wrapper.is-open .wss-panel {
  display: block;
}

/* ══════════════════════════════════════════════
   INPUT ROW
   ══════════════════════════════════════════════ */
.wss-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--wss-border);
  border-radius: var(--wss-radius);
  background: var(--wss-bg);
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
  width: 100%;
}
.wss-input-wrap:focus-within {
  border-color: var(--wss-primary);
  box-shadow: 0 0 0 3px rgba(29,110,245,.13);
}

.wss-icon-search-sm {
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  color: var(--wss-muted);
  flex-shrink: 0;
}

.wss-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 6px 10px 0;
  font-size: 14px;
  color: var(--wss-text);
  min-width: 0;
  -webkit-appearance: none;
}
.wss-input::-webkit-search-cancel-button { display: none; }
.wss-input::placeholder { color: var(--wss-muted); }

.wss-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--wss-border);
  border-top-color: var(--wss-primary);
  border-radius: 50%;
  animation: wss-spin .6s linear infinite;
  flex-shrink: 0;
  margin-right: 8px;
}
.wss-wrapper.is-loading .wss-spinner { display: block; }
@keyframes wss-spin { to { transform: rotate(360deg); } }

.wss-clear,
.wss-panel-close {
  background: none;
  border: none;
  padding: 0 10px;
  cursor: pointer;
  color: var(--wss-muted);
  display: flex;
  align-items: center;
  transition: color .15s;
  flex-shrink: 0;
}
.wss-clear:hover, .wss-panel-close:hover { color: var(--wss-text); }

/* ══════════════════════════════════════════════
   DROPDOWN
   Positioned below the input, controlled width
   Uses CSS vars set from settings
   ══════════════════════════════════════════════ */
.wss-dropdown {
  position: absolute;
  top: calc(100% + var(--wss-dd-offset-y));
  left: var(--wss-dd-offset-x);
  width: var(--wss-dd-width);
  min-width: 280px;
  background: var(--wss-bg);
  border: 1.5px solid var(--wss-border);
  border-radius: var(--wss-radius);
  box-shadow: var(--wss-shadow);
  z-index: 9999;
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.wss-dropdown[hidden] { display: none; }

/* Group labels */
.wss-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wss-muted);
  padding: 10px 14px 4px;
}

/* Result item */
.wss-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--wss-text);
  transition: background .1s;
  cursor: pointer;
}
.wss-item:hover,
.wss-item.is-active { background: var(--wss-hover); }
.wss-item + .wss-item { border-top: 1px solid #f2f4f8; }

/* Thumbnail */
.wss-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--wss-border);
  flex-shrink: 0;
  background: #f5f7fa;
}
.wss-thumb-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--wss-hover);
  border: 1px solid var(--wss-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--wss-muted);
}
/* Page icon — same size as thumb for alignment */
.wss-page-icon {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--wss-border);
  background: #f8f9fc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--wss-muted);
}
/* Term (category/brand) icon */
.wss-term-icon {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--wss-badge-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--wss-badge-color);
}

/* Text block */
.wss-item-body { flex: 1; min-width: 0; }
.wss-item-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.wss-item-title mark {
  background: rgba(29,110,245,.12);
  color: var(--wss-primary);
  border-radius: 2px;
  font-style: normal;
}
.wss-item-meta {
  font-size: 11px;
  color: var(--wss-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wss-item-meta .wss-sku::before { content: 'SKU: '; }
.wss-item-meta .wss-sku + .wss-cat::before { content: ' · '; }
.wss-item-meta .wss-count { opacity: .7; }

/* Price */
.wss-item-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--wss-text);
  white-space: nowrap;
  flex-shrink: 0;
}
.wss-item-price del { font-weight: 400; color: var(--wss-muted); font-size: 10px; margin-right: 2px; }
.wss-item-price ins { text-decoration: none; color: #e63946; }

/* Badges */
.wss-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--wss-badge-bg);
  color: var(--wss-badge-color);
  flex-shrink: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.wss-badge.is-sale   { background: #fff0f0; color: #e63946; }
.wss-badge.is-oos    { background: #f5f5f5; color: #999; }
.wss-badge.is-page   { background: #f0fff4; color: #2d8a4e; }
.wss-badge.is-post   { background: #fff8f0; color: #d4770a; }
.wss-badge.is-cat    { background: #f0f4ff; color: #4361ee; }
.wss-badge.is-brand  { background: #f3f0ff; color: #7c3aed; }

/* Footer — View all link only (no keyboard hint) */
.wss-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 7px 14px;
  border-top: 1px solid var(--wss-border);
}
.wss-view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--wss-primary);
  text-decoration: none;
}
.wss-view-all:hover { text-decoration: underline; }

/* No results */
.wss-no-results {
  padding: 18px 14px;
  font-size: 13px;
  color: var(--wss-muted);
  text-align: center;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wss-dropdown {
    /* On mobile cap to viewport width */
    width: calc(100vw - 24px);
    left: 0;
    right: 0;
  }
  .wss-thumb,.wss-thumb-placeholder,.wss-page-icon,.wss-term-icon { width: 36px; height: 36px; }
}