/* page-slot.css — shared by /slots and /autovalidate (payment pages) */
.steps-flow{display:flex;flex-direction:column;gap:10px}
.step-flow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--muted);line-height:1.5}
.step-flow.important{background:rgba(249,115,22,.06);border-color:rgba(249,115,22,.3);color:#fff}
.step-flow-icon{font-size:18px;flex-shrink:0}

.wallet-box{margin-top:22px;padding:20px;background:rgba(0,0,0,.35);border:1px solid var(--border2);border-radius:10px}
.wallet-box h4{font-family:var(--display);font-size:15px;color:var(--orange);letter-spacing:.06em;margin-bottom:10px;text-transform:uppercase}
.wallet-box p{color:var(--muted);font-size:13px;margin-bottom:10px;line-height:1.6}
.wallet-box p strong{color:var(--orange)}
.wallet-addr{display:block;word-break:break-all;padding:10px 14px;background:rgba(0,0,0,.4);border:1px solid var(--border2);border-radius:6px;color:var(--orange);font-family:'Courier New',monospace;font-size:12px;margin-top:8px}
.wallet-curr{color:var(--muted);font-size:11px;margin-top:6px;letter-spacing:.06em}
.qr-box{margin-top:18px;display:flex;justify-content:center}
.qr-box canvas{background:#fff;padding:10px;border-radius:8px}





/* =========================
   INVENTORY GRID (DESKTOP DEFAULT)
========================= */
#inventory-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 15px;
}

/* =========================
   ITEM CARD
========================= */
.skin-item {
  background: #1a1a1a;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: 0.15s ease;
  border: 1px solid transparent;
  text-align: center;
  position: relative;
}

.skin-item:hover {
  transform: scale(1.03);
}

/* IMAGE */
.skin-item img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  display: block;
}

/* NAME */
.skin-item p {
  font-size: 10px;
  margin-top: 4px;
  color: #ccc;
}

/* =========================
   SELECTED ITEM
========================= */
.skin-item.selected {
  border: 1px solid #ff7a00;
  background: #2a1a10;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 122, 0, 0.4);
}

/* =========================
   STEAM ICON
========================= */
.steam-link {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: 0.15s ease;
}

.steam-link:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

.steam-link img {
  width: 14px;
  height: 14px;
}

/* =========================
   DISABLED BUTTON
========================= */
#send-trade:disabled {
  background: #333;
  color: #777;
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(100%);
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {
  #inventory-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .skin-item img {
    height: 55px;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
  #inventory-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .skin-item {
    padding: 5px;
  }

  .skin-item img {
    height: 50px;
  }

  .skin-item p {
    font-size: 9px;
  }
}

/* =========================
   SMALL PHONE
========================= */
@media (max-width: 480px) {
  #inventory-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .skin-item img {
    height: 45px;
  }

  .steam-link {
    width: 20px;
    height: 20px;
  }
}


.skin-item:active {
  transform: scale(0.98);
}


/* payment hystory */
.payment-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.02);
}

.payment-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.payment-amount{
  color:#fff;
  font-weight:700;
  font-size:14px;
}

.payment-date{
  color:var(--muted);
  font-size:12px;
}

.payment-status{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.payment-status.confirmed{
  background:rgba(34,197,94,.15);
  color:#22c55e;
  border:1px solid rgba(34,197,94,.35);
}

.payment-status.pending{
  background:rgba(249,115,22,.15);
  color:#f97316;
  border:1px solid rgba(249,115,22,.35);
}

.payment-status.rejected{
  background:rgba(239,68,68,.15);
  color:#ef4444;
  border:1px solid rgba(239,68,68,.35);
}


.payment-table{
  margin-top:12px;
}

.payment-header,
.payment-item{
  display:grid;
  grid-template-columns:120px 1fr 120px;
  gap:16px;
  align-items:center;
}

.payment-header{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.payment-item{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.payment-item:last-child{
  border-bottom:none;
}

.payment-col.amount{
  font-weight:700;
  color:#fff;
}

.payment-col.date{
  color:var(--muted);
  font-size:13px;
}

@media (max-width:700px){
  .payment-header,
  .payment-item{
    grid-template-columns:90px 1fr 90px;
    gap:10px;
  }

  .payment-col.date{
    font-size:12px;
  }
}