/* ── OVERLAY ── */
.pay-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.3);
  align-items:center;justify-content:center;padding:20px;
}
.pay-overlay.open{display:flex}

/* ── MODAL ── */
.pay-modal{
  background:#fff;border:1px solid #bae6fd;border-radius:16px;
  width:100%;max-width:800px;overflow:hidden;
  animation:modalIn .2s ease;
}
.pay-modal-sm{max-width:420px}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── HEADER ── */
.pay-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid #e0f2fe;background:#f0f9ff;
}
.pay-title-group{display:flex;align-items:center;gap:12px}
.pay-icon-title{font-size:17px;color:#0ea5e9}
.pay-title{font-size:15px;font-weight:700;color:#0f172a;letter-spacing:-.2px}
.pay-subtitle{font-size:11px;color:#64748b;margin-top:1px}
.pay-close{
  width:30px;height:30px;border-radius:7px;border:1px solid #e0f2fe;
  background:#fff;color:#94a3b8;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  transition:all .15s;
}
.pay-close:hover{border-color:#fca5a5;color:#ef4444}

/* ── BODY 2 COL ── */
.pay-body{display:grid;grid-template-columns:1fr 1fr}

/* ── LEFT ── */
.pay-left{padding:22px;border-right:1px solid #e0f2fe;display:flex;flex-direction:column;gap:13px}
.pay-right{padding:22px;background:#fafcff;display:flex;flex-direction:column;gap:13px}

.pay-section-label{
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:#94a3b8;display:flex;align-items:center;gap:6px;
}
.pay-section-label i{color:#0ea5e9}

.pay-product-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:13px;border-radius:10px;background:#f0f9ff;border:1px solid #bae6fd;
}
.pay-product-name{font-size:14px;font-weight:700;color:#0f172a}
.pay-product-type{font-size:11px;color:#64748b;margin-top:2px}
.pay-product-price{font-size:13px;font-weight:700;color:#0ea5e9;white-space:nowrap}

.pay-specs{
  display:flex;flex-wrap:wrap;gap:6px;
}
.pay-spec-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;
  background:#f0f9ff;border:1px solid #bae6fd;
  font-size:11px;color:#0369a1;font-weight:600;
}
.pay-spec-pill i{font-size:10px;color:#0ea5e9}

.pay-divider{height:1px;background:#e0f2fe}
.pay-row{display:flex;justify-content:space-between;font-size:13px;color:#475569}
.pay-row-total{font-weight:700;color:#0f172a;font-size:14px}
.pay-green{color:#16a34a;font-weight:600}

.pay-user-row{display:flex;gap:12px}
.pay-user-detail{
  flex:1;padding:10px 12px;border-radius:8px;
  background:#f8fafc;border:1px solid #e2e8f0;
}
.pay-user-label{display:block;font-size:10px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.pay-user-val{font-size:13px;font-weight:700;color:#0f172a}

.pay-notice{
  font-size:12px;color:#64748b;line-height:1.7;
  padding:12px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;
}

/* ── RIGHT ── */
.pay-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.pay-qr-img{
  width:170px;height:170px;object-fit:contain;
  border-radius:10px;border:1px solid #bae6fd;padding:10px;background:#fff;
}
.pay-qr-note{font-size:11px;color:#64748b;display:flex;align-items:center;gap:6px}
.pay-qr-note i{color:#0ea5e9}

.pay-steps{display:flex;flex-direction:column;gap:9px}
.pay-step{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#475569;line-height:1.6}
.pay-step-num{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:#e0f2fe;border:1px solid #bae6fd;
  color:#0ea5e9;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

.pay-done-btn{
  width:100%;padding:13px;border-radius:10px;border:none;
  background:#0ea5e9;color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s;font-family:inherit;
  margin-top:auto;
}
.pay-done-btn:hover{background:#0284c7}
.pay-done-btn:disabled{background:#bae6fd;cursor:not-allowed}

/* ── LOGIN MODAL ── */
.pay-body-single{padding:24px;display:flex;flex-direction:column;gap:16px}
.pay-login-desc{font-size:13px;color:#475569;line-height:1.7}
.pay-login-actions{display:flex;gap:10px}
.pay-btn-primary{
  flex:1;padding:12px;border-radius:9px;
  background:#0ea5e9;color:#fff;text-align:center;
  font-size:13px;font-weight:700;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s;
}
.pay-btn-primary:hover{background:#0284c7}
.pay-btn-outline{
  flex:1;padding:12px;border-radius:9px;
  border:1.5px solid #bae6fd;color:#0ea5e9;text-align:center;
  font-size:13px;font-weight:700;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;
}
.pay-btn-outline:hover{background:#f0f9ff}

/* ── NOTIF CARD ── */
.notif-card{
  position:fixed;bottom:28px;right:28px;z-index:10000;
  display:none;align-items:flex-start;gap:14px;
  padding:16px 18px;border-radius:12px;
  background:#fff;border:1px solid #bae6fd;
  max-width:340px;width:100%;
  animation:notifIn .3s ease;
}
.notif-card.show{display:flex}
.notif-card.notif-error{border-color:#fca5a5;background:#fff5f5}
@keyframes notifIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.notif-icon{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:#e0f2fe;border:1px solid #bae6fd;
  display:flex;align-items:center;justify-content:center;
  color:#0ea5e9;font-size:15px;
}
.notif-card.notif-error .notif-icon{background:#fee2e2;border-color:#fca5a5;color:#ef4444}
.notif-text{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:700;color:#0f172a;margin-bottom:3px}
.notif-desc{font-size:12px;color:#64748b;line-height:1.6}
.notif-close{
  background:none;border:none;color:#94a3b8;cursor:pointer;
  font-size:13px;padding:0;flex-shrink:0;
  transition:color .15s;
}
.notif-close:hover{color:#0f172a}

@media(max-width:640px){
  .pay-body{grid-template-columns:1fr}
  .pay-left{border-right:none;border-bottom:1px solid #e0f2fe}
  .pay-qr-img{width:150px;height:150px}
  .pay-modal{border-radius:14px}
  .notif-card{left:16px;right:16px;bottom:16px;max-width:none}
}