:root{--inp:#f0f2f6}html[data-theme=dark]{--inp:#0c1322}
.svc{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px;margin:20px 0 0}
.svc button{display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:transparent;border-radius:14px;min-height:60px;cursor:pointer;font-size:15px;color:var(--ink);padding:6px 8px;position:relative;line-height:1.4}
.svc button+button::before{content:"";position:absolute;right:-2px;top:22%;height:56%;width:1px;background:var(--line)}
.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--cs);color:var(--c);flex:none}
.ic svg{width:22px;height:22px}
.svc button.on{background:var(--cs)}.svc button.on .ic{background:var(--c);color:#fff}
.svc button:disabled{opacity:.5;cursor:not-allowed}
.svc small{display:block;font-size:10.5px;color:var(--mut)}
.duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;margin-top:22px;align-items:start}
.fcard{padding:26px 26px 22px;display:none;min-height:420px;scroll-margin-top:84px}
.fcard.on{display:block}
.fhead{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.fhead .ic{width:46px;height:46px}
.fhead h2{font-size:17.5px}
.fdesc{color:var(--mut);font-size:14.5px;margin:0 0 10px}
.field input,.field input.mob,.field input.num{background:var(--inp);border-color:var(--line);text-align:center;height:54px;font-family:inherit;font-size:19px;letter-spacing:2px}
.field input::placeholder{letter-spacing:0;font-size:15px}
.field{margin:0 0 6px}
.ops{display:flex;flex-wrap:wrap;gap:10px;grid-template-columns:none;margin:0 0 16px}
.op{width:54px;height:54px;padding:0;border:2px solid transparent;border-radius:14px;background:var(--inp);overflow:hidden;filter:grayscale(1);opacity:.55;position:relative}
.op img{width:100%;height:100%;border-radius:0;object-fit:cover}
.op span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.op:hover{opacity:.85}
.op.on{filter:none;opacity:1;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent);background:var(--inp)}
.acct{background:var(--inp);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--mut);margin-top:14px;line-height:2}
.acct b{display:block;color:var(--ink);font-size:14px}
.acct a{color:var(--c)}
.msg:empty{min-height:0;margin:0}
.s1 .msg,.s2 .msg{margin:0 0 10px}
.pickbar{display:flex;align-items:center;gap:10px;background:var(--inp);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin:0 0 16px;font-size:14px}
.pickbar img{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:none}
.pickbar .pb-n{font-size:16px;letter-spacing:1px}
.pickbar .pb-t{color:var(--mut);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbar .lnk{flex:none}
.aside{padding:8px 4px}
.aside>div{display:none}.aside>div.on{display:block}
.aside h2{font-size:17px;margin:0 0 8px}
.aside p{color:var(--mut);font-size:14.5px;margin:0 0 16px;text-align:justify}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px}
.steps li::before{content:counter(s,persian);width:34px;height:34px;border-radius:10px;background:var(--cs);color:var(--c);display:grid;place-items:center;flex:none;font-size:16px}
.opts{display:grid;gap:10px}
.opt{border:1px solid var(--line);background:var(--inp);border-radius:14px;min-height:54px;padding:0 18px;text-align:right;cursor:pointer;font-size:15.5px}
.opt:hover,.opt:focus-visible{border-color:var(--c);background:var(--cs);outline:0}
.hero{padding:26px 0 0;text-align:right}
.hero h1{font-size:clamp(20px,4.6vw,27px)}
.hero p{margin:6px 0 0;max-width:none}
@media(max-width:860px){
.duo{grid-template-columns:1fr;gap:18px}
.svc{display:flex;overflow-x:auto;scrollbar-width:none;padding:8px;gap:6px;margin-top:14px}
.svc::-webkit-scrollbar{display:none}
.svc button{flex:1 0 78px;flex-direction:column;gap:5px;font-size:12.5px;min-height:84px;padding:8px 4px}
.svc button+button::before{display:none}
.fcard{min-height:0;padding:20px 16px 16px}
.fhead h2{font-size:16px}
.aside{padding:0 4px}
}
@media(max-width:420px){.op{width:50px;height:50px}.field input.mob{font-size:18px;letter-spacing:1.5px}.pickbar{flex-wrap:wrap}}
/* operator tint: light mix with the card colour so text stays readable in both themes */
.fcard{transition:background .25s,border-color .25s}
.fcard.tint{background:color-mix(in srgb,var(--opc) 13%,var(--card));border-color:color-mix(in srgb,var(--opc) 50%,var(--line))}
html[data-theme=dark] .fcard.tint{background:color-mix(in srgb,var(--opc) 17%,var(--card))}
.fcard.tint .fhead .ic{background:var(--opc);color:#fff}
.fcard.tint .field input,.fcard.tint .acct,.fcard.tint .pickbar,.fcard.tint .amt:not(.on),.fcard.tint .pkg:not(.on),.fcard.tint .chip:not(.on),.fcard.tint .flt-h select,.fcard.tint .sum{background:color-mix(in srgb,var(--card) 80%,transparent)}
.fcard.tint .field input,.fcard.tint .acct,.fcard.tint .pickbar,.fcard.tint .sum{border-color:color-mix(in srgb,var(--opc) 35%,var(--line))}
.fcard.tint .op.on{border-color:var(--opc);box-shadow:0 0 0 3px color-mix(in srgb,var(--opc) 25%,transparent)}
.fcard.tint .pk-m i{background:color-mix(in srgb,var(--opc) 14%,var(--card))}
/* op tiles v2: white logo on a grey tile; the active one takes the operator's colour */
.op,.fcard.tint .op:not(.on){background:#9aa3b2;filter:none;opacity:1;border-color:transparent}
html[data-theme=dark] .op,html[data-theme=dark] .fcard.tint .op:not(.on){background:#4b5670}
.op img{object-fit:contain;padding:5px}
.op:hover{opacity:1;background:color-mix(in srgb,var(--oc) 55%,#9aa3b2)}
.op.on,.fcard.tint .op.on{background:color-mix(in srgb,var(--oc) 90%,#000);border-color:var(--card);box-shadow:0 0 0 2.5px var(--oc)}
.pickbar img{object-fit:contain;padding:3px}
.fcard.tint{background:color-mix(in srgb,var(--opc) 16%,var(--card))}
html[data-theme=dark] .fcard.tint{background:color-mix(in srgb,var(--opc) 20%,var(--card))}
/* pickbar wrap on phones */
@media(max-width:560px){.pickbar{flex-wrap:wrap}.pickbar .pb-t{order:5;flex:1 0 100%;white-space:normal}.pickbar .lnk{margin-inline-start:auto}}
/* ported switch v3 */
.ops{margin:0 0 6px}
.fcard .sw{margin:0 0 14px;font-size:13.5px}
.fcard .sw input:disabled+i{opacity:.45}
.op:disabled{cursor:default}.op:disabled:hover{background:#9aa3b2}html[data-theme=dark] .op:disabled:hover{background:#4b5670}
.op.on:disabled:hover{background:color-mix(in srgb,var(--oc) 90%,#000)}
.cust-f{margin:10px 0 14px}.cust-f select{width:100%;height:50px;border:1.5px solid var(--line);border-radius:14px;background:var(--field);padding:0 14px;font-size:15px}
.fcard.tint .cust-f select{background:color-mix(in srgb,var(--card) 80%,transparent)}
.s2 .note{margin:0 0 14px}