/* Shop sizes, checkout extras, the QPay step (public/js/pay.js), the registration page /elselt and the monthly pay
   link /sar-tolbor/{token}. Same language as site.css (the demo's style.css, kept verbatim). */

/* shop cards: size picker */
.card .vsel{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.card .vsel select{flex:1;min-width:0;border:1.5px solid var(--black);background:#fff;padding:8px 10px;font:600 14px Inter,sans-serif;color:var(--black);text-transform:none;letter-spacing:0}
.card .vone{margin-top:12px;font-size:13px;color:var(--mute)}
#shop .empty{border:2px dashed var(--line)}
#grid .card{min-width:0} /* a size picker must never widen the grid track */

/* drawer details form */
.co .fld small.help{display:block;margin-top:5px;font-size:12px;color:var(--mute);line-height:1.4}
.qty button[disabled]{opacity:.35;cursor:not-allowed}

/* QPay step */
.qpay .qref{margin-top:6px;font-size:13px;color:var(--mute)}
.qpay .qrimg{width:232px;height:232px;margin:16px auto 8px;display:block;border:10px solid #fff;outline:1.5px solid var(--line);image-rendering:pixelated;background:#fff}
.qpay .qtimer{margin-top:4px;font-size:13px;color:var(--mute);font-weight:600}
.qpay .qtimer b{font-family:Oswald,sans-serif;font-size:22px;color:var(--black);margin-left:6px}
.qpay .qtimer.over b{color:var(--red)}
.qpay .qhelp{font-size:14px;color:var(--ink);margin-top:8px;line-height:1.5}
.qbanks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.qbanks a{display:flex;flex-direction:column;align-items:center;gap:6px;border:1.5px solid var(--line);padding:9px 4px;font-size:12px;font-weight:700;color:var(--black);text-decoration:none;min-width:0}
.qbanks a:hover{border-color:var(--black)}
.qbanks img{width:30px;height:30px;border-radius:7px}
.qbanks span{overflow-wrap:anywhere}
.qpay .qfake{margin-top:16px;width:100%;padding:12px 14px;font-size:15px}
.qpay .qfake-n{margin-top:6px}
.qpay .qpoll{margin-top:14px;font-size:13px;color:var(--mute)}
.qrcpt{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:16px;text-align:left;font-size:13px}
.qrcpt img{width:96px;height:96px}
.qrcpt span{display:block;margin-top:4px}

/* home class finder: «Бүртгүүлэх» for the selected class */
.enrolcta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.enrolcta .btn{padding:13px 22px;font-size:16px}
.enrolcta small{font-size:13px;color:var(--mute);line-height:1.4;max-width:300px}

/* registration page */
.enrol{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.enrol .blk{border:2px solid var(--black);padding:26px 28px;margin-bottom:22px;background:#fff}
.enrol .blk>h3{font-family:Oswald,sans-serif;font-size:24px;font-weight:600;text-transform:uppercase;line-height:1.1;margin-bottom:14px}
.enrol .blk .note{font-size:13.5px;color:var(--mute);line-height:1.5;margin-top:-6px;margin-bottom:12px}
.ccards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ccard{position:relative;display:block;border:2px solid var(--line);padding:16px 16px 14px;cursor:pointer;background:#fff}
.ccard:hover{border-color:var(--black)}
.ccard input{position:absolute;opacity:0;pointer-events:none}
.ccard:has(input:checked){border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.ccard:has(input:focus-visible){outline:3px solid var(--black);outline-offset:2px}
.ccard b{display:block;font-family:Oswald,sans-serif;font-size:26px;font-weight:600;line-height:1}
.ccard .sub{display:block;margin-top:6px;font-size:13.5px;color:var(--ink);line-height:1.4}
.ccard .meta{display:block;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.ccard .meta.left{color:#1F7A3A}
.ccard.off{cursor:not-allowed;background:var(--paper);border-style:dashed}
.ccard.off b,.ccard.off .sub{color:#8F9196}
.ccard .ex{position:absolute;top:10px;right:10px}
.plans{display:grid;gap:10px}
.plan{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;border:2px solid var(--line);padding:14px 16px;cursor:pointer}
.plan:has(input:checked){border-color:var(--black)}
.plan input{accent-color:var(--red);width:18px;height:18px}
.plan b{font-size:15px}
.plan small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.plan .amt{font-family:Oswald,sans-serif;font-size:24px;font-weight:600;white-space:nowrap}
.chks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chks label{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer}
.chks label:has(input:checked){border-color:var(--black);background:var(--paper)}
.chks label.full{color:#A9ABB0;text-decoration:line-through;border-style:dashed;cursor:not-allowed}
.chks input{accent-color:var(--red)}
.lform .fld label{color:var(--mute)}
.lform .fld input,.lform .fld select{display:block;width:100%;border:1.5px solid var(--line);background:#fff;color:var(--black);padding:13px 14px;font-size:15px;font-family:Inter,sans-serif}
.lform .fld input:focus,.lform .fld select:focus{border-color:var(--black);outline:none}
.lform .fld.bad input,.lform .fld.bad select{border-color:#C4111B}
.lform .fld .err{color:#C4111B}
.lform .fld small.help{display:block;margin-top:5px;font-size:12.5px;color:var(--mute);line-height:1.4}
.lform .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.lform .seg{display:flex;border:1.5px solid var(--line)}
.lform .seg label{flex:1;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--black);cursor:pointer}
.lform .seg label+label{border-left:1.5px solid var(--line)}
.lform .seg label:has(input:checked){background:var(--black);color:#fff}
.lform .seg label{position:relative}
.lform .seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lform .fld.bad .seg{border-color:#C4111B}
.rules details{margin-top:4px;font-size:14px}
.rules summary{cursor:pointer;font-weight:700;color:var(--red)}
.rules ol{margin:10px 0 0 20px;line-height:1.6;color:var(--ink)}
.rules .acc{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;line-height:1.45;cursor:pointer}
.rules .acc input{margin-top:3px;width:18px;height:18px;accent-color:var(--red);flex:none}
.rules .err{display:none;margin-top:6px;font-size:13px;color:#C4111B}
.rules.bad .err{display:block}
.esum{position:sticky;top:calc(var(--head) + 16px);background:var(--black);color:#fff;padding:28px}
.esum h3{font-family:Oswald,sans-serif;font-size:26px;font-weight:600;text-transform:uppercase}
.esum dl{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px}
.esum dt{color:#8F9196}
.esum dd{overflow-wrap:anywhere}
.esum .tot{margin-top:20px;padding-top:16px;border-top:1px solid #3A3B40;color:#fff}
.esum .demo{margin-top:10px;color:#8F9196}
.esum .btn{margin-top:18px;width:100%}
.esum .hint{margin-top:16px;font-size:13px;color:#C7C8CC;line-height:1.5}
.esum .hint a{color:#fff}
.paybox{border:2px solid var(--black);padding:28px;max-width:520px;margin:0 auto;background:#fff}
.paybox .acts{margin-top:16px;display:grid;gap:8px}

/* block-level errors (class, plan, times, rules) */
.enrol .blk .err{display:none;font-size:13px;color:#C4111B}
.enrol .blk.bad>.err,.enrol .blk.bad #e-price,.enrol .fld.bad .err,#slotsWrap.bad .err{display:block}
.enrol .blk.bad{border-color:#C4111B}

/* fee pay link + order status */
.kvbox{border:2px solid var(--black);padding:28px;background:#fff}
.kv{display:grid;grid-template-columns:160px minmax(0,1fr);border-top:1px solid var(--line);margin-top:6px}
.kv dt,.kv dd{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv dt{color:var(--mute)}
.kv dd{overflow-wrap:anywhere}
.kv dd b{font-family:Oswald,sans-serif;font-size:22px;font-weight:600}
.pstat{display:inline-block;padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:1.5px solid var(--line)}
.pstat.ok{background:#E3F4E8;border-color:#1F9D55;color:#14612F}
.pstat.bad{background:#FDE7E8;border-color:var(--red);color:#9B0E16}
.paycols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start}
.paycols .msg{margin-top:16px;font-size:15px;line-height:1.55}
.rcbox{display:flex;gap:18px;align-items:center;margin-top:10px}
.rcbox img{width:150px;height:150px}
.rcbox dl{font-size:14px}
.rcbox dd{overflow-wrap:anywhere;margin-bottom:6px}

@media (max-width:1100px){.enrol,.paycols{grid-template-columns:1fr}.esum{position:static}}
@media (max-width:760px){
  .ccards,.lform .g2{grid-template-columns:1fr}
  .enrol .blk{padding:20px 16px}
  .kv{grid-template-columns:1fr}.kv dt{padding-bottom:0;border-bottom:none}
  .kvbox,.paybox{padding:20px 16px}
  .qbanks{grid-template-columns:repeat(2,1fr)}
  .plan{grid-template-columns:20px 1fr}.plan .amt{grid-column:2}
  .rcbox{flex-direction:column;align-items:flex-start}
}

/* the hidden attribute must win over .btn / .card display rules */
.enrolcta [hidden],#grid .card[hidden],#enrolPay[hidden],.enrol[hidden],#slotsWrap[hidden]{display:none}