:root{--primary-color: #2cc1ee;--primary-hover: #1aa8d5;--background-color: #f5f5f5;--card-background: #ffffff;--text-color: #333333;--border-color: #dddddd;--success-color: #28a745;--error-color: #dc3545;--warning-color: #ffc107}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6}.app-container{max-width:800px;margin:0 auto;padding:2rem 1rem}.app-container h1{text-align:center;margin-bottom:2rem;color:var(--primary-color)}.payment-form-container{background-color:var(--card-background);border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:2rem;margin-bottom:2rem}.payment-method-toggle{display:flex;margin-bottom:2rem;border-bottom:1px solid var(--border-color)}.payment-method-toggle button{flex:1;background:none;border:none;padding:1rem;cursor:pointer;font-size:1rem;font-weight:500;color:var(--text-color);transition:all .3s ease}.payment-method-toggle button.active{color:var(--primary-color);border-bottom:3px solid var(--primary-color)}.payment-method-toggle button:hover:not(.active){background-color:#0000000d}.payment-form h2{margin-bottom:1.5rem;text-align:center}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500}.form-group input{width:100%;padding:.75rem;font-size:1rem;border:1px solid var(--border-color);border-radius:4px;transition:border-color .3s ease}.form-group input:focus{outline:none;border-color:var(--primary-color)}.submit-button{display:block;width:100%;padding:.75rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s ease}.submit-button:hover{background-color:var(--primary-hover)}.submit-button:disabled{background-color:#ccc;cursor:not-allowed}.error-message,.success-message{padding:1rem;border-radius:4px;margin-bottom:1.5rem;text-align:center}.error-message{background-color:#dc35451a;color:var(--error-color);border:1px solid rgba(220,53,69,.2)}.success-message{background-color:#28a7451a;color:var(--success-color);border:1px solid rgba(40,167,69,.2)}.payment-status-container{background-color:var(--card-background);border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:2rem;text-align:center}.status-indicator{margin:2rem 0;padding:1.5rem;border-radius:8px}.status-complete{background-color:#28a7451a;color:var(--success-color);border:1px solid rgba(40,167,69,.2)}.status-failed{background-color:#dc35451a;color:var(--error-color);border:1px solid rgba(220,53,69,.2)}.status-pending{background-color:#ffc1071a;color:var(--warning-color);border:1px solid rgba(255,193,7,.2)}.payment-details{margin:2rem 0;padding:1rem;background-color:#f9f9f9;border-radius:4px;text-align:left}.payment-details p{margin-bottom:.5rem}.back-button{padding:.75rem 1.5rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.back-button:hover{background-color:var(--primary-hover)}.loading-spinner{display:inline-block;padding:1rem;margin:2rem 0;font-style:italic;color:#666}.tracking-info{margin-top:2rem;padding:1rem;background-color:#f0f8ff;border-radius:4px;text-align:center}.tracking-info p{margin-bottom:.25rem;font-weight:500}.tracking-info small{color:#666;font-style:italic}small{font-size:.8rem;color:#666;display:block;margin-top:.25rem}.form-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #2cc1ee33}.status-unknown{background-color:#6c757d1a;color:#6c757d;border:1px solid rgba(108,117,125,.2)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}@media (max-width: 576px){.payment-form-container,.payment-status-container{padding:1rem}.app-container{padding:1rem .5rem}.payment-form h2{font-size:1.25rem}.form-group label{font-size:.9rem}}
