/* PAY NATASH BP — Frontend v6 — BOUTIK PAM Blue */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* BOUTIK PAM blue palette */
  --b:        #1557D4;
  --b-dk:     #0F40A8;
  --b-lt:     #EEF4FF;
  --b-mid:    rgba(21,87,212,.12);
  --b-glow:   rgba(21,87,212,.18);

  --ink:      #040D24;
  --ink2:     #1A2540;
  --ink3:     #374151;
  --mu:       #6B7280;
  --line:     #E1E8F5;
  --bg:       #F5F8FF;
  --wh:       #FFFFFF;
  --ok:       #059669;
  --err:      #DC2626;

  --r:        22px;
  --rmd:      14px;
  --rsm:      10px;
  --sha:      0 2px 10px rgba(4,13,36,.06),0 16px 48px rgba(21,87,212,.09);
}

/* ─── Root ─────────────────────────────────── */
.bp-root{
  font-family:'Sora',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;gap:14px;
  max-width:500px;margin:0 auto;
}

/* ─── Flash ─────────────────────────────────── */
.bp-flash{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:var(--rsm);font-size:13px;font-weight:500;animation:slide-down .3s cubic-bezier(.22,1,.36,1) both;}
.bp-flash-ico{width:22px;height:22px;border-radius:50%;flex-shrink:0;}
.bp-flash-success{background:#dcfce7;border:1px solid #86efac;color:#14532d;}
.bp-flash-success .bp-flash-ico{background:var(--ok);}
.bp-flash-success .bp-flash-ico::after{content:'✓';display:flex;align-items:center;justify-content:center;height:100%;font-size:11px;font-weight:800;color:#fff;}
.bp-flash-error{background:#fee2e2;border:1px solid #fca5a5;color:#7f1d1d;}
.bp-flash-error .bp-flash-ico{background:var(--err);}
.bp-flash-error .bp-flash-ico::after{content:'✕';display:flex;align-items:center;justify-content:center;height:100%;font-size:11px;font-weight:800;color:#fff;}

/* ─── Unified card ───────────────────────────── */
.bp-card{
  background:var(--wh);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sha);
  animation:card-in .5s cubic-bezier(.22,1,.36,1) both;
}

/* ─── Card header ────────────────────────────── */
.bp-card-head{
  display:flex;align-items:center;gap:13px;
  padding:18px 20px;
  background:linear-gradient(135deg,#040D24 0%,#0D1E4A 100%);
  position:relative;overflow:hidden;
}
.bp-card-head::before{
  content:'';position:absolute;top:-50px;right:-30px;
  width:160px;height:160px;
  background:radial-gradient(circle,rgba(21,87,212,.30) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.bp-card-head::after{
  content:'';position:absolute;bottom:-30px;left:20px;
  width:100px;height:100px;
  background:radial-gradient(circle,rgba(21,87,212,.15) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.bp-head-logo{
  width:40px;height:40px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;z-index:1;
}
.bp-head-logo svg{width:18px;height:18px;color:#fff;}
.bp-head-text{flex:1;position:relative;z-index:1;}
.bp-head-title{font-size:15px;font-weight:700;color:#fff;line-height:1;margin-bottom:3px;}
.bp-head-sub{font-size:11px;color:rgba(255,255,255,.42);}
.bp-head-badge{
  position:relative;z-index:1;margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;gap:5px;
  background:rgba(21,87,212,.25);
  border:1px solid rgba(21,87,212,.50);
  border-radius:20px;padding:4px 11px;
  font-size:10px;font-weight:700;color:#7eb8ff;
  white-space:nowrap;
}
.bp-badge-dot{width:6px;height:6px;border-radius:50%;background:#4d9eff;animation:dot-pulse 2s ease infinite;}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.78);}}

/* ─── Card body ──────────────────────────────── */
.bp-card-body{padding:20px;}

/* ─── Section dividers ───────────────────────── */
.bp-section-divider{
  display:flex;align-items:center;gap:9px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--mu);margin-bottom:14px;
}
.bp-divider-num{
  width:22px;height:22px;border-radius:50%;
  background:var(--b);color:#fff;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bp-divider-claim{margin-top:20px;padding-top:20px;border-top:1.5px dashed var(--line);}
.bp-num-shield{background:var(--b-lt);border:1.5px solid rgba(21,87,212,.3);}
.bp-num-shield svg{color:var(--b);}

/* ─── Payment layout (number left, QR right) ── */
.bp-pay-layout{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--rmd);
  padding:16px;
  margin-bottom:14px;
  position:relative;overflow:hidden;
}
.bp-pay-layout::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--b),var(--b-dk));
}

/* Number block */
.bp-num-block{flex:1;min-width:0;}
.bp-num-label{
  font-size:9px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--b);opacity:.7;
  margin-bottom:6px;
}
.bp-num-value{
  font-family:'JetBrains Mono',monospace;
  font-size:24px;font-weight:600;
  color:var(--b);letter-spacing:3px;line-height:1;
  margin-bottom:4px;
}
.bp-num-name{font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--b-dk);opacity:.65;margin-bottom:12px;}

/* Copy button — blue */
.bp-copy-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:var(--wh);
  border:1.5px solid var(--b);
  border-radius:8px;
  font-family:'Sora',sans-serif;font-size:11px;font-weight:700;
  color:var(--b);cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.bp-copy-btn:hover{background:var(--b);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(21,87,212,.30);}
.bp-copy-btn:active{transform:translateY(0);}
.bp-copy-btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;}
.bp-copy-btn svg{width:12px;height:12px;flex-shrink:0;}

/* QR block — right side */
.bp-qr-block{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;}
.bp-qr-frame{
  width:96px;height:96px;
  background:var(--wh);
  border:2px solid var(--line);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:6px;
  position:relative;
}
/* Corner brackets */
.bp-qr-frame::before,.bp-qr-frame::after{
  content:'';position:absolute;
  width:14px;height:14px;
  border-style:solid;border-color:var(--b);pointer-events:none;
}
.bp-qr-frame::before{top:4px;left:4px;border-width:2px 0 0 2px;border-radius:3px 0 0 0;}
.bp-qr-frame::after{bottom:4px;right:4px;border-width:0 2px 2px 0;border-radius:0 0 3px 0;}
.bp-qr-img{width:100%;height:100%;object-fit:contain;display:block;}
.bp-qr-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--mu);
}
.bp-qr-placeholder svg{width:28px;height:28px;opacity:.35;}
.bp-qr-placeholder span{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;opacity:.5;}
.bp-qr-hint{font-size:9px;font-weight:600;color:var(--mu);text-align:center;letter-spacing:.3px;}

/* ─── How-to steps (compact) ─────────────────── */
.bp-steps-compact{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--rsm);padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:0;
}
.bp-step-c{display:flex;align-items:flex-start;gap:9px;}
.bp-sc-num{
  width:18px;height:18px;border-radius:50%;
  background:rgba(21,87,212,.12);
  border:1.5px solid rgba(21,87,212,.3);
  color:var(--b);font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.bp-sc-txt{font-size:11px;color:var(--ink3);line-height:1.45;}
.bp-sc-txt strong{color:var(--ink2);font-weight:600;}
.bp-tc-ex{
  display:inline-block;font-family:'JetBrains Mono',monospace;
  font-size:10px;background:var(--b-lt);color:var(--b-dk);
  padding:2px 7px;border-radius:4px;border:1px solid rgba(21,87,212,.2);
  letter-spacing:.4px;margin-top:3px;
}

/* ─── Login box ──────────────────────────────── */
.bp-login-box{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;
  background:var(--b-lt);border:1px solid rgba(21,87,212,.2);
  border-radius:var(--rsm);font-size:13px;color:var(--b-dk);
}
.bp-login-box svg path{fill:var(--b);}
.bp-login-box a{color:var(--b);font-weight:700;text-decoration:none;}
.bp-login-box a:hover{text-decoration:underline;}

/* ─── TransCode input ────────────────────────── */
.bp-field-wrap{margin-bottom:16px;}
.bp-field-label{
  display:block;font-size:10px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  color:var(--mu);margin-bottom:9px;
}
.bp-field-shell{
  position:relative;
  background:var(--bg);border:2px solid var(--line);
  border-radius:var(--rmd);overflow:hidden;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.bp-field-shell.focus{border-color:var(--b);background:var(--wh);box-shadow:0 0 0 5px rgba(21,87,212,.10);}
.bp-field-shell.valid{border-color:var(--ok);background:var(--wh);box-shadow:0 0 0 5px rgba(5,150,105,.09);}
.bp-field-shell.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97);}

/* Ambient glow */
.bp-field-glow{
  position:absolute;inset:0;pointer-events:none;border-radius:var(--rmd);
  background:radial-gradient(ellipse 80% 70% at 50% 110%,rgba(21,87,212,.0) 0%,transparent 100%);
  transition:background 1s ease;
}
.bp-field-shell.focus .bp-field-glow{background:radial-gradient(ellipse 90% 80% at 50% 120%,rgba(21,87,212,.08) 0%,transparent 100%);}
.bp-field-shell.valid .bp-field-glow{background:radial-gradient(ellipse 90% 80% at 50% 120%,rgba(5,150,105,.07) 0%,transparent 100%);}

.bp-field-row{display:flex;align-items:center;position:relative;z-index:1;}
.bp-field-icon{padding:0 13px;display:flex;align-items:center;color:var(--mu);flex-shrink:0;transition:color .2s;}
.bp-field-shell.focus .bp-field-icon{color:var(--b);}
.bp-field-shell.valid .bp-field-icon{color:var(--ok);}
.bp-field-icon svg path{fill:currentColor;}

.bp-field-input{
  flex:1;border:none;background:transparent;
  padding:15px 8px;
  font-family:'JetBrains Mono',monospace;
  font-size:17px;font-weight:600;
  color:var(--ink);letter-spacing:2px;
  outline:none;min-width:0;
  caret-color:var(--b);
}
.bp-field-input::placeholder{
  font-family:'Sora',sans-serif;font-size:12px;
  font-weight:400;letter-spacing:0;
  color:var(--mu);opacity:.5;
}

.bp-field-check{
  padding:0 14px;display:flex;align-items:center;flex-shrink:0;
}
.bp-field-check svg path{fill:var(--ok);}

/* Progress bar */
.bp-field-progress{
  height:3px;
  background:linear-gradient(90deg,var(--b) var(--pct,0%),transparent var(--pct,0%));
  transition:background .2s;
}
.bp-field-shell.valid .bp-field-progress{background:var(--ok);}

.bp-field-meta{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--mu);}
.bp-field-ttl{opacity:.65;}

