@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap";:root{color:#191a1b;font-synthesis:none;text-rendering:optimizelegibility;background:#eceeed;font-family:IBM Plex Sans Arabic,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}.app{background:#eceeed;justify-content:center;min-height:100vh;display:flex}.phone{background:#f8f8f7;width:100%;max-width:430px;height:100dvh;min-height:620px;position:relative;overflow:hidden;box-shadow:0 0 48px #0000000a}.top{z-index:5;background:#f8f8f7;justify-content:space-between;align-items:center;height:60px;padding:0 24px;display:flex;position:sticky;top:0}.top img{width:75px;height:auto}.profileDot{color:#3a8656;background:#e9eeea;border-radius:50%;place-items:center;width:34px;height:34px;font-size:13px;font-weight:700;display:grid}.page{height:calc(100dvh - 60px);padding:16px 21px 108px;animation:.22s appear;overflow:auto}.page::-webkit-scrollbar{display:none}@keyframes appear{0%{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}h1,h2,p{margin-top:0}h1{letter-spacing:-.4px;margin-bottom:5px;font-size:27px;line-height:1.3}h2{margin:0;font-size:16px}.heading{margin:7px 1px 23px}.stepLabel{color:#64806b;margin-bottom:5px;font-size:11px;display:block}.heading p{color:#808380;margin:0;font-size:12px;line-height:1.7}.sectionTitle{justify-content:space-between;align-items:center;margin:0 2px 11px;display:flex}.count{color:#828582;background:#f0f1ef;border-radius:20px;padding:5px 9px;font-size:10px}.paymentCard{background:#fff;border:1px solid #eeefed;border-radius:19px}.primaryCard{padding:14px 14px 12px}.merchantRow{align-items:center;gap:10px;display:flex}.merchantLogo{border-radius:13px;flex:0 0 41px;place-items:center;width:41px;height:41px;font-weight:700;display:grid}.amazon{color:#202124;background:#f7f5f1;font-family:Arial,sans-serif;font-size:24px;position:relative}.amazon:after{content:"";border-bottom:2px solid #efa627;border-radius:50%;width:17px;height:5px;position:absolute;bottom:8px;transform:rotate(8deg)}.merchantName,.miniInfo{flex-direction:column;flex:1;gap:2px;display:flex}.merchantName b,.miniInfo b{font-size:13px}.merchantName span,.miniInfo span{color:#898b88;font-size:10px}.dueTag{color:#777b77;background:#f4f5f3;border-radius:18px;align-items:center;gap:4px;padding:6px 8px;font-size:9px;display:flex}.dueTag svg{stroke-width:1.8px}.cardDivider{background:#f0f0ee;height:1px;margin:13px 0}.amountHead{justify-content:space-between;align-items:end;display:flex}.label,.dueDate span{color:#858885;margin-bottom:3px;font-size:10px;display:block}.bigAmount{letter-spacing:-.8px;font-size:32px;line-height:1.15;display:block}.bigAmount small,.miniCard strong small,.summaryCard small,.previewRow small,.successBalance small{font-size:12px;font-weight:500}.dueDate{text-align:left;padding-bottom:3px}.dueDate b{font-size:12px;font-weight:600}.cardActions{gap:9px;margin-top:15px;display:flex}.primary{color:#fff;background:#1e1f20;border-radius:13px;justify-content:center;align-items:center;gap:7px;min-height:46px;padding:0 15px;font-size:13px;font-weight:600;display:flex}.primary svg{width:16px}.cardActions .primary{flex:1}.textButton{background:#f3f4f2;border-radius:13px;padding:0 15px;font-size:11px;font-weight:600}.inlineHint{color:#777d78;border-top:1px solid #f0f0ee;align-items:center;gap:7px;margin-top:12px;padding-top:10px;font-size:10px;display:flex}.inlineHint svg{color:#659071}.paidProgress{margin-top:13px}.progressLabels{color:#8a8c89;justify-content:space-between;margin-bottom:6px;font-size:9px;display:flex}.progressLabels b{color:#4c865b;font-weight:600}.progress{background:#eff0ee;border-radius:5px;height:4px;overflow:hidden}.progress i{background:#64cf7d;border-radius:5px;height:100%;transition:width .3s;display:block}.fullyPaid{color:#438653;background:#edf7ef;border-radius:12px;justify-content:center;align-items:center;gap:7px;margin-top:14px;padding:11px;font-size:12px;font-weight:600;display:flex}.upcomingTitle{margin-top:23px}.miniCard{align-items:center;gap:10px;min-height:68px;margin-top:8px;padding:10px;display:flex}.miniCard .merchantLogo{border-radius:12px;flex-basis:38px;width:38px;height:38px}.noon{color:#ed9b27;background:#fff4e6}.jarir{color:#285baf;background:#edf2fc}.miniCard strong{white-space:nowrap;font-size:13px}.activityBlock{background:#fff;border:1px solid #eeefed;border-radius:16px;margin-top:15px;overflow:hidden}.activityToggle{background:#fff;justify-content:space-between;align-items:center;width:100%;padding:14px;font-size:12px;font-weight:600;display:flex}.activityToggle small{color:#888;font-weight:400}.activityToggle svg{color:#898b88;width:16px;height:16px;transition:transform .2s}.activityToggle svg.rotated{transform:rotate(180deg)}.activityList{padding:0 13px 4px}.activityRow{border-top:1px solid #f1f1ef;align-items:center;gap:9px;padding:10px 0;display:flex}.activityIcon{color:#5a9a68;background:#edf7ef;border-radius:10px;place-items:center;width:29px;height:29px;display:grid}.activityRow>div{flex-direction:column;flex:1;gap:1px;display:flex}.activityRow b{font-size:10px}.activityRow>div small{color:#8a8c89;font-size:9px}.activityRow>strong{font-size:11px}.activityRow>strong small{font-size:9px;font-weight:400}.tabbar{z-index:10;width:min(100%,430px);height:75px;padding:9px 11px max(9px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #efefed;justify-content:space-around;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.tabbar button{color:#9a9c99;background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:10px;display:flex}.tabbar button svg{stroke-width:1.8px;width:20px;height:20px}.tabbar .active{color:#1c1d1e}.tabbar .active svg{stroke-width:2.5px}.flowPage{padding-top:9px}.back{color:#777b77;background:0 0;align-items:center;gap:5px;padding:5px 0;font-size:11px;display:flex}.back svg{width:18px;height:18px}.entryHeading{margin:22px 1px 19px}.entryHeading h1{font-size:25px}.summaryCard{background:#fff;border:1px solid #eeefed;border-radius:16px;justify-content:space-around;align-items:center;margin-bottom:25px;padding:14px;display:flex}.summaryCard>div:not(.verticalDivider){flex-direction:column;gap:4px;display:flex}.summaryCard span{color:#858885;font-size:10px}.summaryCard b{font-size:16px}.verticalDivider{background:#eee;width:1px;height:34px}.inputLabel{margin:0 1px 9px;font-size:12px;font-weight:600;display:block}.quickAmounts{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.quickAmounts button{background:#fff;border:1px solid #e9ebe8;border-radius:12px;min-height:45px;font-size:13px;font-weight:600}.quickAmounts button.selected{color:#347a46;background:#eaf8ed;border-color:#bfebca}.quickAmounts small{font-size:9px;font-weight:500}.amountLabel{margin-top:24px}.amountInput{background:#fff;border:1px solid #e7e9e6;border-radius:13px;align-items:center;gap:9px;height:54px;padding:0 14px;display:flex}.amountInput:focus-within{border-color:#9ad8a6}.amountInput span{color:#898c88;font-size:12px}.amountInput input{text-align:right;appearance:textfield;direction:ltr;background:0 0;border:0;outline:0;flex:1;min-width:0;font-size:20px;font-weight:600}.amountInput input::-webkit-inner-spin-button{appearance:none}.amountInput input::-webkit-outer-spin-button{appearance:none}.amountInput.hasError{border-color:#d77373}.helperText,.errorMessage{color:#929491;margin:7px 2px;font-size:10px}.errorMessage{color:#bd4c4c}.bottomAction{text-align:center;background:#f8f8f7;padding-top:9px;position:absolute;bottom:74px;left:21px;right:21px}.bottomAction .wide{width:100%}.bottomAction>small{color:#929491;margin-top:8px;font-size:9px;display:block}.cancelButton{color:#5e625f;background:0 0;width:100%;min-height:41px;margin-top:4px;font-size:12px}.previewCard{background:#fff;border:1px solid #eeefed;border-radius:17px;margin-top:19px;padding:16px}.previewRow{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.previewRow span{color:#7c807c;font-size:11px}.previewRow b{font-size:15px}.previewRow.now b{color:#4a8b5a}.previewRow.result span{color:#2e312e;font-weight:600}.previewRow.result b{font-size:22px}.previewLine{background:#edeeec;height:1px;margin:4px 0}.dueSummary{color:#848884;border-top:1px solid #f0f0ee;align-items:center;gap:6px;margin-top:10px;padding-top:13px;font-size:10px;display:flex}.dueSummary svg{color:#728477}.dueSummary b{color:#333;margin-right:auto;font-size:11px}.plainNote{color:#747874;align-items:center;gap:8px;margin-top:13px;font-size:10px;display:flex}.noteCheck{color:#579565;background:#edf7ef;border-radius:50%;place-items:center;width:22px;height:22px;display:grid}.plainNote p{margin:0}.flowPage:has(.previewCard) .bottomAction{bottom:14px}.flowPage:has(.previewCard){padding-bottom:120px}.processing{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:calc(100dvh - 60px);padding-bottom:75px;display:flex}.loader{border:3px solid #e8eee9;border-top-color:#65c97b;border-radius:50%;width:43px;height:43px;margin-bottom:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.processing h1{margin-bottom:4px;font-size:19px}.processing p{color:#858885;font-size:11px}.successPage{text-align:center;padding-top:50px}.successIcon{color:#559b64;background:#eaf7ed;border-radius:50%;place-items:center;width:69px;height:69px;margin:0 auto 17px;display:grid}.successPage .stepLabel{margin-bottom:4px}.successPage h1{font-size:29px}.successLead{color:#6d726e;margin:0 0 24px;font-size:13px}.successBalance{background:#fff;border:1px solid #eeefed;border-radius:17px;padding:18px 14px}.successBalance>span{color:#858885;margin-bottom:5px;font-size:10px;display:block}.successBalance>strong{font-size:29px;line-height:1.3;display:block}.successDue{color:#858885;border-top:1px solid #efefed;justify-content:space-between;margin-top:13px;padding-top:12px;font-size:10px;display:flex}.successDue b{color:#333;font-size:11px}.successMessage{text-align:right;color:#547d5d;background:#edf7ef;border-radius:13px;align-items:center;gap:8px;margin-top:13px;padding:12px;display:flex}.successMessage>span{background:#fff;border-radius:50%;flex:0 0 23px;place-items:center;width:23px;height:23px;display:grid}.successMessage svg{width:14px}.successMessage p{margin:0;font-size:10px}.successActions{position:absolute;bottom:81px;left:21px;right:21px}.successActions .cancelButton{margin-top:5px}@media (width>=600px){.phone{border-radius:30px;height:calc(100dvh - 44px);min-height:620px;margin:22px 0}.top{border-radius:30px 30px 0 0}.tabbar{border-radius:0 0 30px 30px;bottom:22px}.bottomAction{bottom:96px}.flowPage .bottomAction{bottom:35px}.successActions{bottom:102px}}@media (height<=740px){.heading{margin-bottom:16px}.primaryCard{padding:12px}.bigAmount{font-size:29px}.upcomingTitle{margin-top:16px}.miniCard{min-height:62px}.successPage{padding-top:27px}.successActions{bottom:75px}}.cardActions .textButton{color:#4f5350;flex:none;min-height:40px;padding:0 13px;font-size:10px}.cardActions .payNowButton{flex:1;min-height:48px;font-size:13px}.amazon{color:#202124;background:#f7f5f1;font-family:Arial,sans-serif}.amazon span{letter-spacing:-.35px;padding-top:2px;font-size:8px;font-weight:700;position:relative}.amazon:after{width:15px;height:4px;bottom:10px}.paymentIllustration{float:left;object-fit:cover;border-radius:17px;width:100px;height:100px;margin:0 0 3px 9px}.heading:after{content:"";clear:both;display:block}.paymentSuccessArt{object-fit:cover;object-position:center;border-radius:20px;width:170px;height:120px;margin:3px auto 13px;display:block}.successPage .successIcon{margin-top:0}.paymentIllustration{object-fit:contain;background:#6cff93;padding:4px}.paymentIllustration{object-fit:contain;background:0 0;border-radius:0;width:138px;height:132px;margin:0 0 5px 12px;padding:0}.paymentSuccessArt{object-fit:contain;background:0 0;padding:0;box-shadow:none!important;background:0 0!important;border-radius:0!important}.quickAmounts button{color:#202421;background:#fff;border:1.5px solid #d9ded9;min-height:52px;transition:border-color .16s,background .16s,box-shadow .16s,transform .16s;position:relative;box-shadow:0 1px 2px #17211a08}.quickAmounts button:before{content:"";background:#fff;border:1.5px solid #aab3ac;border-radius:50%;width:13px;height:13px;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.quickAmounts button:hover{border-color:#55a76b;box-shadow:0 2px 8px #26784118}.quickAmounts button:active{transform:scale(.98)}.quickAmounts button:focus-visible{outline-offset:2px;outline:3px solid #85d798}.quickAmounts button.selected{color:#216c39;background:#e7f8eb;border:2px solid #378d50;box-shadow:0 0 0 2px #d0f0d7}.quickAmounts button.selected:before{content:"✓";color:#fff;text-align:center;background:#31884b;border:0;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:700;line-height:16px}.amountInput{border:1.5px solid #d9ded9;transition:border-color .16s,box-shadow .16s}.amountInput:focus-within{border-color:#368a4c;box-shadow:0 0 0 3px #d9f2df}.flowPage .bottomAction{bottom:89px}.prdCard{background:#fff;border:1px solid #e9ebe8;border-radius:17px;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:12px;margin-top:18px;padding:16px;display:grid}.prdIcon{color:#4f9560;background:#edf7ef;border-radius:13px;place-items:center;width:42px;height:42px;display:grid}.prdCopy h2{margin:1px 0 4px;font-size:15px}.prdCopy p{color:#747b75;margin:0 0 5px;font-size:11px}.prdCopy small{color:#969b96;font-size:9px}.prdActions{grid-column:1/-1;gap:8px;margin-top:5px;display:flex}.prdActions a{border-radius:11px;flex:1;justify-content:center;align-items:center;gap:6px;min-height:41px;padding:0 11px;font-size:10px;font-weight:600;text-decoration:none;display:flex}.prdActions a:first-child{color:#fff;background:#1d1e20}.prdActions a:last-child{color:#438954;background:#edf7ef}