/* =========================
   Modern Product Search (MPS)
   Scoped: .mps-*
========================= */

.mps-wrap{ width:100%; }

.mps-form{
  display:block;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px;
  box-shadow:0 12px 28px rgba(2,6,23,.06);
}

.mps-label{
  display:block;
  font-weight:800;
  font-size:14px;
  margin:0 0 8px;
  color:rgba(2,6,23,.88);
}

.mps-field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.10);
}

.mps-ico{ opacity:.75; }

.mps-input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
  min-width:0;
}

.mps-clear{
  width:34px; height:34px;
  border-radius:999px;
  border:0;
  background:transparent;
  cursor:pointer;
  opacity:.7;
}
.mps-clear:hover{ opacity:1; background:rgba(2,6,23,.04); }

.mps-submit{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#0b5cff;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.mps-hint{
  margin:10px 0 0;
  font-size:12.5px;
  color:rgba(2,6,23,.62);
}

.mps-live{
  margin-top:10px;
  font-size:12.5px;
  color:rgba(2,6,23,.70);
  min-height:18px;
}

.mps-dd[hidden]{ display:none; }

.mps-dd{
  margin-top:10px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(2,6,23,.08);
}

.mps-item{
  display:flex;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  color:inherit;
  align-items:center;
}
.mps-item:hover{ background:rgba(2,6,23,.03); }
.mps-item[aria-selected="true"]{ background:rgba(11,92,255,.08); }

.mps-thumb{
  width:44px; height:44px;
  border-radius:12px;
  background:#f1f5f9;
  overflow:hidden;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.mps-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.mps-meta{ min-width:0; }
.mps-name{
  margin:0;
  font-weight:900;
  font-size:13.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mps-price{
  font-size:12.5px;
  opacity:.75;
  margin-top:3px;
}

.mps-empty{
  padding:12px;
  font-size:13px;
  color:rgba(2,6,23,.72);
}

/* Category chips */
.mps-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.mps-chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  font-size:12.5px;
}
.mps-chip:hover{ box-shadow:0 12px 22px rgba(2,6,23,.08); }

/* Focus accessibility */
.mps-field:has(.mps-input:focus){
  outline:3px solid rgba(59,130,246,.28);
  outline-offset:2px;
}
.mps-submit:focus,
.mps-clear:focus,
.mps-chip:focus{
  outline:3px solid rgba(59,130,246,.28);
  outline-offset:2px;
}

/* Responsive */
@media (max-width:480px){
  .mps-submit{ padding:10px 12px; }
  .mps-form{ padding:12px; border-radius:16px; }
}