@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--pastel-lavender:#e6e6fa;--pastel-lavender-dark:#c4c4e1;--pastel-mint:#a8e6cf;--pastel-mint-dark:#88c6af;--pastel-red:#ffb7b2;--pastel-red-dark:#df9792;--pastel-yellow:#ffdac1;--pastel-yellow-dark:#dfbac1;--pastel-grey:#f5f5f5;--text-dark:#333;--text-light:#777;--white:#fff;--bg-color:#f0f2f5;--shadow-sm:0 2px 8px #0000000d;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 10px 25px #0000001a;--border-radius:12px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-dark);justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,sans-serif;display:flex}#root{justify-content:center;width:100%;display:flex}.gateway-container{background-color:var(--white);border-radius:var(--border-radius);width:100%;max-width:420px;box-shadow:var(--shadow-lg);flex-direction:column;animation:.4s ease-out slideIn;display:flex;position:relative;overflow:hidden}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.gateway-header{background-color:var(--pastel-lavender);border-bottom:2px solid #ffffff80;align-items:flex-start;padding:24px;display:flex;position:relative}.header-logo-container{background-color:var(--white);width:60px;height:60px;box-shadow:var(--shadow-sm);border-radius:12px;justify-content:center;align-items:center;margin-right:16px;display:flex}.header-logo-container svg{color:var(--pastel-lavender-dark)}.header-info h1{margin-bottom:4px;font-size:20px;font-weight:600}.header-info p{color:#666;margin-bottom:8px;font-size:14px}.header-amount{font-size:24px;font-weight:700}.close-btn{cursor:pointer;color:#888;background:0 0;border:none;padding:4px;position:absolute;top:16px;right:16px}.gateway-footer{background-color:var(--pastel-grey);text-align:center;color:var(--text-light);border-top:1px solid #eaeaea;flex-direction:column;align-items:center;padding:16px;font-size:12px;display:flex}.footer-secure{align-items:center;gap:6px;margin-bottom:4px;font-weight:500;display:flex}.gateway-content{flex-grow:1;padding:24px;animation:.3s ease-out fadeIn}.content-title{color:var(--text-dark);text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;font-size:14px;font-weight:600}.method-section{margin-bottom:24px}.method-title{margin-bottom:12px;font-size:14px;font-weight:500}.method-card{cursor:pointer;background-color:#fafafa;border:1px solid #eaeaea;border-radius:8px;align-items:center;padding:12px;transition:all .2s;display:flex}.method-card:hover{border-color:var(--pastel-lavender);background-color:#e6e6fa4d}.scan-card{justify-content:space-between;align-items:center;display:flex}.scan-left{gap:8px;display:flex}.app-icon{background-color:var(--pastel-lavender);color:#555;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:10px;font-weight:700;display:flex}.qr-code{background-color:#fff;border:1px solid #eee;width:60px;height:60px;padding:4px}.card-logos,.wallet-logos{flex-wrap:wrap;gap:12px;display:flex}.logo-item{color:#777;cursor:pointer;background-color:#fff;border:1px solid #eaeaea;border-radius:6px;justify-content:center;align-items:center;width:54px;height:36px;font-size:10px;font-weight:600;transition:all .2s;display:flex}.logo-item:hover{border-color:var(--pastel-mint);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.back-btn{cursor:pointer;color:var(--text-dark);background:0 0;border:none;border-radius:6px;align-items:center;gap:8px;margin-bottom:20px;margin-left:-8px;padding:8px;font-size:14px;font-weight:600;display:flex}.back-btn:hover{background-color:#f5f5f5}.form-group{margin-bottom:16px}.form-input{border:1px solid #eaeaea;border-radius:8px;outline:none;width:100%;padding:14px;font-family:Outfit,sans-serif;font-size:14px;transition:all .2s}.form-input:focus{border-color:var(--pastel-mint);box-shadow:0 0 0 3px #a8e6cf4d}.btn-primary{background-color:var(--pastel-mint);color:#2d6a4f;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:8px;padding:16px;font-family:Outfit,sans-serif;font-size:16px;font-weight:600;transition:all .2s}.btn-primary:hover{background-color:var(--pastel-mint-dark);transform:translateY(-1px)}.sim-btn{cursor:pointer;background-color:#fff;border:1px solid #eaeaea;border-radius:6px;justify-content:center;align-items:center;height:36px;padding:0 16px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.sim-btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.sim-btn-success{color:#2d6a4f;background-color:#a8e6cf33;border-color:#2d6a4f4d}.sim-btn-failure{color:#9d2a2a;background-color:#ffb7b233;border-color:#9d2a2a4d}.sim-btn-cancel{color:#8a6d1c;background-color:#ffdac133;border-color:#8a6d1c4d}.sim-btn-pending{color:#1565c0;background-color:#e3f2fd80;border-color:#1565c04d}.sim-btn-success:hover{border-color:#2d6a4f}.sim-btn-failure:hover{border-color:#9d2a2a}.sim-btn-cancel:hover{border-color:#8a6d1c}.sim-btn-pending:hover{border-color:#1565c0}.sim-card{cursor:pointer;background-color:#fff;border:1px solid #eaeaea;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px 12px;font-size:14px;font-weight:600;transition:all .25s;display:flex}.sim-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.sim-card:active{transform:translateY(0)}.sim-card-qr{cursor:pointer;background-color:#fff;border:1px solid #eaeaea;border-radius:6px;flex-direction:row;justify-content:center;align-items:center;gap:6px;padding:10px 8px;font-size:11px;font-weight:600;transition:all .2s;display:flex}.sim-card-qr:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.sim-card-qr:active{transform:translateY(0)}.outcome-container{text-align:center;flex-direction:column;align-items:center;padding:20px 0;display:flex}.outcome-icon{border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:20px;display:flex}.outcome-icon.success{background-color:var(--pastel-mint);color:#2d6a4f}.outcome-icon.failure{background-color:var(--pastel-red);color:#9d2a2a}.outcome-icon.cancelled{background-color:var(--pastel-yellow);color:#8a6d1c}.outcome-title{margin-bottom:8px;font-size:24px;font-weight:700}.outcome-message{margin-bottom:24px;font-size:15px}.outcome-title.success{color:#2d6a4f}.outcome-title.failure{color:#9d2a2a}.outcome-title.cancelled{color:#8a6d1c}.outcome-title.pending{color:#1565c0}.id-card{text-align:center;border-radius:8px;width:100%;margin-bottom:24px;padding:16px}.id-card.success{border:1px solid var(--pastel-mint);background-color:#a8e6cf33}.id-card.failure{border:1px solid var(--pastel-red);background-color:#ffb7b233}.id-card.cancelled{border:1px solid var(--pastel-yellow);background-color:#ffdac133}.id-card.pending{background-color:#e3f2fd66;border:1px solid #90caf9}.id-label{color:#555;margin-bottom:4px;font-size:12px;font-weight:600}.id-value{margin-bottom:8px;font-size:16px;font-weight:700}.id-note{color:#777;font-size:11px}.btn-secondary{cursor:pointer;background-color:#0000;border:none;border-radius:8px;width:100%;padding:16px;font-family:Outfit,sans-serif;font-size:16px;font-weight:600;transition:all .2s}.btn-secondary.success{color:#2d6a4f;text-decoration:underline}.btn-secondary.success:hover{color:var(--pastel-mint-dark)}.btn-secondary.failure{background-color:var(--pastel-red);color:#9d2a2a}.btn-secondary.failure:hover{background-color:var(--pastel-red-dark)}.btn-secondary.cancelled{background-color:var(--pastel-yellow);color:#8a6d1c}.btn-secondary.cancelled:hover{background-color:var(--pastel-yellow-dark)}.btn-secondary.pending{color:#1565c0;background-color:#e3f2fd}.btn-secondary.pending:hover{background-color:#bbdefb}.outcome-icon.pending{color:#1565c0;background-color:#e3f2fd}