/* Biniyoglife — Premium design layer (v1.6.0)
   Non-destructive: loads after app.css, uses the theme's own colour variables so
   "Site colour" settings keep working. Delete this file to go back to the old look. */
:root{
  --pm-gold:#d9b46c; --pm-gold2:#f3dfa8;
  --pm-ease:cubic-bezier(.22,.8,.24,1);
  --pm-sh1:0 1px 2px rgba(33,28,67,.05),0 6px 18px rgba(33,28,67,.06);
  --pm-sh2:0 2px 4px rgba(33,28,67,.05),0 18px 40px rgba(60,20,140,.14);
  --pm-r:22px;
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{
  font-family:"Inter","Hind Siliguri","Noto Sans Bengali","SolaimanLipi",system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.005em;
  background:
    radial-gradient(900px 420px at 100% -10%,rgba(118,40,217,.08),transparent 60%),
    linear-gradient(180deg,#f6f2ff 0%,#fff 42%,#f8f6ff 100%);
}
::selection{background:var(--purple2);color:#fff}

/* ---------- Hero ---------- */
.bwl-hero{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(255,255,255,.18) 0%,transparent 38%),
    radial-gradient(ellipse at 95% 80%,rgba(217,180,108,.22) 0%,transparent 40%),
    linear-gradient(135deg,var(--purple2) 0%,var(--purple) 55%,#2b0764 100%);
  box-shadow:0 18px 40px -18px rgba(60,20,140,.55);
}
.bwl-hero:before,.bwl-hero:after{background:rgba(255,255,255,.07);filter:blur(.5px)}
.bwl-brand-text{letter-spacing:-.04em;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.bwl-hero p{letter-spacing:.04em;opacity:.9}

/* ---------- Balance cards ---------- */
.bwl-total-card{
  background:linear-gradient(125deg,#2b0764 0%,var(--purple) 48%,var(--purple2) 100%);
  border:1px solid rgba(243,223,168,.35);
  box-shadow:var(--pm-sh2),inset 0 1px 0 rgba(255,255,255,.18);
}
.bwl-total-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(243,223,168,.16) 50%,transparent 65%);
  transform:translateX(-120%);animation:pmShine 6s var(--pm-ease) 1.2s infinite;
}
@keyframes pmShine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.bwl-wallet-icon{
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08));
  border:1px solid rgba(243,223,168,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px rgba(0,0,0,.18);
}
.bwl-total-info strong{letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bwl-available{
  border:1px solid rgba(227,215,246,.8);border-radius:26px;
  background:linear-gradient(180deg,#fff,#fcfaff);
  box-shadow:var(--pm-sh1);
}
.bwl-available-top strong{
  background:linear-gradient(120deg,var(--purple),var(--purple2));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;
}
.bwl-round-icon{
  background:linear-gradient(145deg,#f3eaff,#fff);
  box-shadow:inset 0 0 0 1px rgba(118,40,217,.12),0 4px 10px rgba(83,20,176,.08);
}

/* ---------- Icon tiles ---------- */
.bwl-tile{
  border-radius:var(--pm-r);
  transition:transform .35s var(--pm-ease),box-shadow .35s var(--pm-ease);
  -webkit-tap-highlight-color:transparent;
}
.bwl-tile:hover{transform:translateY(-4px)}
.bwl-tile:active{transform:scale(.96)}
.bwl-tile-icon{
  box-shadow:0 10px 22px -8px rgba(83,20,176,.35),inset 0 1px 0 rgba(255,255,255,.55);
  transition:box-shadow .35s var(--pm-ease);
}
.bwl-tile:hover .bwl-tile-icon{box-shadow:0 16px 30px -10px rgba(83,20,176,.5),inset 0 1px 0 rgba(255,255,255,.6)}

/* ---------- Banner ---------- */
.bwl-banner-slider{border-radius:24px;overflow:hidden;box-shadow:var(--pm-sh2)}
.bwl-banner-dots span,.bwl-banner-dots button{transition:all .3s var(--pm-ease)}

/* ---------- Buttons ---------- */
.bwl-btn,.bwl-oh-btn,.bwl-contact-btn{
  border-radius:16px;font-weight:700;letter-spacing:.01em;
  transition:transform .25s var(--pm-ease),box-shadow .25s var(--pm-ease),filter .25s;
}
.bwl-btn:hover,.bwl-oh-btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.bwl-btn:active,.bwl-oh-btn:active{transform:scale(.97)}
.bwl-btn:not([class*="ghost"]):not([class*="outline"]){
  background:linear-gradient(135deg,var(--purple2),var(--purple));
  box-shadow:0 12px 24px -10px rgba(83,20,176,.6),inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- Bottom navigation (glass) ---------- */
.bwl-bottom-nav{
  background:rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid rgba(227,215,246,.9)!important;
  box-shadow:0 -10px 30px -12px rgba(60,20,140,.18)!important;
  padding-bottom:env(safe-area-inset-bottom,0);
}

/* ---------- Header menu / dropdown ---------- */
.bwl-header-menu-panel{
  border-radius:20px;border:1px solid rgba(227,215,246,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--pm-sh2);
}

/* ---------- Generic cards, forms, inputs ---------- */
.bwl-user-uid-card,.bwl-recipient-card,.bwl-processing-card{
  border-radius:var(--pm-r);border:1px solid rgba(227,215,246,.85);box-shadow:var(--pm-sh1);
}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],select,textarea{
  border-radius:14px;transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--purple2)!important;
  box-shadow:0 0 0 4px rgba(118,40,217,.14)!important;
}
:focus-visible{outline:2px solid var(--purple2);outline-offset:2px}

/* ---------- Login / PIN screen ---------- */
.bwl-pl-top,.bwl-pl-body{letter-spacing:.01em}
.bwl-pl-field{border-radius:16px;box-shadow:var(--pm-sh1)}
.bwl-pl-next,.bwl-pl-go{
  border-radius:16px;
  background:linear-gradient(135deg,var(--purple2),var(--purple));
  box-shadow:0 14px 28px -12px rgba(83,20,176,.65);
}
.bwl-pl-pad button{
  border-radius:50%;transition:transform .15s var(--pm-ease),background .2s;
}
.bwl-pl-pad button:active{transform:scale(.9)}

/* ---------- Scrollbar & motion ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(118,40,217,.35) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(118,40,217,.3);border-radius:8px}
.bwl-home>*{animation:pmRise .6s var(--pm-ease) both}
.bwl-home>*:nth-child(2){animation-delay:.06s}
.bwl-home>*:nth-child(3){animation-delay:.12s}
.bwl-home>*:nth-child(4){animation-delay:.18s}
.bwl-home>*:nth-child(n+5){animation-delay:.24s}
@keyframes pmRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* ---------- PIN complete: light runs around Account Number + PIN boxes ---------- */
@property --pm-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.bwl-pl-account,.bwl-pl-field:has(#bwl-pin-input){
  position:relative;border-radius:18px;padding:12px 16px;background:#fff;
}
.bwl-pl-account{border-bottom:0}
.bwl-pl-field.pm-done::after{
  content:"";position:absolute;inset:-2px;border-radius:20px;padding:2.5px;pointer-events:none;
  background:conic-gradient(from var(--pm-a),transparent 0 62%,var(--purple2) 78%,var(--pm-gold) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pmSpin 2s linear infinite;
}
.bwl-pl-field.pm-done{box-shadow:0 0 26px -6px rgba(118,40,217,.45)}
@keyframes pmSpin{to{--pm-a:360deg}}

/* inner PIN input: no box-in-a-box */
.bwl-pin-lock input,.bwl-pin-lock input:focus{border-radius:0!important;box-shadow:none!important}

/* ---------- Screen-edge light (runs round the phone sides when PIN is complete) ---------- */
.bwl-pin-lock.pm-ok::after{
  content:"";position:fixed;inset:0;z-index:7;pointer-events:none;padding:5px;
  background:conic-gradient(from var(--pm-a),transparent 0 52%,var(--purple2) 72%,var(--pm-gold) 90%,#fff 96%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pmSpin 2.2s linear infinite;
}

/* ---------- Flying bird (idle before PIN, faster while opening) ---------- */
.bwl-pl-logo{display:flex;align-items:center;gap:6px}
.pm-bird{width:92px;height:69px;overflow:visible;flex:none}
.pm-fly{animation:pmFloat 2.6s ease-in-out infinite}
.pm-wf{transform-origin:50px 46px;animation:pmFlapF .75s ease-in-out infinite alternate}
.pm-wb{transform-origin:52px 46px;animation:pmFlapB .75s ease-in-out infinite alternate}
.pm-sh{animation:pmShadow 2.6s ease-in-out infinite;transform-origin:62px 82px}
.pm-tr{animation:pmTrail 1.6s ease-out infinite}
.pm-tr2{animation-delay:.6s}
.pm-ok .pm-wf,.pm-ok .pm-wb{animation-duration:.28s}
.pm-ok .pm-fly{animation-duration:1.2s}
@keyframes pmFlapF{from{transform:rotate(-14deg)}to{transform:rotate(36deg)}}
@keyframes pmFlapB{from{transform:rotate(14deg)}to{transform:rotate(-36deg)}}
@keyframes pmFloat{0%,100%{transform:translateY(3px)}50%{transform:translateY(-6px)}}
@keyframes pmShadow{0%,100%{transform:scaleX(1);opacity:.14}50%{transform:scaleX(.7);opacity:.08}}
@keyframes pmTrail{0%{transform:translateX(8px);opacity:.9}100%{transform:translateX(-16px);opacity:0}}

/* wrong PIN: gentle shake */
.bwl-pin-lock.pm-shake .bwl-pl-body{animation:pmShake .45s ease-in-out}
@keyframes pmShake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
