/* Tata Mall — Recharge Rewards Floating UI
   Visual/interaction layer only. Existing recharge/payment logic is untouched. */
#rechargeRewardLauncher{
  position:fixed;right:18px;top:58%;width:66px;height:66px;border-radius:50%;
  display:none;align-items:center;justify-content:center;z-index:2600;cursor:grab;
  user-select:none;-webkit-user-select:none;touch-action:none;
  background:radial-gradient(circle at 35% 28%,#fff8cf 0 7%,#f4c84f 12%,#d99a1d 38%,#078d7b 68%,#045d55 100%);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 5px rgba(0,157,137,.10),0 10px 28px rgba(0,74,66,.28),inset 0 2px 5px rgba(255,255,255,.65),inset 0 -7px 12px rgba(0,48,43,.22);
  animation:rrFloat 3s ease-in-out infinite,rrGlow 2.4s ease-in-out infinite;
}
#rechargeRewardLauncher.dragging{cursor:grabbing;animation:none;transform:scale(1.04)}
#rechargeRewardLauncher::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(0,191,169,.35);animation:rrRing 2.6s linear infinite}
#rechargeRewardLauncher::after{content:"";position:absolute;left:-18%;top:7%;width:32%;height:86%;border-radius:999px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.72),transparent);transform:rotate(28deg);animation:rrShine 3.2s ease-in-out infinite}
.rr-launcher-inner{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;line-height:1;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.24)}
.rr-launcher-icon{font-size:25px;font-weight:950;line-height:25px}
.rr-launcher-text{font-size:8px;font-weight:950;letter-spacing:.5px;margin-top:3px}
.rr-launcher-dot{position:absolute;right:-1px;top:-1px;width:14px;height:14px;border-radius:50%;background:#ffe27a;border:2px solid #fff;box-shadow:0 0 0 3px rgba(255,215,92,.18),0 0 12px rgba(255,214,83,.9);animation:rrDot 1.5s ease-in-out infinite}

#rechargeRewardPanel{
  position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:2700;padding:18px;
  background:rgba(5,37,32,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
#rechargeRewardPanel.open{display:flex;animation:rrBackdrop .18s ease-out}
#rechargeRewardSheet{
  width:min(560px,100%);max-height:min(78vh,620px);overflow:auto;position:relative;
  border-radius:26px;background:linear-gradient(180deg,#ffffff 0%,#f7fcfa 100%);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 65px rgba(0,53,47,.28),0 4px 18px rgba(0,91,80,.14);
  transform:translateY(28px);animation:rrSheetIn .24s cubic-bezier(.2,.8,.2,1) forwards;
  font-family:Arial,Helvetica,sans-serif;color:#173f38;overflow-x:hidden;
}
.rr-sheet-top{height:9px;background:linear-gradient(90deg,#075e55,#00a992 45%,#f0bd45 75%,#00a992);background-size:220% 100%;animation:rrGradient 4s linear infinite}
.rr-sheet-head{display:flex;align-items:center;gap:11px;padding:16px 17px 11px}
.rr-sheet-badge{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#fff6c6,#f1c14b 34%,#008d7b 70%,#056057);box-shadow:0 7px 18px rgba(0,120,105,.18);border:2px solid #fff;font-size:22px}
.rr-sheet-title{font-size:18px;font-weight:950;color:#173f38;line-height:1.15}
.rr-sheet-sub{font-size:10px;color:#7a8a85;margin-top:4px;line-height:1.4}
.rr-sheet-close{margin-left:auto;width:34px;height:34px;border:0;border-radius:50%;background:#edf8f5;color:#087d70;font-size:21px;line-height:1;cursor:pointer}
.rr-sheet-body{padding:3px 16px 17px}
.rr-sheet-highlight{position:relative;overflow:hidden;padding:15px;border-radius:18px;background:linear-gradient(135deg,#064f49,#008f7c 55%,#00b29c);color:#fff;box-shadow:0 10px 24px rgba(0,111,97,.18);border:1px solid rgba(255,255,255,.16)}
.rr-sheet-highlight::after{content:"";position:absolute;left:-35%;bottom:0;width:45%;height:2px;background:linear-gradient(90deg,transparent,#ffe18a,transparent);animation:rrSweep 3s linear infinite}
.rr-sheet-kicker{font-size:9px;font-weight:900;letter-spacing:1px;opacity:.82;text-transform:uppercase}
.rr-sheet-main{font-size:20px;font-weight:950;margin-top:5px}
.rr-sheet-copy{font-size:11px;line-height:1.55;opacity:.88;margin-top:5px}
.rr-sheet-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:12px;border-radius:13px;text-decoration:none;background:linear-gradient(135deg,#ffe08a,#dca72c);color:#3b2a08;font-size:12px;font-weight:950;box-shadow:0 8px 18px rgba(166,115,18,.20),inset 0 1px 0 rgba(255,255,255,.7)}
.rr-sheet-note{margin-top:10px;padding:10px 11px;border-radius:13px;background:#f3faf8;border:1px solid #dceee9;color:#667773;font-size:10px;line-height:1.5}
.rr-sheet-note b{color:#007f72}
@media(max-width:430px){
  #rechargeRewardLauncher{right:14px;width:62px;height:62px}
  .rr-launcher-inner{width:52px;height:52px}.rr-launcher-icon{font-size:23px}.rr-launcher-text{font-size:7.5px}
  #rechargeRewardPanel{padding:10px}
  #rechargeRewardSheet{max-height:82vh;border-radius:24px}
}
@media(prefers-reduced-motion:reduce){#rechargeRewardLauncher,#rechargeRewardLauncher::before,#rechargeRewardLauncher::after,.rr-launcher-dot,.rr-sheet-top,.rr-sheet-highlight::after{animation:none!important}}
@keyframes rrFloat{0%,100%{margin-top:0}50%{margin-top:-5px}}
@keyframes rrGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.10)}}
@keyframes rrRing{0%{transform:scale(.96);opacity:.75}70%{transform:scale(1.12);opacity:0}100%{transform:scale(1.12);opacity:0}}
@keyframes rrShine{0%,55%{transform:translateX(0) rotate(28deg);opacity:0}68%{opacity:1}100%{transform:translateX(420%) rotate(28deg);opacity:0}}
@keyframes rrDot{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes rrBackdrop{from{opacity:0}to{opacity:1}}
@keyframes rrSheetIn{to{transform:translateY(0)}}
@keyframes rrGradient{to{background-position:220% 0}}
@keyframes rrSweep{from{transform:translateX(-20%)}to{transform:translateX(280%)}}