/* ========================================================================== OmniResponse — customer area design system (stage F, 2026-10-03; supersedes the stage-E colour-only file) Loaded by mu-plugin omni-account-styles.php ONLY on pages whose content contains one of the account shortcodes ([login_form], [omni_forgot_password], [omni_reset_password], [account_dashboard], [subscription_portal], [edit_profile_form], [omni_mfa_settings], [app_subdomain_setup], [omni_checkout_success]); body.omni-account-page. One layer for all customer-area screens so they read as the same product as the public pages (stage C/D): Inter, the dark navy brand palette, flat panels on a 1px line, one primary button style, orange uppercase eyebrows, solid status badges with dark text, the same field treatment as the public forms, the brand focus ring. Tokens are literal hex (same values as the stage-C Kadence palette, INVENTORY §5) so the file also works on a site that is still on the pre-stage-C palette. Specificity: every rule is prefixed with body.omni-account-page so it wins over the plugin stylesheet (portal.css) and over Kadence without !important; !important is used only against inline style attributes and against Kadence rules that are themselves !important. Sections: 0 tokens · 1 page frame · 2 type & header · 3 panels, rows, badges · 4 buttons · 5 fields · 6 notices, empty states · 7 login / password · 8 account overview · 9 subscription portal (sp-*) · 10 profile / MFA · 11 subdomain setup · 12 checkout success · 13 motion & print ========================================================================== */ /* -------------------------------------------------------------------------- 0. Tokens -------------------------------------------------------------------------- */ body.omni-account-page { --oa-base: #0B1A2E; /* palette9: page background, text on coloured buttons/badges */ --oa-alt: #17293D; /* palette8: inset blocks inside a card */ --oa-card: #1E3654; /* palette7: panel background */ --oa-line: #2A4A73; /* card line (brand --omni-card-line) */ --oa-line-soft: #24405F; /* row separators inside a card */ --oa-navy: #072B5F; /* accent section (featured / highlighted) */ --oa-primary: #039EEA; /* palette1: primary button */ --oa-primary-hover: #6FC6F5; /* palette2: hover, links, secondary button line */ --oa-on-color: #0B1A2E; /* text on every coloured surface */ --oa-link: #6FC6F5; /* palette2 */ --oa-text: #E4F1FC; /* palette4: body text */ --oa-heading: #F5F9FD; /* palette3: headings, strong */ --oa-text-2: #B9D2EC; /* palette5: secondary text, labels */ --oa-border: #7C98BC; /* palette6: field borders */ --oa-success: #5CC98A; /* palette11 */ --oa-info: #6FC6F5; /* palette12 */ --oa-error: #FF8F80; /* palette13 */ --oa-warning: #F5B04C; /* palette14 */ --oa-orange: #E8952B; /* palette15: eyebrows */ --oa-focus: #F2A94E; /* brand focus ring */ --oa-radius: 12px; --oa-radius-sm: 8px; --oa-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --oa-w-wide: 1080px; /* account overview, subscription portal */ --oa-w-form: 760px; /* profile, MFA, subdomain setup */ --oa-w-auth: 520px; /* login, password reset, checkout success */ --oa-gap: 24px; /* kept for backwards compatibility with the stage-E names */ --oa-card-dark: #17293D; --oa-neutral: #7C98BC; } /* -------------------------------------------------------------------------- 1. Page frame: one background, one content width, the same top/bottom rhythm on every account page. The pages are Kadence/core column blocks with a hard-coded 25/50/25 split and old gradient backgrounds; the shortcode output is the only content, so the layout is normalised here instead of editing nine pages twice. -------------------------------------------------------------------------- */ body.omni-account-page, body.omni-account-page .site-container, body.omni-account-page .content-bg, body.omni-account-page .entry-content > .wp-block-kadence-column > .kt-inside-inner-col { background-color: var(--oa-base) !important; background-image: none !important; } body.omni-account-page .entry-content > .wp-block-kadence-column > .kt-inside-inner-col::before { display: none !important; } body.omni-account-page .entry-content > .wp-block-kadence-column > .kt-inside-inner-col { padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.omni-account-page .entry-content .wp-block-columns { display: block; margin: 0 auto !important; padding: 0 !important; } body.omni-account-page .entry-content .wp-block-columns > .wp-block-column:empty { display: none; } body.omni-account-page .entry-content .wp-block-columns > .wp-block-column { flex-basis: auto !important; width: 100%; max-width: none; margin: 0; } /* The login/reset card is a nested Kadence column with its own gradient — flatten it, the card style comes from .oa-card. */ body.omni-account-page .wp-block-column > .wp-block-kadence-column > .kt-inside-inner-col { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } body.omni-account-page .wp-block-column > .wp-block-kadence-column > .kt-inside-inner-col::before { display: none !important; } /* The site header is transparent and overlays the content (Kadence "transparent header"), so the content needs its own top offset: header height (80px desktop, 70px mobile) + the page rhythm. */ body.omni-account-page .entry-content { padding: calc(var(--omni-header-h, 80px) + 44px) 0 88px; } body.omni-account-page .entry-content > p:empty, body.omni-account-page .entry-content > p:last-child:empty { display: none; } @media (max-width: 1024px) { body.omni-account-page .entry-content { padding-top: calc(70px + 28px); } } @media (max-width: 767px) { body.omni-account-page .entry-content { padding: calc(70px + 24px) 0 64px; } } /* -------------------------------------------------------------------------- 2. Type, page header, shared primitives -------------------------------------------------------------------------- */ body.omni-account-page .oa, body.omni-account-page .sp-portal { font-family: var(--oa-font); color: var(--oa-text); font-size: 16px; line-height: 1.6; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } body.omni-account-page .oa p { max-width: none; } body.omni-account-page .oa-wide { max-width: var(--oa-w-wide); } body.omni-account-page .oa-form { max-width: var(--oa-w-form); } body.omni-account-page .oa-auth { max-width: var(--oa-w-auth); } body.omni-account-page .oa * { box-sizing: border-box; } body.omni-account-page .oa-eyebrow { color: var(--oa-orange); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; } body.omni-account-page .oa-head { margin: 0 0 28px; } body.omni-account-page .oa-head h1, body.omni-account-page .oa-title { font-family: var(--oa-font); font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--oa-heading); letter-spacing: -0.01em; margin: 0 0 8px; text-wrap: balance; } body.omni-account-page .oa-lead { color: var(--oa-text-2); font-size: 17px; line-height: 1.55; margin: 0; max-width: 62ch; } body.omni-account-page .oa-auth .oa-head { text-align: center; } body.omni-account-page .oa-auth .oa-lead { margin-left: auto; margin-right: auto; } body.omni-account-page .oa-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } body.omni-account-page .oa-head-row > div { min-width: 0; } body.omni-account-page .oa-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } body.omni-account-page .oa-head-note { color: var(--oa-text-2); font-size: 14px; margin: 0; text-align: right; max-width: 34ch; } @media (max-width: 767px) { body.omni-account-page .oa-head h1, body.omni-account-page .oa-title { font-size: 28px; } body.omni-account-page .oa-lead { font-size: 16px; } body.omni-account-page .oa-head-row { flex-direction: column; align-items: stretch; } body.omni-account-page .oa-head-actions { align-items: stretch; } body.omni-account-page .oa-head-note { text-align: left; max-width: none; } } body.omni-account-page .oa-back, body.omni-account-page .sp-portal .sp-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--oa-link); font-size: 15px; font-weight: 600; text-decoration: none; margin: 0 0 20px; min-height: 32px; transition: none; transform: none; } body.omni-account-page .oa-back:hover, body.omni-account-page .sp-portal .sp-back-link:hover { color: var(--oa-heading); text-decoration: underline; text-underline-offset: 0.2em; transform: none; } body.omni-account-page .oa a:not([class]) { color: var(--oa-link); } body.omni-account-page .oa strong { color: var(--oa-heading); font-weight: 600; } body.omni-account-page .oa-muted { color: var(--oa-text-2); font-size: 14px; } body.omni-account-page .oa-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 0.95em; color: var(--oa-link); } /* Focus (same as the public pages) */ body.omni-account-page .oa :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible, body.omni-account-page .sp-portal :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible, body.omni-account-page dialog :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--oa-focus) !important; outline-offset: 2px !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- 3. Panels, key/value rows, badges -------------------------------------------------------------------------- */ body.omni-account-page .oa-card { background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: var(--oa-radius); padding: 24px 28px 28px; margin: 0 0 var(--oa-gap); color: var(--oa-text); transition: none; transform: none; box-shadow: none; scroll-margin-top: 100px; } body.omni-account-page .oa-card:hover { transform: none; box-shadow: none; border-color: var(--oa-line); } body.omni-account-page .oa-card--accent { background: var(--oa-navy); border-color: #1C4A86; } body.omni-account-page .oa-card--inset { background: var(--oa-alt); } body.omni-account-page .oa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; } body.omni-account-page .oa-card h2, body.omni-account-page .oa-card-title { font-family: var(--oa-font); font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--oa-heading); margin: 0 0 16px; padding: 0; border: 0; display: block; } body.omni-account-page .oa-card-head h2, body.omni-account-page .oa-card-head .oa-card-title { margin: 0; } body.omni-account-page .oa-card h3 { font-family: var(--oa-font); font-size: 16px; font-weight: 600; color: var(--oa-heading); margin: 24px 0 12px; } body.omni-account-page .oa-card p { color: var(--oa-text); font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; } body.omni-account-page .oa-card p:last-child { margin-bottom: 0; } body.omni-account-page .oa-card .oa-muted { color: var(--oa-text-2); } body.omni-account-page .oa-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oa-gap); align-items: start; } @media (max-width: 860px) { body.omni-account-page .oa-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 767px) { body.omni-account-page .oa-card { padding: 20px 18px 22px; } } body.omni-account-page .oa-rows { margin: 0 0 4px; } body.omni-account-page .oa-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--oa-line-soft); font-size: 15.5px; } body.omni-account-page .oa-row:last-child { border-bottom: 0; } body.omni-account-page .oa-row > span:first-child, body.omni-account-page .oa-row-label { color: var(--oa-text-2); font-weight: 500; flex: 0 0 auto; } body.omni-account-page .oa-row > span:first-child strong { color: var(--oa-text-2); font-weight: 500; } body.omni-account-page .oa-row > span:last-child, body.omni-account-page .oa-row-value { color: var(--oa-heading); text-align: right; min-width: 0; overflow-wrap: anywhere; } @media (max-width: 480px) { body.omni-account-page .oa-row { flex-direction: column; align-items: flex-start; gap: 4px; } body.omni-account-page .oa-row > span:last-child, body.omni-account-page .oa-row-value { text-align: left; } } body.omni-account-page .oa-badge, body.omni-account-page .oa .status-badge, body.omni-account-page .oa .addons-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; background: var(--oa-border); color: var(--oa-on-color); white-space: nowrap; box-shadow: none; } body.omni-account-page :is(.oa-badge--ok, .status-active, .status-enabled) { background: var(--oa-success) !important; color: var(--oa-on-color) !important; } body.omni-account-page :is(.oa-badge--warn, .status-trialing) { background: var(--oa-warning) !important; color: var(--oa-on-color) !important; } body.omni-account-page :is(.oa-badge--err, .status-inactive, .status-disabled) { background: var(--oa-error) !important; color: var(--oa-on-color) !important; } body.omni-account-page :is(.oa-badge--info) { background: var(--oa-info) !important; color: var(--oa-on-color) !important; } body.omni-account-page :is(.oa-badge--muted, .addons-badge.zero) { background: transparent !important; color: var(--oa-text-2) !important; border: 1px solid var(--oa-line); } body.omni-account-page .oa .addons-badge:not(.zero) { background: var(--oa-primary); color: var(--oa-on-color); } /* -------------------------------------------------------------------------- 4. Buttons: primary (filled brand blue), secondary (outline), danger (outline red), text; sizes sm / block. The old template classes are mapped onto the same three styles. -------------------------------------------------------------------------- */ body.omni-account-page :is( .oa-btn, .oa .account-btn, .oa .launch-app-btn, .oa .profile-btn, .oa .mfa-btn, .oa .subdomain-btn, .oa .omni-success-btn, .oa .login-form button[type="submit"], .oa #verify-2fa-btn, .oa #verify-backup-btn, .oa .fpwd-btn, .oa .rpwd-btn, .oa .cta-button, .sp-portal .sp-button ) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: var(--oa-radius-sm); border: 2px solid transparent; font-family: var(--oa-font); font-size: 15.5px; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; transform: none; box-shadow: none; white-space: normal; text-align: center; } /* primary */ body.omni-account-page :is( .oa-btn--primary, .oa .account-btn:not(.secondary):not(.logout-btn):not(.view-invoice-btn), .oa .launch-app-btn, .oa .profile-btn, .oa .mfa-btn:not(.danger):not(.oa-btn--secondary), .oa .subdomain-btn, .oa .omni-success-btn, .oa .login-form button[type="submit"], .oa #verify-2fa-btn, .oa #verify-backup-btn, .oa .fpwd-btn, .oa .rpwd-btn, .oa .cta-button, .sp-portal .sp-button-primary, .sp-portal .sp-button-success, .sp-portal .sp-button-warning, .sp-portal .sp-payment-failed-notice .sp-button-primary, .sp-portal .sp-suspended-notice .sp-button-primary, #sp-send-feedback-stay ) { background: var(--oa-primary) !important; border-color: var(--oa-primary) !important; color: var(--oa-on-color) !important; } body.omni-account-page :is( .oa-btn--primary, .oa .account-btn:not(.secondary):not(.logout-btn):not(.view-invoice-btn), .oa .launch-app-btn, .oa .profile-btn, .oa .mfa-btn:not(.danger):not(.oa-btn--secondary), .oa .subdomain-btn, .oa .omni-success-btn, .oa .login-form button[type="submit"], .oa #verify-2fa-btn, .oa #verify-backup-btn, .oa .fpwd-btn, .oa .rpwd-btn, .oa .cta-button, .sp-portal .sp-button-primary, .sp-portal .sp-button-success, .sp-portal .sp-button-warning, .sp-portal .sp-payment-failed-notice .sp-button-primary, .sp-portal .sp-suspended-notice .sp-button-primary, #sp-send-feedback-stay ):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { background: var(--oa-primary-hover) !important; border-color: var(--oa-primary-hover) !important; color: var(--oa-on-color) !important; transform: none; box-shadow: none; } body.omni-account-page #sp-send-feedback-stay .sp-button-text, body.omni-account-page .oa .omni-success-btn :is(span, svg) { color: inherit !important; } /* secondary */ body.omni-account-page :is( .oa-btn--secondary, .oa .account-btn.secondary, .oa .view-invoice-btn, .oa .mfa-btn.oa-btn--secondary, .oa .back-to-login, .sp-portal .sp-button-outline ) { background: transparent !important; border-color: var(--oa-primary-hover) !important; color: var(--oa-heading) !important; } body.omni-account-page :is( .oa-btn--secondary, .oa .account-btn.secondary, .oa .view-invoice-btn, .oa .mfa-btn.oa-btn--secondary, .sp-portal .sp-button-outline ):is(:hover, :focus-visible):not(:disabled) { background: var(--oa-primary-hover) !important; border-color: var(--oa-primary-hover) !important; color: var(--oa-on-color) !important; transform: none; } /* danger (outline; fills on hover) */ body.omni-account-page :is( .oa-btn--danger, .oa .logout-btn, .oa .mfa-btn.danger, .sp-portal .sp-button-danger, .sp-portal .sp-button-danger-outline ) { background: transparent !important; border-color: var(--oa-error) !important; color: var(--oa-error) !important; margin-top: 0; } body.omni-account-page :is( .oa-btn--danger, .oa .logout-btn, .oa .mfa-btn.danger, .sp-portal .sp-button-danger, .sp-portal .sp-button-danger-outline ):is(:hover, :focus-visible):not(:disabled) { background: var(--oa-error) !important; border-color: var(--oa-error) !important; color: var(--oa-on-color) !important; transform: none; box-shadow: none; } /* text button */ body.omni-account-page :is(.oa-btn--text, .oa .back-to-login, .sp-portal .sp-button-text) { background: transparent !important; border-color: transparent !important; color: var(--oa-link) !important; padding-left: 8px; padding-right: 8px; } body.omni-account-page :is(.oa-btn--text, .oa .back-to-login, .sp-portal .sp-button-text):is(:hover, :focus-visible) { color: var(--oa-heading) !important; text-decoration: underline; text-underline-offset: 0.2em; } body.omni-account-page .sp-portal .sp-button .sp-button-text { padding: 0; } /* sizes */ body.omni-account-page :is(.oa-btn--sm, .sp-portal .sp-button-sm, .oa .pay-now-btn, .oa .view-invoice-btn) { min-height: 36px; padding: 6px 14px; font-size: 14px; } body.omni-account-page :is(.oa-btn--block, .oa .btn-group-single .account-btn, .oa .btn-group .account-btn, .oa .launch-app-btn, .oa .subdomain-btn, .oa .omni-success-btn, .oa .login-form button[type="submit"], .oa #verify-2fa-btn, .oa #verify-backup-btn, .oa .fpwd-btn, .oa .rpwd-btn) { width: 100%; } body.omni-account-page :is(.oa-btn, .oa .account-btn, .oa .launch-app-btn, .oa .profile-btn, .oa .mfa-btn, .oa .subdomain-btn, .sp-portal .sp-button):disabled, body.omni-account-page :is(.oa-btn, .oa .launch-app-btn)[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; } body.omni-account-page .oa-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } body.omni-account-page .oa-actions--split { justify-content: space-between; align-items: center; } body.omni-account-page .oa .btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } body.omni-account-page .oa .btn-group-single { margin-top: 20px; } body.omni-account-page .oa .btn-group-single + .btn-group-single { margin-top: 12px; } @media (max-width: 600px) { body.omni-account-page .oa .btn-group { grid-template-columns: 1fr; } body.omni-account-page .oa-actions > * { width: 100%; } } /* -------------------------------------------------------------------------- 5. Fields: same as the public Kadence forms (navy field, 1px palette6 line, 48px, radius 8, orange focus ring) -------------------------------------------------------------------------- */ body.omni-account-page .oa label, body.omni-account-page .oa .form-group label, body.omni-account-page .oa .login-field label, body.omni-account-page .oa .fpwd-field label, body.omni-account-page .oa .rpwd-field label, body.omni-account-page .oa .subdomain-label { display: block; color: var(--oa-heading); font-weight: 600; font-size: 15px; margin: 0 0 6px; font-family: var(--oa-font); } body.omni-account-page .oa input[type="text"], body.omni-account-page .oa input[type="email"], body.omni-account-page .oa input[type="password"], body.omni-account-page .oa input[type="number"], body.omni-account-page .oa select, body.omni-account-page .oa textarea, body.omni-account-page .oa .info-display { width: 100%; min-height: 48px; height: auto; padding: 12px 14px; background: var(--oa-base); color: var(--oa-text); border: 1px solid var(--oa-border); border-radius: var(--oa-radius-sm); font-family: var(--oa-font); font-size: 16px; line-height: 1.4; box-shadow: none; transition: border-color 0.15s ease; } body.omni-account-page .oa input:focus, body.omni-account-page .oa select:focus, body.omni-account-page .oa textarea:focus { border-color: var(--oa-link); background: var(--oa-base); color: var(--oa-text); box-shadow: none; } body.omni-account-page .oa input::placeholder, body.omni-account-page .oa textarea::placeholder { color: var(--oa-border); opacity: 1; } body.omni-account-page .oa input:disabled, body.omni-account-page .oa input[readonly] { color: var(--oa-text-2); background: var(--oa-alt); border-style: dashed; opacity: 1; cursor: default; } body.omni-account-page .oa input[type="checkbox"], body.omni-account-page .oa input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--oa-primary); margin: 0 10px 0 0; } body.omni-account-page .oa .form-help, body.omni-account-page .oa .fpwd-help, body.omni-account-page .oa .rpwd-help, body.omni-account-page .oa-help { color: var(--oa-text-2); font-size: 14px; line-height: 1.5; margin: 6px 0 0; } body.omni-account-page .oa .form-group { margin-bottom: 20px; } body.omni-account-page .oa .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { body.omni-account-page .oa .form-row { grid-template-columns: 1fr; } } /* one-time code fields */ body.omni-account-page .oa .otp-input, body.omni-account-page .oa .verify-input { width: 220px; max-width: 100%; margin: 0 auto; display: block; text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 24px; letter-spacing: 0.3em; padding: 12px; } body.omni-account-page .oa .otp-input::placeholder, body.omni-account-page .oa .verify-input::placeholder { letter-spacing: 0.3em; font-size: 24px; } /* Select2 (profile country) */ body.omni-account-page .select2-container--default .select2-selection--single { background: var(--oa-base); border: 1px solid var(--oa-border); border-radius: var(--oa-radius-sm); height: 48px; padding: 6px 12px; } body.omni-account-page .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--oa-text); line-height: 34px; padding-left: 2px; font-family: var(--oa-font); } body.omni-account-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } body.omni-account-page .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--oa-text-2) transparent transparent transparent; } body.omni-account-page .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--oa-link); box-shadow: none; } body.omni-account-page .select2-container--default.select2-container--focus .select2-selection--single { outline: 2px solid var(--oa-focus); outline-offset: 2px; } .select2-dropdown.oa-select2, body.omni-account-page .select2-dropdown { background: var(--oa-base, #0B1A2E); border: 1px solid var(--oa-border, #7C98BC); border-radius: 8px; color: #E4F1FC; font-family: "Inter", "Segoe UI", system-ui, sans-serif; } body.omni-account-page .select2-search--dropdown .select2-search__field { background: var(--oa-alt); border: 1px solid var(--oa-border); color: var(--oa-text); border-radius: 6px; padding: 8px; } body.omni-account-page .select2-results__option { color: var(--oa-text); padding: 10px 12px; } body.omni-account-page .select2-results__option--highlighted { background: var(--oa-card) !important; color: var(--oa-heading) !important; } body.omni-account-page .select2-results__option[aria-disabled="true"] { color: var(--oa-text-2); font-weight: 600; } body.omni-account-page .select2-results__option[aria-selected="true"] { background: var(--oa-alt); } /* -------------------------------------------------------------------------- 6. Notices (inline status messages), empty states -------------------------------------------------------------------------- */ body.omni-account-page .oa-notice, body.omni-account-page .oa .login-message, body.omni-account-page .oa .fpwd-msg, body.omni-account-page .oa .rpwd-msg, body.omni-account-page .oa .profile-message, body.omni-account-page .oa .mfa-message, body.omni-account-page .oa .subdomain-message, body.omni-account-page .oa .info-box, body.omni-account-page .oa .subdomain-warning, body.omni-account-page .oa .subdomain-suggestion { display: none; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--oa-radius-sm); border: 1px solid var(--oa-line); border-left-width: 4px; background: var(--oa-alt); color: var(--oa-text); font-size: 15px; line-height: 1.55; margin: 0 0 20px; } body.omni-account-page .oa-notice, body.omni-account-page .oa .info-box, body.omni-account-page .oa .subdomain-warning, body.omni-account-page .oa .subdomain-suggestion { display: flex; } body.omni-account-page :is(.oa .login-message, .oa .fpwd-msg, .oa .rpwd-msg, .oa .profile-message, .oa .mfa-message, .oa .subdomain-message).show, body.omni-account-page :is(.oa .mfa-message).success, body.omni-account-page :is(.oa .mfa-message).error { display: flex; } body.omni-account-page .oa-notice p, body.omni-account-page .oa .info-box p { margin: 0; color: inherit; font-size: inherit; } body.omni-account-page .oa-notice strong { color: var(--oa-heading); } body.omni-account-page .oa-notice > div { flex: 1; min-width: 0; } body.omni-account-page .oa-notice-icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; } body.omni-account-page .oa-notice-icon svg { width: 22px; height: 22px; display: block; } body.omni-account-page :is(.oa-notice--ok, .oa .login-message.success, .oa .fpwd-msg.success, .oa .rpwd-msg.success, .oa .profile-message.success, .oa .mfa-message.success, .oa .subdomain-message.success) { border-left-color: var(--oa-success); color: var(--oa-text); } body.omni-account-page :is(.oa-notice--ok) .oa-notice-icon { color: var(--oa-success); } body.omni-account-page :is(.oa-notice--warn, .oa .subdomain-warning) { border-left-color: var(--oa-warning); } body.omni-account-page :is(.oa-notice--warn) .oa-notice-icon, body.omni-account-page .oa .subdomain-warning-icon { color: var(--oa-warning); } body.omni-account-page :is(.oa-notice--err, .oa .login-message.error, .oa .fpwd-msg.error, .oa .rpwd-msg.error, .oa .profile-message.error, .oa .mfa-message.error, .oa .subdomain-message.error) { border-left-color: var(--oa-error); } body.omni-account-page :is(.oa-notice--err) .oa-notice-icon { color: var(--oa-error); } body.omni-account-page :is(.oa-notice--info, .oa .login-message.info, .oa .info-box, .oa .subdomain-suggestion) { border-left-color: var(--oa-info); } body.omni-account-page :is(.oa-notice--info) .oa-notice-icon { color: var(--oa-info); } body.omni-account-page .oa-notice-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; } body.omni-account-page .oa-notice--err .oa-btn--primary, body.omni-account-page .oa-notice--warn .oa-btn--primary { flex: 0 0 auto; } body.omni-account-page .oa-empty { text-align: center; padding: 48px 28px; border: 1px dashed var(--oa-border); border-radius: var(--oa-radius); background: transparent; margin: 0 0 var(--oa-gap); } body.omni-account-page .oa-empty h2, body.omni-account-page .oa-empty .oa-card-title { margin-bottom: 8px; } body.omni-account-page .oa-empty p { color: var(--oa-text-2); max-width: 46ch; margin: 0 auto 20px; font-size: 15.5px; } body.omni-account-page .oa-empty .oa-actions { justify-content: center; margin-top: 0; } /* -------------------------------------------------------------------------- 7. Login, forgot / reset password (inside the auth card) -------------------------------------------------------------------------- */ body.omni-account-page .oa-auth .oa-card { padding: 32px 32px 28px; } @media (max-width: 480px) { body.omni-account-page .oa-auth .oa-card { padding: 24px 18px 22px; } } body.omni-account-page .oa .login-field, body.omni-account-page .oa .fpwd-field, body.omni-account-page .oa .rpwd-field { margin-bottom: 20px; position: relative; } body.omni-account-page .oa .login-field.password-field input { padding-right: 52px; } body.omni-account-page .oa .password-toggle { position: absolute; right: 2px; bottom: 2px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.8; border-radius: 6px; z-index: 2; padding: 0; } body.omni-account-page .oa .password-toggle:hover { opacity: 1; } body.omni-account-page .oa .password-toggle svg { width: 20px; height: 20px; fill: var(--oa-text-2); pointer-events: none; } body.omni-account-page .oa .login-remember label { display: flex; align-items: center; font-weight: 400; color: var(--oa-text); font-size: 15px; cursor: pointer; margin: 0; } body.omni-account-page .oa .login-turnstile, body.omni-account-page .oa .fpwd-turnstile, body.omni-account-page .oa .subdomain-turnstile { margin: 0 0 20px; display: flex; justify-content: center; } body.omni-account-page .oa .login-links { margin-top: 24px; text-align: center; } body.omni-account-page .oa .login-links p { margin: 10px 0; font-size: 15px; color: var(--oa-text-2); line-height: 1.55; } body.omni-account-page .oa .login-links p.oa-divider { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--oa-line-soft); } body.omni-account-page .oa .login-links a:not(.cta-button) { color: var(--oa-link); font-weight: 600; text-decoration: none; } body.omni-account-page .oa .login-links a:not(.cta-button):hover { text-decoration: underline; text-underline-offset: 0.2em; color: var(--oa-heading); } body.omni-account-page .oa .cta-button { margin-top: 4px; width: auto; } body.omni-account-page .oa .login-step.hidden { display: none; } body.omni-account-page .oa .oa-step-head { text-align: center; margin: 0 0 20px; } body.omni-account-page .oa .oa-step-head h2 { margin-bottom: 6px; } body.omni-account-page .oa .oa-step-head p { color: var(--oa-text-2); font-size: 15px; margin: 0; } body.omni-account-page .oa .oa-step-foot { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--oa-line-soft); color: var(--oa-text-2); font-size: 14px; } body.omni-account-page .oa .oa-step-foot a { color: var(--oa-link); font-weight: 600; } body.omni-account-page .oa .rpwd-user-info { color: var(--oa-text-2); font-size: 15px; margin: 0 0 20px; } body.omni-account-page .oa .rpwd-user-info p { margin: 0; } body.omni-account-page .oa .rpwd-requirements { background: var(--oa-alt); border: 1px solid var(--oa-line); border-radius: var(--oa-radius-sm); padding: 14px 16px; margin: 0 0 20px; font-size: 14px; color: var(--oa-text-2); } body.omni-account-page .oa .rpwd-requirements strong { display: block; color: var(--oa-heading); margin-bottom: 6px; } body.omni-account-page .oa .rpwd-requirements ul { margin: 0; padding-left: 18px; } body.omni-account-page .oa .rpwd-requirements li { margin: 2px 0; } body.omni-account-page .oa .password-strength { margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; display: none; } body.omni-account-page .oa .password-strength.weak { display: block; background: var(--oa-alt); color: var(--oa-error); } body.omni-account-page .oa .password-strength.medium { display: block; background: var(--oa-alt); color: var(--oa-warning); } body.omni-account-page .oa .password-strength.strong { display: block; background: var(--oa-alt); color: var(--oa-success); } body.omni-account-page .oa .fpwd-back, body.omni-account-page .oa .rpwd-back { display: inline-flex; align-items: center; gap: 6px; color: var(--oa-link); font-weight: 600; font-size: 15px; text-decoration: none; margin-bottom: 18px; transform: none; transition: none; } body.omni-account-page .oa .fpwd-back:hover, body.omni-account-page .oa .rpwd-back:hover { color: var(--oa-heading); text-decoration: underline; transform: none; } /* -------------------------------------------------------------------------- 8. Account overview ([account_dashboard]) -------------------------------------------------------------------------- */ body.omni-account-page .oa .account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oa-gap); margin: 0 0 var(--oa-gap); align-items: start; } body.omni-account-page .oa .account-grid .account-card { margin: 0; height: 100%; } @media (max-width: 860px) { body.omni-account-page .oa .account-grid { grid-template-columns: 1fr; } } body.omni-account-page .oa .scheduled-change-info, body.omni-account-page .oa .cancellation-warning { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; padding: 12px 14px; background: var(--oa-alt); border: 1px solid var(--oa-line); border-left: 4px solid var(--oa-warning); border-radius: var(--oa-radius-sm); font-size: 14.5px; line-height: 1.5; color: var(--oa-text); } body.omni-account-page .oa .cancellation-warning { border-left-color: var(--oa-error); } body.omni-account-page .oa .scheduled-change-info-text, body.omni-account-page .oa .cancellation-warning-text { color: var(--oa-text); font-size: inherit; } body.omni-account-page .oa .scheduled-change-info-text strong, body.omni-account-page .oa .cancellation-warning-text strong { color: var(--oa-heading); } body.omni-account-page .oa .scheduled-change-info-icon, body.omni-account-page .oa .cancellation-warning-icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--oa-warning); } body.omni-account-page .oa .cancellation-warning-icon { color: var(--oa-error); } body.omni-account-page .oa .scheduled-change-info-link, body.omni-account-page .oa .reactivate-link { display: inline-block; color: var(--oa-link); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; margin-top: 4px; } body.omni-account-page .oa .scheduled-change-info-link:hover, body.omni-account-page .oa .reactivate-link:hover { color: var(--oa-heading); } body.omni-account-page .oa .launch-note { color: var(--oa-text-2); font-size: 14px; line-height: 1.5; margin: 8px 0 0; } body.omni-account-page .oa .logout-btn { margin-top: 20px; } /* "Payment required" banner */ body.omni-account-page .oa .oa-notice--pay { align-items: center; } body.omni-account-page .oa .oa-notice--pay .oa-btn { flex: 0 0 auto; } @media (max-width: 640px) { body.omni-account-page .oa .oa-notice--pay { flex-wrap: wrap; } body.omni-account-page .oa .oa-notice--pay .oa-btn { width: 100%; } } /* Subdomain onboarding dialog */ body.omni-account-page dialog#subdomain-setup-popup { max-width: 540px; width: calc(100vw - 32px); padding: 0; border: 1px solid var(--oa-line); border-radius: var(--oa-radius); background: var(--oa-card); color: var(--oa-text); font-family: var(--oa-font); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; } body.omni-account-page dialog#subdomain-setup-popup::backdrop { background: rgba(5, 12, 24, 0.7); backdrop-filter: blur(3px); } body.omni-account-page .oa-dialog-head { background: var(--oa-navy); padding: 28px 32px 24px; border-bottom: 1px solid #1C4A86; } body.omni-account-page .oa-dialog-head .oa-eyebrow { margin-bottom: 6px; } body.omni-account-page .oa-dialog-head h2 { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--oa-heading); margin: 0; font-family: var(--oa-font); } body.omni-account-page .oa-dialog-body { padding: 24px 32px 28px; } body.omni-account-page .oa-dialog-body > p { margin: 0 0 18px; color: var(--oa-text-2); font-size: 15px; line-height: 1.55; } body.omni-account-page .oa-dialog-body > p strong { color: var(--oa-heading); } body.omni-account-page .oa-portals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; } body.omni-account-page .oa-portal { background: var(--oa-alt); border: 1px solid var(--oa-line); border-radius: var(--oa-radius-sm); padding: 14px 14px 12px; position: relative; } body.omni-account-page .oa-portal--app { border-color: var(--oa-primary); } body.omni-account-page .oa-portal .oa-badge { position: absolute; top: -11px; right: 10px; font-size: 11px; padding: 2px 8px; letter-spacing: 0.04em; text-transform: uppercase; } body.omni-account-page .oa-portal h3 { font-size: 15px; font-weight: 600; color: var(--oa-heading); margin: 0 0 8px; font-family: var(--oa-font); } body.omni-account-page .oa-portal ul { margin: 0; padding: 0 0 0 16px; font-size: 13.5px; color: var(--oa-text-2); line-height: 1.7; } body.omni-account-page .oa-dialog-actions { display: flex; flex-direction: column; gap: 10px; } body.omni-account-page .oa-dialog-note { font-size: 13.5px; color: var(--oa-text-2); text-align: center; margin: 0 0 16px; } @media (max-width: 480px) { body.omni-account-page .oa-portals { grid-template-columns: 1fr; gap: 16px; } body.omni-account-page .oa-dialog-head { padding: 22px 20px 18px; } body.omni-account-page .oa-dialog-body { padding: 20px 20px 22px; } } /* -------------------------------------------------------------------------- 9. Subscription portal ([subscription_portal], classes sp-* from omni-stripe/assets/css/portal.css) portal.css is kept (modals, plan selector, add-on controls); its variables are re-pointed at the brand tokens and the gradients, hover lifts and translucent badges are overridden here. -------------------------------------------------------------------------- */ body.omni-account-page .sp-portal { --sp-primary: var(--oa-link); --sp-primary-hover: var(--oa-primary-hover); --sp-primary-gradient: var(--oa-primary); --sp-success: var(--oa-success); --sp-success-light: rgba(92, 201, 138, 0.14); --sp-warning: var(--oa-warning); --sp-warning-light: rgba(245, 176, 76, 0.14); --sp-danger: var(--oa-error); --sp-danger-light: rgba(255, 143, 128, 0.14); --sp-info: var(--oa-info); --sp-info-light: rgba(111, 198, 245, 0.14); --sp-text: var(--oa-text); --sp-text-secondary: var(--oa-text-2); --sp-text-muted: var(--oa-text-2); --sp-text-white: var(--oa-heading); --sp-card-bg: var(--oa-card); --sp-card-bg-solid: var(--oa-card); --sp-card-header-bg: transparent; --sp-header-bg: transparent; --sp-border: var(--oa-line); --sp-border-light: var(--oa-line-soft); --sp-input-bg: var(--oa-base); --sp-input-border: var(--oa-border); --sp-input-focus-border: var(--oa-link); --sp-radius: var(--oa-radius-sm); --sp-radius-lg: var(--oa-radius); --sp-shadow: none; --sp-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55); --sp-font-family: var(--oa-font); --sp-font-size: 16px; max-width: var(--oa-w-wide); padding: 0 20px; } body.omni-account-page .sp-portal .sp-header { background: transparent; border: 0; padding: 0; margin: 0 0 28px; box-shadow: none; } body.omni-account-page .sp-portal .sp-header h1 { font-family: var(--oa-font); font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--oa-heading); letter-spacing: -0.01em; margin: 0 0 8px; } body.omni-account-page .sp-portal .sp-header-subtitle { color: var(--oa-text-2); font-size: 17px; margin: 0; max-width: 62ch; } @media (max-width: 767px) { body.omni-account-page .sp-portal .sp-header h1 { font-size: 28px; } body.omni-account-page .sp-portal .sp-header-subtitle { font-size: 16px; } } body.omni-account-page .sp-portal .sp-card, body.omni-account-page .sp-portal .sp-accordion, body.omni-account-page .sp-portal .sp-section { background: var(--oa-card); border: 1px solid var(--oa-line); box-shadow: none; transition: none; } body.omni-account-page .sp-portal .sp-card:hover { box-shadow: none; transform: none; } body.omni-account-page .sp-portal .sp-card-header, body.omni-account-page .sp-portal .sp-accordion-header, body.omni-account-page .sp-portal .sp-section-header { background: transparent; padding: 18px 24px; border-bottom: 1px solid var(--oa-line-soft); } body.omni-account-page .sp-portal .sp-accordion:not(.active) .sp-accordion-header { border-bottom-color: transparent; } body.omni-account-page .sp-portal .sp-accordion-header:hover { background: rgba(255, 255, 255, 0.03); } body.omni-account-page .sp-portal :is(.sp-card-header, .sp-accordion-header, .sp-section-header) h3 { font-family: var(--oa-font); font-size: 17px; font-weight: 600; color: var(--oa-heading); } body.omni-account-page .sp-portal .sp-card-body { padding: 20px 24px; } body.omni-account-page .sp-portal .sp-card-footer { background: transparent; border-top: 1px solid var(--oa-line-soft); padding: 16px 24px 20px; } body.omni-account-page .sp-portal .sp-accordion-toggle { background: transparent; border: 1px solid var(--oa-line); width: 28px; height: 28px; border-radius: 6px; } body.omni-account-page .sp-portal .sp-accordion.active .sp-accordion-toggle { background: transparent; border-color: var(--oa-link); } body.omni-account-page .sp-portal .sp-accordion.active .sp-accordion-toggle svg { color: var(--oa-link); } body.omni-account-page .sp-portal .sp-accordion-header { outline-offset: -2px; } body.omni-account-page .sp-portal .sp-dashboard-grid { gap: var(--oa-gap); margin-bottom: var(--oa-gap); } body.omni-account-page .sp-portal .sp-accordion, body.omni-account-page .sp-portal .sp-section { margin-bottom: var(--oa-gap); } body.omni-account-page .sp-portal .sp-plan-name { font-size: 20px; font-weight: 600; color: var(--oa-heading); } body.omni-account-page .sp-portal .sp-price-amount { font-size: 30px; font-weight: 700; color: var(--oa-heading); letter-spacing: -0.01em; } body.omni-account-page .sp-portal .sp-price-interval, body.omni-account-page .sp-portal .sp-price-vat-note { color: var(--oa-text-2); } body.omni-account-page .sp-portal .sp-detail-row { border-color: var(--oa-line-soft); } body.omni-account-page .sp-portal .sp-detail-label { color: var(--oa-text-2); } body.omni-account-page .sp-portal .sp-detail-value { color: var(--oa-heading); } /* notices */ body.omni-account-page .sp-portal .sp-notice, body.omni-account-page .sp-portal .sp-payment-failed-notice, body.omni-account-page .sp-portal .sp-suspended-notice { background: var(--oa-alt); border: 1px solid var(--oa-line); border-left: 4px solid var(--oa-warning); box-shadow: none; border-radius: var(--oa-radius-sm); padding: 16px 20px; margin-bottom: var(--oa-gap); align-items: center; gap: 16px; } body.omni-account-page .sp-portal .sp-suspended-notice { border-left-color: var(--oa-error); } body.omni-account-page .sp-portal .sp-cancellation-notice { border-left-color: var(--oa-warning); } body.omni-account-page .sp-portal .sp-notice-icon { width: 24px; height: 24px; background: transparent !important; color: var(--oa-warning); border-radius: 0; } body.omni-account-page .sp-portal .sp-suspended-notice .sp-notice-icon { color: var(--oa-error); } body.omni-account-page .sp-portal .sp-notice-icon svg { width: 24px; height: 24px; stroke: currentColor !important; } body.omni-account-page .sp-portal .sp-notice-content strong { color: var(--oa-heading); font-size: 16px; } body.omni-account-page .sp-portal .sp-notice-content p { color: var(--oa-text); font-size: 15px; margin: 2px 0 0; } body.omni-account-page .sp-portal .sp-notice .sp-button { flex: 0 0 auto; } @media (max-width: 767px) { body.omni-account-page .sp-portal .sp-notice, body.omni-account-page .sp-portal .sp-payment-failed-notice, body.omni-account-page .sp-portal .sp-suspended-notice { flex-direction: column; align-items: stretch; text-align: left; gap: 12px; } body.omni-account-page .sp-portal .sp-notice .sp-button { width: 100%; } } /* badges */ body.omni-account-page .sp-portal :is(.sp-status-badge, .sp-invoice-status, .sp-change-type) { color: var(--oa-on-color); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 3px 11px; border-radius: 999px; } body.omni-account-page .sp-portal :is(.sp-status-active, .sp-invoice-paid) { background: var(--oa-success); color: var(--oa-on-color); } body.omni-account-page .sp-portal :is(.sp-status-info, .sp-invoice-refund, .sp-change-type-plan) { background: var(--oa-info); color: var(--oa-on-color); } body.omni-account-page .sp-portal .sp-status-warning { background: var(--oa-warning); color: var(--oa-on-color); } body.omni-account-page .sp-portal :is(.sp-status-error, .sp-invoice-unpaid) { background: var(--oa-error); color: var(--oa-on-color); } body.omni-account-page .sp-portal :is(.sp-status-canceled, .sp-status-default) { background: var(--oa-border); color: var(--oa-on-color); } body.omni-account-page .sp-portal .sp-change-type-addon { background: var(--oa-orange); color: var(--oa-on-color); } /* discount */ body.omni-account-page .sp-portal .sp-discount-info { background: var(--oa-alt); border: 1px solid var(--oa-line); } body.omni-account-page .sp-portal :is(.sp-discount-badge, .sp-discount-value) { color: var(--oa-success); } /* payment method: no card yet */ body.omni-account-page .sp-portal .sp-payment-method.sp-no-card .sp-card-icon { opacity: 0.5; } body.omni-account-page .sp-portal .sp-payment-brand { color: var(--oa-heading); } body.omni-account-page .sp-portal .sp-no-card .sp-payment-brand { color: var(--oa-text-2); font-weight: 500; } body.omni-account-page .sp-portal .sp-no-card .sp-payment-last4, body.omni-account-page .sp-portal .sp-no-card .sp-payment-expiry { display: none; } body.omni-account-page .sp-portal .sp-no-card-note { color: var(--oa-text-2); font-size: 14px; margin: 4px 0 0; } /* add-ons */ body.omni-account-page .sp-portal .sp-quantity-input { background: var(--oa-base); border-color: var(--oa-border); color: var(--oa-heading); font-family: var(--oa-font); } body.omni-account-page .sp-portal .sp-quantity-btn { background: var(--oa-alt); border-color: var(--oa-border); color: var(--oa-heading); } body.omni-account-page .sp-portal .sp-quantity-btn:hover:not(:disabled) { background: var(--oa-primary-hover); color: var(--oa-on-color); border-color: var(--oa-primary-hover); } body.omni-account-page .sp-portal .sp-addon-icon { background: var(--oa-alt); color: var(--oa-primary); border: 1px solid var(--oa-line); } body.omni-account-page .sp-portal .sp-addon-controls { background: var(--oa-alt); border: 1px solid var(--oa-line); } body.omni-account-page .sp-portal .sp-addon-total-amount { color: var(--oa-heading); } /* tables */ body.omni-account-page .sp-portal .sp-table th { background: transparent; color: var(--oa-text-2); font-size: 12.5px; letter-spacing: 0.06em; border-bottom-color: var(--oa-line-soft); padding: 12px 24px; } body.omni-account-page .sp-portal .sp-table td { border-bottom-color: var(--oa-line-soft); padding: 14px 24px; color: var(--oa-text); vertical-align: middle; } body.omni-account-page .sp-portal .sp-table tr:hover td { background: rgba(255, 255, 255, 0.025); } body.omni-account-page .sp-portal .sp-invoice-memo { color: var(--oa-text-2); } body.omni-account-page .sp-portal .sp-invoice-attempts { display: block; color: var(--oa-warning); font-size: 12.5px; margin-top: 2px; } body.omni-account-page .sp-portal .sp-unpaid-invoice-row { background: rgba(255, 143, 128, 0.07); border-left: 3px solid var(--oa-error); } body.omni-account-page .sp-portal .sp-credit-note-row { background: rgba(111, 198, 245, 0.05); } body.omni-account-page .sp-portal .sp-amount-refund { color: var(--oa-info); } body.omni-account-page .sp-portal .sp-invoices-empty { color: var(--oa-text-2); } body.omni-account-page .sp-portal .sp-table-wrapper { overflow-x: visible; } /* scheduled changes list */ body.omni-account-page .sp-portal .sp-scheduled-list { padding: 0; } body.omni-account-page .sp-portal .sp-scheduled-list .sp-table-wrapper { margin: 0; } /* cancel section */ body.omni-account-page .sp-portal .sp-cancel-section .sp-section-body { padding: 20px 24px; } body.omni-account-page .sp-portal .sp-cancel-text h4 { font-family: var(--oa-font); font-size: 17px; font-weight: 600; color: var(--oa-heading); margin: 0 0 4px; } body.omni-account-page .sp-portal .sp-cancel-text p { color: var(--oa-text-2); font-size: 14.5px; } /* loading / error */ body.omni-account-page .sp-portal .sp-loading p, body.omni-account-page .sp-portal .sp-error p { color: var(--oa-text-2); } body.omni-account-page .sp-portal .sp-error { background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: var(--oa-radius); } body.omni-account-page .sp-portal .sp-error h3 { color: var(--oa-heading); font-family: var(--oa-font); } body.omni-account-page .sp-portal .sp-spinner { border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--oa-primary); } /* canceled banner (rendered by portal.js) */ body.omni-account-page .sp-portal .sp-canceled-banner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--oa-card); border: 1px solid var(--oa-line); border-left: 4px solid var(--oa-border); border-radius: var(--oa-radius); padding: 22px 26px; margin-bottom: var(--oa-gap); } body.omni-account-page .sp-portal .sp-canceled-banner .sp-notice-icon { color: var(--oa-text-2); } body.omni-account-page .sp-portal .sp-canceled-banner > div { flex: 1; min-width: 200px; } body.omni-account-page .sp-portal .sp-canceled-title { font-size: 17px; font-weight: 600; color: var(--oa-heading); margin: 0 0 4px; } body.omni-account-page .sp-portal .sp-canceled-desc { font-size: 15px; color: var(--oa-text-2); margin: 0; } /* modals */ body.omni-account-page .sp-portal .sp-modal-container { background: var(--oa-card); border: 1px solid var(--oa-line); font-family: var(--oa-font); } body.omni-account-page .sp-portal .sp-modal-header, body.omni-account-page .sp-portal .sp-modal-footer { background: transparent; border-color: var(--oa-line-soft); } body.omni-account-page .sp-portal .sp-modal-header h3 { font-family: var(--oa-font); font-weight: 600; color: var(--oa-heading); } body.omni-account-page .sp-portal .sp-modal-close { background: transparent !important; border-color: var(--oa-line) !important; color: var(--oa-heading) !important; } body.omni-account-page .sp-portal .sp-modal-close:hover { border-color: var(--oa-link) !important; color: var(--oa-link) !important; } body.omni-account-page .sp-portal .sp-modal-body h4 { font-family: var(--oa-font); color: var(--oa-heading); font-weight: 600; } body.omni-account-page .sp-portal .sp-last-chance-countdown { display: none; } body.omni-account-page .sp-portal .sp-last-chance-desc, body.omni-account-page .sp-portal .sp-retention-subtitle { color: var(--oa-text); } body.omni-account-page .sp-portal .sp-last-chance-terms p { color: var(--oa-text-2); } body.omni-account-page .sp-portal .sp-last-chance-icon, body.omni-account-page .sp-portal .sp-retention-icon { color: var(--oa-primary); } body.omni-account-page .sp-portal .sp-retention-option { background: var(--oa-alt); border-color: var(--oa-line); } body.omni-account-page .sp-portal .sp-retention-option:hover, body.omni-account-page .sp-portal .sp-retention-option:has(input:checked) { border-color: var(--oa-link); } body.omni-account-page .sp-portal .sp-retention-feedback textarea { background: var(--oa-base); border: 1px solid var(--oa-border); color: var(--oa-text); border-radius: var(--oa-radius-sm); font-family: var(--oa-font); } body.omni-account-page .sp-portal .sp-retention-feedback label { color: var(--oa-heading); } /* Checkout B2B Task 11 (T20/T21, 2026-10-17): the size classes sit on the container itself (modals.php), so the old ".sp-modal-sm .sp-modal-container" never matched and every dialog was 1200 px wide; ".entry-content p { max-width: 68ch }" (omni-brand.css) kept paragraphs left-aligned in a narrow box; the text-button rule above painted the label of the primary "Accept offer & stay" in link blue on blue (1.56:1); the disabled "Cancel anyway" had opacity 0.45 (2.2:1). */ body.omni-account-page .sp-portal .sp-modal-container.sp-modal-sm { max-width: 520px; } body.omni-account-page .sp-portal .sp-modal-container.sp-modal-md { max-width: 720px; } body.omni-account-page .sp-portal .sp-modal-body p { max-width: none; margin-left: 0; margin-right: 0; } body.omni-account-page .sp-portal :is(.sp-retention-content, .sp-last-chance-content, .sp-modal-body-center) > p, body.omni-account-page .sp-portal .sp-last-chance-terms p, body.omni-account-page .sp-portal #sp-exhausted-offer-modal .sp-modal-body > p { width: 100%; text-align: center; } body.omni-account-page .sp-portal .sp-modal .sp-button .sp-button-text { color: inherit !important; text-decoration: none !important; } body.omni-account-page .sp-portal .sp-modal .sp-button:disabled { opacity: 1; background: transparent !important; border-color: var(--oa-border) !important; border-style: dashed !important; color: var(--oa-text-2) !important; } body.omni-account-page .sp-portal .sp-plan-card { background: var(--oa-alt); border: 1px solid var(--oa-line); box-shadow: none; transition: border-color 0.15s; } body.omni-account-page .sp-portal .sp-plan-card:hover { transform: none; box-shadow: none; border-color: var(--oa-link); } body.omni-account-page .sp-portal .sp-plan-card.sp-plan-popular, body.omni-account-page .sp-portal .sp-plan-card.sp-plan-current { border-color: var(--oa-primary); background: var(--oa-navy); } body.omni-account-page .sp-portal .sp-popular-badge, body.omni-account-page .sp-portal .sp-current-plan-badge, body.omni-account-page .sp-portal .sp-savings-badge, body.omni-account-page .sp-portal .sp-yearly-savings { background: var(--oa-orange); color: var(--oa-on-color); } body.omni-account-page .sp-portal .sp-plan-card-name { color: var(--oa-heading); font-family: var(--oa-font); } body.omni-account-page .sp-portal .sp-plan-price-amount { color: var(--oa-heading); } body.omni-account-page .sp-portal .sp-plan-features li svg { color: var(--oa-primary); } body.omni-account-page .sp-portal .sp-plan-toggle { background: var(--oa-alt); border: 1px solid var(--oa-line); } body.omni-account-page .sp-portal .sp-toggle-btn { color: var(--oa-text); } body.omni-account-page .sp-portal .sp-toggle-btn.sp-toggle-active { background: var(--oa-primary); color: var(--oa-on-color); } body.omni-account-page .sp-portal .sp-toast { background: var(--oa-card); border: 1px solid var(--oa-line); color: var(--oa-text); font-family: var(--oa-font); } body.omni-account-page .sp-portal .sp-toast-success { border-left: 4px solid var(--oa-success); } body.omni-account-page .sp-portal .sp-toast-error { border-left: 4px solid var(--oa-error); } body.omni-account-page .sp-portal .sp-toast-info { border-left: 4px solid var(--oa-info); } body.omni-account-page .sp-portal .sp-line-item { border-color: var(--oa-line-soft); } body.omni-account-page .sp-portal .sp-credit .sp-line-amount { color: var(--oa-success); } body.omni-account-page .sp-portal small[style*="#ef4444"] { color: var(--oa-warning) !important; } body.omni-account-page .sp-portal div[style*="#94a3b8"] { color: var(--oa-text-2) !important; } body.omni-account-page .sp-portal a[style*="#3b82f6"] { background: var(--oa-primary) !important; color: var(--oa-on-color) !important; } /* no subscription: empty state printed by omni-stripe.php */ body.omni-account-page .sp-no-subscription { max-width: var(--oa-w-wide); margin: 0 auto; padding: 0 20px; font-family: var(--oa-font); } /* Mobile invoice table: each row becomes a card with the column names as labels (data-label set by portal.js). */ @media (max-width: 767px) { body.omni-account-page .sp-portal { padding: 0 16px; } body.omni-account-page .sp-portal .sp-table, body.omni-account-page .sp-portal .sp-table tbody, body.omni-account-page .sp-portal .sp-table tr, body.omni-account-page .sp-portal .sp-table td { display: block; width: auto; } body.omni-account-page .sp-portal .sp-table thead { display: none; } body.omni-account-page .sp-portal .sp-table tr { padding: 10px 18px 14px; border-bottom: 1px solid var(--oa-line-soft); } body.omni-account-page .sp-portal .sp-table tr:last-child { border-bottom: 0; } body.omni-account-page .sp-portal .sp-table tr.sp-unpaid-invoice-row { border-left-width: 3px; } body.omni-account-page .sp-portal .sp-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; white-space: normal; text-align: right; } body.omni-account-page .sp-portal .sp-table td::before { content: attr(data-label); color: var(--oa-text-2); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; flex: 0 0 auto; } body.omni-account-page .sp-portal .sp-table td:not([data-label])::before { content: none; } body.omni-account-page .sp-portal .sp-table td.sp-td-actions { justify-content: stretch; padding-top: 10px; } body.omni-account-page .sp-portal .sp-table td.sp-td-actions::before { content: none; } body.omni-account-page .sp-portal .sp-table td.sp-td-actions .sp-button { width: 100%; } body.omni-account-page .sp-portal .sp-table td.sp-td-invoice { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; } body.omni-account-page .sp-portal .sp-table td.sp-td-invoice::before { margin-bottom: 2px; } body.omni-account-page .sp-portal .sp-table tr:hover td { background: transparent; } body.omni-account-page .sp-portal .sp-loading-row td { display: block; text-align: center; } body.omni-account-page .sp-portal .sp-card-body, body.omni-account-page .sp-portal .sp-card-header, body.omni-account-page .sp-portal .sp-card-footer, body.omni-account-page .sp-portal .sp-accordion-header, body.omni-account-page .sp-portal .sp-cancel-section .sp-section-body { padding-left: 18px; padding-right: 18px; } body.omni-account-page .sp-portal .sp-cancel-content { flex-direction: column; align-items: stretch; text-align: left; } body.omni-account-page .sp-portal .sp-cancel-content .sp-button { width: 100%; } body.omni-account-page .sp-portal .sp-modal-container { border-radius: var(--oa-radius); max-height: calc(100vh - 24px); overflow: auto; } body.omni-account-page .sp-portal .sp-modal { padding: 12px; } body.omni-account-page .oa { padding-left: 16px; padding-right: 16px; } } /* -------------------------------------------------------------------------- 10. Profile, MFA -------------------------------------------------------------------------- */ body.omni-account-page .oa .status-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--oa-alt); border: 1px solid var(--oa-line); border-radius: var(--oa-radius-sm); margin: 0 0 16px; } body.omni-account-page .oa .status-row span:first-child { color: var(--oa-text-2); } body.omni-account-page .oa .qr-section { text-align: center; padding: 22px; background: var(--oa-alt); border: 1px solid var(--oa-line); border-radius: var(--oa-radius); margin: 16px 0; } body.omni-account-page .oa .qr-section p { color: var(--oa-text); } body.omni-account-page .oa .qr-code { background: #fff; padding: 14px; border-radius: 8px; display: inline-block; margin-bottom: 12px; } body.omni-account-page .oa .secret-key { font-family: ui-monospace, Consolas, monospace; background: var(--oa-base); border: 1px solid var(--oa-line); padding: 10px 16px; border-radius: 8px; font-size: 14px; letter-spacing: 0.12em; color: var(--oa-heading); word-break: break-all; margin: 12px 0 0; } body.omni-account-page .oa .backup-codes-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; } body.omni-account-page .oa .backup-code { font-family: ui-monospace, Consolas, monospace; background: var(--oa-base); border: 1px solid var(--oa-line); padding: 10px; border-radius: 6px; text-align: center; font-size: 14px; color: var(--oa-heading); } body.omni-account-page .oa .mfa-card ul { color: var(--oa-text); } body.omni-account-page .oa .verify-form { margin-top: 20px; text-align: center; } body.omni-account-page .oa .verify-form .btn-group { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; } body.omni-account-page .oa .mfa-card .btn-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } @media (max-width: 600px) { body.omni-account-page .oa .mfa-card .btn-group > *, body.omni-account-page .oa .verify-form .btn-group > * { width: 100%; } body.omni-account-page .oa .backup-codes-list { grid-template-columns: 1fr; } } /* MFA dialogs */ body.omni-account-page dialog.oa-dialog { max-width: 520px; width: calc(100vw - 32px); padding: 0; border: 1px solid var(--oa-line); border-radius: var(--oa-radius); background: var(--oa-card); color: var(--oa-text); font-family: var(--oa-font); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } body.omni-account-page dialog.oa-dialog::backdrop { background: rgba(5, 12, 24, 0.7); } body.omni-account-page dialog.oa-dialog .oa-dialog-body { padding: 28px 32px; } body.omni-account-page dialog.oa-dialog h2 { font-family: var(--oa-font); font-size: 22px; font-weight: 600; color: var(--oa-heading); margin: 0 0 8px; } body.omni-account-page dialog.oa-dialog p { color: var(--oa-text-2); font-size: 15px; margin: 0 0 20px; } body.omni-account-page dialog.oa-dialog .oa-notice { margin-bottom: 20px; } body.omni-account-page dialog.oa-dialog .oa-notice p { margin: 0; color: var(--oa-text); } body.omni-account-page dialog.oa-dialog .oa-check { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--oa-alt); border: 1px solid var(--oa-line); border-radius: var(--oa-radius-sm); margin: 0 0 20px; cursor: pointer; color: var(--oa-heading); font-weight: 600; font-size: 15px; } body.omni-account-page dialog.oa-dialog .oa-check input { margin: 0; } body.omni-account-page dialog.oa-dialog .oa-actions { margin-top: 0; } body.omni-account-page dialog.oa-dialog .oa-actions > * { flex: 1; } body.omni-account-page dialog.oa-dialog .oa-error { color: var(--oa-error); font-size: 14px; text-align: center; margin: 0 0 16px; } @media (max-width: 480px) { body.omni-account-page dialog.oa-dialog .oa-dialog-body { padding: 22px 20px; } } /* -------------------------------------------------------------------------- 11. Subdomain setup -------------------------------------------------------------------------- */ body.omni-account-page .oa .subdomain-input-wrapper { display: flex; align-items: center; background: var(--oa-base); border: 1px solid var(--oa-border); border-radius: var(--oa-radius-sm); position: relative; min-height: 48px; padding-right: 12px; transition: border-color 0.15s; } body.omni-account-page .oa .subdomain-input-wrapper:focus-within { border-color: var(--oa-link); outline: 2px solid var(--oa-focus); outline-offset: 2px; } body.omni-account-page .oa .subdomain-input-wrapper.valid { border-color: var(--oa-success); } body.omni-account-page .oa .subdomain-input-wrapper.invalid { border-color: var(--oa-error); } body.omni-account-page .oa .subdomain-input { flex: 1 1 auto; min-width: 0; max-width: none; background: transparent !important; border: 0 !important; outline: none !important; padding: 12px 4px 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 16px; color: var(--oa-heading); min-height: 0; } body.omni-account-page .oa .subdomain-suffix { flex: 0 0 auto; color: var(--oa-text-2); font-family: ui-monospace, Consolas, monospace; font-size: 15px; padding: 12px 8px 12px 0; white-space: nowrap; } body.omni-account-page .oa .subdomain-status { position: static; transform: none; display: none; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; padding: 6px 12px; border-radius: 12px; background: var(--oa-alt); white-space: normal; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; margin: 8px 0 0; } body.omni-account-page .oa .subdomain-status.show { display: flex; width: fit-content; } body.omni-account-page .oa .subdomain-status.checking { color: var(--oa-text-2); } body.omni-account-page .oa .subdomain-status.valid { color: var(--oa-success); } body.omni-account-page .oa .subdomain-status.invalid { color: var(--oa-error); } body.omni-account-page .oa .subdomain-status-icon { width: 16px; height: 16px; display: inline-flex; } body.omni-account-page .oa .subdomain-status-icon svg { width: 16px; height: 16px; } body.omni-account-page .oa .spinner { border: 2px solid rgba(255, 255, 255, 0.15); border-top-color: var(--oa-link); border-radius: 50%; width: 14px; height: 14px; animation: oa-spin 0.8s linear infinite; } @keyframes oa-spin { to { transform: rotate(360deg); } } body.omni-account-page .oa .subdomain-form-group { margin-bottom: 16px; } body.omni-account-page .oa .subdomain-suggestion { margin: 0 0 16px; } body.omni-account-page .oa .subdomain-suggestion strong { color: var(--oa-heading); } body.omni-account-page .oa .subdomain-requirements { margin: 0 0 16px; padding: 14px 16px; background: var(--oa-alt); border: 1px solid var(--oa-line); border-radius: var(--oa-radius-sm); } body.omni-account-page .oa .subdomain-requirements h3, body.omni-account-page .oa .subdomain-requirements h4 { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: var(--oa-heading); font-family: var(--oa-font); } body.omni-account-page .oa .subdomain-requirements ul { margin: 0; padding-left: 18px; list-style: disc; } body.omni-account-page .oa .subdomain-requirements li { font-size: 14px; color: var(--oa-text-2); margin: 2px 0; padding: 0; position: static; } body.omni-account-page .oa .subdomain-requirements li::before { content: none; } body.omni-account-page .oa .subdomain-warning-text { flex: 1; color: var(--oa-text); font-size: 15px; } body.omni-account-page .oa .subdomain-warning-text strong { color: var(--oa-heading); } body.omni-account-page .oa .subdomain-actions { margin-top: 20px; } @media (max-width: 480px) { body.omni-account-page .oa .subdomain-input-wrapper { flex-wrap: wrap; padding: 0 12px 10px; } body.omni-account-page .oa .subdomain-input { flex-basis: 100%; padding-left: 2px; } body.omni-account-page .oa .subdomain-suffix { padding: 0 8px 0 2px; } } /* progress overlay after submit */ body.omni-account-page .subdomain-setup-overlay { position: fixed; inset: 0; background: rgba(11, 26, 46, 0.97); display: none; align-items: center; justify-content: center; z-index: 9999; font-family: var(--oa-font); padding: 24px; } body.omni-account-page .subdomain-setup-overlay.show { display: flex; } body.omni-account-page .subdomain-setup-content { width: 100%; max-width: 460px; background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: var(--oa-radius); padding: 32px; text-align: left; } body.omni-account-page .subdomain-setup-icon { width: 44px; height: 44px; color: var(--oa-primary); margin: 0 0 16px; animation: none; } body.omni-account-page .subdomain-setup-icon svg { width: 44px; height: 44px; } body.omni-account-page .subdomain-setup-title { font-size: 24px; font-weight: 700; color: var(--oa-heading); margin: 0 0 6px; font-family: var(--oa-font); } body.omni-account-page .subdomain-setup-subtitle { font-size: 15px; color: var(--oa-text-2); margin: 0 0 20px; } body.omni-account-page .subdomain-setup-progress { height: 4px; background: var(--oa-alt); border-radius: 2px; overflow: hidden; margin-bottom: 16px; } body.omni-account-page .subdomain-setup-progress-bar { height: 100%; background: var(--oa-primary); border-radius: 2px; animation: progressBar 7s ease-out forwards; } @keyframes progressBar { from { width: 0%; } to { width: 100%; } } body.omni-account-page .subdomain-setup-steps { list-style: none; padding: 0; margin: 0; } body.omni-account-page .subdomain-setup-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--oa-text-2); font-size: 15px; } body.omni-account-page .subdomain-setup-step.active { color: var(--oa-heading); } body.omni-account-page .subdomain-setup-step.completed { color: var(--oa-success); } body.omni-account-page .subdomain-setup-step-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } body.omni-account-page .subdomain-setup-step-icon svg { width: 18px; height: 18px; } body.omni-account-page .subdomain-setup-content noscript p { color: var(--oa-text-2); } /* -------------------------------------------------------------------------- 12. Checkout success -------------------------------------------------------------------------- */ body.omni-account-page .omni-success-container { position: static; min-height: 0; display: block; padding: 0; overflow: visible; font-family: var(--oa-font); } body.omni-account-page .omni-success-bg, body.omni-account-page .omni-floating-elements, body.omni-account-page .omni-confetti { display: none; } body.omni-account-page .omni-success-card { position: static; background: var(--oa-card); border: 1px solid var(--oa-line); border-radius: var(--oa-radius); padding: 36px 32px 32px; max-width: none; width: auto; text-align: center; box-shadow: none; backdrop-filter: none; animation: none; margin: 0; } body.omni-account-page .omni-success-icon { width: 72px; height: 72px; margin: 0 auto 20px; } body.omni-account-page .omni-checkmark { width: 72px; height: 72px; stroke: var(--oa-success); animation: omni-scale 0.3s ease-in-out 0.9s both; } body.omni-account-page .omni-checkmark-circle { stroke: var(--oa-success); } body.omni-account-page .omni-success-title { font-family: var(--oa-font); font-size: 30px; font-weight: 700; color: var(--oa-heading); margin: 0 0 6px; display: block; letter-spacing: -0.01em; } body.omni-account-page .omni-success-subtitle { font-family: var(--oa-font); font-size: 17px; font-weight: 400; color: var(--oa-text-2); margin: 0 0 24px; } body.omni-account-page .omni-success-plan { background: var(--oa-alt); border: 1px solid var(--oa-line); color: var(--oa-text-2); border-radius: 999px; padding: 8px 16px; font-size: 15px; margin-bottom: 28px; } body.omni-account-page .omni-success-plan-icon { color: var(--oa-primary); } body.omni-account-page .omni-success-plan strong { color: var(--oa-heading); } body.omni-account-page .omni-success-steps { text-align: left; margin-bottom: 28px; } body.omni-account-page .omni-success-steps h3 { color: var(--oa-orange); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; font-weight: 700; text-align: left; margin: 0 0 14px; font-family: var(--oa-font); } body.omni-account-page .omni-success-step { background: var(--oa-alt); border: 1px solid var(--oa-line); border-radius: var(--oa-radius-sm); padding: 14px 16px; margin-bottom: 10px; animation: none; opacity: 1; transform: none; transition: none; } body.omni-account-page .omni-success-step:hover { background: var(--oa-alt); transform: none; } body.omni-account-page .omni-step-number { background: var(--oa-primary); color: var(--oa-on-color); font-family: var(--oa-font); } body.omni-account-page .omni-step-content strong { color: var(--oa-heading); font-size: 15.5px; } body.omni-account-page .omni-step-content p { color: var(--oa-text-2); font-size: 14.5px; } body.omni-account-page .omni-step-content p strong { color: var(--oa-heading); } body.omni-account-page .omni-success-btn { border-radius: var(--oa-radius-sm); padding: 12px 24px; font-size: 16px; } body.omni-account-page .omni-success-btn::before { display: none; } body.omni-account-page .omni-success-btn:hover svg { transform: none; } body.omni-account-page .omni-success-support { border-top: 1px solid var(--oa-line-soft); margin-top: 24px; padding-top: 20px; } body.omni-account-page .omni-success-support p { color: var(--oa-text-2); font-size: 14px; } body.omni-account-page .omni-success-support a { color: var(--oa-link); text-decoration: underline; text-underline-offset: 0.2em; } @media (max-width: 600px) { body.omni-account-page .omni-success-card { padding: 26px 18px 24px; margin: 0; } body.omni-account-page .omni-success-title { font-size: 26px; } } /* -------------------------------------------------------------------------- 13. Motion, print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.omni-account-page .oa *, body.omni-account-page .sp-portal * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media print { body.omni-account-page .oa-btn, body.omni-account-page .oa .account-btn, body.omni-account-page dialog { display: none !important; } } /* -------------------------------------------------------------------------- 14. Small primitives used by the profile / MFA / subdomain templates (stage F) -------------------------------------------------------------------------- */ body.omni-account-page .oa .back-link { display: inline-flex; } body.omni-account-page .oa .oa-subsection { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--oa-line-soft); } body.omni-account-page .oa .oa-subsection h3 { margin-top: 0; } body.omni-account-page .oa .oa-check-inline { display: flex; align-items: center; gap: 0; font-weight: 400; color: var(--oa-text); cursor: pointer; font-size: 15.5px; } body.omni-account-page .oa ul.oa-list { margin: 8px 0 0; padding-left: 20px; color: var(--oa-text); font-size: 15px; } body.omni-account-page .oa ul.oa-list li { margin: 2px 0; } body.omni-account-page dialog.oa-dialog .oa-dialog-input { width: 100%; margin: 0 0 16px; } body.omni-account-page .oa .subdomain-warning.oa-notice--err { border-left-color: var(--oa-error); } body.omni-account-page .oa .subdomain-warning.oa-notice--err .subdomain-warning-icon { color: var(--oa-error); } body.omni-account-page .oa .oa-link-strong { color: var(--oa-link); font-weight: 600; text-decoration: none; } body.omni-account-page .oa .oa-link-strong:hover { text-decoration: underline; text-underline-offset: 0.2em; color: var(--oa-heading); } body.omni-account-page .oa .otp-input--backup { width: 280px; letter-spacing: 0.12em; font-size: 18px; } body.omni-account-page .oa .otp-input--backup::placeholder { letter-spacing: 0.12em; font-size: 18px; } /* -------------------------------------------------------------------------- 15. Fixes after the first visual review (stage F) -------------------------------------------------------------------------- */ body.omni-account-page .oa-btn svg, body.omni-account-page .oa .account-btn svg, body.omni-account-page .sp-portal .sp-button svg { width: 18px; height: 18px; flex: 0 0 auto; } body.omni-account-page .oa-head-actions .oa-btn { white-space: nowrap; } body.omni-account-page .oa-head-actions { max-width: 360px; } body.omni-account-page .sp-portal .sp-table .sp-button { white-space: nowrap; } /* add-on card: let the name take the room, the price keeps its intrinsic width */ body.omni-account-page .sp-portal .sp-addon-info { flex-wrap: wrap; gap: 12px 16px; padding: 0 4px; } body.omni-account-page .sp-portal .sp-addon-name { flex: 1 1 180px; min-width: 0; } body.omni-account-page .sp-portal .sp-addon-text { min-width: 0; } body.omni-account-page .sp-portal .sp-addon-text strong { white-space: nowrap; } body.omni-account-page .sp-portal .sp-addon-price { flex: 0 1 auto; margin-left: auto; } /* empty state header (no subscription) aligns like the portal header */ body.omni-account-page .sp-no-subscription .oa-head { text-align: left; } body.omni-account-page .sp-no-subscription .oa-head h1 { font-family: var(--oa-font); font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--oa-heading); margin: 0; } @media (max-width: 767px) { body.omni-account-page .sp-no-subscription .oa-head h1 { font-size: 28px; } } /* checkout success: layout rules that used to live in the template's inline