:root{--bg-gradient:linear-gradient(135deg, #e0e9fb 0%, #d4def7 100%);--panel-bg:#f5f8ff;--info-bg:#dbe4fa;--text-dark:#2a3b5c;--text-blue:#3b5bdb;--text-light:#7a8ba3;--input-bg:#e8effa;--input-border:#bac8e0;--button-gradient:linear-gradient(135deg, #4f6cf6 0%, #7c6df7 100%)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;display:flex}#root{justify-content:center;align-items:center;width:100%;padding:20px;display:flex}input,button{font-family:inherit}.payment-anim-container{justify-content:center;align-items:center;margin:-5px auto -10px;display:flex}.virtual-card-wrapper{pointer-events:none;z-index:10;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.virtual-card-wrapper.show-card{pointer-events:auto}.card-half{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.card-left{clip-path:polygon(0% 0%,50% 0%,45% 15%,52% 30%,48% 45%,55% 65%,47% 85%,50% 100%,0% 100%);transition:clip-path .2s ease-out}.card-right{clip-path:polygon(100% 0%,100% 100%,50% 100%,47% 85%,55% 65%,48% 45%,52% 30%,45% 15%,50% 0%);transition:clip-path .2s ease-out}.virtual-card-wrapper.is-landed .card-left{clip-path:polygon(0% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 100%,0% 100%);z-index:2}.virtual-card-wrapper.is-landed{animation:.75s ease-out forwards successPop}@keyframes successPop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.particles-container{z-index:30;pointer-events:none;width:0;height:0;position:absolute;top:50%;left:50%}.particle{background:#0f8;border-radius:50%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 10px #0f8,0 0 20px #b3ffda}.lottie-success-overlay{z-index:50;pointer-events:none;width:120px;height:120px;position:absolute;top:calc(50% - 280px);left:50%;transform:translate(-50%)}.virtual-card{color:#fff;background:linear-gradient(135deg,#7b4397 0%,#894b9f 50%,#663d91 100%) padding-box padding-box,linear-gradient(135deg,#7b4397 0%,#894b9f 50%,#663d91 100%) border-box;border:4px solid #0000;border-radius:20px;flex-direction:column;justify-content:space-between;width:440px;height:280px;padding:30px;font-family:Consolas,Courier New,Courier,monospace;transition:box-shadow .4s ease-out;display:flex;position:relative;overflow:hidden}.virtual-card.with-shadow{background: linear-gradient(135deg, #7b4397 0%, #894b9f 50%, #663d91 100%) padding-box,  conic-gradient(from calc(180deg + var(--angle)), transparent 320deg, #0f86 345deg, #fff 360deg) border-box,  conic-gradient(from calc(180deg - var(--angle)), #fff 0deg, #0f86 15deg, transparent 40deg) border-box;animation:1.5s ease-in-out infinite alternate splitComet;box-shadow:0 25px 60px -10px #00ff8880,0 0 50px #0f86,0 0 90px #0f83,inset 0 1px 1px #ffffff1a,inset 0 -1px 1px #00000080}@keyframes splitComet{0%{--angle:0deg}to{--angle:180deg}}.virtual-card:before{content:"";pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E"),radial-gradient(at 10% 120%,#0000 60%,#ffffff1f 61% 61.5%,#0000 62.5%),radial-gradient(at 90% -20%,#0000 60%,#ffffff1f 61% 61.5%,#0000 62.5%),linear-gradient(30deg,#0000 49%,#ffffff0f 49% 51%,#0000 51%),linear-gradient(-30deg,#0000 49%,#ffffff0f 49% 51%,#0000 51%);background-position:50%;background-size:100% 100%,100% 100%,100% 100%,40px 70px,40px 70px;position:absolute;inset:0}.virtual-card>*{z-index:2;position:relative}.card-top-row{justify-content:space-between;align-items:center;display:flex}.bank-brand{letter-spacing:2px;align-items:center;gap:10px;font-family:Arial,sans-serif;font-size:14px;font-weight:500;display:flex}.card-type{letter-spacing:1px;font-family:Arial,sans-serif;font-size:14px}.card-chip-row{justify-content:space-between;align-items:center;margin-top:15px;margin-bottom:5px;display:flex}.chip{background:linear-gradient(135deg,#e6c27a 0%,#ffe499 40%,#c49a45 100%);border-radius:6px;width:50px;height:36px;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #fffc,inset 0 -1px 2px #0006,0 2px 4px #0000004d}.nfc-icon{margin-right:15px}.nfc-icon svg{transform:rotate(90deg)}.card-number-row{letter-spacing:2px;text-shadow:0 1px 2px #00000080;white-space:nowrap;font-size:25px;font-weight:500}.card-details-row{letter-spacing:2px;justify-content:flex-start;align-items:center;gap:160px;margin-top:5px;font-size:14px;display:flex}.expiry-area{align-items:center;gap:10px;display:flex}.expires-label{text-align:right;letter-spacing:.5px;font-family:Arial,sans-serif;font-size:6px;line-height:1.2}.expires-value{letter-spacing:2px;font-size:18px}.card-bottom-row{letter-spacing:3px;text-transform:uppercase;margin-top:5px;font-size:16px}.checkout-container{background:var(--panel-bg);border-radius:20px;grid-template-columns:1fr 1fr;gap:40px;width:100%;max-width:900px;padding:30px;display:grid;position:relative;overflow:hidden;box-shadow:0 20px 50px -20px #2a3b5c33}@media (width<=768px){.checkout-container{grid-template-columns:1fr}}.close-btn{border:1px solid var(--input-border);width:28px;height:28px;color:var(--text-light);cursor:pointer;background:0 0;border-radius:6px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:20px;right:20px}.close-btn:hover{background:var(--input-bg);color:var(--text-dark)}.info-section{flex-direction:column;display:flex}.header h1{color:var(--text-blue);margin-bottom:5px;font-size:2rem;font-weight:600}.header .subtitle{color:#798eb3;margin-bottom:25px;font-size:1.1rem}.info-box{background:var(--info-bg);border-radius:12px;flex:1;padding:25px 20px}.info-item{color:var(--text-dark);margin-bottom:25px;font-size:.95rem;font-weight:500;line-height:1.4}.cards-accepted{background:#fff;border-radius:8px;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;display:flex}.card-logo-box{border-radius:4px;align-items:center;display:flex;overflow:hidden;box-shadow:0 1px 3px #0000001a}.privacy-link{color:var(--text-blue);cursor:pointer;text-decoration:underline}.support-section{margin-top:30px}.support-section p{color:var(--text-dark);margin-bottom:5px;font-size:.9rem;font-weight:500}.support-link{color:var(--text-blue);cursor:pointer;font-size:.9rem;font-weight:500;text-decoration:underline}.form-section{padding-top:30px}.form-group{margin-bottom:20px}.form-group label{color:var(--text-dark);margin-bottom:8px;font-size:.9rem;font-weight:500;display:block}.form-row{gap:15px;display:flex}.form-row .form-group:first-child{flex:1}.form-row .form-group:last-child{flex:2}input{background-color:var(--input-bg);border:1px solid var(--input-border);width:100%;color:var(--text-dark);border-radius:8px;outline:none;padding:12px 15px;font-size:.9rem;transition:border-color .2s}input::placeholder{color:#9ba8c0}.form-group input:focus{border-color:var(--primary);background:#fffc;outline:none}.input-with-icon{align-items:center;display:flex;position:relative}.input-with-icon input{padding-right:45px}.input-icon{pointer-events:none;align-items:center;display:flex;position:absolute;top:50%;right:15px;transform:translateY(-50%)}.form-actions{margin-top:25px}.pay-btn{background:var(--button-gradient);color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:14px 24px;font-size:1rem;font-weight:500;transition:transform .1s,box-shadow .2s;display:flex;box-shadow:0 4px 15px #4f6cf666}.pay-btn:hover{box-shadow:0 6px 20px #4f6cf680}.pay-btn:active{transform:translateY(2px)}.pay-row{align-items:center;gap:10px;display:flex}.card-swipe-anim{flex-shrink:0;width:100px;height:100px;margin-top:-15px;margin-left:auto;margin-right:10px}.go-back{color:var(--text-light);cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;margin-top:25px;font-size:.9rem;transition:color .2s;display:inline-flex}.go-back:hover{color:var(--text-dark)}.info-section,.form-section{transition:opacity .5s}.slide-out-left,.slide-out-right{opacity:0;pointer-events:none}.processing-loader{z-index:5;flex-direction:column;justify-content:center;align-items:center;animation:1.2s ease-in-out forwards fadeInOut;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.processing-loader p{color:#1a1a1a;letter-spacing:1px;margin-top:20px;font-size:18px;font-weight:500}.spinner{border:4px solid #1a29801a;border-left-color:#1a2980;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeInOut{0%{opacity:0}10%{opacity:1}80%{opacity:1}to{opacity:0}}.success-message{z-index:10;opacity:0;flex-direction:column;align-items:center;animation:.5s ease-out 1s forwards fadeIn;display:flex;position:absolute;top:calc(50% + 200px);left:50%;transform:translate(-50%)}.success-message .check-circle{filter:drop-shadow(0 0 8px #00b35966);width:52px;height:52px}.success-message svg{width:100%;height:100%}.success-message .check-circle-path{stroke:#00b359;stroke-width:2px;stroke-dasharray:155;stroke-dashoffset:155px;animation:.5s ease-out 1.2s forwards drawCircle}.success-message .check-path{stroke:#00b359;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36px;animation:.3s ease-out 1.7s forwards drawCheck}.success-message p{color:#1a1a1a;letter-spacing:1.5px;text-transform:uppercase;margin-top:15px;font-size:22px;font-weight:600}@keyframes drawCircle{to{stroke-dashoffset:0}}@keyframes drawCheck{to{stroke-dashoffset:0}}@keyframes fadeIn{to{opacity:1}}
