/* deposit.css */

.detail-app{padding-bottom:24px;max-width:560px}

.detail-head{
  height:52px;
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  position:sticky;top:0;
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  z-index:10;
}
.detail-head h1{margin:0;font-size:17.5px;font-weight:700}

.back-btn{
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;
  display:grid;place-items:center;
  color:var(--text);
  border-radius:50%;
}
.back-btn svg{width:26px;height:26px}

.detail-content{padding:14px 16px 20px}

/* Tabs */
.pill-tabs{
  height:42px;
  border:2px solid var(--blue);
  border-radius:12px;
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;margin-bottom:14px;
}
.pill-tab{
  display:grid;place-items:center;
  font-size:14px;font-weight:700;color:var(--blue);
  background:transparent;
  transition:background var(--t-fast),color var(--t-fast);
}
.pill-tab.active{background:var(--blue);color:#fff}

/* Form labels */
.form-label{
  font-size:13px;font-weight:800;color:var(--text);
  margin:14px 0 8px;
}
.form-label small{font-weight:600;color:var(--muted)}

/* Method grid */
.method-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.method-card{
  height:64px;
  border:2px solid var(--line);
  border-radius:13px;
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:0 13px;
  text-align:left;
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.method-card:active{transform:scale(.97)}
.method-card.active{border-color:var(--blue);background:var(--blue-soft)}
.method-dot{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;flex:none;overflow:hidden;
  background:var(--bg-soft);
}
.method-dot img{width:100%;height:100%;object-fit:cover;display:block}
.method-text{line-height:1.25;min-width:0}
.method-name{font-size:13.5px;font-weight:700;display:block}
.method-sub{font-size:11px;color:var(--muted)}
.method-check{
  position:absolute;right:8px;top:8px;
  width:18px;height:18px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:none;place-items:center;
  font-size:11px;font-weight:800;
}
.method-card.active .method-check{display:grid}

/* Amount chips */
.chip-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.amount-chip{
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:9px 6px;
  text-align:center;
  position:relative;
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.amount-chip:active{transform:scale(.95)}
.amount-chip.active{border-color:var(--blue);background:var(--blue-soft)}
.chip-name{font-size:14px;font-weight:800;display:block}
.amount-chip.active .chip-name{color:var(--blue)}
.chip-sub{font-size:11.5px;color:var(--muted);display:block;margin-top:2px}
.chip-check{
  position:absolute;right:5px;top:5px;
  width:15px;height:15px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:none;place-items:center;
  font-size:9px;font-weight:800;
}
.amount-chip.active .chip-check{display:grid}

/* Amount row */
.amount-row{display:flex;gap:10px}
.amount-input{
  flex:1;height:54px;
  border:2px solid var(--line);
  border-radius:12px;
  display:flex;align-items:center;gap:10px;
  padding:0 14px;
}
.amount-input:focus-within{border-color:var(--blue)}
.amount-input b{font-size:13.5px;color:var(--blue)}
.amount-input input{
  flex:1;min-width:0;border:0;outline:0;
  font-size:19px;font-weight:800;
  background:transparent;color:var(--text);
}
.btn-continue{height:54px;padding:0 22px;border-radius:12px}

.hint{
  font-size:11.5px;color:var(--muted);
  margin:8px 0 0;line-height:1.45;
}
.hint b{color:var(--text)}

/* Mobile */
@media (max-width:390px){
  .detail-content{padding:12px}
  .chip-grid{grid-template-columns:repeat(2,1fr)}
  .btn-continue{padding:0 16px;font-size:14px}
}

/* Mini popup */
.mini-popup{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:rgba(15,23,42,.5);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-fast),visibility var(--t-fast);
}
.mini-popup.show{opacity:1;visibility:visible}
.mini-popup-card{
  width:min(72vw,280px);
  background:var(--surface);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:18px 14px 16px;
  text-align:center;
  transform:scale(.92);
  transition:transform var(--t-fast);
}
.mini-popup.show .mini-popup-card{transform:scale(1)}
.mini-popup-icon{
  width:38px;height:38px;margin:0 auto 10px;
  border-radius:50%;display:grid;place-items:center;
}
.mini-popup-icon svg{width:22px;height:22px}
.mini-popup-icon.ok{background:var(--ok-bg)}
.mini-popup-icon.ok svg{stroke:var(--ok)}
.mini-popup-icon.err{background:var(--err-bg)}
.mini-popup-icon.err svg{stroke:var(--err)}
.mini-popup-text{
  font-size:13px;font-weight:700;color:var(--text);
  line-height:1.45;
}