@font-face { font-family: "MXS Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("./fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "MXS Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("./fonts/sora-latin.woff2") format("woff2"); }

body.mxs-order-skin {
  --mxs-first-paint-ready: 1;
  --mxs-ink: #0b0c0f;
  --mxs-text: #4b5158;
  --mxs-muted: #606975;
  --mxs-blue: #0074bd;
  --mxs-blue-dark: #005e9a;
  --mxs-border: #e2e7ed;
  --mxs-soft: #f3f6fa;
  margin: 0;
  padding: 0;
  color: var(--mxs-ink);
  background: #fbfcfe;
  font: 400 15px/1.65 "MXS Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}
body.mxs-order-skin *, body.mxs-order-skin *::before, body.mxs-order-skin *::after { box-sizing: border-box; }
body.mxs-order-skin [hidden], body.mxs-order-skin .hide, body.mxs-order-skin .mxs-legacy-chrome, body.mxs-order-skin .mxs-sensitive-summary { display: none !important; }
body.mxs-order-skin :is(button, input, select, textarea) { font-family: inherit; }
body.mxs-order-skin :is(a, button, summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.mxs-order-skin :focus-visible { outline: 3px solid var(--mxs-blue); outline-offset: 4px; }
body.mxs-order-skin :is(.mxs-screen-heading h1, .mxs-native-page):focus { outline: none; }
body.mxs-order-skin ::selection { background: #d5eafa; color: var(--mxs-ink); }
body.mxs-order-skin .mxs-wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
body.mxs-order-skin .mxs-skip-link { position: fixed; top: 12px; left: 16px; z-index: 1200; padding: 12px 20px; border-radius: 10px; background: var(--mxs-ink); color: #fff; transform: translateY(-200%); }
body.mxs-order-skin .mxs-skip-link:focus { transform: none; }
body.mxs-order-skin .mxs-order-header { position: static; background: #fff; border-bottom: 1px solid var(--mxs-border); }
body.mxs-order-skin .mxs-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; }
body.mxs-order-skin .mxs-brand { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; color: var(--mxs-ink); text-decoration: none; }
body.mxs-order-skin .mxs-brand img { display: block; width: auto; height: 42px; max-width: 100%; object-fit: contain; }
body.mxs-order-skin .mxs-brand-tagline { padding-left: 24px; border-left: 1px solid var(--mxs-border); color: var(--mxs-muted); font-size: 12px; }
body.mxs-order-skin .mxs-header-links { display: flex; align-items: center; gap: 20px; }
body.mxs-order-skin .mxs-header-links :is(a, button) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--mxs-text); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
body.mxs-order-skin .mxs-header-links :is(a, button):hover { color: var(--mxs-blue); }
body.mxs-order-skin .mxs-header-links .mxs-help-button { color: var(--mxs-blue); }

/* Flatten only the paid-checkout shell, never all native .content or modal nodes. */
body.mxs-order-skin .mxs-native-page { width: min(1240px, calc(100% - 64px)); min-height: 65vh; margin: 0 auto; padding: 30px 0 72px; }
body.mxs-order-skin .mxs-native-page > .container { width: 100%; padding: 0; margin: 0; }
body.mxs-order-skin .mxs-checkout-ancestor { float: none; width: 100%; max-width: none; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; }
body.mxs-order-skin .mxs-native-checkout > .panel > .panel-heading,
body.mxs-order-skin .mxs-native-checkout .nt-wrapper > h2:empty { display: none; }
body.mxs-order-skin .mxs-native-checkout .error_msg_div:not(:empty) { margin: 0 0 20px; color: #992c26; }
body.mxs-order-skin #frm_upgrade.mxs-native-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 0 32px; width: 100%; max-width: none; margin: 0 auto; overflow: visible; }
body.mxs-order-skin #frm_upgrade[data-mxs-step="details"] { grid-template-columns: minmax(0, 1fr); max-width: 840px; }
body.mxs-order-skin #frm_upgrade::before, body.mxs-order-skin #frm_upgrade::after { display: none; }
body.mxs-order-skin #frm_upgrade > .steps { position: static; grid-column: 1 / -1; width: 100%; margin: 0 0 44px; }
body.mxs-order-skin #frm_upgrade > .steps > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; }
body.mxs-order-skin #frm_upgrade > .steps li { float: none; width: 100% !important; min-width: 0; margin: 0; padding: 0; background: none; }
body.mxs-order-skin #frm_upgrade > .steps li::before, body.mxs-order-skin #frm_upgrade > .steps li::after { display: none; }
body.mxs-order-skin #frm_upgrade > .steps li > a,
body.mxs-order-skin #frm_upgrade > .steps .mxs-confirmation-step > span { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 44px; min-height: 44px; margin: 0; padding: 5px 0; border: 0; border-radius: 0; background: transparent; color: var(--mxs-muted); font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: none; }
body.mxs-order-skin #frm_upgrade > .steps .number, body.mxs-order-skin .mxs-journey-number { display: inline-grid; place-items: center; position: static; width: 30px; height: 30px; flex-shrink: 0; margin: 0; padding: 0; border: 1px solid #dce2e9; border-radius: 50%; background: #fbfcfe; color: inherit; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Native style.css declares full-width rectangular step numbers with !important. */
body.mxs-order-skin #frm_upgrade > .steps .number { width: 30px !important; height: 30px !important; border-radius: 50% !important; color: inherit !important; font-size: 11px !important; line-height: 1; }
body.mxs-order-skin #frm_upgrade > .steps .number::before, body.mxs-order-skin #frm_upgrade > .steps .number::after { display: none; }
body.mxs-order-skin #frm_upgrade > .steps .current > a { color: var(--mxs-blue); font-weight: 700; }
body.mxs-order-skin #frm_upgrade > .steps .current .number { border-color: var(--mxs-blue); background: var(--mxs-blue) !important; color: #fff !important; box-shadow: 0 0 0 4px #e6f2fb; }
body.mxs-order-skin #frm_upgrade > .steps .done .number { border-color: #c9e1f2; background: #e9f3fa; color: #1b5a84; }
body.mxs-order-skin #frm_upgrade > .steps .disabled > a { cursor: default; }
body.mxs-order-skin #frm_upgrade > .steps .audible { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.mxs-order-skin .mxs-order-progress { margin: 12px 0 0; color: var(--mxs-muted); font-size: 12px; }
body.mxs-order-skin .mxs-screen-heading { grid-column: 1; margin: 0 0 28px; }
body.mxs-order-skin .mxs-kicker { margin: 0; color: var(--mxs-blue); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
body.mxs-order-skin .mxs-screen-heading h1 { margin: 12px 0 0; color: var(--mxs-ink); font-family: "MXS Sora", Sora, sans-serif; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.2; font-weight: 600; letter-spacing: -0.04em; text-transform: none; }
body.mxs-order-skin .mxs-heading-description { margin: 12px 0 0; color: var(--mxs-text); font-size: 14px; }
body.mxs-order-skin #frm_upgrade > .mxs-wizard-content { position: static; grid-column: 1; float: none; width: 100%; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
body.mxs-order-skin #frm_upgrade > .mxs-wizard-content > h3.title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* No display override here: Steps alone controls which fieldset is visible. */
body.mxs-order-skin #frm_upgrade .mxs-native-step { position: static; float: none; width: 100%; min-width: 0; min-height: 0; height: auto; margin: 0 !important; padding: 0 !important; border: 0; overflow: visible; }
body.mxs-order-skin #frm_upgrade .mxs-native-step > .cus-panel { float: none; width: 100%; margin: 0; padding: 28px; border: 1px solid var(--mxs-border); border-radius: 20px; background: #fff; box-shadow: 0 4px 24px #1a365407; }
body.mxs-order-skin #frm_upgrade .mxs-native-step > .cus-panel::after { content: ""; display: table; clear: both; }
body.mxs-order-skin #frm_upgrade .mxs-native-step .cus-panel > :is(.col-sm-9, .col-sm-11) { float: none; width: 100%; padding: 0; }
body.mxs-order-skin #frm_upgrade .account_info_block { display: flex; flex-wrap: wrap; }
body.mxs-order-skin #frm_upgrade .account_info_block > .col-sm-6 { width: 50%; padding: 0 12px; }
body.mxs-order-skin #frm_upgrade .account_info_block > .col-sm-6:first-child { padding-left: 0; }
body.mxs-order-skin #frm_upgrade .account_info_block > .col-sm-6:last-child { padding-right: 0; }
body.mxs-order-skin #frm_upgrade .form-group { margin: 0 0 20px; }
body.mxs-order-skin #frm_upgrade .form-group > [class*="col-sm-"] { float: none; width: 100%; padding: 0; text-align: left; }
body.mxs-order-skin #frm_upgrade label.control-label { display: block; margin: 0 0 7px; padding: 0; color: #34404d; font-size: 12px; font-weight: 500; line-height: 1.6; text-transform: none; }
body.mxs-order-skin #frm_upgrade label.mxs-empty-label { display: none; }
body.mxs-order-skin #frm_upgrade :is(input.form-control, select.form-control, textarea.form-control) { width: 100%; min-width: 0; min-height: 49px; height: auto; padding: 11px 13px; border: 1px solid #cdd7e0; border-radius: 9px; background: #fff; color: #283440; font-size: 16px; font-weight: 400; line-height: 1.5; box-shadow: none; }
body.mxs-order-skin #frm_upgrade textarea.form-control { min-height: 98px; resize: vertical; }
body.mxs-order-skin #frm_upgrade .form-control:hover { border-color: #9ab3c8; }
body.mxs-order-skin #frm_upgrade .form-control:focus { outline: none; border-color: var(--mxs-blue); box-shadow: 0 0 0 3px #0074bd1f; }
body.mxs-order-skin #frm_upgrade :is(.form-control.error, .form-control[aria-invalid="true"]) { border-color: #bd453d; }
body.mxs-order-skin #frm_upgrade :is(label.error, span.error, .help-block) { float: none; width: auto; height: auto; margin: 7px 0 0; padding: 0; font-size: 12px; line-height: 1.7; white-space: normal; }
body.mxs-order-skin #frm_upgrade :is(label.error, span.error) { display: block; position: static; inset: auto; color: #a32b23 !important; }
body.mxs-order-skin #frm_upgrade .help-block { color: var(--mxs-muted); }
body.mxs-order-skin #frm_upgrade .cc-ym-wrapper { display: flex; gap: 14px; }
body.mxs-order-skin #frm_upgrade .cc-ym-wrapper > div { float: none; width: 50%; min-width: 0; padding: 0; }
body.mxs-order-skin #frm_upgrade .input-group { display: flex; align-items: stretch; gap: 10px; width: 100%; }
body.mxs-order-skin #frm_upgrade .input-group .form-control { float: none; flex: 1; width: 0; border-radius: 9px; }
body.mxs-order-skin #frm_upgrade .input-group-btn { display: flex; width: auto; }
body.mxs-order-skin #frm_upgrade .input-group-btn .btn { margin: 0; border-radius: 9px; }
body.mxs-order-skin #frm_upgrade .checkbox-wrapper-tt { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; min-height: 44px; }
body.mxs-order-skin #frm_upgrade #terms_and_condition { float: none; flex: 0 0 22px; width: 22px; height: 22px; min-height: 22px; margin: 11px 0 0; accent-color: var(--mxs-blue); }
body.mxs-order-skin #frm_upgrade label[for="terms_and_condition"] { display: block; flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 9px 0; color: var(--mxs-text); font-size: 13px; line-height: 1.8; cursor: pointer; }
body.mxs-order-skin #frm_upgrade .checkbox-wrapper-tt > label.error { order: 3; flex-basis: 100%; }
body.mxs-order-skin #frm_upgrade label[for="terms_and_condition"] a { color: var(--mxs-blue); text-decoration: underline; text-underline-offset: 3px; }
body.mxs-order-skin #frm_upgrade .alert { margin: 0 0 20px; padding: 15px 18px; border-radius: 10px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }

body.mxs-order-skin .mxs-plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; margin: 0; }
body.mxs-order-skin .mxs-plan-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 260px; padding: 23px 20px 0; border: 1px solid #d9e1e9; border-radius: 17px; background: #fff; color: var(--mxs-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; overflow-wrap: anywhere; }
body.mxs-order-skin .mxs-plan-card:hover { border-color: #99bad3; box-shadow: 0 5px 25px #1b30420a; }
body.mxs-order-skin .mxs-plan-card[aria-pressed="true"] { border-color: var(--mxs-blue); box-shadow: 0 0 0 1px var(--mxs-blue); }
body.mxs-order-skin .mxs-plan-kind { color: #526c81; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
body.mxs-order-skin .mxs-plan-name { display: block; margin-top: 16px; font-family: "MXS Sora", Sora, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.35; }
body.mxs-order-skin .mxs-plan-hardware { display: block; margin-top: 8px; color: var(--mxs-muted); font-size: 12px; line-height: 1.7; }
body.mxs-order-skin .mxs-plan-price { display: block; margin-top: 22px; font-family: "MXS Sora", Sora, sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.4; }
body.mxs-order-skin .mxs-plan-period { display: block; margin-top: 2px; color: var(--mxs-muted); font-size: 11px; }
body.mxs-order-skin .mxs-usd-price { display: block; margin: 5px 0 0; color: #607385; font-size: 11px; line-height: 1.6; }
body.mxs-order-skin .mxs-plan-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; margin-top: 24px; padding: 14px 0; border-top: 1px solid var(--mxs-border); color: var(--mxs-blue); font-size: 12px; font-weight: 600; }
body.mxs-order-skin .mxs-plan-selection::after { content: "+"; font-size: 19px; }
body.mxs-order-skin .mxs-plan-card[aria-pressed="true"] .mxs-plan-selection::after { content: "\2713"; }
body.mxs-order-skin .mxs-plan-card--featured[aria-pressed="true"] { border-color: #183c5b; background: radial-gradient(ellipse at top right, #163550, transparent 75%), #0a0d17; color: #fff; box-shadow: 0 0 0 1px #183c5b, 0 8px 25px #17365415; }
body.mxs-order-skin .mxs-plan-card--featured[aria-pressed="true"] .mxs-plan-kind { color: #b0d9f5; }
body.mxs-order-skin .mxs-plan-card--featured[aria-pressed="true"] :is(.mxs-plan-hardware, .mxs-plan-period) { color: #c2d2e0; }
body.mxs-order-skin .mxs-plan-card--featured[aria-pressed="true"] .mxs-usd-price { color: #a9c7dc; }
body.mxs-order-skin .mxs-plan-card--featured[aria-pressed="true"] .mxs-plan-selection { border-color: #354b5d; color: #b0d9f5; }
body.mxs-order-skin .mxs-plan-note { margin: 17px 0 22px; color: var(--mxs-muted); font-size: 12px; line-height: 1.8; }
body.mxs-order-skin .mxs-payment-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
body.mxs-order-skin .mxs-payment-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mxs-order-skin .mxs-payment-cards:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
body.mxs-order-skin .mxs-payment-card { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 72px; padding: 15px; border: 1px solid #d5dfe8; border-radius: 11px; background: #fff; color: #435469; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
body.mxs-order-skin .mxs-payment-card[aria-pressed="true"] { border-color: var(--mxs-blue); background: #f2f8fd; color: var(--mxs-blue); box-shadow: 0 0 0 1px var(--mxs-blue); }
body.mxs-order-skin .mxs-payment-card:hover { border-color: #99bad3; }

body.mxs-order-skin .mxs-order-summary { position: sticky; top: 28px; grid-column: 2; grid-row: 2 / span 5; min-width: 0; margin: 114px 0 0; }
body.mxs-order-skin .mxs-summary-disclosure { margin: 0; }
body.mxs-order-skin .mxs-summary-toggle { display: none; }
body.mxs-order-skin .mxs-summary-toggle:focus { display: flex; }
body.mxs-order-skin .mxs-summary-card { overflow: hidden; border: 1px solid var(--mxs-border); border-radius: 20px; background: #fff; box-shadow: 0 8px 30px #0b1a2908; }
body.mxs-order-skin .mxs-summary-rig { padding: 27px 24px 24px; background: radial-gradient(ellipse at right top, #173850, transparent 85%), #0a0d17; color: #fff; }
body.mxs-order-skin .mxs-summary-kicker { margin: 0 0 16px; color: #b3c9dc; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
body.mxs-order-skin .mxs-summary-rig h2 { margin: 0; color: #fff; font-family: "MXS Sora", Sora, sans-serif; font-size: 23px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.35; text-transform: none; overflow-wrap: anywhere; }
body.mxs-order-skin .mxs-summary-rig h2 + p { margin: 10px 0 0; color: #c1d0de; font-size: 12px; }
body.mxs-order-skin .mxs-summary-body { padding: 23px 24px; }
body.mxs-order-skin .mxs-summary-body h3 { margin: 0; color: var(--mxs-ink); font: 600 13px/1.5 "MXS Inter", Inter, sans-serif; text-transform: none; }
body.mxs-order-skin .mxs-price-breakdown { margin: 20px 0 0; }
body.mxs-order-skin .mxs-price-breakdown > div { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-top: 12px; color: var(--mxs-text); font-size: 12px; }
body.mxs-order-skin .mxs-price-breakdown dt { min-width: 0; font-weight: 400; }
body.mxs-order-skin .mxs-price-breakdown dd { min-width: 0; margin: 0; color: #26394a; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.mxs-order-skin .mxs-price-breakdown .mxs-price-total { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--mxs-border); color: var(--mxs-ink); }
body.mxs-order-skin .mxs-price-total dt { font-weight: 600; }
body.mxs-order-skin .mxs-price-total small { display: block; color: var(--mxs-muted); font-size: 10px; font-weight: 400; }
body.mxs-order-skin .mxs-price-total dd { color: var(--mxs-ink); font-family: "MXS Sora", Sora, sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -0.04em; }
body.mxs-order-skin .mxs-summary-note { margin: 18px 0 0; color: var(--mxs-muted); font-size: 11px; line-height: 1.8; }
body.mxs-order-skin #frm_upgrade .summary_up_wrapper { display: flow-root; }
body.mxs-order-skin #frm_upgrade .summary_up_wrapper > .col-sm-6 { float: none; width: 100%; padding: 0; }
body.mxs-order-skin #frm_upgrade .summary_up_wrapper > .col-sm-6 + .col-sm-6 { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mxs-border); }
body.mxs-order-skin #frm_upgrade .summary_up_wrapper h3 { margin: 0 0 20px; color: var(--mxs-ink); font-family: "MXS Sora", Sora, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.035em; text-transform: none; }
body.mxs-order-skin #frm_upgrade .summary_up_wrapper .form-group { margin-bottom: 15px; overflow-wrap: anywhere; }
body.mxs-order-skin #frm_upgrade .summary_up_wrapper .form-group > label { margin-bottom: 4px; color: var(--mxs-muted); font-size: 11px; }
body.mxs-order-skin #frm_upgrade .summary_up_wrapper .form-group > div { color: #26394a; font-size: 14px; line-height: 1.8; }
body.mxs-order-skin #frm_upgrade .u_coin_address_wrapper { clear: both; padding-top: 24px; }
body.mxs-order-skin #frm_upgrade .u_coin_address_wrapper > .col-sm-8 { float: none; width: 100%; padding: 0; }
body.mxs-order-skin #frm_upgrade .summ_coin_qr_code img { max-width: 100%; height: auto; }
body.mxs-order-skin #frm_upgrade .summary_block > .col-sm-12 { float: none; clear: both; width: 100%; padding: 0; }

body.mxs-order-skin #frm_upgrade > .actions { grid-column: 1; float: none; width: 100%; margin: 25px 0 0; padding: 0; }
body.mxs-order-skin #frm_upgrade > .actions > ul { display: flex; align-items: center; justify-content: space-between; gap: 16px; float: none; width: 100%; margin: 0; padding: 0; list-style: none; }
body.mxs-order-skin #frm_upgrade > .actions > ul::after { display: none; }
body.mxs-order-skin #frm_upgrade > .actions li { float: none; margin: 0; padding: 0; }
body.mxs-order-skin #frm_upgrade > .actions li:last-child { margin-left: auto; }
body.mxs-order-skin #frm_upgrade > .actions li.disabled { visibility: hidden; }
body.mxs-order-skin .mxs-button,
body.mxs-order-skin #frm_upgrade > .actions a,
body.mxs-order-skin #frm_upgrade .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; max-width: 100%; padding: 12px 24px; border: 1px solid transparent; border-radius: 999px; background: var(--mxs-blue); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.6; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; box-shadow: none; }
body.mxs-order-skin .mxs-button:hover,
body.mxs-order-skin #frm_upgrade > .actions a:hover,
body.mxs-order-skin #frm_upgrade .btn:hover { background: var(--mxs-blue-dark); color: #fff; }
body.mxs-order-skin #frm_upgrade > .actions a[href$="#previous"] { padding-inline: 0; background: transparent; color: var(--mxs-text); }
body.mxs-order-skin #frm_upgrade .btn-default { border-color: #cdd9e3; background: #fff; color: var(--mxs-ink); }
body.mxs-order-skin #frm_upgrade .btn-default:hover { border-color: var(--mxs-blue); background: #f2f8fd; color: var(--mxs-blue); }
body.mxs-order-skin #frm_upgrade .upgrade_frm_action { margin-top: 26px; }
body.mxs-order-skin #frm_upgrade .upgrade_frm_action > div { gap: 12px; flex-wrap: wrap; align-items: center; }
body.mxs-order-skin #frm_upgrade .upgrade_frm_action > div > div { display: inline-block; max-width: 100%; margin: 4px 8px 4px 0; vertical-align: middle; }
body.mxs-order-skin #frm_upgrade #paypal-subscription-button-container { width: min(100%, 320px) !important; min-width: 220px; margin-right: 0 !important; }
body.mxs-order-skin #frm_upgrade .paypal-checkout img { height: auto !important; max-width: 100%; max-height: 34px; margin: 0 !important; }
body.mxs-order-skin :is(.mxs-button, .mxs-plan-card, .mxs-payment-card):disabled { opacity: 0.65; cursor: not-allowed; }
body.mxs-order-skin .mxs-text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--mxs-blue); font: 600 12px/1.6 "MXS Inter", Inter, sans-serif; text-decoration: none; cursor: pointer; }
body.mxs-order-skin .mxs-text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
body.mxs-order-skin #connection-notice, body.mxs-order-skin .mxs-action-note { grid-column: 1; margin: 20px 0 0; padding: 14px 17px; border: 1px solid #dce8f2; border-radius: 10px; background: #f3f8fc; color: #355b79; font-size: 13px; line-height: 1.75; }
body.mxs-order-skin #connection-status { margin: 0; }

body.mxs-order-skin .mxs-dialog { position: fixed; inset: 0; width: min(510px, calc(100% - 32px)); height: fit-content; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 58px 32px 32px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--mxs-border); border-radius: 22px; background: #fff; color: var(--mxs-ink); box-shadow: 0 30px 100px #0b213640; }
body.mxs-order-skin .mxs-dialog:not([open]) { display: none; }
body.mxs-order-skin .mxs-dialog::backdrop { background: #0a152999; backdrop-filter: blur(4px); }
body.mxs-order-skin .mxs-dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--mxs-border); border-radius: 50%; background: #fff; color: var(--mxs-text); font-size: 26px; line-height: 1; cursor: pointer; }
body.mxs-order-skin .mxs-dialog h2 { margin: 10px 0 0; color: var(--mxs-ink); font-family: "MXS Sora", Sora, sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.3; text-transform: none; overflow-wrap: anywhere; }
body.mxs-order-skin .mxs-dialog > p:not(.mxs-kicker) { margin: 17px 0 0; color: var(--mxs-text); font-size: 14px; line-height: 1.85; }
body.mxs-order-skin .mxs-dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; }
body.mxs-order-skin .mxs-connection-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 60px 28px 28px; border-color: #e8bbb8; border-top: 5px solid #ad3029; border-radius: 18px; }
body.mxs-order-skin .mxs-connection-dialog h2 { margin-top: 0; color: #992c26; font-size: 26px; }
body.mxs-order-skin .mxs-connection-dialog > p { font-size: 13px; line-height: 1.75; }
body.mxs-order-skin #connection-metrics { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
body.mxs-order-skin #connection-metrics li { padding: 12px 14px; border: 1px solid #edc4c0; border-radius: 9px; background: #fff3f2; color: #8a2721; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.mxs-order-skin #connection-guidance { margin-top: 20px; padding: 16px; border: 1px solid #e5e9ee; border-radius: 10px; background: #f6f8fa; overflow-wrap: anywhere; }
body.mxs-order-skin #connection-guidance h3 { margin: 0; color: var(--mxs-ink); font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; text-transform: none; }
body.mxs-order-skin #connection-guidance p { margin: 8px 0 0; color: var(--mxs-text); font-size: 13px; line-height: 1.75; }
body.mxs-order-skin #connection-guidance strong { color: var(--mxs-ink); font-weight: 600; }
body.mxs-order-skin #connection-guidance #connection-workloads { margin: 14px -16px -16px; padding: 12px 16px; border-top: 1px solid #c9deed; border-radius: 0 0 9px 9px; background: #edf5fc; color: #235375; font-weight: 600; }
body.mxs-order-skin .mxs-connection-dialog .mxs-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
body.mxs-order-skin .mxs-connection-dialog .mxs-connection-acknowledge { width: 100%; background: #a72d26; color: #fff; }
body.mxs-order-skin .mxs-connection-dialog .mxs-connection-acknowledge:hover { background: #87241e; }

/* Keep native error/challenge controllers and their visibility decisions intact. */
body.mxs-order-skin .swal2-popup { width: min(36em, calc(100% - 24px)); padding: 28px; border: 1px solid var(--mxs-border); border-radius: 18px; font-family: "MXS Inter", Inter, sans-serif; }
body.mxs-order-skin .swal2-title { font-family: "MXS Sora", Sora, sans-serif; font-size: 24px; line-height: 1.4; text-transform: none; }
body.mxs-order-skin :is(.swal2-content, .swal2-html-container) { color: var(--mxs-text); font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
body.mxs-order-skin .swal2-actions button { min-height: 44px; border-radius: 999px; font: 600 14px/1.5 "MXS Inter", Inter, sans-serif; }
body.mxs-order-skin .modal-dialog { width: min(640px, calc(100% - 24px)); margin: 24px auto; }
body.mxs-order-skin .modal-content { border: 1px solid var(--mxs-border); border-radius: 18px; background: #fff; box-shadow: 0 30px 100px #0b213640; }
body.mxs-order-skin .modal-header { padding: 20px 24px; border-bottom-color: var(--mxs-border); }
body.mxs-order-skin .modal-title { color: var(--mxs-ink); font: 600 20px/1.4 "MXS Sora", Sora, sans-serif; letter-spacing: -0.03em; text-transform: none; }
body.mxs-order-skin .modal-body { padding: 24px; font-size: 15px; line-height: 1.8; }
body.mxs-order-skin .modal-footer { padding: 16px 24px; border-top-color: var(--mxs-border); }
body.mxs-order-skin .modal :is(button, .btn) { min-height: 44px; }
body.mxs-order-skin .modal .close { min-width: 44px; margin-top: -8px; font-size: 28px; }
body.mxs-order-skin .modal :is(input, select, textarea) { font-size: 16px; }
body.mxs-order-skin #threeDSModal .modal-dialog { width: min(680px, calc(100% - 24px)); }
body.mxs-order-skin #threeDSModal .modal-header { border-radius: 18px 18px 0 0; background: #fff; color: var(--mxs-ink); }
body.mxs-order-skin #threeDSModal iframe { width: 100%; max-width: 100%; min-height: 400px; border: 0; }
body.mxs-order-skin #tds-challenge-container { max-width: 100%; }
body.mxs-order-skin #tds-challenge-container iframe { max-width: 100%; }

body.mxs-order-skin .mxs-native-result { max-width: 1000px; }
body.mxs-order-skin .mxs-native-result > .container { padding: 36px; border: 1px solid var(--mxs-border); border-radius: 20px; background: #fff; }
body.mxs-order-skin .mxs-native-result .main_content { position: static !important; left: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.mxs-order-skin .mxs-native-result .nt-column { float: none; width: 100%; margin: 0; padding: 0; }
body.mxs-order-skin .mxs-native-result .site-heading { margin: 0 auto 28px; padding: 0; }
body.mxs-order-skin .mxs-native-result h2 { margin: 12px 0 20px; color: var(--mxs-ink); font-family: "MXS Sora", Sora, sans-serif; font-size: clamp(27px, 4vw, 40px); font-weight: 600; line-height: 1.3; letter-spacing: -0.04em; text-transform: none; }
body.mxs-order-skin .mxs-native-result h3 { max-width: 650px; margin: 18px auto; color: var(--mxs-text); font: 400 16px/1.9 "MXS Inter", Inter, sans-serif; text-transform: none; }
body.mxs-order-skin .mxs-native-result .vc_custom_heading { margin-top: 32px; text-align: center; font-size: 19px; }
body.mxs-order-skin .mxs-native-result .sec_title_1541352243086 h2 { font-size: 21px; }
body.mxs-order-skin .mxs-native-result .discord_logo { width: auto; max-width: min(240px, 100%); max-height: 100px; object-fit: contain; }
body.mxs-order-skin .mxs-native-result a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mxs-blue); }
body.mxs-order-skin .mxs-result-journey { margin-bottom: 36px; }
body.mxs-order-skin .mxs-result-journey ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
body.mxs-order-skin .mxs-result-journey li { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--mxs-muted); font-size: 12px; }
body.mxs-order-skin .mxs-result-journey [aria-current="step"] { color: var(--mxs-blue); font-weight: 700; }
body.mxs-order-skin .mxs-result-journey [aria-current="step"] .mxs-journey-number { border-color: var(--mxs-blue); background: var(--mxs-blue); color: #fff; }
body.mxs-order-skin .mxs-order-footer { border-top: 1px solid var(--mxs-border); background: #fff; }
body.mxs-order-skin .mxs-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 86px; padding-block: 18px; color: var(--mxs-muted); font-size: 12px; }
body.mxs-order-skin .mxs-footer-inner p { margin: 0; }
body.mxs-order-skin .mxs-footer-inner a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mxs-blue); text-decoration: none; }

@media (min-width: 1001px) and (max-width: 1200px) {
  body.mxs-order-skin #frm_upgrade.mxs-native-wizard { grid-template-columns: minmax(0, 1fr) 280px; gap: 0 24px; }
  body.mxs-order-skin #frm_upgrade[data-mxs-step="details"] { grid-template-columns: minmax(0, 1fr); }
  body.mxs-order-skin #frm_upgrade[data-mxs-step="rig"] > .mxs-wizard-content { grid-column: 1 / -1; }
  body.mxs-order-skin #frm_upgrade[data-mxs-step="rig"] .mxs-order-summary { position: static; grid-row: 4 / span 3; margin-top: 24px; }
  body.mxs-order-skin .mxs-plan-card { padding-inline: 24px; }
}
@media (max-width: 1000px) {
  body.mxs-order-skin .mxs-wrap, body.mxs-order-skin .mxs-native-page { width: calc(100% - 48px); }
  body.mxs-order-skin .mxs-brand-tagline { display: none; }
  body.mxs-order-skin #frm_upgrade.mxs-native-wizard { grid-template-columns: minmax(0, 1fr); max-width: 840px; gap: 0; }
  body.mxs-order-skin .mxs-order-summary { position: static; grid-column: 1; grid-row: auto; margin: 24px 0 0; }
  body.mxs-order-skin .mxs-summary-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 82px; padding: 15px 18px; list-style: none; border: 1px solid #cfdeeb; border-radius: 13px; background: #f0f7fc; color: #234560; cursor: pointer; }
  body.mxs-order-skin .mxs-summary-toggle::-webkit-details-marker { display: none; }
  body.mxs-order-skin .mxs-summary-toggle > span { min-width: 0; }
  body.mxs-order-skin .mxs-summary-toggle small { display: block; color: #526879; font-size: 11px; font-weight: 400; }
  body.mxs-order-skin .mxs-summary-toggle strong { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  body.mxs-order-skin .mxs-summary-hint { display: block; margin-top: 3px; color: var(--mxs-blue); font-size: 11px; }
  body.mxs-order-skin .mxs-compact-price { max-width: 45%; margin-left: auto; text-align: right; }
  body.mxs-order-skin .mxs-compact-price strong { color: var(--mxs-ink); font-family: "MXS Sora", Sora, sans-serif; font-size: 20px; letter-spacing: -0.035em; }
  body.mxs-order-skin .mxs-summary-disclosure[open] .mxs-summary-card { margin-top: 12px; }
  body.mxs-order-skin .mxs-summary-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.mxs-order-skin #frm_upgrade > .steps { margin-bottom: 34px; }
  body.mxs-order-skin #frm_upgrade > .steps > ul { gap: 8px; }
  body.mxs-order-skin #frm_upgrade > .steps li > a, body.mxs-order-skin #frm_upgrade > .steps .mxs-confirmation-step > span { gap: 7px; font-size: 11px; }
}
@media (max-width: 600px) {
  body.mxs-order-skin .mxs-wrap, body.mxs-order-skin .mxs-native-page { width: calc(100% - 32px); }
  body.mxs-order-skin .mxs-header-inner { min-height: 74px; gap: 12px; }
  body.mxs-order-skin .mxs-brand { min-width: 0; }
  body.mxs-order-skin .mxs-brand img { width: auto; height: 34px; max-width: 145px; }
  body.mxs-order-skin .mxs-header-links { gap: 12px; }
  body.mxs-order-skin .mxs-header-links :is(a, button) { font-size: 11px; }
  body.mxs-order-skin .mxs-header-links .mxs-home-link { display: none; }
  body.mxs-order-skin .mxs-native-page { padding-top: 18px; padding-bottom: 44px; }
  body.mxs-order-skin #frm_upgrade > .steps { margin-bottom: 26px; }
  body.mxs-order-skin #frm_upgrade > .steps > ul { gap: 4px; }
  body.mxs-order-skin #frm_upgrade > .steps li > a, body.mxs-order-skin #frm_upgrade > .steps .mxs-confirmation-step > span { justify-content: center; gap: 0; min-height: 44px; font-size: 0; text-align: center; }
  body.mxs-order-skin .mxs-order-progress { margin-top: 10px; color: var(--mxs-blue); font-size: 12px; }
  body.mxs-order-skin .mxs-screen-heading { margin-bottom: 23px; }
  body.mxs-order-skin .mxs-screen-heading h1 { font-size: clamp(27px, 6vw, 34px); }
  body.mxs-order-skin .mxs-heading-description { font-size: 13px; line-height: 1.8; }
  body.mxs-order-skin #frm_upgrade .mxs-native-step > .cus-panel { padding: 23px 20px; border-radius: 16px; }
  body.mxs-order-skin #frm_upgrade .account_info_block > .col-sm-6 { float: none; width: 100%; padding: 0; }
  body.mxs-order-skin #frm_upgrade .form-group { margin-bottom: 19px; }
  body.mxs-order-skin #frm_upgrade :is(input.form-control, select.form-control, textarea.form-control) { min-height: 51px; font-size: 16px; }
  body.mxs-order-skin .mxs-plan-cards { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  body.mxs-order-skin .mxs-plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; min-height: 0; padding: 22px 23px 0; }
  body.mxs-order-skin .mxs-plan-kind { grid-column: 1 / -1; }
  body.mxs-order-skin .mxs-plan-name { grid-column: 1; grid-row: 2 / span 2; align-self: center; margin-top: 13px; font-size: 23px; }
  body.mxs-order-skin .mxs-plan-price { grid-column: 2; grid-row: 2; margin-top: 12px; font-size: 26px; text-align: right; }
  body.mxs-order-skin .mxs-plan-period { grid-column: 2; grid-row: 3; text-align: right; }
  body.mxs-order-skin .mxs-plan-hardware { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; font-size: 12px; }
  body.mxs-order-skin .mxs-plan-card .mxs-usd-price { grid-column: 1 / -1; grid-row: 5; margin-top: 7px; }
  body.mxs-order-skin .mxs-plan-selection { grid-column: 1 / -1; grid-row: 6; margin-top: 20px; }
  body.mxs-order-skin .mxs-payment-cards { gap: 8px; }
  body.mxs-order-skin .mxs-payment-card { min-height: 68px; padding: 13px 8px; font-size: 12px; }
  body.mxs-order-skin .mxs-summary-card { display: block; }
  body.mxs-order-skin .mxs-summary-note { font-size: 12px; }
  body.mxs-order-skin #frm_upgrade > .actions { margin-top: 23px; }
  body.mxs-order-skin #frm_upgrade > .actions > ul { gap: 12px; }
  body.mxs-order-skin #frm_upgrade > .actions a { padding: 12px 18px; font-size: 12px; }
  body.mxs-order-skin #frm_upgrade #paypal-subscription-button-container { min-width: 0; width: 100% !important; }
  body.mxs-order-skin .mxs-dialog { padding: 58px 24px 28px; }
  body.mxs-order-skin .mxs-dialog h2 { font-size: 24px; }
  body.mxs-order-skin .mxs-connection-dialog { padding-inline: 20px; padding-bottom: 22px; }
  body.mxs-order-skin .mxs-connection-dialog h2 { font-size: 23px; }
  body.mxs-order-skin .mxs-connection-acknowledge { padding-inline: 14px; }
  body.mxs-order-skin .modal-dialog { margin: 12px auto; }
  body.mxs-order-skin .modal-body { padding: 18px; }
  body.mxs-order-skin #threeDSModal .modal-body { padding: 12px; }
  body.mxs-order-skin #threeDSModal iframe { min-height: 440px; }
  body.mxs-order-skin .mxs-native-result > .container { padding: 26px 20px; border-radius: 16px; }
  body.mxs-order-skin .mxs-native-result h3 { font-size: 14px; }
  body.mxs-order-skin .mxs-result-journey { margin-bottom: 26px; }
  body.mxs-order-skin .mxs-result-journey ol { gap: 4px; }
  body.mxs-order-skin .mxs-result-journey li { flex-direction: column; gap: 8px; font-size: 10px; text-align: center; }
  body.mxs-order-skin .mxs-result-journey li > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.mxs-order-skin .mxs-footer-inner { flex-direction: column; align-items: flex-start; gap: 3px; padding-block: 20px; font-size: 11px; }
}
@media (max-width: 360px) {
  body.mxs-order-skin .mxs-header-links > a { display: none; }
  body.mxs-order-skin .mxs-plan-card { grid-template-columns: minmax(0, 1fr); padding-inline: 19px; }
  body.mxs-order-skin .mxs-plan-card > span, body.mxs-order-skin .mxs-plan-name { grid-column: 1; grid-row: auto; text-align: left; }
  body.mxs-order-skin .mxs-plan-name { margin-top: 12px; }
  body.mxs-order-skin .mxs-payment-cards, body.mxs-order-skin .mxs-payment-cards:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  body.mxs-order-skin .mxs-payment-card { min-height: 48px; }
  body.mxs-order-skin #frm_upgrade > .actions > ul { flex-wrap: wrap; }
  body.mxs-order-skin #frm_upgrade > .actions a { padding-inline: 14px; }
  body.mxs-order-skin #frm_upgrade .mxs-native-step > .cus-panel { padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mxs-order-skin *, body.mxs-order-skin *::before, body.mxs-order-skin *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  body.mxs-order-skin :is(.mxs-plan-card, .mxs-payment-card, .mxs-summary-rig, .mxs-dialog, .mxs-button, .mxs-summary-toggle) { border: 1px solid CanvasText; }
  body.mxs-order-skin :is(.mxs-plan-card, .mxs-payment-card)[aria-pressed="true"] { outline: 2px solid Highlight; }
}
