:root{--bg-color: #f8f9fa;--container-bg: rgba(255, 255, 255, .95);--text-color: #333;--input-bg: #fff;--input-border: #ddd;--input-focus-border: #667eea;--button-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--button-text: #fff;--primary-btn-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--primary-btn-text: #fff;--primary-btn-hover-bg: linear-gradient(135deg, #5a71d6 0%, #6a4292 100%);--error-color: #c53030;--error-bg: #fed7d7;--success-color: #2f855a;--success-bg: #c6f6d5;--keyboard-bg: #f0f2f5;--keyboard-key-bg: #fff;--keyboard-key-text: #333;--keyboard-key-border: #ddd;--keyboard-key-active: #e6e6e6;--modal-bg: rgba(0, 0, 0, .5);--modal-content-bg: #fff;--box-shadow: 0 20px 40px rgba(0, 0, 0, .1)}body.dark-mode{--bg-color: #121212;--container-bg: rgba(30, 30, 30, .95);--text-color: #e0e0e0;--input-bg: #2a2a2a;--input-border: #444;--input-focus-border: #8a96e9;--button-bg: linear-gradient(135deg, #4a5cbb 0%, #5d3b82 100%);--button-text: #fff;--primary-btn-bg: linear-gradient(135deg, #4a5cbb 0%, #5d3b82 100%);--primary-btn-text: #fff;--primary-btn-hover-bg: linear-gradient(135deg, #3e4da3 0%, #4f3270 100%);--error-color: #f56565;--error-bg: #742a2a;--success-color: #48bb78;--success-bg: #276749;--keyboard-bg: #2a2a2a;--keyboard-key-bg: #3a3a3a;--keyboard-key-text: #e0e0e0;--keyboard-key-border: #555;--keyboard-key-active: #4a4a4a;--modal-bg: rgba(0, 0, 0, .7);--modal-content-bg: #2a2a2a;--box-shadow: 0 20px 40px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}.container{width:100%;max-width:900px;background:var(--container-bg);border-radius:20px;box-shadow:var(--box-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;min-height:550px}.header{background:var(--button-bg);color:var(--button-text);padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;position:relative;grid-column:1 / -1}.header-title{font-size:1.5rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.fullscreen-btn{background:#fff3;border:none;color:var(--button-text);padding:.75rem;border-radius:50%;cursor:pointer;transition:all .3s ease;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.fullscreen-btn:hover,.fullscreen-btn:focus{background:#ffffff4d;transform:scale(1.05)}.use-saved-card-btn:hover{background-color:var(--input-focus-border);transform:scale(1.05)}.saved-card-item.selected{background-color:var(--input-bg);border-left:3px solid var(--input-focus-border)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.fullscreen-btn:active{transform:scale(.95)}.payment-form-container{padding:2rem;grid-column:1}.payment-form{display:flex;flex-direction:column;gap:.8rem}.form-group{position:relative}.form-row{display:flex;gap:1rem}.form-group-half{flex:1}.form-label{display:block;font-weight:600;color:var(--text-color);margin-bottom:.3rem;font-size:1rem;display:flex;align-items:center;gap:.5rem}.form-input{width:100%;padding:1rem 1.5rem;border:2px solid var(--input-border);border-radius:10px;font-size:1.2rem;background:var(--input-bg);color:var(--text-color);transition:all .3s ease;min-height:58px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-input:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 3px #667eea1a;transform:translateY(-1px)}.form-input:valid{border-color:var(--success-color)}.form-input.error{border-color:var(--error-color);animation:shake .5s ease-in-out}.form-input.keyboard-active{border-color:var(--input-focus-border);box-shadow:0 0 0 3px #667eea33;background:var(--input-bg)}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.card-type-indicator{position:absolute;right:1rem;top:50%;transform:translateY(-50%);margin-top:1.75rem}.card-type-icon{font-size:1.5rem;color:var(--text-color);opacity:.6;transition:all .3s ease}.card-type-icon.visa{color:#1a365d}.card-type-icon.mastercard{color:#eb5424}.card-type-icon.amex{color:#006fcf}.card-type-icon.discover{color:#ff6000}.error-message{color:var(--error-color);font-size:.9rem;margin-top:.5rem;padding-left:.5rem;min-height:1.2rem;display:flex;align-items:center;gap:.25rem}.error-message:before{content:"";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.8rem}.amount-display{background:var(--input-bg);border:2px solid var(--input-border);border-radius:12px;padding:1rem;text-align:center;margin:1rem 0}.amount-label{font-size:.9rem;color:var(--text-color);opacity:.7;margin-bottom:.5rem}.amount-value{font-size:3rem;font-weight:700;color:var(--text-color)}.submit-btn{background:var(--primary-btn-bg);color:var(--primary-btn-text);border:none;border-radius:8px;padding:24px 20px;font-size:1.3rem;font-weight:700;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color .3s,transform .1s;box-shadow:0 4px 8px #0003}.cancel-btn{background:var(--error-color);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:1rem;font-weight:600;width:100%;margin-top:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color .3s,transform .1s}.cancel-btn:hover{background:#d32f2f;transform:translateY(-1px)}.cancel-btn:active{transform:translateY(1px)}.submit-btn:hover:not(:disabled){background:var(--primary-btn-hover-bg);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{background:var(--input-border);opacity:.7;cursor:not-allowed}.submit-btn.loading .btn-text{opacity:0}.submit-btn.loading .loading-spinner{opacity:1}.loading-spinner{position:absolute;opacity:0;transition:opacity .3s ease}.security-notice{text-align:center;color:var(--text-color);opacity:.7;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--modal-bg);z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal.active{display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.modal-content{background:var(--modal-content-bg);border-radius:20px;padding:2.5rem;text-align:center;max-width:90%;width:350px;animation:slideUp .3s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.success-icon{color:var(--success-color);font-size:4rem;margin-bottom:1rem}.modal-content h2{color:var(--text-color);margin-bottom:1rem;font-size:1.5rem}.modal-content p{color:var(--text-color);opacity:.7;margin-bottom:2rem;font-size:1rem}.modal-btn{background:var(--button-bg);color:var(--button-text);border:none;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;min-height:50px;min-width:120px;transition:all .3s ease}.modal-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea4d}.right-panel{grid-column:2;background:var(--input-bg);border-left:2px solid var(--input-focus-border);padding:2rem;display:flex;flex-direction:column;justify-content:center;box-shadow:-5px 0 25px #667eea1a}.virtual-keyboard{display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:all .3s ease}.virtual-keyboard.active{opacity:1;transform:none}.keyboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--input-border)}.keyboard-header span{font-weight:700;color:var(--input-focus-border);font-size:1.1rem}.close-keyboard{background:none;border:none;font-size:1.2rem;color:var(--text-color);opacity:.7;cursor:pointer;padding:.5rem;min-height:44px;min-width:44px}.keyboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:450px;margin:0 auto;grid-auto-rows:1fr}.key-btn{background:var(--keyboard-key-bg);border:2px solid var(--keyboard-key-border);border-radius:20px;padding:1.5rem;font-size:2.2rem;font-weight:700;cursor:pointer;height:110px;width:110px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:var(--keyboard-key-text);box-shadow:0 4px 12px #00000014}.key-btn:hover,.key-btn:focus{background:var(--keyboard-key-active);border-color:var(--input-focus-border);transform:translateY(-2px);box-shadow:0 6px 15px #667eea33}.key-btn:active{transform:translateY(0);background:var(--keyboard-key-active);box-shadow:0 2px 8px #0000001a}.key-backspace,.key-clear{background:var(--error-bg);border-color:var(--error-color);color:var(--error-color)}.key-backspace:hover,.key-clear:hover{background:var(--error-bg);opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}body:-webkit-full-screen{padding:0}body:-moz-full-screen{padding:0}body:-ms-fullscreen{padding:0}body:fullscreen{padding:0}:-webkit-full-screen .container{max-width:none;height:100vh;border-radius:0;display:flex;flex-direction:column}:-moz-full-screen .container{max-width:none;height:100vh;border-radius:0;display:flex;flex-direction:column}:-ms-fullscreen .container{max-width:none;height:100vh;border-radius:0;display:flex;flex-direction:column}:fullscreen .container{max-width:none;height:100vh;border-radius:0;display:flex;flex-direction:column}@media (max-width: 1024px){.container{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;max-width:480px}.right-panel{grid-column:1;border-left:none;border-top:2px solid #667eea;box-shadow:0 -5px 25px #667eea1a}.payment-form-container{grid-column:1}.virtual-keyboard{position:fixed;bottom:-100%;left:0;right:0;background:linear-gradient(135deg,#f8faff,#fff);border-top:2px solid #667eea;padding:1.5rem;z-index:999;transition:all .4s cubic-bezier(.25,.46,.45,.94);box-shadow:0 -15px 35px #667eea26;border-radius:20px 20px 0 0}.virtual-keyboard.active{bottom:0}}@media (max-width: 768px){.container{margin:0;border-radius:0;min-height:100vh;display:flex;flex-direction:column}.payment-form-container{flex:1;display:flex;flex-direction:column;justify-content:center}.form-row{flex-direction:column;gap:1.5rem}.form-group-half{flex:none}.card-preview{padding:.5rem}.credit-card{width:250px;height:160px;padding:1rem}}@media (max-height: 600px) and (orientation: landscape){.payment-form-container{padding:1rem}.payment-form{gap:1rem}.amount-display{margin:.5rem 0;padding:1rem}}@media (hover: none) and (pointer: coarse){.form-input{font-size:16px}.key-btn:hover,.submit-btn:hover{transform:none}}@media (prefers-contrast: high){.form-input{border-width:3px}.submit-btn{border:3px solid #2d3748}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}