@keyframes a{to{transform:rotate(1turn)}}*{box-sizing:border-box}html{min-height:100%;background:#f7f9fc}body{min-height:100vh;margin:0;padding:10px 6px 20px;color:#101827;font-family:Arial,sans-serif;background:radial-gradient(circle at 50% -20%,rgba(24,78,163,.12),transparent 34%),linear-gradient(180deg,#fbfdff,#f4f7fb);overflow-x:hidden;-webkit-tap-highlight-color:transparent}.hidden-element{display:none!important}#loadingOverlay{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;background:rgba(247,250,255,.94)}.loading-spinner{width:36px;height:36px;border:4px solid #dbe7fb;border-top-color:#0a3d88;border-radius:50%;animation:a .9s linear infinite}body.cashier-loading #amountBox,body.cashier-loading #feeBox,body.cashier-loading #legacyCashierSections,body.cashier-loading #pageHeader,body.cashier-loading .top-banner{visibility:hidden}.top-banner{display:none}.scroll-container{width:100%}.container{width:min(100%,390px);margin:0 auto;padding:0;overflow:visible}#pageHeader{position:relative;min-height:126px;padding:30px 28px 82px 120px;border-radius:16px 16px 0 0;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 46%),linear-gradient(135deg,#163a78,#082c66 55%,#06295f)}#pageHeader:before{position:absolute;left:38px;top:37px;width:48px;height:48px;content:"";background:url(../image/bank.svg)50%/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.16))}#pageHeader .header{margin:0 0 8px;font-size:22px;font-weight:800;line-height:1.15}#pageHeader .sub-text,#pageHeader .sub-text1{margin:0;color:rgba(255,255,255,.86);font-size:13px;font-weight:600;line-height:1.35}.amount-box{margin:-64px auto 0;box-shadow:0 8px 24px rgba(13,48,104,.08)}.amount-box,.fee{position:relative;z-index:2;width:calc(100% - 20px);padding:20px 22px;border:1px solid rgba(10,45,102,.12);border-radius:12px;background:#fff}.amount-box-content{margin-bottom:8px}.amount-label-ur-only,.amount-urdu{display:block;color:#17386e;font-size:14px;font-weight:700;line-height:1.3}.amount-box>span,.fee>span:last-child{display:block;color:#0a3d88;font-size:30px;font-weight:800;letter-spacing:0;line-height:1.1}.fee{margin:10px auto 0;box-shadow:0 8px 24px rgba(13,48,104,.08)}.fee-text-ur{display:block;margin-bottom:8px;color:#17386e;font-size:13px;font-weight:700;line-height:1.4;text-align:right;direction:rtl}#legacyCashierSections{width:calc(100% - 20px);margin:0 auto 16px;padding:20px 0 22px;background:0 0}.label-with-urdu{margin:0 0 12px;color:#17386e}.label-english{display:block;font-size:14px;font-weight:800;line-height:1.3}.label-urdu{display:block;margin-top:3px;color:#526073;font-size:12px;line-height:1.45;direction:rtl}.payment-methods{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 20px}.method{position:relative;display:flex;align-items:center;min-height:64px;padding:12px 46px 12px 16px;border:1px solid #edf1f6;border-radius:10px;background:#fff;box-shadow:0 10px 24px rgba(15,42,78,.08);cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;user-select:none}.method.selected:before,.method:after{position:absolute;top:50%;transform:translateY(-50%)}.method:after{right:18px;color:#536174;content:">";font-size:24px;font-weight:700}.method img{width:48px;height:48px;margin-right:16px;object-fit:contain;pointer-events:none}.method-name{color:#172033;font-size:18px;font-weight:800;line-height:1.2;text-transform:none}.method.selected{border-color:#0a3d88;background:linear-gradient(180deg,#f8fbff,#eef5ff);box-shadow:0 10px 26px rgba(10,61,136,.16)}.method.selected:before{right:42px;width:12px;height:12px;border-radius:999px;background:#0a3d88;content:""}.cnic-confirm-btn:focus-visible,.cnic-modal-close:focus-visible,.method:focus-visible,.pay-btn:focus-visible{outline:3px solid rgba(10,61,136,.24);outline-offset:3px}.wallet-label{margin-top:6px}.wallet-input-wrapper{margin:0 0 12px}.cnic-input,.wallet-input{width:100%;min-height:58px;padding:0 16px;border:1px solid #d9e0ea;border-radius:10px;color:#172033;font-size:16px;font-weight:600;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.cnic-input::placeholder,.wallet-input::placeholder{color:#8792a3;font-weight:600}.cnic-input:focus,.wallet-input:focus{border-color:#0a3d88;outline:0;box-shadow:0 0 0 4px rgba(10,61,136,.12)}.cnic-input.error,.wallet-input-wrapper.error .wallet-input,.wallet-input.error{border-color:#dc3545;box-shadow:0 0 0 4px rgba(220,53,69,.08)}.input-counter{margin:-4px 2px 10px;color:#66758a;font-size:12px;font-weight:700;text-align:right}.cnic-error,.error-message{display:none;margin:-4px 0 12px;color:#b42318;font-size:12px;font-weight:700;line-height:1.4}.cnic-error.show,.error-message.show{display:block}.hint-text{margin:0 0 16px;padding:14px 16px;border:1px solid #b9d4f4;border-radius:10px;color:#17386e;background:linear-gradient(180deg,#f4f9ff,#eaf3ff)}.hint-english,.hint-urdu{font-size:13px;font-weight:700;line-height:1.5}.hint-urdu{margin-top:4px;direction:rtl}.pay-btn{width:100%;min-height:58px;margin:2px 0 18px;border:0;border-radius:10px;color:#fff;font-size:19px;font-weight:800;background:linear-gradient(135deg,#0a3d88,#05306f);box-shadow:0 10px 22px rgba(10,61,136,.26);cursor:pointer}.pay-btn:disabled{cursor:not-allowed;opacity:.72}.note{margin:0 0 14px;color:#856404;font-size:13px;line-height:1.45}.payment-failed-error{margin:0 0 14px;padding:14px;border:1px solid #f4c7c3;border-radius:10px;color:#721c24;background:#fff5f5}.payment-failed-title{margin-bottom:6px;font-size:14px;font-weight:800}.payment-failed-list{margin:8px 0;padding-left:22px}.payment-failed-item,.payment-failed-item-urdu{margin-bottom:6px;font-size:12px;line-height:1.45}.payment-failed-item-urdu,.payment-failed-title-urdu{text-align:right;direction:rtl}.instructions-container{margin-top:14px;padding-top:14px;border-top:1px solid #edf1f6}.instructions-title{margin-bottom:8px;color:#17386e;font-size:14px;font-weight:800}.instructions-content{padding:12px 14px;border:1px solid #edf1f6;border-radius:10px;background:#fbfdff}.instructions-urdu{color:#4f5f74;font-size:12px;line-height:1.65;text-align:right;direction:rtl}.toast{position:fixed;left:50%;bottom:24px;z-index:5000;max-width:min(340px,calc(100vw - 32px));padding:12px 16px;border-radius:10px;color:#fff;font-size:13px;font-weight:700;line-height:1.4;text-align:center;background:#1f2937;box-shadow:0 10px 32px rgba(15,23,42,.22);opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translate(-50%)}.toast.success{background:#15803d}.toast.error{background:#b42318}.toast.info{background:#0a3d88}.cnic-modal,.payment-modal{position:fixed;inset:0;z-index:3000;display:none;align-items:flex-end;justify-content:center;background:rgba(10,18,30,.46)}.cnic-modal.show,.payment-modal.show{display:flex}.cnic-modal[style*="display: block"].show{display:flex!important}.cnic-modal-dialog,.modal-content{width:min(100%,390px);max-height:88vh;padding:22px;overflow-y:auto;border-radius:18px 18px 0 0;background:#fff;box-shadow:0-16px 38px rgba(15,23,42,.2)}.modal-header{margin-bottom:12px;color:#17386e;font-size:18px;font-weight:800;text-align:center}.modal-text,.modal-text-ur{margin:8px 0;color:#4f5f74;font-size:14px;line-height:1.5;text-align:center}.modal-text-ur{direction:rtl}.countdown{margin:14px auto 0;width:54px;height:54px;display:grid;place-items:center;border-radius:999px;color:#0a3d88;font-size:20px;font-weight:800;background:#eef5ff}.cnic-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.cnic-title-line{color:#17386e;font-size:14px;font-weight:800;line-height:1.45}.cnic-title-line.urdu{margin-top:4px;color:#526073;font-size:12px;direction:rtl}.cnic-modal-close{width:34px;height:34px;flex:0 0 auto;border:0;border-radius:999px;color:#17386e;font-size:24px;line-height:1;background:#edf4ff;cursor:pointer}.cnic-confirm-btn{width:100%;min-height:48px;border:0;border-radius:10px;color:#fff;font-size:16px;font-weight:800;background:#0a3d88;cursor:pointer}body.modal-open{overflow:hidden}@media (max-width:360px){body{padding-inline:6px}#pageHeader{padding-left:100px}#pageHeader:before{left:30px}#pageHeader .header{font-size:19px}.amount-box>span,.fee>span:last-child{font-size:26px}#legacyCashierSections:after{gap:10px;font-size:11px}}