/* ============================================================
   pwg.ro — OLX Game Price Checker styles
   Loaded after base.css.
   ============================================================ */

/* ---------- search band ---------- */
.olx-tool{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:#070809;padding:clamp(36px,6vw,64px) 0;}
.olx-tool .wrap{max-width:860px;}

.search-form{margin-bottom:22px;}
.search-wrap{display:flex;gap:10px;}
.search-wrap input[type=text]{
  flex:1;min-width:0;
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;color:#fff;font-family:var(--sans);font-size:1.05rem;outline:none;
  transition:border-color .15s;
}
.search-wrap input[type=text]:focus{border-color:var(--accent);}
.search-wrap input[type=text]::placeholder{color:var(--faint);}

#search-btn{
  background:var(--accent);color:#06080b;border:none;border-radius:10px;
  padding:14px 26px;font-family:var(--sans);font-weight:600;font-size:1rem;
  cursor:pointer;white-space:nowrap;transition:background .15s;
}
#search-btn:hover{background:var(--accent-press);}
#search-btn:disabled{opacity:.45;cursor:default;}

.search-hint{font-family:var(--mono);font-size:11px;color:var(--faint);margin:10px 2px 0;}

/* ---------- status ---------- */
.status{font-family:var(--mono);font-size:13px;color:var(--dim);text-align:center;
  padding:10px 0;min-height:1em;}
.status.error{color:#d4886a;}
.status.empty{color:var(--faint);}

.loading-dots{display:inline-flex;gap:4px;align-items:center;}
.loading-dots i{width:6px;height:6px;border-radius:50%;background:var(--dim);
  animation:blip 1.2s infinite alternate;}
.loading-dots i:nth-child(2){animation-delay:.3s;}
.loading-dots i:nth-child(3){animation-delay:.6s;}
@keyframes blip{from{opacity:.25;}to{opacity:1;}}

/* ---------- stats row ---------- */
.stat-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:12px;margin-bottom:18px;}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.stat.main{border-color:#2c3a44;background:linear-gradient(180deg,#10161c,#0e1116);}
.stat-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);}
.stat-value{font-family:var(--mono);font-weight:500;font-size:1.35rem;color:var(--ink);
  line-height:1.15;overflow-wrap:anywhere;}
.stat.main .stat-value{font-size:2rem;color:var(--accent);}
.stat-value.range{font-size:1.05rem;align-self:flex-start;padding-top:4px;}
.stat-sub{font-family:var(--mono);font-size:11px;color:var(--dim);}
.stat-hint{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:1px solid var(--line);
  color:var(--dim);font-size:9px;cursor:help;vertical-align:middle;}

/* ---------- distribution histogram ---------- */
/* Single-series magnitude chart: one hue (site accent), labels in ink tokens,
   per-bar tooltips via title. The median's bin is brighter as a direct label. */
.dist{margin:0 0 18px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:18px 18px 12px;}
.dist-bars{display:flex;align-items:flex-end;gap:2px;height:84px;}
.dist-bar{flex:1;min-width:0;background:#33506a;border-radius:4px 4px 0 0;
  transition:height .25s ease, background .15s;}
.dist-bar:hover{background:var(--accent-press);}
.dist-bar.median{background:var(--accent);}
.dist-cap{font-family:var(--mono);font-size:10.5px;color:var(--faint);
  margin-top:10px;line-height:1.5;}

/* ---------- filters ---------- */
.filter-bar{display:flex;align-items:center;justify-content:space-between;
  gap:12px 20px;flex-wrap:wrap;margin-bottom:14px;}
.chip-group{display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  background:var(--field);color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;cursor:pointer;transition:.15s;}
.chip:hover{border-color:#31363e;color:var(--ink-2);}
.chip.on{background:rgba(134,171,202,.1);border-color:#2c3a44;color:var(--accent);}

.toggle-group{display:flex;gap:16px;flex-wrap:wrap;}
.toggle{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;color:var(--dim);cursor:pointer;user-select:none;}
.toggle input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;}
.eur-rate{color:var(--faint);}

/* ---------- offers list ---------- */
.offer-note{font-family:var(--mono);font-size:11px;color:var(--faint);
  margin:0 2px 10px;line-height:1.5;}

.offers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.offer{display:flex;align-items:center;gap:12px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;transition:border-color .12s, opacity .15s;}
.offer:hover{border-color:#31363e;}
.offer.excluded{opacity:.38;}
.offer.excluded .offer-title{text-decoration:line-through;}

.offer-toggle{flex:none;width:26px;height:26px;border-radius:7px;
  background:var(--field);border:1px solid var(--line);color:var(--dim);
  font-family:var(--mono);font-size:14px;line-height:1;cursor:pointer;transition:.15s;}
.offer-toggle:hover{border-color:#d4886a;color:#d4886a;}
.offer.excluded .offer-toggle:hover{border-color:#84c9a0;color:#84c9a0;}

.offer-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.offer-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;}
.offer-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;color:var(--faint);}

.plat-tag{background:#10212e;color:#6fa8c9;border:1px solid #22425a;
  padding:1px 7px;border-radius:4px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;}
.cond{background:var(--field);color:var(--dim);border:1px solid var(--line);
  padding:1px 7px;border-radius:4px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;}
.cond.new{background:#16241c;color:#84c9a0;border-color:#244d36;}
.nego{color:var(--care);}

.offer-price{flex:none;font-family:var(--mono);font-weight:500;font-size:1rem;
  color:var(--ink);text-align:right;line-height:1.3;}
.offer-price .eur-orig{display:block;font-weight:400;font-size:10px;color:var(--faint);}

/* ---------- filtered-out listings (auditable, re-includable) ---------- */
.hidden-offers{margin-top:16px;}
.hidden-offers summary{font-family:var(--mono);font-size:11.5px;color:var(--dim);
  cursor:pointer;padding:10px 2px;user-select:none;list-style-position:inside;}
.hidden-offers summary:hover{color:var(--ink-2);}
.hidden-offers[open] summary{margin-bottom:8px;}
.offer.dim{opacity:.55;background:transparent;border-style:dashed;}
.offer.dim:hover{opacity:.85;}
.reason{background:#241a30;color:#b48fd0;border:1px solid #3a2a4c;
  padding:1px 7px;border-radius:4px;font-size:9.5px;letter-spacing:.04em;}
.offer-toggle.add:hover{border-color:#84c9a0;color:#84c9a0;}
.offer-toggle:disabled{opacity:.3;cursor:default;}
.offer-toggle:disabled:hover{border-color:var(--line);color:var(--dim);}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .stat-row{grid-template-columns:1fr 1fr;}
  .stat.main{grid-column:1 / -1;}
}
@media (max-width:600px){
  .search-wrap{flex-direction:column;}
  .offer{flex-wrap:wrap;}
  .offer-price{width:100%;text-align:left;padding-left:38px;}
  .offer-price .eur-orig{display:inline;margin-left:6px;}
}