/*
 * WEN TECH — Depo NatCash | Dark Design v2.1
 * Forked !important sou tout règ koulè — immunize kont tèm
 */

/* ROOT VARIABLES */
.bp-root { --wt-s1:#0d1525; --wt-s2:#111b2e; --wt-s3:#162038; --wt-bord:rgba(255,255,255,.08); --wt-blue:#0057ff; --wt-blueb:#2979ff; --wt-white:#e8edf5; --wt-g2:#8fa8ba; --wt-g3:#4a5a6e; --wt-green:#00d464; --wt-red:#ff4d6d; }

/* ROOT */
.bp-root {
  max-width: 520px !important;
  margin: 0 auto !important;
  font-family: 'DM Sans',system-ui,Arial,sans-serif !important;
  color: #e8edf5 !important;
  -webkit-font-smoothing: antialiased;
  background: transparent !important;
}

/* Forcer couleur sur TOUS les enfants */
.bp-root *,
.bp-root *::before,
.bp-root *::after {
  box-sizing: border-box;
}

/* FLASH */
.bp-root .bp-flash { display:flex !important; align-items:center !important; gap:10px !important; padding:12px 16px !important; border-radius:10px !important; font-size:.88rem !important; font-weight:600 !important; margin-bottom:16px !important; }
.bp-root .bp-flash-success { background:rgba(0,212,100,.12) !important; border:1px solid rgba(0,212,100,.25) !important; color:#00d464 !important; }
.bp-root .bp-flash-error   { background:rgba(255,77,109,.12) !important; border:1px solid rgba(255,77,109,.25) !important; color:#ff4d6d !important; }
.bp-root .bp-flash-info    { background:rgba(0,87,255,.12) !important; border:1px solid rgba(0,87,255,.25) !important; color:#2979ff !important; }

/* MAIN CARD */
.bp-root .bp-card {
  background: #0d1525 !important;
  border: 1px solid rgba(0,87,255,.2) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(0,87,255,.08) !important;
  margin-bottom: 16px !important;
  color: #e8edf5 !important;
}

/* Card header */
.bp-root .bp-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  background: rgba(0,87,255,.1) !important;
  border-bottom: 1px solid rgba(0,87,255,.18) !important;
}
.bp-root .bp-head-logo {
  width:40px !important; height:40px !important; border-radius:10px !important;
  background:rgba(0,87,255,.18) !important; border:1px solid rgba(0,87,255,.35) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important; color:#2979ff !important;
}
.bp-root .bp-head-logo svg { width:20px !important; height:20px !important; }
.bp-root .bp-head-title { font-size:.82rem !important; font-weight:900 !important; color:#e8edf5 !important; letter-spacing:.08em !important; text-transform:uppercase !important; line-height:1 !important; }
.bp-root .bp-head-sub   { font-size:.72rem !important; color:#4a5a6e !important; margin-top:3px !important; }
.bp-root .bp-head-badge {
  margin-left:auto !important; display:flex !important; align-items:center !important; gap:6px !important;
  font-size:.72rem !important; font-weight:700 !important; color:#8fa8ba !important;
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important; padding:5px 12px !important; white-space:nowrap !important;
}
.bp-root .bp-badge-dot {
  width:6px !important; height:6px !important; border-radius:50% !important;
  background:#00d464 !important; flex-shrink:0 !important;
  box-shadow:0 0 6px rgba(0,212,100,.6) !important;
  animation:wt-blink 2s infinite;
}
@keyframes wt-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Card body */
.bp-root .bp-card-body {
  padding: 20px !important;
  background: #0d1525 !important;
  color: #e8edf5 !important;
}

/* Section divider */
.bp-root .bp-section-divider {
  display:flex !important; align-items:center !important; gap:10px !important;
  margin:0 0 16px !important; font-size:.78rem !important; font-weight:700 !important;
  color:#8fa8ba !important; letter-spacing:.03em !important;
}
.bp-root .bp-divider-num {
  width:22px !important; height:22px !important; border-radius:50% !important;
  background:#0057ff !important; color:#fff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:.72rem !important; font-weight:800 !important; flex-shrink:0 !important;
  box-shadow:0 0 10px rgba(0,87,255,.4) !important;
}
.bp-root .bp-num-shield {
  background:rgba(0,87,255,.15) !important; border:1px solid rgba(0,87,255,.3) !important;
  box-shadow:none !important; color:#2979ff !important;
}
.bp-root .bp-divider-txt { flex:1 !important; padding-bottom:1px !important; border-bottom:1px solid rgba(255,255,255,.08) !important; }
.bp-root .bp-divider-claim { margin-top:20px !important; }

/* Pay layout */
.bp-root .bp-pay-layout { display:flex !important; gap:16px !important; margin-bottom:14px !important; align-items:flex-start !important; }

/* Number block */
.bp-root .bp-num-block { flex:1 !important; min-width:0 !important; }
.bp-root .bp-num-label { font-size:.7rem !important; color:#4a5a6e !important; text-transform:uppercase !important; letter-spacing:.06em !important; margin-bottom:6px !important; }
.bp-root .bp-num-value { font-size:1.35rem !important; font-weight:900 !important; color:#e8edf5 !important; letter-spacing:.03em !important; line-height:1 !important; margin-bottom:5px !important; word-break:break-all !important; }
.bp-root .bp-num-name  { font-size:.78rem !important; color:#8fa8ba !important; margin-bottom:10px !important; }

/* Copy btn */
.bp-root .bp-copy-btn {
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:8px 14px !important; background:rgba(0,87,255,.12) !important;
  border:1px solid rgba(0,87,255,.28) !important; border-radius:8px !important;
  color:#2979ff !important; font-size:.78rem !important; font-weight:700 !important;
  cursor:pointer !important; transition:all .18s !important;
}
.bp-root .bp-copy-btn:hover { background:rgba(0,87,255,.22) !important; transform:translateY(-1px) !important; }
.bp-root .bp-copy-btn svg { width:14px !important; height:14px !important; }
.bp-root .bp-copy-btn .ico-check { display:none !important; }

/* QR */
.bp-root .bp-qr-block { flex-shrink:0 !important; text-align:center !important; }
.bp-root .bp-qr-frame {
  width:100px !important; height:100px !important;
  border:2px solid rgba(0,87,255,.22) !important; border-radius:10px !important;
  background:#111b2e !important; display:flex !important; align-items:center !important;
  justify-content:center !important; overflow:hidden !important; margin-bottom:6px !important;
}
.bp-root .bp-qr-img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.bp-root .bp-qr-placeholder { display:flex !important; flex-direction:column !important; align-items:center !important; gap:5px !important; color:#4a5a6e !important; font-size:.65rem !important; }
.bp-root .bp-qr-placeholder svg { width:36px !important; height:36px !important; }
.bp-root .bp-qr-hint { font-size:.65rem !important; color:#4a5a6e !important; }

/* Instr btn */
.bp-root .bp-instr-btn-wrap { margin-bottom:14px !important; }
.bp-root .bp-instr-btn {
  display:inline-flex !important; align-items:center !important; gap:6px !important; padding:8px 14px !important;
  background:transparent !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:8px !important;
  color:#8fa8ba !important; font-size:.78rem !important; font-weight:600 !important; cursor:pointer !important; transition:all .18s !important;
}
.bp-root .bp-instr-btn:hover { border-color:rgba(0,87,255,.4) !important; color:#2979ff !important; background:rgba(0,87,255,.08) !important; }

/* Steps */
.bp-root .bp-steps-compact { margin-bottom:18px !important; }
.bp-root .bp-step-c {
  display:flex !important; align-items:flex-start !important; gap:10px !important;
  padding:9px 0 !important; font-size:.82rem !important; color:#8fa8ba !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}
.bp-root .bp-step-c:last-child { border-bottom:none !important; }
.bp-root .bp-sc-num {
  width:20px !important; height:20px !important; border-radius:50% !important;
  background:#162038 !important; border:1px solid rgba(0,87,255,.22) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:.68rem !important; font-weight:800 !important; color:#2979ff !important;
  flex-shrink:0 !important; margin-top:1px !important;
}
.bp-root .bp-sc-txt { color:#8fa8ba !important; }
.bp-root .bp-sc-txt strong { color:#e8edf5 !important; }
.bp-root .bp-tc-ex {
  background:rgba(0,87,255,.12) !important; border:1px solid rgba(0,87,255,.22) !important;
  border-radius:5px !important; padding:1px 6px !important; font-size:.75rem !important;
  color:#2979ff !important; font-family:monospace !important;
}

/* Login box */
.bp-root .bp-login-box {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:14px 16px !important; background:rgba(0,87,255,.08) !important;
  border:1px solid rgba(0,87,255,.2) !important; border-radius:10px !important;
  font-size:.84rem !important; color:#8fa8ba !important;
}
.bp-root .bp-login-box svg { color:#2979ff !important; flex-shrink:0 !important; }
.bp-root .bp-login-box a,
.bp-root .bp-login-box a:visited { color:#2979ff !important; font-weight:700 !important; text-decoration:none !important; }
.bp-root .bp-login-box span { color:#8fa8ba !important; }

/* Field */
.bp-root .bp-field-wrap { margin-bottom:14px !important; }
.bp-root .bp-field-label { display:block !important; font-size:.7rem !important; font-weight:700 !important; color:#4a5a6e !important; text-transform:uppercase !important; letter-spacing:.08em !important; margin-bottom:7px !important; }
.bp-root .bp-field-shell {
  background:#111b2e !important; border:1.5px solid rgba(255,255,255,.09) !important;
  border-radius:10px !important; overflow:hidden !important;
  transition:border-color .18s, box-shadow .18s !important; position:relative !important;
}
.bp-root .bp-field-shell:focus-within { border-color:#0057ff !important; box-shadow:0 0 0 3px rgba(0,87,255,.18) !important; }
.bp-root .bp-field-glow {
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:1.5px !important;
  background:linear-gradient(90deg,transparent,rgba(0,87,255,.6),transparent) !important; opacity:0 !important; transition:opacity .2s !important;
}
.bp-root .bp-field-shell:focus-within .bp-field-glow { opacity:1 !important; }
.bp-root .bp-field-row { display:flex !important; align-items:center !important; padding:12px 14px !important; }
.bp-root .bp-field-icon { color:#4a5a6e !important; display:flex !important; margin-right:10px !important; flex-shrink:0 !important; }
.bp-root .bp-field-icon svg { width:16px !important; height:16px !important; }

.bp-root .bp-field-input,
.bp-root input.bp-field-input {
  flex:1 !important; background:transparent !important; border:none !important;
  outline:none !important; color:#e8edf5 !important; font-family:monospace !important;
  font-size:1.1rem !important; font-weight:700 !important; letter-spacing:.08em !important;
  box-shadow:none !important; padding:0 !important; margin:0 !important; min-width:0 !important;
  -webkit-appearance:none !important;
}
.bp-root .bp-field-input::placeholder { color:#4a5a6e !important; font-size:.88rem !important; font-weight:400 !important; letter-spacing:0 !important; }
.bp-root .bp-field-check { color:#00d464 !important; display:flex !important; flex-shrink:0 !important; margin-left:8px !important; }
.bp-root .bp-field-progress {
  height:2.5px !important; background:linear-gradient(90deg,#0057ff,#2979ff) !important;
  width:0; transition:width .2s ease !important;
}
.bp-root .bp-field-meta { display:flex !important; justify-content:space-between !important; align-items:center !important; margin-top:6px !important; font-size:.7rem !important; }
.bp-root #bp-counter { color:#4a5a6e !important; font-weight:600 !important; }
.bp-root .bp-field-ttl { color:#4a5a6e !important; font-size:.65rem !important; letter-spacing:.04em !important; }

/* Submit */
.bp-root .bp-submit-btn,
.bp-root button.bp-submit-btn {
  width:100% !important; padding:14px !important; background:#0057ff !important;
  border:none !important; border-radius:10px !important; color:#fff !important;
  font-size:.88rem !important; font-weight:800 !important; letter-spacing:.06em !important;
  text-transform:uppercase !important; cursor:pointer !important;
  display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  transition:all .2s !important; box-shadow:0 4px 18px rgba(0,87,255,.38) !important;
}
.bp-root .bp-submit-btn:hover { background:#2979ff !important; transform:translateY(-1px) !important; }
.bp-root .bp-submit-btn:disabled { opacity:.6 !important; cursor:not-allowed !important; transform:none !important; }
.bp-root #bp-btn-inner { display:flex !important; align-items:center !important; gap:8px !important; }

/* HISTORY */
.bp-root .bp-hist-card {
  background:#0d1525 !important; border:1px solid rgba(255,255,255,.08) !important;
  border-radius:16px !important; overflow:hidden !important;
}
.bp-root .bp-hist-head {
  display:flex !important; align-items:center !important; gap:8px !important; padding:13px 18px !important;
  font-size:.72rem !important; font-weight:700 !important; color:#4a5a6e !important;
  text-transform:uppercase !important; letter-spacing:.08em !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important; background:rgba(255,255,255,.02) !important;
}
.bp-root .bp-hist-count {
  margin-left:auto !important; background:rgba(0,87,255,.1) !important; color:#2979ff !important;
  border:1px solid rgba(0,87,255,.2) !important; border-radius:999px !important; padding:2px 10px !important; font-size:.68rem !important;
}
.bp-root .bp-hr {
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:11px 18px !important; border-bottom:1px solid rgba(255,255,255,.07) !important;
  background:#0d1525 !important;
}
.bp-root .bp-hr:hover { background:rgba(255,255,255,.02) !important; }
.bp-root .bp-hr-extra { display:none !important; }
.bp-root .bp-hr-icon {
  width:32px !important; height:32px !important; border-radius:8px !important;
  background:rgba(0,87,255,.1) !important; border:1px solid rgba(0,87,255,.18) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important; color:#2979ff !important;
}
.bp-root .bp-hr-icon svg { width:16px !important; height:16px !important; }
.bp-root .bp-hr-info { flex:1 !important; min-width:0 !important; }
.bp-root .bp-hr-code { font-family:monospace !important; font-size:.8rem !important; font-weight:700 !important; color:#e8edf5 !important; }
.bp-root .bp-hr-date { font-size:.68rem !important; color:#4a5a6e !important; margin-top:2px !important; }
.bp-root .bp-hr-amt { font-size:.95rem !important; font-weight:800 !important; color:#00d464 !important; white-space:nowrap !important; flex-shrink:0 !important; }
.bp-root .bp-hr-amt span { font-size:.65rem !important; font-weight:500 !important; color:#4a5a6e !important; }
.bp-root .bp-hr-empty { padding:20px !important; text-align:center !important; color:#4a5a6e !important; font-size:.84rem !important; }
.bp-root .bp-hist-toggle {
  display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;
  width:100% !important; padding:11px !important; background:transparent !important; border:none !important;
  border-top:1px solid rgba(255,255,255,.07) !important; color:#4a5a6e !important;
  font-size:.78rem !important; font-weight:600 !important; cursor:pointer !important;
}
.bp-root .bp-hist-toggle:hover { background:rgba(255,255,255,.02) !important; color:#e8edf5 !important; }

/* MODAL */
.bp-modal-overlay {
  position:fixed !important; inset:0 !important;
  background:rgba(0,0,0,.82) !important; backdrop-filter:blur(8px) !important;
  z-index:99999 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:16px !important;
}
.bp-modal {
  background:#0d1525 !important; border:1px solid rgba(0,87,255,.22) !important;
  border-radius:18px !important; overflow:hidden !important; width:100% !important; max-width:400px !important;
  box-shadow:0 24px 80px rgba(0,0,0,.6) !important;
}
.bp-modal-head {
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:16px 18px !important; border-bottom:1px solid rgba(0,87,255,.12) !important; background:rgba(0,87,255,.08) !important;
}
.bp-modal-title { display:flex !important; align-items:center !important; gap:8px !important; font-size:.82rem !important; font-weight:800 !important; color:#e8edf5 !important; text-transform:uppercase !important; }
.bp-modal-title svg { color:#2979ff !important; }
.bp-modal-close {
  width:30px !important; height:30px !important; border-radius:50% !important;
  background:rgba(255,255,255,.07) !important; border:none !important; color:#8fa8ba !important;
  font-size:1.2rem !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
.bp-modal-close:hover { background:rgba(255,77,109,.18) !important; color:#ff4d6d !important; }
.bp-modal-body { padding:18px !important; background:#0d1525 !important; }
.bp-instr-slide { display:none !important; }
.bp-instr-slide.active { display:block !important; }
.bp-instr-slide-num { font-size:.7rem !important; color:#4a5a6e !important; text-align:center !important; margin-bottom:10px !important; }
.bp-instr-img { width:100% !important; border-radius:10px !important; display:block !important; border:1px solid rgba(255,255,255,.08) !important; }
.bp-instr-nav { display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; margin-top:14px !important; }
.bp-instr-prev,.bp-instr-next {
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.08) !important;
  color:#8fa8ba !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important;
}
.bp-instr-prev:hover,.bp-instr-next:hover { background:rgba(0,87,255,.14) !important; color:#2979ff !important; }
.bp-instr-dots { display:flex !important; gap:6px !important; }
.bp-instr-dot { width:7px !important; height:7px !important; border-radius:50% !important; background:#162038 !important; border:1px solid rgba(255,255,255,.08) !important; cursor:pointer !important; padding:0 !important; }
.bp-instr-dot.active { background:#0057ff !important; border-color:#0057ff !important; width:18px !important; border-radius:4px !important; }

/* Mobile */
@media(max-width:480px) {
  .bp-root .bp-card-body { padding:14px !important; }
  .bp-root .bp-num-value { font-size:1.1rem !important; }
  .bp-root .bp-pay-layout { flex-direction:column !important; }
  .bp-root .bp-qr-frame { width:76px !important; height:76px !important; }
}