/* subscribe.php + payment-return.php */
.sub-top{background:linear-gradient(135deg,#F0F3F9,#DCE6F5);padding:34px 0 30px;position:relative;overflow:hidden}
.sub-top:before{content:'';position:absolute;right:-90px;top:-130px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#D5E1F3,#2F62AE);opacity:.5}
.sub-top .wrap{position:relative}
.back{display:inline-block;font-size:14px;font-weight:600;color:var(--deep);margin-bottom:10px}
.sub-top h1{font:800 clamp(30px,4.4vw,44px)/1.05 var(--display);letter-spacing:-.02em}
.stepper{list-style:none;display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:20px}
.stepper li{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:#7A8AA8}
.stepper b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#7A8AA8;font:800 14px/1 var(--display);box-shadow:0 4px 10px rgba(11,42,94,.14)}
.stepper li.on{color:var(--ink)}.stepper li.on b{background:linear-gradient(150deg,#6F9BDB,#143A7B);color:#fff}
.stepper li.done{color:var(--goD)}.stepper li.done b{background:var(--go);color:#fff}

.sub-body{padding:36px 0 0}
.sub-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:start}
@media(max-width:940px){.sub-grid{grid-template-columns:1fr}.order{order:-1}}
.card{background:#fff;border-radius:26px;padding:30px;box-shadow:0 2px 4px rgba(11,27,58,.05),0 20px 44px rgba(11,27,58,.09)}
.card h3,.order h3{font:800 20px/1.1 var(--display);margin-bottom:14px}
.tabs{display:flex;gap:8px;margin-bottom:22px;background:var(--cream);padding:5px;border-radius:99px;width:max-content;max-width:100%}
.tab{border:none;background:none;padding:10px 20px;border-radius:99px;font:700 14px/1 var(--text);color:var(--body);cursor:pointer}
.tab.on{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(11,27,58,.12)}
.form{display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.two{grid-template-columns:1fr}}
label{display:grid;gap:6px;font:700 13px/1.2 var(--text);color:#33456B}
.opt{font-weight:500;color:var(--dim)}
input:not([type=checkbox]):not([type=radio]){font:500 15.5px/1.2 var(--text);padding:14px 15px;border:1.5px solid rgba(11,27,58,.14);border-radius:14px;background:#fff;color:var(--ink);width:100%}
input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(47,98,174,.2)}
.agree{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:13.5px;color:var(--body);line-height:1.45}
.agree input{margin-top:3px;width:18px;height:18px;accent-color:var(--go)}
.wide{width:100%;font-size:16px;padding:16px}
.err{color:#C0392B;font-weight:600;font-size:13.5px;min-height:0}.err:empty{display:none}
.hint{color:var(--body);font-size:13px}.hint.warn{background:#F0F3F9;border-radius:12px;padding:12px 14px;color:#143A7B}.hint a{color:var(--orangeD);font-weight:700}
.who{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.who a{color:var(--orangeD);font-weight:700;font-size:13px}
.cur{background:var(--goSoft);color:#1F5E36;border-radius:14px;padding:12px 15px;font-size:13.5px;margin-bottom:18px}

.order{background:#fff;border-radius:26px;padding:26px;box-shadow:0 2px 4px rgba(11,27,58,.05),0 20px 44px rgba(11,27,58,.09);position:sticky;top:90px}
.pick{display:grid;gap:10px}
.opt-plan{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.opt-plan.on{border-color:var(--orange);background:var(--sand);box-shadow:0 8px 18px rgba(11,42,94,.14)}
.opt-plan input{accent-color:var(--orangeD);width:18px;height:18px;flex:none}
.opt-plan .nm{flex:1;display:grid;gap:3px}.opt-plan .nm b{font:800 16px/1 var(--display)}.opt-plan .nm small{font-weight:500;font-size:11.5px;color:var(--body);line-height:1.3}
.opt-plan .pr{font:800 16px/1 var(--display);text-align:right}.opt-plan .pr s{display:block;font:500 12px/1 var(--text);color:var(--dim);margin-top:4px}
.sum{margin-top:20px;border-top:1px dashed rgba(11,27,58,.2);padding-top:14px}
.sum div{display:flex;justify-content:space-between;padding:6px 0;font-size:14.5px;color:var(--body)}
.sum dd{font-weight:700;color:var(--ink)}
.sum .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:17px}.sum .tot dt{font-weight:800;color:var(--ink)}.sum .tot dd{font:800 22px/1 var(--display);color:var(--goD)}
.valid{font-size:13px;color:var(--body);margin-top:14px;line-height:1.5}

/* payment result */
.result{max-width:640px;margin:0 auto;text-align:center;background:#fff;border-radius:30px;padding:46px 34px;box-shadow:0 2px 4px rgba(11,27,58,.05),0 26px 56px rgba(11,27,58,.11)}
.result h1{font:800 34px/1.1 var(--display);margin:18px 0 10px}
.result p{color:var(--body);font-size:16px}
.badge{width:96px;height:96px;border-radius:50%;margin:0 auto;display:grid;place-items:center;font-size:46px;color:#fff}
.badge.ok{background:linear-gradient(150deg,#5FD08A,#2E8449);box-shadow:0 18px 36px rgba(59,165,92,.4)}
.badge.bad{background:linear-gradient(150deg,#F0836A,#C0392B);box-shadow:0 18px 36px rgba(192,57,43,.35)}
.badge.wait{background:linear-gradient(150deg,#6F9BDB,#143A7B);box-shadow:0 18px 36px rgba(11,42,94,.35)}
.spin{animation:sp 1.1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.kv{display:grid;gap:8px;margin:26px 0 8px;text-align:left;background:var(--cream);border-radius:18px;padding:18px 20px}
.kv div{display:flex;justify-content:space-between;gap:14px;font-size:14.5px}.kv span{color:var(--body)}.kv b{text-align:right}
.unlock{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 6px}
.unlock a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);padding:10px 16px;border-radius:99px;font-weight:700;font-size:14px}
.unlock a:hover{border-color:var(--go);background:var(--goSoft)}
.result .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* phones: grid children may shrink, and the two tabs share the row */
.sub-main,.order{min-width:0}
.tabs{width:100%}.tab{flex:1;padding:10px 8px;font-size:13.5px}
@media(max-width:520px){.card{padding:22px 18px}.stepper{gap:8px 14px}.stepper li{font-size:13px}}

/* register-first flow */
.lead{color:var(--body);font-size:14.5px;margin-bottom:2px}
.welcome{background:var(--goSoft);color:#1F5E36;border-radius:14px;padding:13px 16px;font:700 14.5px/1.4 var(--text);margin-bottom:16px}
.lockmsg{background:var(--sand);color:#143A7B;border-radius:12px;padding:11px 13px;font-size:13px;font-weight:600;margin:-4px 0 12px;line-height:1.45}
.opt-plan .act{font:700 11px/1.3 var(--text);color:var(--goD);font-style:normal;margin-top:2px}
.opt-plan input:disabled{opacity:.45}
.opt-plan:has(input:disabled){cursor:not-allowed}
.sum .save dt,.sum .save dd{color:var(--goD);font-weight:700}
.pick .grp{font:800 12px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--deep);margin:8px 2px 0}.pick .grp small{text-transform:none;letter-spacing:0;font-weight:600;color:var(--body)}
.opt-plan.needpos{opacity:.55}

/* the original price, crossed out, must read at a glance: this is the price we are discounting from */
.was{gap:12px;min-height:34px}
.was s{font:800 26px/1 var(--display);color:#C0392B;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#C0392B;opacity:.9}
.was .off{font-size:13px;padding:6px 11px;background:#C0392B}
.lp{font:800 11px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--goD);margin:8px 0 0}
.plan .amt{color:var(--goD)}
.plan.ink .amt,.plan.amber .amt,.plan.green .amt,.plan.sky .amt,.plan.rose .amt,.plan.teal .amt,.plan.gold .amt,.plan.violet .amt{color:var(--ink)}
.cmp td.pr s,.cmp th small s{color:#C0392B;font-weight:800;text-decoration-thickness:2px}
.pp s{font:800 22px/1 var(--display)!important;color:#C0392B!important;text-decoration-thickness:3px}
.mp .pr s{font:800 22px/1 var(--display)!important;color:#C0392B!important;text-decoration-thickness:3px}
.opt-plan .pr s{font:800 14px/1 var(--display)!important;color:#C0392B!important;text-decoration-thickness:2px}