/* Yashfeeni customer app – page-specific additions on top of mockup.css */
#app{min-height:60vh;transition:opacity .15s}
#app.loading{opacity:.55;pointer-events:none;transition:opacity .2s .2s}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:yfspin .8s linear infinite;margin:18px auto}
.spin.light{border-color:#2A3D5C;border-top-color:#5FD6CC}
@keyframes yfspin{to{transform:rotate(360deg)}}
.btn.busy{opacity:.6;pointer-events:none}
.pill.theme{width:38px;padding:7px 0;text-align:center}
.top .wrap .bell,.top .wrap .userbtn{margin-inline-start:-6px}
.dsubt{color:var(--muted);font-size:14px;font-weight:400;margin-top:2px}
.dhead h3{display:block}
.dhead h3 .prate{font-size:13px}
.plist.loading,#plist.loading{opacity:.5}
.partner .spons{font-size:10.5px;margin-inline-start:4px}
.famph{width:48px;height:64px;object-fit:cover;border-radius:10px;display:block;overflow:hidden;flex:none;background:var(--surface2)}
.famph.nophoto svg{width:100%;height:100%}
.listbox .it.nf.unread{border-color:var(--teal)}
.drow.focus{background:var(--surface2);border-radius:10px;padding-inline:8px}
.tag.tt{display:inline-flex;gap:5px;align-items:center}
.tag.tt.mine{outline:1.5px solid var(--teal)}
.offer.inelig{opacity:.75}
.cardblk .flipw{max-width:480px}
.qrfull{display:grid;place-items:center;background:#fff;border-radius:18px;padding:16px;margin:0 auto;width:max-content;max-width:100%}
.qrfull svg{width:min(280px,70vw);height:auto}
.legalbody p{margin:0 0 12px;line-height:1.75}
.legalbody p.li{padding-inline-start:18px;position:relative}
.legalbody p.li::before{content:"";position:absolute;inset-inline-start:4px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.picker label.on{border-color:var(--teal)}
.alog-wrap{padding:48px 16px}
.alog .otp{width:100%}
.alog form .btn{margin-top:4px}
.hist .h b{font-weight:600}
.kv dd small{color:var(--muted)}
.breakdown .com{color:var(--muted);font-size:14px}
.wsteps span{font-size:13px}
.receipt .rlogo{height:40px;width:auto}
.refcode{word-break:break-all;font-size:clamp(20px,5vw,30px)}
.gsteps{justify-content:center}
.phone-in input{min-width:0}
.field .phone-in{width:100%}
.exl .toggle{flex:none}
.famrow input{flex:1;min-width:0}
.calc .res .where button{text-align:start}
.mapwrap .plist.one{max-height:560px;overflow:auto}
.offer .by{text-decoration:none;color:var(--teal-strong);font-weight:500}
.offer .by:hover{text-decoration:underline}
.flinks .link{padding:0}
.toast{z-index:60}
@media (max-width:640px){.mine-grid{gap:24px}.two{gap:16px}.alog-wrap{padding:24px 0}.alog{padding:24px 18px}.pacts .btn{flex:1 1 44%}}
@media (min-width:861px){nav.tabs{display:none}}
@media (max-width:390px){.hero h1{font-size:34px}.facts{gap:18px}.facts strong{font-size:20px}}
@media print{header.top,footer,nav.tabs,#toast{display:none!important}}
[hidden]{display:none!important}
a.pill,a.link{text-decoration:none}
a.link{display:inline-block}
/* contrast (WCAG AA): white on --teal is 4.2:1 in light mode → slightly deeper teal for filled controls; gold tags readable on dark surfaces */
:root{--teal-fill:#01827A}
:root[data-theme="dark"]{--teal-fill:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--teal-fill:var(--teal)}}
.btn:not(.ghost),.tier .badge,.offerband.on .mo.paid{background:var(--teal-fill)}
.btn:not(.ghost):hover{background:var(--teal-strong)}
.offerband.on .mo.paid{color:var(--on-teal)}
.step i{color:var(--teal-strong)}
:root[data-theme="dark"] :is(.gtag,.savebox b,.slots button small){color:#E2B13C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.gtag,.savebox b,.slots button small){color:#E2B13C}}
.nowrap,.cardno{white-space:nowrap}
.famlist .it{flex-wrap:wrap;gap:8px 12px}
.famlist .it>div:last-child{margin-inline-start:auto}
.breakdown>div>span:last-child,.paysum b{white-space:nowrap}
a.x.telx{color:var(--teal-strong);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface2)}
a.x.telx svg{width:18px;height:18px}
.stat.off{background:var(--surface2);color:var(--muted)}
:root[data-theme="dark"] .stat.live{color:#6FD4A3}
.mcard.gold.back{color:#3a2705}.mcard.silver.back{color:#1d2631}.mcard.bronze.back{color:#fff3e6}
.ro-month b .cur{font-size:18px;font-style:normal;font-weight:600;letter-spacing:0}
.ro-month span{display:block;margin-top:4px}
.famlist .tag,.stat{white-space:nowrap}
.omap svg{direction:ltr}
/* "Notifications on this device" (devicepush.js) */
.pushdev .pushrow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:10px}
.pushdev .pushhelp{font-size:13.5px;margin:8px 0 10px}
.pushdev .toggle input{width:18px;height:18px}