/*  WALLET demo frontend */

/* container */
.wallet {
  color: var(--text-color);
}
.wallet-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  display: grid;
  gap: 20px;
}

/* headings */
.wallet h1{ font-size: 36px; font-weight: 700; margin: 20px 0 10px; }
.wallet h2{ font-size: 18px; font-weight: 700; margin: 0; }
.wallet h3{ font-size: 16px; font-weight: 700; margin: 0; }

/* buttons – sayfada yoksa basit stiller (global varsa kaldır) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px; border-radius:10px; text-decoration:none;
  font-weight:700; cursor:pointer; border:1px solid transparent;
}
.btn-accent{
  background: var(--color-bmx-darker);
  color: var(--text-color-negative);
}
.btn-accent:hover{ filter: brightness(1.05); }
.btn-outline{
  background: transparent;
  border-color: var(--color-bmx-shadow3);
  color: var(--text-color);
}
.btn-outline:hover{ border-color: var(--color-bmx-darker); }

/* -------------------------
   BALANCE
   ------------------------- */
.wl-balance{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: center;
  background: var(--block-bg);
  border: 1px solid var(--color-bmx-shadow3);
  border-radius: 16px;
  padding: 18px;
}
.wl-balance-left{ display:grid; gap:8px; }
.wl-balance-amount{
  display:flex; align-items:baseline; gap:8px;
}
.wl-amount{
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wl-currency{
  font-size: 12px;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wl-pnl{
  font-size: 13px;
  font-weight: 700;
}
.pnl-up{ color: var(--color-bmx-green); }
.pnl-down{ color: var(--color-bmx-red); }

.wl-balance-right{
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}

/* -------------------------
   PORTFOLIO
   ------------------------- */
.wl-portfolio{
  background: var(--block-bg);
  border: 1px solid var(--color-bmx-shadow3);
  border-radius: 16px;
  padding: 14px 14px 16px;
  display:grid; gap:12px;
}
.pf-card-head{ display:flex; align-items:center; justify-content:space-between; }

/* list: 5 satır görünür, fazlası kaydırılır */
.pf-list-tokens{
  display:grid; gap:10px;
  max-height: 330px;       /* ~5 satır */
  overflow-y: auto;
}

/* row */
.pf-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--block-bg2);
  border: 1px solid var(--color-bmx-shadow3);
  border-radius: 12px;
  padding: 10px 12px;
}
.pf-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.pf-right{ display:grid; justify-items:end; row-gap:4px; min-width:0; text-align:right; }

.pf-coin{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pf-sym strong{ font-size: 14px; font-weight: 700; display:block; }
.pf-name{ font-size: 12px; color: var(--text-color-opacity); }

.pf-qty{ font-weight:700; }
.pf-val{ font-size: 12px; color: var(--text-color-opacity); }

/* -------------------------
   RECENT TRANSACTIONS
   ------------------------- */
.wl-transactions{
  background: var(--block-bg);
  border: 1px solid var(--color-bmx-shadow3);
  border-radius: 16px;
  padding: 14px 14px 16px;
  display:grid; gap:12px;
}
.tx-card-head{ display:flex; align-items:center; justify-content:space-between; }

/* 3 satır görünür, fazlası kaydırılır */
.tx-list{
  display:grid; gap:10px;
  max-height: 240px;       /* ~3 satır */
  overflow-y: auto;
}

/* tx row */
.tx-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--block-bg2);
  border: 1px solid var(--color-bmx-shadow3);
  border-radius: 12px;
  padding: 10px 12px;
}
.tx-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.tx-right{ display:grid; justify-items:end; row-gap:4px; min-width:0; text-align:right; }

.tx-asset{ font-weight:700; }
.tx-amt{ font-weight:700; }
.tx-meta{ font-size:12px; color: var(--text-color-opacity); }

/* tag */
.tx-tag{
  font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px;
  border:1px solid var(--color-bmx-shadow3);
  background: var(--block-bg);
}
.tx-deposit{ color: var(--color-bmx-green);  border-color: var(--color-bmx-green-a8); }
.tx-withdraw{ color: var(--color-bmx-red);    border-color: var(--color-bmx-red-a8); }

/* İmkan varsa :has ile miktarı renklendir (destekleyen tarayıcılarda) */
.tx-row:has(.tx-deposit) .tx-amt{ color: var(--color-bmx-green); }
.tx-row:has(.tx-withdraw) .tx-amt{ color: var(--color-bmx-red); }

/* -------------------------
   Scrollbar (nazik)
   ------------------------- */
.pf-list-tokens::-webkit-scrollbar,
.tx-list::-webkit-scrollbar{ width:8px; }
.pf-list-tokens::-webkit-scrollbar-thumb,
.tx-list::-webkit-scrollbar-thumb{
  background: var(--color-bmx-shadow3);
  border-radius: 10px;
}
.pf-list-tokens, .tx-list{
  scrollbar-width: thin;
  scrollbar-color: var(--color-bmx-shadow3) transparent;
}

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 900px){
  .wl-balance{
    grid-template-columns: 1fr; 
    row-gap: 10px;
  }
  .wl-balance-right{
    justify-content: flex-start;
  }
}

/* küçük dokunuşlar – dar ekranda kart iç boşlukları */
@media (max-width: 560px){
  .wl-balance,
  .wl-portfolio,
  .wl-transactions{
    padding: 12px;
    border-radius: 14px;
  }
  .pf-coin{ width:32px; height:32px; }
}