/* ════════════════════════════════════════
   DEPOSIT PAGE — JYWA Payment
   ════════════════════════════════════════ */

.topbar-title { font-size: 15px; font-weight: 800; }

/* ─── Metode pilihan ─── */
.method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.method-btn {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 14px;
    text-align: left;
    color: var(--text);
    transition: border-color 0.25s ease, background 0.25s ease;
    position: relative;
}
.method-btn.active {
    border-color: var(--aurora);
    background: var(--aurora-dim);
}
.method-btn.active::after {
    content: '✓';
    position: absolute;
    top: 10px; right: 12px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--aurora);
    color: #04121c;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.method-icon { font-size: 26px; margin-bottom: 8px; }
.method-name { font-size: 14.5px; font-weight: 800; }
.method-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* ─── Grid nominal ─── */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}
.amount-opt {
    background: var(--bg-input, #0a0e14);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 6px;
    color: var(--text);
    font-weight: 700;
    font-size: 13.5px;
    transition: all 0.2s ease;
}
.amount-opt.active {
    border-color: var(--aurora);
    background: var(--aurora-dim);
    color: var(--aurora);
}

/* ─── QR box ─── */
.qr-box {
    width: min(62vw, 230px);
    margin: 16px auto 0;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 12px;
    aspect-ratio: 1/1;
}
.qr-fake {
    display: grid;
    grid-template-columns: repeat(21, 1fr);
    grid-auto-rows: 1fr;
    width: 100%;
    height: 100%;
    gap: 1px;
}
.qr-fake span { background: transparent; border-radius: 1px; }
.qr-fake span.on { background: #0a0d12; }

.qr-expire {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--yellow);
    background: rgba(255, 201, 77, 0.1);
    border: 1px solid rgba(255, 201, 77, 0.25);
    padding: 5px 13px;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
}
.amount-chip {
    display: inline-block;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 800;
    font-family: 'Space Grotesk', monospace;
    color: var(--aurora);
}

/* ─── Pending note ─── */
.pending-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--dim);
}
.spinner-sm {
    width: 14px; height: 14px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--aurora);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ─── Result box (voucher) ─── */
.result-box {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.result-box.success {
    background: rgba(61, 220, 151, 0.08);
    border: 1px solid rgba(61, 220, 151, 0.3);
    color: var(--green);
}
.result-box.error {
    background: rgba(255, 92, 114, 0.08);
    border: 1px solid rgba(255, 92, 114, 0.3);
    color: var(--red);
}

/* ─── Toast mini global ─── */
.toast-mini {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(80px);
    z-index: 999;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 99px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 90vw;
}
.toast-mini.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hidden { display: none !important; }

/* ─── Mutasi summary ─── */
.summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.summary-box {
    border-radius: var(--radius);
    padding: 15px;
}
.summary-box.in  { background: rgba(61, 220, 151, 0.07); border: 1px solid rgba(61, 220, 151, 0.22); }
.summary-box.out { background: rgba(255, 92, 114, 0.07); border: 1px solid rgba(255, 92, 114, 0.22); }
.sum-label { font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
.sum-value { font-size: 17px; font-weight: 800; font-family: 'Space Grotesk', monospace; }
.sum-value.green { color: var(--green); }
.sum-value.red { color: var(--red); }

/* ─── Order card ─── */
.order-card { margin-bottom: 10px; }
.order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.order-id {
    font-size: 11px;
    color: var(--faint);
    font-family: 'Space Grotesk', monospace;
}
.order-product { font-size: 14px; font-weight: 700; }
.order-target { font-size: 12px; color: var(--dim); margin-top: 3px; }
.order-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.order-price { font-weight: 800; color: var(--blue); }

/* ─── Monitoring realtime ─── */
.live-dot-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--green);
    width: auto !important;
}
.live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.mon-left { display: flex; align-items: center; gap: 11px; }
.mon-icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.monitor-item.fresh {
    animation: fresh-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fresh-in {
    from { opacity: 0; transform: translateY(-10px); background: var(--aurora-dim); }
}