@font-face{font-family:SuperWonder;src:url('/assets/super-wonder.ttf') format('truetype');font-weight:400;font-style:normal}body{font-family:SuperWonder,'Balsamiq Sans','Comic Sans MS',cursive,sans-serif;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#4a4a4a}.container{width:375px;background-color:#fff;border-radius:40px;box-shadow:0 10px 20px rgba(0,0,0,.3);overflow:hidden;position:relative;margin:20px}.header{background-color:#3f5a76;height:150px;position:relative;border-top-left-radius:40px;border-top-right-radius:40px;background-image:url('/assets/banner.jpg');background-size:cover;background-position:center}.profile-pic{width:100px;height:100px;border-radius:50%;object-fit:cover;border:5px solid #fff;position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:2;box-shadow:0 5px 10px rgba(0,0,0,.2)}.content{padding:100px 30px 30px}.nominal-title{display:flex;align-items:center;color:#9e9e9e;font-size:14px;margin-bottom:20px;font-weight:700}.wallet-icon{width:30px;margin-right:10px}.nominal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:30px}.nominal-box{background-color:#fff;border:2px solid #333;border-radius:10px;padding:15px;cursor:pointer;box-shadow:3px 3px 0 #333;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:background-color,transform,box-shadow;-webkit-tap-highlight-color:transparent;user-select:none}@media (hover:hover) and (pointer:fine){.nominal-box:hover{background-color:#ffe082;transform:translate(2px,2px);box-shadow:1px 1px 0 #333}}.nominal-box.selected,.nominal-box.touched,.nominal-box:active{background-color:#ffe082!important;transform:translate(2px,2px);box-shadow:1px 1px 0 #333}.nominal-label{font-size:12px;color:#333;margin-bottom:5px;font-weight:700}.nominal-amount{font-size:20px;font-weight:700;color:#333}.other-label{color:#9e9e9e;font-size:14px;margin-bottom:10px;font-weight:700}.custom-input-box{background-color:#fff8e1;border:2px solid #333;border-radius:10px;padding:12px 15px;margin-bottom:20px;box-shadow:3px 3px 0 #333;display:flex;align-items:center;transition:background-color .2s,transform .15s,box-shadow .15s}.custom-input-box.focused{background-color:#e1f5fe;transform:translate(2px,2px);box-shadow:1px 1px 0 #333}.input-rp-label{font-size:20px;color:#333;font-weight:700;margin-right:8px}.custom-input-box input{border:none;background:0 0;font-size:20px;font-weight:700;color:#333;width:100%;outline:0;font-family:SuperWonder,'Balsamiq Sans','Comic Sans MS',cursive,sans-serif}.total-payment-box{background-color:#ffe082;border:2px solid #333;border-radius:10px;padding:15px;margin-bottom:20px;box-shadow:3px 3px 0 #333;display:none;justify-content:space-between;align-items:center}.total-title{font-size:12px;font-weight:700;color:#333;margin-bottom:5px;letter-spacing:.5px}.total-amount{font-size:22px;font-weight:700;color:#333}.total-icon-container{background-color:#fff8e1;border:2px solid #333;border-radius:8px;padding:10px 12px;display:flex;align-items:center;justify-content:center}.pay-button{width:100%;padding:15px;background-color:#1a1a1a;color:#fff;font-size:18px;font-weight:700;border:2px solid #333;border-radius:10px;cursor:pointer;margin-bottom:20px;box-shadow:3px 3px 0 #333;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .25s,box-shadow .25s,border-color .25s;-webkit-tap-highlight-color:transparent;user-select:none;font-family:SuperWonder,'Balsamiq Sans','Comic Sans MS',cursive,sans-serif;position:relative;overflow:hidden;isolation:isolate}.pay-button__frost-canvas{position:absolute;left:0;top:0;z-index:1;pointer-events:none;display:block;border-radius:inherit}.pay-button i,.pay-button__label{position:relative;z-index:2}.pay-button.is-frosted{border-color:rgba(205,233,255,.75);box-shadow:3px 3px 0 #333,inset 0 0 16px rgba(190,225,255,.35)}.pay-button.is-frosted .pay-button__label,.pay-button.is-frosted i{text-shadow:0 0 10px rgba(210,242,255,.8)}.pay-button.clicked,.pay-button.touched,.pay-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #333}.secure-footer{display:flex;align-items:center;justify-content:center;font-size:12px;color:#333;font-weight:700}.check-icon{color:#4caf50;margin-right:5px;font-size:16px}.pay-error{display:none;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.5);color:#ff6b6b;font-size:14px;text-align:center}.pay-button[disabled]{opacity:.7;pointer-events:none}