/* ─── Submit button — blue ─────────────────── */
.bp-submit-btn{
  width:100%;padding:15px 18px;
  border:none;border-radius:var(--rsm);
  font-family:'Sora',sans-serif;font-size:14px;font-weight:700;
  color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--b) 0%,var(--b-dk) 100%);
  box-shadow:0 4px 18px rgba(21,87,212,.28);
  transition:all .22s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.bp-submit-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 55%);
  border-radius:var(--rsm);
}
.bp-submit-btn>*{position:relative;z-index:1;}
.bp-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px rgba(21,87,212,.38);}
.bp-submit-btn:active:not(:disabled){transform:translateY(0);}
.bp-submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;}
.bp-submit-btn svg{width:17px;height:17px;flex-shrink:0;}

/* Loader inside button */
.bp-loader{display:none;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}

/* ─── History card ───────────────────────────── */
.bp-hist-card{
  background:var(--wh);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sha);
  animation:card-in .5s cubic-bezier(.22,1,.36,1) .08s both;
}
.bp-hist-head{
  display:flex;align-items:center;gap:7px;
  padding:13px 17px;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ink2);
}
.bp-hist-head svg path{fill:var(--b);}
.bp-hr{
  display:flex;align-items:center;gap:11px;
  padding:11px 17px;border-bottom:1px solid var(--line);
  transition:background .12s;
}
.bp-hr:last-child{border-bottom:none;}
.bp-hr:hover{background:var(--bg);}
.bp-hr-icon{
  width:32px;height:32px;border-radius:9px;
  background:var(--b-lt);border:1px solid rgba(21,87,212,.18);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bp-hr-icon svg path{fill:var(--b);}
.bp-hr-info{flex:1;min-width:0;}
.bp-hr-code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink2);}
.bp-hr-date{font-size:10px;color:var(--mu);margin-top:1px;}
.bp-hr-amt{font-size:14px;font-weight:800;color:var(--ok);white-space:nowrap;flex-shrink:0;}
.bp-hr-amt span{font-size:9px;font-weight:600;opacity:.7;}
.bp-hr-empty{padding:28px;text-align:center;font-size:13px;color:var(--mu);}

