/* screens: money group (aqsat, addpay, installment, pay, gamiya, onetime, nqdr). Every class starts with m- */

/* page top bars */
.m-top{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 10px}
.m-top h1{margin:0;font-size:22px;font-weight:800}
.m-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 6px 14px rgba(91,42,166,.28)}
.m-add:hover{color:#fff;background:var(--brand-hv)}
.m-av{width:44px;height:44px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;text-decoration:none}
.m-main{padding:8px 16px 24px;display:flex;flex-direction:column;gap:16px}
.m-col{display:flex;flex-direction:column;gap:10px}
.m-h2{margin:0;font-size:17px;font-weight:800}
.m-pk{background:var(--brand-soft);color:var(--brand)}

/* segmented tabs */
.m-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;background:#EAE4F3;border-radius:14px}
.m-tabs.many{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
.m-tab{display:flex;align-items:center;justify-content:center;min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--mu);font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit;padding:0 8px;text-align:center}
.m-tab[aria-pressed="true"],.m-tab[aria-current]{background:#fff;color:var(--brand);font-weight:800;box-shadow:0 2px 8px rgba(37,32,46,.08)}

/* hero variants */
.m-hero{border-radius:24px;padding:20px;color:#fff;background:linear-gradient(160deg,var(--brand),var(--brand-dk));box-shadow:0 14px 30px rgba(63,28,122,.26)}
.m-hero p{margin:0}
.m-hero .p{color:var(--brand-pale)}
.m-hero.late{background:linear-gradient(160deg,#B0484E,#7E2F34);box-shadow:0 14px 30px rgba(126,47,52,.28)}
.m-hero.late .p{color:#FBD5D7}
.m-hero.gam{background:linear-gradient(160deg,#2F6A4C,#1F4C36);box-shadow:0 14px 30px rgba(31,76,54,.26)}
.m-hero.gam .p{color:#CFE3D6}
.m-hero .big{margin:2px 0 0;font-size:32px;font-weight:900}
.m-hero .big span{font-size:15px;font-weight:600}
.m-hero .htag{background:rgba(255,255,255,.16);color:#fff}
.m-hb{display:flex;align-items:center;justify-content:center;margin-top:14px;width:100%;min-height:48px;border-radius:12px;border:0;font-size:15px;font-weight:800;cursor:pointer;background:#fff;color:var(--brand);text-decoration:none}
.m-bar{height:10px;border-radius:10px;background:rgba(255,255,255,.18);overflow:hidden}
.m-bar>div{height:100%;border-radius:10px;background:#D8CBF3}

/* list cards on the installments page */
.m-card{display:flex;flex-direction:column;gap:8px;padding:16px;text-decoration:none;color:var(--ink)}
.m-card:hover{color:var(--ink)}
.m-ln{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.m-li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.m-li:hover{color:var(--ink)}
.m-li+.m-li{border-top:1px solid var(--line)}
.m-note{margin:0;font-size:14px;line-height:1.7;padding:12px 14px;border-radius:14px;background:var(--ok-bg);color:var(--ok)}
.m-num{font-size:16px;color:var(--brand)}

/* info rows inside a card */
.m-rows{padding:4px 16px}
.m-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;font-size:15px}
.m-row+.m-row{border-top:1px solid var(--line)}
.m-row b{text-align:end}
.m-rows.soft{background:var(--bg);border-radius:16px}
.m-rows.soft .m-row{min-height:46px}

/* wizards (add / pay) */
.m-wtop{flex-shrink:0;display:flex;flex-direction:column;gap:14px;padding:16px 20px 8px}
.m-wbar{display:flex;justify-content:space-between;align-items:center}
.m-x{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--mu);cursor:pointer;text-decoration:none}
.m-steps{display:grid;gap:6px}
.m-steps>span{height:5px;border-radius:5px;background:#E4DDF0}
.m-steps>span.on{background:var(--brand)}
.m-wbody{padding:20px 20px 24px;display:flex;flex-direction:column;gap:18px}
.m-q{margin:0;font-size:24px;font-weight:800;line-height:1.5}
.m-lb{font-size:14px;color:var(--mu);font-weight:700}
.m-fld{display:flex;flex-direction:column;gap:6px}
.m-big{border-radius:16px;padding-inline:16px;box-shadow:var(--shadow-soft)}
.m-big input{min-height:60px;font-size:26px;font-weight:800}
.m-tile{width:100%;min-height:68px;padding:10px 16px;border-radius:16px;border:1px solid rgba(37,32,46,.08);background:#fff;color:var(--ink);cursor:pointer;text-align:start;box-shadow:var(--shadow-soft);font-family:inherit}
.m-tile[aria-pressed="true"]{border:2px solid var(--brand);background:var(--brand-soft)}
.m-rv{display:flex;align-items:center;gap:12px;padding:12px 16px}
.m-rv+.m-rv{border-top:1px solid var(--line)}
.m-rv dt{font-size:13px;color:var(--mu)}
.m-rv dd{margin:0;font-size:16px;font-weight:800}
.m-ed{min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--brand);font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.m-calc{margin:0;padding:12px 14px;border-radius:14px;background:var(--ok-bg);color:var(--ok);font-size:14px;line-height:1.8}
.m-calc.wn{background:var(--wn-bg);color:var(--wn)}
.m-calc.lt{background:var(--lt-bg);color:#7A343B}
.m-fr{display:flex;gap:10px}
.m-fr>.bp{flex:1}
.m-back{min-height:56px;padding:0 20px;border-radius:16px;border:1px solid rgba(37,32,46,.1);background:#fff;color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;display:flex;align-items:center;justify-content:center}
.m-back:hover{color:var(--ink)}
.m-opt{width:100%;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-radius:16px;cursor:pointer;text-align:start;color:var(--ink);font-size:16px;font-weight:700;background:#fff;border:1px solid rgba(37,32,46,.08);box-shadow:var(--shadow-soft);font-family:inherit}
.m-opt[aria-pressed="true"]{background:var(--brand-soft);border:2px solid var(--brand)}
.m-opt .sub{display:block;font-size:14px;font-weight:600;color:var(--mu)}
.m-rad{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #C4BCD6}
.m-opt[aria-pressed="true"] .m-rad{border:7px solid var(--brand)}
.m-done{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:24px;text-align:center}
.m-done h1,.m-done h2{margin:0;font-size:24px;font-weight:800}
.m-done p{margin:0;font-size:15px;line-height:1.8}
.m-done .cd{width:100%;text-align:start}
.m-okic{width:72px;height:72px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;box-shadow:0 10px 24px rgba(47,106,76,.18)}
.m-small{font-size:14px;font-weight:700;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none}

/* installment rows */
.m-qsl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.m-qs{width:100%;min-height:62px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;color:var(--ink);background:#fff;border:1px solid rgba(37,32,46,.06);box-shadow:var(--shadow-soft);text-decoration:none}
.m-qs:hover{color:var(--ink)}
.m-qs.done{background:var(--ok-bg);border-color:#CFE3D6}
.m-qs.next{border:2px solid var(--brand);box-shadow:0 6px 16px rgba(91,42,166,.14)}
.m-qs.late{border:2px solid #B0484E;background:#FFF8F8}
.m-qs .a{display:block;font-size:15px;font-weight:700}
.m-qs .s{display:block;font-size:13px;color:var(--mu)}
.m-qs.late .s{color:var(--lt);font-weight:700}
.m-dot{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#EAE4F3;color:var(--mu)}
.m-qs.done .m-dot{background:var(--ok);color:#fff}
.m-qs.next .m-dot{background:var(--brand);color:#fff}
.m-qs.late .m-dot{background:#B0484E;color:#fff}
.m-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-g2 .bs,.m-g2 .bd{min-height:48px}
.m-g2 .bw{min-height:48px;color:var(--ink);font-weight:700;white-space:normal;text-align:center}

/* bottom sheet over a dimmed page */
.m-ov{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.m-ovbg{position:absolute;inset:0;background:rgba(37,32,46,.45);border:0;cursor:pointer}
.m-sheet{position:relative;width:100%;max-width:430px;max-height:92dvh;overflow-y:auto;background:#fff;border-radius:28px 28px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;box-shadow:0 -20px 50px rgba(37,32,46,.2)}
.m-grip{align-self:center;width:44px;height:5px;border-radius:5px;background:var(--field)}
.m-sic{align-self:center;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.m-sic.lt{background:var(--lt-bg);color:var(--lt)}
.m-sic.ok{background:var(--ok-bg);color:var(--ok);box-shadow:0 10px 24px rgba(47,106,76,.18)}
.m-sheet h1,.m-sheet h2{margin:0;font-size:22px;font-weight:800;text-align:center}
.m-ctr{text-align:center}
.m-ctr p{margin:6px 0 0;font-size:15px;line-height:1.8}
.m-warn{margin:0;padding:12px 14px;border-radius:14px;background:var(--lt-bg);color:#7A343B;font-size:14px;line-height:1.8}
.m-sbw{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:16px;border:1px solid rgba(37,32,46,.1);background:#fff;color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.m-sbw:hover{color:var(--ink)}
.m-sheet .bs,.m-sheet .bd{min-height:52px}
.m-full{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;min-height:80dvh}
.m-full h1{margin:0;font-size:22px;font-weight:800}
.m-full p{margin:0;font-size:15px;line-height:1.8}
.m-full .bs{min-height:50px;padding:0 24px;font-size:16px}
.m-sic.big{width:64px;height:64px}

/* late fee field */
.m-fee input{min-height:50px;font-size:18px;font-weight:800}

/* gamiya */
.m-gdots{display:flex;gap:6px;margin-top:14px}
.m-gdots>span{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.18)}
.m-gdots>span.on{background:#CFE3D6}
.m-evl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.m-ev{display:flex;align-items:center;gap:12px;border-radius:14px;padding:12px 14px;background:#fff;border:1px solid rgba(37,32,46,.06);box-shadow:var(--shadow-soft)}
.m-ev.get{background:var(--ok-bg);border-color:#CFE3D6}
.m-ev.next{border:2px solid var(--brand);box-shadow:0 6px 16px rgba(91,42,166,.12)}
.m-ev.late{border:2px solid #B0484E;background:#FFF8F8}
.m-evd{flex-shrink:0;width:12px;height:12px;border-radius:50%;border:2px solid #D4CDE2}
.m-ev.paid .m-evd,.m-ev.get .m-evd{background:var(--ok);border-color:var(--ok)}
.m-ev.next .m-evd{background:var(--brand);border-color:var(--brand)}
.m-ev.late .m-evd{background:#B0484E;border-color:#B0484E}
.m-ev .s{font-size:13px;color:var(--mu)}
.m-ev.next .s{color:var(--brand)}
.m-ev.late .s{color:var(--lt);font-weight:700}
.m-ev .amt{font-size:16px;color:var(--brand)}
/* paid = done: green, crossed out, faded */
.m-ev.paid,.m-qs.done{background:var(--ok-bg);border-color:#CFE3D6;box-shadow:none;opacity:.6}
.m-ev.paid b,.m-ev.paid .s,.m-qs.done .a,.m-qs.done .s,.m-qs.done>b{text-decoration:line-through;text-decoration-thickness:1.5px}
.m-ev.paid .m-evd{width:16px;height:16px}
.m-ev.paid .amt{color:var(--mu)}
.m-ev.get .amt{color:var(--ok)}
.m-ords{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-ord{display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:16px;padding:12px 6px;background:#fff;border:1px solid rgba(37,32,46,.06);color:var(--mu);text-align:center}
.m-ord.me{background:var(--ok-bg);border:1.5px solid #8FB79F;color:#2F5E4B}
.m-para{margin:0;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid rgba(37,32,46,.05);font-size:14px;line-height:1.9;color:#48405A}
.m-stepper{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--field);border-radius:14px;background:#fff;overflow:hidden}
.m-stepper button{width:52px;height:52px;border:0;background:transparent;color:var(--brand);font-size:24px;font-weight:800;cursor:pointer;font-family:inherit}
.m-stepper button:disabled{color:#C2BCD4;cursor:default}
.m-form{padding:16px;display:flex;flex-direction:column;gap:14px}

/* هنقدر؟ */
.m-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
.m-stat{padding:12px 8px;text-align:center}
.m-stat+.m-stat{border-inline-start:1px solid var(--line)}
.m-stat b{display:block;font-size:24px;font-weight:900}
.m-stat span{font-size:13px;font-weight:800}
.m-cl-ok{color:var(--ok)}.m-cl-wn{color:var(--wn)}.m-cl-lt{color:var(--lt)}
.m-tog{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.m-tog input{width:24px;height:24px;accent-color:var(--brand);flex-shrink:0}
.m-lnk{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.m-lnk:hover{color:var(--ink)}
.m-lnk+.m-lnk{border-top:1px solid var(--line)}
.m-lnk b{display:block;font-size:15px}
.m-lnk .s{font-size:13px;color:var(--mu)}
.m-ml{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.m-mc{padding:14px 16px;border-inline-start:4px solid transparent}
.m-mc.ok{border-inline-start-color:#3F7A5B}.m-mc.warn{border-inline-start-color:#B4802E}.m-mc.bad{border-inline-start-color:#B0484E}
.m-mc p{margin:0}
.m-mg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px;font-size:13px}
.m-mg b{display:block;font-size:15px;color:var(--ink)}
.m-mc .bs{display:flex;margin-top:10px;min-height:46px}
.m-res{border-radius:24px;padding:20px 22px;box-shadow:0 12px 28px rgba(37,32,46,.1)}
.m-res.ok{background:var(--ok-bg);color:var(--ok)}.m-res.warn{background:var(--wn-bg);color:#6E4F15}.m-res.bad{background:var(--lt-bg);color:#7A343B}
.m-res p{margin:0}
.m-sum{padding:14px 16px}
.m-sum .m-ln{min-height:42px}
.m-sum .m-ln+.m-ln{border-top:1px solid var(--line)}
.m-fix{display:block;width:100%;text-align:start;padding:14px 16px;border-radius:16px;color:var(--ink);background:#fff;border:1px solid rgba(37,32,46,.06);box-shadow:var(--shadow-soft);text-decoration:none}
.m-fix:hover{color:var(--ink);border-color:var(--brand)}
.m-it{width:100%;min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;border-radius:14px;cursor:pointer;color:var(--ink);background:#fff;border:1px solid rgba(37,32,46,.08);font-family:inherit;text-align:start}
.m-it[aria-pressed="true"]{border:2px solid var(--brand);background:var(--brand-soft)}
.m-tgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-tg{min-height:48px;border-radius:14px;border:1px solid var(--field);background:#fff;color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.m-tg[aria-pressed="true"]{border:2px solid var(--brand);background:var(--brand-soft);font-weight:800}
.m-pl{list-style:none;margin:0;padding:0;overflow:hidden}
.m-pl li{display:flex;align-items:center;gap:12px;padding:12px 16px}
.m-pl li+li{border-top:1px solid var(--line)}
.m-pl li.ch{background:#FAF8FD}
.m-pfoot{flex-direction:row;background:var(--bg);border-top:1px solid var(--line)}
.m-pfoot>.bp{flex:1;white-space:nowrap;padding:0 12px}
.m-pfoot>.m-back{white-space:nowrap}
.m-pfoot .bp:disabled{opacity:.55;cursor:default;box-shadow:none}