/* ============================================================
   pwg.ro — Seller matcher panel of the game market tools page.
   Loaded after base.css and olx.css, which provide the tool band,
   status line, toggles, and select styling this panel shares.
   ============================================================ */

/* ---------- list form ---------- */
.match-form{margin-bottom:22px;}
.match-form textarea{
  width:100%;resize:vertical;min-height:130px;
  background:var(--field);border:1px solid var(--line);border-radius:16px;
  padding:14px 18px;color:#fff;font-family:var(--sans);font-size:1rem;line-height:1.5;
  outline:none;transition:border-color .15s;
}
.match-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow);}
.match-form textarea::placeholder{color:var(--faint);}

.match-controls{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:12px;}
.match-controls select{
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;color:var(--ink);font-family:var(--sans);font-size:.9rem;
  outline:none;cursor:pointer;transition:border-color .15s;
}
.match-controls select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow);}

#match-btn{
  margin-left:auto;
  background:var(--accent);color:#202124;border:none;border-radius:999px;
  padding:12px 26px;font-family:var(--sans);font-weight:600;font-size:1rem;
  cursor:pointer;white-space:nowrap;transition:background .15s;
  position:relative;overflow:hidden;
}
#match-btn:hover{background:var(--accent-press);}
#match-btn:disabled{opacity:.45;cursor:default;}
#match-btn::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transition:left .6s var(--ease);}
#match-btn:hover::after{left:115%;}
@media (prefers-reduced-motion:reduce){
  #match-btn::after{display:none;}
}

/* ---------- seller cards ---------- */
.results{display:flex;flex-direction:column;gap:12px;}

.seller-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;transition:border-color .12s;}
.seller-card:hover{border-color:#4a4d51;}
.seller-card.multi{border-color:rgba(143,176,212,.35);
  background-image:linear-gradient(180deg,rgba(143,176,212,.06),rgba(143,176,212,0));}

.seller-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;}
.seller-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.seller-name{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--ink);
  overflow-wrap:anywhere;}
.seller-name:hover{color:var(--accent);}
.seller-fb{font-family:var(--mono);font-size:10.5px;color:var(--faint);}

.match-badge{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  background:var(--field);color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;}
.match-badge.hot{background:rgba(143,176,212,.12);border-color:rgba(143,176,212,.35);
  color:var(--accent);}

.seller-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.seller-item{display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--line-soft);padding-top:8px;}
.item-for{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pop);}
.item-title{font-family:var(--sans);font-size:.95rem;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.item-title:hover{color:var(--accent);}
.item-meta{font-family:var(--mono);font-size:11px;color:var(--dim);}

/* ---------- responsive ---------- */
@media (max-width:600px){
  .match-controls{align-items:flex-start;}
  #match-btn{margin-left:0;width:100%;}
  .seller-head{flex-wrap:wrap;}
}