/* Account purchase/renewal: a focused checkout inside the shared message modal. */
#buyAccount { --account-blue:#146db1;--account-navy:#22356b;--account-line:#dce5ef;--account-muted:#5d6d82;--account-green:#187665;color:#29374b; }
#buyAccount .modal-dialog { width:calc(100% - 40px);max-width:780px!important;margin:28px auto;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px); }
#buyAccount .modal-content { width:100%;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px); }
#buyAccount .modal-header { align-items:center;padding:16px 20px; }
#buyAccount .modal-title { font-size:19px; }
#buyAccount .account-subtitle { margin:5px 0 0;color:var(--account-muted);font-size:12px;line-height:1.5; }
#buyAccount .account-steps { display:flex;flex:none;justify-content:center;gap:36px;list-style:none;padding:14px 20px;margin:0;border-bottom:1px solid var(--account-line);background:#fff; }
#buyAccount .account-steps li { display:flex;align-items:center;gap:7px;color:#738196;font-size:12px; }
#buyAccount .account-steps li>span { display:flex;align-items:center;justify-content:center;width:23px;height:23px;border:1px solid #d9e2ed;border-radius:50%;background:#f5f7fa;font-size:11px;font-weight:600; }
#buyAccount .account-steps .is-current { color:var(--account-blue);font-weight:600; }
#buyAccount .account-steps .is-current>span { background:var(--account-blue);border-color:var(--account-blue);color:#fff; }
#buyAccount .account-steps .is-complete { color:var(--account-green); }
#buyAccount .account-steps .is-complete>span { color:var(--account-green);background:#edf8f3;border-color:#b6dacb; }
#buyAccount .account-body { padding:20px;line-height:1.6; }
#buyAccount .account-body p { margin:0; }
#buyAccount .account-username { margin-bottom:18px; }
#buyAccount .account-username label { display:block;color:var(--account-navy);font-size:13px; }
#buyAccount .account-username label>span { color:#b91e23; }
#buyAccount .account-username input { width:100%;height:40px;border:1px solid #cdd8e6;border-radius:7px;padding:8px 11px;background:#fff;color:#29374b;font:inherit; }
#buyAccount .account-username p { margin-top:5px;color:var(--account-muted);font-size:12px; }
#buyAccount .account-plan-fieldset { margin:0;padding:0;border:0;min-width:0; }
#buyAccount .account-plan-fieldset legend { width:auto;margin-bottom:10px;color:var(--account-navy);font-size:13px;font-weight:600; }
#buyAccount .account-plans { display:flex;gap:10px; }
#buyAccount .account-plan { position:relative;display:flex;flex:1;min-width:0;flex-direction:column;gap:7px;padding:15px 12px;border:1px solid #d5dfeb;border-radius:9px;background:#fff;cursor:pointer;margin:0; }
#buyAccount .account-plan input { position:absolute;opacity:0;width:1px;height:1px; }
#buyAccount .account-plan:has(input:focus-visible) { outline:2px solid var(--account-blue);outline-offset:2px; }
#buyAccount .account-plan:hover { border-color:#8cb7db;background:#f8fbff; }
#buyAccount .account-plan.is-selected { border-color:var(--account-blue);background:#edf5fc;box-shadow:inset 0 0 0 1px var(--account-blue); }
#buyAccount .account-plan-month { color:var(--account-navy);font-size:14px;font-weight:600; }
#buyAccount .account-plan strong { color:var(--account-navy);font-size:17px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums; }
#buyAccount .account-plan small { color:var(--account-muted);font-size:11px;font-weight:400;white-space:nowrap; }
#buyAccount .account-plan-check { position:absolute;top:8px;right:9px;display:none;color:var(--account-blue);font-size:10px; }
#buyAccount .account-plan.is-selected .account-plan-check { display:block; }
#buyAccount .account-plan-fieldset:disabled .account-plan { opacity:.65;cursor:wait; }
#buyAccount .account-benefits { display:flex;flex-wrap:wrap;gap:6px 18px;padding:13px 0;color:var(--account-muted);font-size:12px; }
#buyAccount .account-benefits i { margin-right:4px;color:var(--account-green);font-size:10px; }
#buyAccount .account-payment-method { display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--account-line);border-radius:8px;background:#f7f9fc; }
#buyAccount .account-payment-method>i { display:flex;align-items:center;justify-content:center;flex:0 0 34px;height:34px;border-radius:7px;background:#e8f1fa;color:var(--account-blue);font-size:16px; }
#buyAccount .account-payment-method strong { color:var(--account-navy);font-size:13px; }
#buyAccount .account-payment-method p,#buyAccount .account-note { color:var(--account-muted);font-size:12px; }
#buyAccount .account-note { margin-top:10px; }
#buyAccount .account-footer { align-items:center;padding:12px 20px; }
#buyAccount .account-footer-total { display:flex;flex-direction:column;align-items:flex-end;gap:1px;color:var(--account-muted);font-size:11px; }
#buyAccount .account-footer-total strong { color:var(--account-navy);font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums; }
#buyAccount .account-error { padding:9px 12px;margin:0 0 12px;border:1px solid #edc9cf;border-radius:6px;color:#a01b2b;background:#fff3f4;font-size:12px; }
#buyAccount .account-waiting { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:13px;color:var(--account-blue);font-weight:600; }
#buyAccount .account-waiting i { margin-right:5px; }
#buyAccount .account-countdown { padding:4px 9px;border-radius:6px;color:#8d5c08;background:#fff7e8;font-variant-numeric:tabular-nums;white-space:nowrap; }
#buyAccount .account-transfer { display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px; }
#buyAccount .account-body h3 { margin:0 0 10px;color:var(--account-navy);font-size:14px;font-weight:600; }
#buyAccount .account-qr { display:flex;align-items:center;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--account-line);border-radius:9px;background:#fafcfe;text-align:center; }
#buyAccount .account-qr img { display:block;width:210px;max-width:100%;height:auto;border:1px solid #e8edf4;border-radius:6px;background:#fff; }
#buyAccount .account-qr strong { font-size:20px;color:var(--account-navy);font-variant-numeric:tabular-nums; }
#buyAccount .account-qr>span { color:var(--account-muted);font-size:12px; }
#buyAccount .account-bank-details dl,#buyAccount .account-success dl { margin:0; }
#buyAccount .account-bank-details dl>div { padding:8px 0;border-bottom:1px solid #edf0f5; }
#buyAccount .account-bank-details dt,#buyAccount .account-success dt { color:var(--account-muted);font-size:12px;font-weight:400; }
#buyAccount .account-bank-details dd,#buyAccount .account-success dd { display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;margin:3px 0 0;color:var(--account-navy);font-size:14px; }
#buyAccount .account-bank-details dd strong,#buyAccount .account-success dd strong { min-width:0;overflow-wrap:anywhere;font-weight:600; }
#buyAccount .account-copy { display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;height:30px;padding:0;border:1px solid #d7e2ee;border-radius:6px;background:#fff;color:var(--account-blue);cursor:pointer;font-size:12px; }
#buyAccount .account-copy:hover { background:#eaf3fc;border-color:#99bddd; }
#buyAccount .account-bank-details .is-reference { margin-top:6px;padding:10px;border:1px solid #bed6ed;border-radius:7px;background:#edf5fc; }
#buyAccount .account-transfer-note { display:flex;align-items:baseline;gap:7px;padding:11px 12px;margin-top:16px;border-radius:7px;background:#fff8ea;color:#80561b;font-size:12px; }
#buyAccount .account-support { display:inline-flex;align-items:center;gap:6px;color:var(--account-blue);font-size:13px;font-weight:600; }
#buyAccount .account-success { max-width:470px;margin:auto;text-align:center; }
#buyAccount .account-success-icon { display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:#eaf7f1;color:var(--account-green);font-size:22px; }
#buyAccount .account-success h3 { font-size:20px; }
#buyAccount .account-success p { color:var(--account-muted);font-size:13px; }
#buyAccount .account-success dl { margin-top:18px;padding:0 14px;border:1px solid var(--account-line);border-radius:8px;text-align:left;background:#f8fafd; }
#buyAccount .account-success dl>div { padding:11px 0; }
#buyAccount .account-success dl>div+div { border-top:1px solid var(--account-line); }
#buyAccount :is(button,input,a):focus-visible { outline:2px solid var(--account-blue);outline-offset:2px; }
@media(max-width:767px) {
  #buyAccount .modal-dialog { width:calc(100% - 16px);max-width:780px!important;margin:8px auto;max-height:calc(100dvh - 16px); }
  #buyAccount .modal-content { max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px); }
  #buyAccount .modal-header,#buyAccount .account-body,#buyAccount .account-footer { padding:14px; }
  #buyAccount .modal-title { font-size:17px; }
  #buyAccount .account-steps { gap:18px;padding:11px 12px; }
  #buyAccount .account-steps li { gap:5px;font-size:11px; }
  #buyAccount .account-plans { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  #buyAccount .account-plan { padding:13px 10px; }
  #buyAccount .account-plan strong { font-size:16px; }
  #buyAccount .account-plan small { font-size:11px; }
  #buyAccount .account-benefits { gap:6px 12px;font-size:11px; }
  #buyAccount .account-transfer { grid-template-columns:minmax(0,1fr);gap:16px; }
  #buyAccount .account-qr img { width:200px; }
  #buyAccount .account-footer-total { flex:1;align-items:flex-end; }
  #buyAccount .account-footer>.btn-primary { flex:1 1 100%; }
  #buyAccount .account-copy { min-height:36px;flex-basis:36px; }
  #buyAccount .account-username input { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { #buyAccount .fa-spin { animation:none } }

#buyAccount .account-plan-discount { display:flex;flex-direction:column;gap:4px;min-width:0; }
#buyAccount .account-plan-discount del { color:var(--account-muted);font-size:12px;font-weight:400;white-space:nowrap; }
#buyAccount .account-plan-discount small { align-self:flex-start;padding:2px 6px;border-radius:4px;background:#e5f4ec;color:#17684f;font-size:11px;font-weight:600;white-space:normal; }
/* Renewal has three options: use the last row fully on narrow screens. */
@media(max-width:767px) {
  #buyAccount .account-plans:has(> .account-plan:nth-child(3):last-child) > .account-plan:last-child { grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px; }
  #buyAccount .account-plans:has(> .account-plan:nth-child(3):last-child) > .account-plan:last-child .account-plan-discount { grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:8px; }
  #buyAccount .account-plans:has(> .account-plan:nth-child(3):last-child) > .account-plan:last-child .account-plan-check { top:5px;right:5px;font-size:9px; }
  #buyAccount .account-footer>.btn { min-height:44px; }
  #buyAccount .account-copy { min-height:44px;flex-basis:44px; }
  #buyAccount .modal-header .close { min-width:40px;min-height:40px; }
}
/* Review refinements: stable feedback, clear account target and QR fallback. */
#buyAccount .account-live-notice { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
#buyAccount .account-copy.is-copied { color:var(--account-green);border-color:#b6dacb;background:#edf8f3; }
#buyAccount .account-username input[aria-invalid=true] { border-color:#b91e23; }
#buyAccount .account-username .account-field-error { color:#a01b2b;margin-top:5px;font-size:12px; }
#buyAccount .account-renew-target { display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;padding:9px 12px;margin:0 0 14px;background:#edf5fc;border:1px solid #d3e4f4;border-radius:7px;color:var(--account-muted);font-size:13px; }
#buyAccount .account-renew-target strong { min-width:0;color:var(--account-navy);overflow-wrap:anywhere; }
#buyAccount .account-plan-standard { margin-top:auto;color:var(--account-muted);font-size:12px;font-weight:400; }
#buyAccount .account-qr-fallback { display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;width:100%;min-height:180px;padding:16px;color:var(--account-muted);font-size:12px; }
#buyAccount .account-qr-fallback>i { font-size:25px;color:var(--account-blue); }
#buyAccount .account-steps li { color:var(--account-muted); }
#buyAccount .account-plan:has(input:checked) { border-color:var(--account-blue); }
@media(max-width:767px) { #buyAccount .account-plan-month{padding-right:12px}#buyAccount .account-plan-standard{font-size:11px} }
@media(max-width:767px) {
  #buyAccount .account-plans:has(> .account-plan:nth-child(3):last-child) > .account-plan:last-child>strong { padding-right:12px; }
}