/* ─── Animations ─────────────────────────────── */
@keyframes card-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes slide-down{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-5px);}40%{transform:translateX(4px);}60%{transform:translateX(-3px);}80%{transform:translateX(2px);}}

/* ─── Responsive ─────────────────────────────── */
@media(max-width:380px){
  .bp-num-value{font-size:19px;letter-spacing:2px;}
  .bp-pay-layout{flex-direction:column;}
  .bp-qr-block{width:100%;flex-direction:row;align-items:center;gap:12px;}
  .bp-field-input{font-size:14px;letter-spacing:1.5px;}
}

/* ─── Gateway WooCommerce styles ─────────────── */
.bp-gw-wrap{max-width:500px;margin:0 auto;font-family:'Sora',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}

.bp-gw-flash{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:10px;font-size:13px;font-weight:500;margin-bottom:16px;animation:slide-down .3s cubic-bezier(.22,1,.36,1) both;}
.bp-gw-flash-ico{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
.bp-gw-flash-success{background:#dcfce7;border:1px solid #86efac;color:#14532d;}
.bp-gw-flash-success .bp-gw-flash-ico{background:#059669;}
.bp-gw-flash-error{background:#fee2e2;border:1px solid #fca5a5;color:#7f1d1d;}
.bp-gw-flash-error .bp-gw-flash-ico{background:#DC2626;}
.bp-gw-flash-info{background:#dbeafe;border:1px solid #93c5fd;color:#1e40af;}
.bp-gw-flash-info .bp-gw-flash-ico{background:#2563EB;}

/* Montant banner */
.bp-gw-amount-banner{
  background:linear-gradient(135deg,#040D24 0%,#0D1E4A 100%);
  border-radius:18px 18px 0 0;
  padding:20px 22px 18px;
  text-align:center;
  margin-bottom:-1px;
  position:relative;overflow:hidden;
}
.bp-gw-amount-banner::before{
  content:'';position:absolute;top:-40px;right:-30px;
  width:140px;height:140px;
  background:radial-gradient(circle,rgba(21,87,212,.28) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.bp-gw-amount-label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px;position:relative;z-index:1;}
.bp-gw-amount-value{font-family:'JetBrains Mono','Courier New',monospace;font-size:34px;font-weight:700;color:#fff;letter-spacing:1px;line-height:1;position:relative;z-index:1;}
.bp-gw-currency{font-size:16px;font-weight:600;opacity:.6;margin-left:4px;}
.bp-gw-order-ref{font-size:11px;color:rgba(255,255,255,.35);margin-top:6px;position:relative;z-index:1;}

/* Override card radius quand banner présent */
.bp-gw-amount-banner + .bp-card{border-radius:0 0 22px 22px;}

/* ─── Partial payment offer modal ───────────── */
.bp-partial-banner{
  background:var(--b-lt);
  border:1.5px solid rgba(21,87,212,.25);
  border-radius:var(--rmd);
  padding:16px 18px;
  margin-bottom:20px;
  animation:card-in .4s cubic-bezier(.22,1,.36,1) both;
}

.bp-partial-header{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:14px;
}
.bp-partial-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:rgba(21,87,212,.12);
  border:1px solid rgba(21,87,212,.25);
  display:flex;align-items:center;justify-content:center;
}
.bp-partial-icon svg path{fill:var(--b);}
.bp-partial-title{font-size:13px;font-weight:700;color:var(--b-dk);margin-bottom:3px;}
.bp-partial-sub{font-size:12px;color:var(--ink3);line-height:1.45;}
.bp-partial-sub strong{color:var(--ink);font-weight:700;}

.bp-partial-question{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;
  color:var(--mu);
  margin-bottom:10px;
}

.bp-partial-choices{display:flex;flex-direction:column;gap:8px;}

.bp-choice-btn{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;
  border-radius:var(--rsm);
  border:1.5px solid var(--line);
  background:var(--wh);
  cursor:pointer;
  text-decoration:none;
  transition:all .2s;
  width:100%;text-align:left;
  font-family:'Sora',sans-serif;
}
.bp-choice-btn:hover{transform:translateX(3px);}

.bp-choice-wallet{border-color:var(--b);background:var(--b-lt);}
.bp-choice-wallet:hover{border-color:var(--b-dk);background:#dce9ff;box-shadow:0 3px 12px rgba(21,87,212,.15);}

.bp-choice-skip{border-color:var(--line);}
.bp-choice-skip:hover{border-color:var(--mu);background:var(--bg);}

.bp-choice-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.bp-choice-wallet .bp-choice-icon{background:rgba(21,87,212,.12);}
.bp-choice-wallet .bp-choice-icon svg path{fill:var(--b);}
.bp-choice-skip .bp-choice-icon{background:var(--bg);}
.bp-choice-skip .bp-choice-icon svg path{fill:var(--mu);}

.bp-choice-text{flex:1;min-width:0;}
.bp-choice-label{
  font-size:13px;font-weight:700;margin-bottom:2px;
}
.bp-choice-wallet .bp-choice-label{color:var(--b-dk);}
.bp-choice-skip .bp-choice-label{color:var(--ink2);}

.bp-choice-desc{font-size:11px;color:var(--mu);line-height:1.4;}
.bp-choice-desc code{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  background:rgba(0,0,0,.06);padding:1px 5px;border-radius:3px;
}
.bp-choice-arrow{font-size:16px;color:var(--mu);flex-shrink:0;transition:transform .2s;}
.bp-choice-btn:hover .bp-choice-arrow{transform:translateX(3px);}
.bp-choice-wallet .bp-choice-arrow{color:var(--b);}