/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#050510;color:#e0e0e0;font-family:'Rajdhani','Segoe UI',sans-serif;min-height:100vh;overflow-x:hidden}
#bgCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ── NAVBAR ── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:#05051088;backdrop-filter:blur(12px);border-bottom:1px solid #1e1e3a}
.nav-logo{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:900;color:#4cff91;text-decoration:none;text-shadow:0 0 12px #4cff9166;letter-spacing:2px}
.nav-secure{font-family:'Orbitron',sans-serif;font-size:.7rem;color:#4cff9188;letter-spacing:2px}
.nav-back{color:#555;text-decoration:none;font-size:.85rem;font-family:'Orbitron',sans-serif;transition:color .2s}
.nav-back:hover{color:#ff6c6c}

/* ── PAGE LAYOUT ── */
#page-wrap{position:relative;z-index:1;display:flex;gap:28px;max-width:1100px;margin:0 auto;padding:90px 24px 60px;flex-wrap:wrap}
#left-col{flex:1;min-width:300px;display:flex;flex-direction:column;gap:20px}
#right-col{flex:1.2;min-width:320px}

/* ── SECTION CARD ── */
.section-card{background:#0d0d1e;border:1px solid #1e1e3a;border-radius:20px;padding:24px}
.section-heading{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;color:#fff;margin-bottom:18px;letter-spacing:1px}

/* ── PLAN GRID ── */
#plan-grid{display:flex;flex-direction:column;gap:12px}
.plan-card{background:#111122;border:1px solid #1e1e3a;border-radius:14px;padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.plan-card:hover{border-color:#4cff9144;transform:translateY(-2px)}
.plan-card.active{border-color:#4cff91;background:#4cff9108;box-shadow:0 0 20px #4cff9122}
.plan-badge{position:absolute;top:10px;right:10px;font-size:.6rem;font-weight:700;font-family:'Orbitron',sans-serif;padding:2px 8px;border-radius:8px;background:#4cff9122;color:#4cff91;border:1px solid #4cff9144}
.plan-badge.best{background:#ffcc0022;color:#ffcc00;border-color:#ffcc0044}
.plan-badge.save{background:#cc66ff22;color:#cc66ff;border-color:#cc66ff44}
.plan-icon{font-size:1.8rem;margin-bottom:4px}
.plan-name{font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:700;color:#fff;margin-bottom:4px}
.plan-price{font-family:'Orbitron',sans-serif;font-size:1.4rem;font-weight:900;color:#4cff91;margin-bottom:10px}
.plan-price span{font-size:.75rem;color:#555;font-weight:400}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:4px}
.plan-features li{font-size:.8rem;color:#666}
.plan-card.active .plan-features li{color:#aaa}

/* ── ORDER SUMMARY ── */
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:.9rem;color:#888;border-bottom:1px solid #1a1a2e}
.summary-row:last-of-type{border-bottom:none}
.discount-row{color:#4cff91}
.total-row{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;color:#fff;padding:12px 0 0}
.summary-divider{height:1px;background:#1e1e3a;margin:8px 0}
.green{color:#4cff91}
.promo-wrap{display:flex;gap:8px;margin-top:14px}
.promo-wrap input{flex:1;background:#111122;border:1px solid #1e1e3a;border-radius:10px;padding:9px 12px;color:#e0e0e0;font-size:.85rem;font-family:'Rajdhani',sans-serif;outline:none;transition:border-color .2s}
.promo-wrap input:focus{border-color:#4cff91}
.promo-wrap input::placeholder{color:#333}
#promo-btn{padding:9px 18px;background:#4cff9122;border:1px solid #4cff9144;border-radius:10px;color:#4cff91;font-family:'Orbitron',sans-serif;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
#promo-btn:hover{background:#4cff91;color:#050510}
#promo-msg{font-size:.78rem;min-height:18px;margin-top:6px;padding-left:2px}
.trust-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #1a1a2e}
.trust-badges span{font-size:.72rem;color:#444;display:flex;align-items:center;gap:4px}

/* ── METHOD TABS ── */
#method-tabs{display:flex;gap:6px;margin-bottom:20px;background:#111122;border-radius:14px;padding:6px}
.method-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:none;background:transparent;border-radius:10px;cursor:pointer;transition:all .2s}
.method-tab:hover{background:#1a1a2e}
.method-tab.active{background:#4cff9122;border:1px solid #4cff9144}
.tab-icon{font-size:1.2rem}
.tab-label{font-family:'Orbitron',sans-serif;font-size:.58rem;color:#666;font-weight:700;letter-spacing:.5px}
.method-tab.active .tab-label{color:#4cff91}

/* ── METHOD PANELS ── */
.method-panel{display:none;flex-direction:column;gap:14px}
.method-panel.active{display:flex}
.panel-desc{font-size:.82rem;color:#555;margin-bottom:4px}

/* ── INPUT GROUPS ── */
.input-group{display:flex;flex-direction:column;gap:5px}
.input-group label{font-size:.68rem;font-weight:600;color:#555;font-family:'Orbitron',sans-serif;letter-spacing:1px}
.label-hint{color:#333;font-weight:400;cursor:help}
.input-wrap{display:flex;align-items:center;background:#111122;border:1px solid #1e1e3a;border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.input-wrap:focus-within{border-color:#4cff91;box-shadow:0 0 0 3px #4cff9122}
.input-wrap.error{border-color:#ff6c6c;box-shadow:0 0 0 3px #ff6c6c22}
.input-icon{padding:0 10px;font-size:.9rem;flex-shrink:0}
.input-wrap input,.input-wrap select{flex:1;background:none;border:none;outline:none;color:#e0e0e0;font-size:.9rem;padding:11px 8px 11px 0;font-family:'Rajdhani',sans-serif}
.input-wrap select{cursor:pointer}
.input-wrap input::placeholder{color:#333}
.input-suffix{padding:0 12px;font-size:.72rem;font-family:'Orbitron',sans-serif;color:#4cff91;cursor:pointer;font-weight:700;white-space:nowrap;transition:color .2s}
.input-suffix:hover{color:#7fffb3}
.field-hint{font-size:.7rem;color:#333;padding-left:2px}
.field-error{font-size:.7rem;color:#ff6c6c;min-height:16px;padding-left:2px}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── UPI ── */
.upi-apps{display:flex;gap:8px;flex-wrap:wrap}
.upi-app{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;background:#111122;border:1px solid #1e1e3a;border-radius:12px;cursor:pointer;transition:all .2s;font-size:.72rem;color:#666;font-family:'Orbitron',sans-serif}
.upi-app:hover{border-color:#4cff9144;color:#4cff91}
.upi-app.active{background:#4cff9111;border-color:#4cff91;color:#4cff91}
.upi-app-icon{font-size:1.4rem}
.verified-badge{background:#4cff9111;border:1px solid #4cff9144;border-radius:10px;padding:10px 14px;font-size:.82rem;color:#4cff91}
.qr-option{display:flex;flex-direction:column;gap:10px}
.qr-toggle-btn{background:none;border:1px dashed #2a2a4a;border-radius:10px;color:#555;padding:8px;font-size:.78rem;font-family:'Orbitron',sans-serif;cursor:pointer;transition:all .2s}
.qr-toggle-btn:hover{border-color:#4cff9144;color:#4cff91}
.qr-mock{width:140px;height:140px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative;overflow:hidden}
.qr-mock::before{content:'';position:absolute;inset:8px;background:repeating-linear-gradient(0deg,#000 0,#000 4px,transparent 4px,transparent 8px),repeating-linear-gradient(90deg,#000 0,#000 4px,transparent 4px,transparent 8px);opacity:.15}
.qr-inner{width:50px;height:50px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;z-index:1;border:3px solid #000}
.qr-logo{font-size:1.6rem}
.qr-hint{font-size:.75rem;color:#555;text-align:center;margin-top:8px}
.qr-amount{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;color:#4cff91;text-align:center}

/* ── CARD PREVIEW ── */
.card-preview{width:100%;height:160px;perspective:1000px;margin-bottom:4px}
.card-preview-inner{width:100%;height:100%;background:linear-gradient(135deg,#1a1a3e 0%,#2a1a4e 50%,#1a2a4e 100%);border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 32px #00000066,0 0 0 1px #4cff9122;position:relative;overflow:hidden}
.card-preview-inner::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:#4cff9108;filter:blur(30px)}
.card-chip{font-size:1.4rem;color:#ffcc0088;letter-spacing:-4px}
.card-number-display{font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:3px;text-shadow:0 0 10px #4cff9144}
.card-bottom{display:flex;align-items:flex-end;gap:20px}
.card-label-sm{font-size:.55rem;color:#ffffff44;letter-spacing:2px;font-family:'Orbitron',sans-serif;margin-bottom:2px}
.card-holder-display,.card-expiry-display{font-family:'Orbitron',sans-serif;font-size:.78rem;color:#fff;font-weight:700;letter-spacing:1px}
.card-brand-display{font-size:1.8rem;margin-left:auto}
.card-type-badge{padding:0 10px;font-size:.7rem;font-family:'Orbitron',sans-serif;color:#ffcc00;font-weight:700}

/* ── CHECKBOX ── */
.checkbox-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.82rem;color:#666}
.checkbox-wrap input{display:none}
.checkmark{width:18px;height:18px;border:1px solid #2a2a4a;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
.checkbox-wrap input:checked+.checkmark{background:#4cff91;border-color:#4cff91}
.checkbox-wrap input:checked+.checkmark::after{content:'✓';font-size:.7rem;color:#050510;font-weight:900}

/* ── EMI ── */
.emi-banks{display:flex;gap:6px;flex-wrap:wrap}
.emi-bank{padding:6px 14px;background:#111122;border:1px solid #1e1e3a;border-radius:10px;font-size:.72rem;font-family:'Orbitron',sans-serif;color:#555;cursor:pointer;transition:all .2s}
.emi-bank:hover{border-color:#ff994444;color:#ff9944}
.emi-bank.active{background:#ff994422;border-color:#ff9944;color:#ff9944}
#emi-plans{display:flex;flex-direction:column;gap:8px}
.emi-plan-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#111122;border:1px solid #1e1e3a;border-radius:12px;cursor:pointer;transition:all .2s}
.emi-plan-row:hover{border-color:#ff994444}
.emi-plan-row.active{border-color:#ff9944;background:#ff994411}
.emi-radio{width:18px;height:18px;border:2px solid #2a2a4a;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.emi-plan-row.active .emi-radio{border-color:#ff9944}
.emi-radio-dot{width:8px;height:8px;border-radius:50%;background:#ff9944;opacity:0;transition:opacity .2s}
.emi-plan-row.active .emi-radio-dot{opacity:1}
.emi-info{flex:1}
.emi-months{font-family:'Orbitron',sans-serif;font-size:.78rem;font-weight:700;color:#fff}
.emi-detail{font-size:.72rem;color:#555;margin-top:2px}
.emi-total{font-family:'Orbitron',sans-serif;font-size:.82rem;font-weight:700;color:#ff9944}
.emi-summary-box{background:#ff994411;border:1px solid #ff994433;border-radius:12px;padding:14px}
.emi-sum-row{display:flex;justify-content:space-between;font-size:.82rem;color:#888;padding:4px 0}
.emi-sum-row span:last-child{color:#ff9944;font-weight:700;font-family:'Orbitron',sans-serif}

/* ── NET BANKING ── */
.nb-popular-label{font-size:.65rem;letter-spacing:2px;color:#444;font-family:'Orbitron',sans-serif;margin-bottom:8px}
#nb-banks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nb-bank{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:#111122;border:1px solid #1e1e3a;border-radius:12px;cursor:pointer;transition:all .2s;font-size:.7rem;color:#555;font-family:'Orbitron',sans-serif;text-align:center}
.nb-bank:hover{border-color:#66ccff44;color:#66ccff}
.nb-bank.active{background:#66ccff11;border-color:#66ccff;color:#66ccff}
.nb-icon{font-size:1.4rem}
.nb-info-box{display:flex;gap:8px;align-items:flex-start;background:#66ccff08;border:1px solid #66ccff22;border-radius:10px;padding:10px 12px;font-size:.78rem;color:#555;line-height:1.5}

/* ── PAY BUTTON ── */
.pay-btn{width:100%;padding:14px;border:none;border-radius:14px;font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:900;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;margin-top:4px}
.pay-btn{background:#4cff91;color:#050510;box-shadow:0 0 24px #4cff9144}
.pay-btn:hover{transform:scale(1.02);box-shadow:0 0 40px #4cff9188}
.pay-btn:active{transform:scale(.98)}
.pay-btn.card-pay{background:linear-gradient(135deg,#4cff91,#66ccff)}
.pay-btn.emi-pay{background:linear-gradient(135deg,#ff9944,#ffcc00);color:#050510}
.pay-btn.nb-pay{background:linear-gradient(135deg,#66ccff,#cc66ff);color:#050510}
.pay-icon{font-size:1.1rem}
.pay-amount{font-weight:900}
.security-note{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:.75rem;color:#333;line-height:1.5}

/* ── PROCESSING OVERLAY ── */
#processing-overlay{position:fixed;inset:0;z-index:500;background:#050510cc;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center}
#processing-overlay.hidden{display:none}
#processing-box{background:#0d0d1e;border:1px solid #2a2a4a;border-radius:24px;padding:40px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 0 60px #4cff9122;animation:modalIn .3s ease}
@keyframes modalIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.proc-spinner{width:56px;height:56px;border:3px solid #1e1e3a;border-top-color:#4cff91;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#proc-title{font-family:'Orbitron',sans-serif;font-size:1.1rem;color:#fff}
#proc-msg{font-size:.82rem;color:#555}
.proc-steps{display:flex;flex-direction:column;gap:8px;margin-top:8px;text-align:left}
.proc-step{font-size:.8rem;color:#333;padding:6px 12px;border-radius:8px;transition:all .4s}
.proc-step.active{color:#4cff91;background:#4cff9111;border:1px solid #4cff9133}
.proc-step.done{color:#4cff9188}

/* ── SUCCESS OVERLAY ── */
#success-overlay{position:fixed;inset:0;z-index:500;background:#050510cc;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px}
#success-overlay.hidden{display:none}
#success-box{background:#0d0d1e;border:1px solid #4cff91;border-radius:24px;padding:36px 44px;text-align:center;max-width:440px;width:100%;box-shadow:0 0 80px #4cff9133;animation:modalIn .4s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;gap:14px}
.success-anim{font-size:4rem;animation:successBounce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes successBounce{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
#success-box h2{font-family:'Orbitron',sans-serif;font-size:1.6rem;color:#4cff91;text-shadow:0 0 20px #4cff9166}
#success-box p{font-size:.88rem;color:#666}
.receipt-box{width:100%;background:#111122;border:1px solid #1e1e3a;border-radius:14px;padding:16px;text-align:left}
.receipt-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #1a1a2e;font-size:.82rem;color:#666}
.receipt-row:last-child{border-bottom:none}
.receipt-row span:last-child{color:#fff;font-weight:600;font-family:'Orbitron',sans-serif;font-size:.75rem}
.success-btns{display:flex;gap:10px;width:100%;flex-wrap:wrap}
.sbtn{flex:1;padding:12px;border-radius:14px;font-family:'Orbitron',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;border:none}
.sbtn.primary{background:#4cff91;color:#050510;box-shadow:0 0 20px #4cff9144}
.sbtn.primary:hover{transform:scale(1.03);box-shadow:0 0 30px #4cff9188}
.sbtn.ghost{background:transparent;border:1px solid #2a2a4a;color:#666}
.sbtn.ghost:hover{border-color:#4cff9144;color:#4cff91}

/* ── TOAST ── */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#1a1a2e;border:1px solid #4cff91;border-radius:24px;padding:10px 24px;font-family:'Orbitron',sans-serif;font-size:.78rem;color:#4cff91;z-index:999;white-space:nowrap;animation:toastIn .3s ease;box-shadow:0 0 20px #4cff9133}
#toast.hidden{display:none}
#toast.error{border-color:#ff6c6c;color:#ff6c6c;box-shadow:0 0 20px #ff6c6c33}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── Responsive ── */
@media(max-width:768px){
  #navbar{padding:12px 20px}
  .nav-secure{display:none}
  #page-wrap{padding:76px 16px 40px;flex-direction:column}
  #left-col,#right-col{min-width:unset;width:100%}
  #plan-grid{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .plan-card{min-width:180px}
  #nb-banks-grid{grid-template-columns:repeat(4,1fr)}
  #success-box{padding:28px 20px}
}
@media(max-width:480px){
  #plan-grid{flex-direction:column}
  .plan-card{min-width:unset}
  .input-row{grid-template-columns:1fr}
  #nb-banks-grid{grid-template-columns:repeat(2,1fr)}
}