/* ============================================
   FABSOFT PORTAL - Customer Portal styles
   ============================================
   Consumes tokens from fabsoft-variables.css (must be linked first).
   Two scopes, matching the two portal page families:

   1. body.fsp-page  — migrated public portal pages (login, forgot-password).
      These pages do NOT load the legacy /css/style.css, so full rem-based
      fs tokens render at design size (16px root).

   2. body.fsp-app   — authenticated portal app pages (reseller resources,
      purchase center, orders/licenses tables). These pages still load the
      legacy style.css (html { font-size: 62.5% }), so this scope uses px
      values plus root-size-independent tokens (colors, radius, shadows,
      font stacks) only. No rem layout here by design.

   Chrome note (v2, 2026-07-18): the .fsp-page chrome mirrors the CURRENT
   www.fabsoft.com homepage look (light scheme, Lora serif headlines, pill
   CTAs, dark multi-column footer). Values are transplanted from the
   homepage's rendered computed styles because that look lives in
   fabsoft-homepage.css overrides + site.min.css inheritance, neither of
   which is safely loadable here. Benchmark: the live homepage, not
   fabsoft-theme.css (its .fs-hero dark-gradient layer is the older theme).
   ============================================ */

/* ========================================
   1. MIGRATED PUBLIC PAGES (.fsp-page)
   ======================================== */

body.fsp-page {
  margin: 0;
  /* Homepage parity: editorial copy inherits Lora (like .home-wrapper);
     interactive UI (nav links, form controls) opts back into the sans stack. */
  font-family: "Lora", Georgia, serif;
  font-size: var(--fs-text-base);
  line-height: var(--fs-leading-normal);
  color: var(--fs-text-dark);
  background: var(--fs-bg-light);
  -webkit-font-smoothing: antialiased;
}

body.fsp-page *,
body.fsp-page *::before,
body.fsp-page *::after {
  box-sizing: border-box;
}

/* Screen-reader-only utility (style.css is absent on migrated pages) */
body.fsp-page .hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Header chrome (markup lives in MasterHomeSecondary) ----
   Homepage grammar: thin dark brand bar + white nav with pill CTA. */

.fsp-page .fsp-brandbar {
  background: var(--fs-text-dark);
  color: var(--fs-bg-light);
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 10px 24px;
}

.fsp-page .fsp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fs-space-4);
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  background: transparent;
}

.fsp-page .fsp-nav-logo img {
  height: 48px;
  width: auto;
  display: block;
  /* Same filter the homepage nav uses: invert the white logo to dark navy */
  filter: brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(90%);
}

.fsp-page .fsp-nav-list {
  display: flex;
  align-items: center;
  gap: var(--fs-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fsp-page .fsp-nav-list a {
  font-family: var(--fs-font-family);
  color: var(--fs-text-dark);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color var(--fs-transition);
}

.fsp-page .fsp-nav-list a:hover,
.fsp-page .fsp-nav-list a:focus-visible {
  color: var(--fs-secondary);
}

/* Red pill CTA, same slot as the homepage's "Book a Demo" */
.fsp-page .fsp-nav-list a.fsp-nav-demo {
  background: var(--fs-accent);
  color: #fff;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 980px;
  transition: background var(--fs-transition), transform var(--fs-transition);
}

.fsp-page .fsp-nav-list a.fsp-nav-demo:hover,
.fsp-page .fsp-nav-list a.fsp-nav-demo:focus-visible {
  background: var(--fs-accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* ---- Hero (light, serif — mirrors the homepage hero) ---- */

.fsp-page .fsp-hero {
  background: var(--fs-bg-white);
  text-align: center;
  padding: 88px 24px 64px;
  font-family: "Lora", Georgia, serif;
}

.fsp-page .fsp-hero-kicker {
  display: block;
  color: #6E56D5;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.fsp-page .fsp-hero-title {
  color: var(--fs-text-dark);
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 720px;
  margin: 0 auto 24px;
}

.fsp-page .fsp-hero-subtitle {
  color: var(--fs-text-dark);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  max-width: 620px;
  margin: 0 auto 32px;
}

/* Compact hero for utility pages (forgot-password, thank-you): same voice,
   less altitude — the form is the point of the page. */
.fsp-page .fsp-hero-compact {
  padding: 56px 24px 40px;
}

.fsp-page .fsp-hero-compact .fsp-hero-title {
  font-size: clamp(30px, 3.2vw, 44px);
  margin-bottom: 16px;
}

.fsp-page .fsp-hero-compact .fsp-hero-subtitle {
  font-size: clamp(16px, 1.6vw, 19px);
  margin-bottom: 0;
}

/* Authenticated app nav: LoginStatus renders <li><a class="main-nav-link">
   items from the compiled PortalHeaderMenuComponent; the base .fsp-nav-list a
   rule styles them. Logout carries .nav-cta — style as an outlined pill. */
.fsp-page .fsp-nav-list a.nav-cta {
  border: 2px solid rgba(0, 113, 227, 0.3);
  color: var(--fs-secondary);
  padding: 10px 22px;
  border-radius: 980px;
  font-weight: 600;
  transition: border-color var(--fs-transition), color var(--fs-transition);
}

.fsp-page .fsp-nav-list a.nav-cta:hover,
.fsp-page .fsp-nav-list a.nav-cta:focus-visible {
  border-color: var(--fs-secondary);
  color: var(--fs-secondary);
}

/* G2 award badges (same assets + treatment as the homepage g2-awards-section) */
.fsp-page .fsp-hero-badges-kicker {
  display: block;
  color: #6E6E73;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.fsp-page .fsp-hero-badges-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  text-decoration: none;
}

.fsp-page .fsp-hero-badges img {
  height: 96px;
  width: auto;
}

.fsp-page .fsp-hero-stats {
  color: #86868B;
  font-size: 13px;
  margin: 16px 0 0;
}

/* ---- Sign-in / forgot-password card ---- */

.fsp-page .login-form {
  display: flex;
  justify-content: center;
  padding: var(--fs-space-10) var(--fs-space-6) var(--fs-space-16);
}

.fsp-page .login-container {
  font-family: var(--fs-font-family);
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  padding: var(--fs-space-8);
  width: 100%;
  max-width: 440px;
}

/* Card heading ("Sign in to your FabSoft Account") — scoped below
   .login-container so it never collides with the header logo img. */
.fsp-page .login-container .logo {
  font-family: "Lora", Georgia, serif;
  font-size: var(--fs-text-xl);
  font-weight: var(--fs-font-semibold);
  color: var(--fs-text-dark);
  margin-bottom: var(--fs-space-6);
  text-align: center;
}

.fsp-page .form-field {
  margin-bottom: var(--fs-space-4);
}

/* Labels: unhide the sr-only span so every input has a visible label
   (MWA accessibility finding), and retire the decorative icon imgs. */
.fsp-page .form-field label {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-font-medium);
  color: var(--fs-text-medium);
  margin-bottom: var(--fs-space-1);
}

.fsp-page .form-field label img {
  display: none;
}

.fsp-page .form-field label .hidden {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
  overflow: visible;
}

.fsp-page .form-field input[type="text"],
.fsp-page .form-field input[type="email"],
.fsp-page .form-field input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: var(--fs-text-base);
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
  transition: border-color var(--fs-transition);
}

.fsp-page .form-field input:focus-visible,
.fsp-page .fsp-nav-list a:focus-visible,
.fsp-page .login-links a:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

/* Primary action: Apple-blue pill (homepage reserves red for Book-a-Demo) */
.fsp-page .form-field input[type="submit"] {
  width: 100%;
  padding: 14px 32px;
  border: none;
  border-radius: 980px;
  background: var(--fs-secondary);
  color: #fff;
  font-family: var(--fs-font-family);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fs-transition), transform var(--fs-transition);
}

.fsp-page .form-field input[type="submit"]:hover {
  background: #0077ED;
  transform: translateY(-1px);
}

.fsp-page .form-field input[type="submit"]:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

/* Submission feedback: clickOnce() (scripts/portal.js) disables the button
   and swaps its value to "Signing in…" — make that state visible. */
.fsp-page .form-field input[type="submit"]:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

/* Validation summary (server-side errors) */
.fsp-page .validation-summary-errors,
.fsp-page .field-validation-error {
  color: #b3261e;
  font-size: var(--fs-text-sm);
}

.fsp-page .validation-summary-errors ul {
  margin: var(--fs-space-2) 0;
  padding-left: var(--fs-space-5);
}

/* Honeypot field (bot trap): hidden via CSS so there is no
   visible-until-JS-loads flash; the legacy onload hide stays as backup. */
.fsp-page #loginViewModel_Email {
  display: none;
}

.fsp-page .login-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-sm);
}

.fsp-page .login-links a {
  color: var(--fs-secondary);
  text-decoration: none;
}

.fsp-page .login-links a:hover {
  text-decoration: underline;
}

.fsp-page .forgotPassword-instructions {
  text-align: center;
  color: var(--fs-text-medium);
  font-size: var(--fs-text-sm);
  margin-bottom: var(--fs-space-4);
}

/* reCAPTCHA block centered inside the card */
.fsp-page .g-recaptcha,
.fsp-page .form-field > div[class^="grecaptcha"] {
  display: flex;
  justify-content: center;
}

/* ---- "What you're signing into" context line under the hero ---- */

.fsp-page .fsp-context {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--fs-space-8) var(--fs-space-6) 0;
  text-align: center;
  color: var(--fs-text-medium);
  font-size: var(--fs-text-base);
  line-height: var(--fs-leading-relaxed);
}

.fsp-page .fsp-context a {
  color: var(--fs-secondary);
  text-decoration: none;
}

/* ---- Footer (slimmed homepage fabsoft-footer pattern) ---- */

.fsp-page .fsp-footer {
  background: var(--fs-text-dark);
  color: #A1A1A6;
  font-family: "Lora", Georgia, serif;
  padding: 48px 24px 24px;
}

.fsp-page .fsp-footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 36px;
}

.fsp-page .fsp-footer-brand {
  max-width: 320px;
}

.fsp-page .fsp-footer-brand img {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 14px;
}

.fsp-page .fsp-footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.fsp-page .fsp-footer-col strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.fsp-page .fsp-footer-col a {
  display: block;
  color: #A1A1A6;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 9px;
  transition: color var(--fs-transition);
}

.fsp-page .fsp-footer-col a:hover,
.fsp-page .fsp-footer-col a:focus-visible {
  color: #fff;
}

.fsp-page .fsp-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #86868B;
}

@media (max-width: 600px) {
  .fsp-page .fsp-nav {
    justify-content: center;
  }

  .fsp-page .fsp-hero {
    padding: 56px 20px 48px;
  }

  .fsp-page .login-container {
    padding: var(--fs-space-6);
  }

  .fsp-page .yourprofile-cardNew {
    padding: 20px;
    gap: 24px;
  }

  .fsp-page .fsp-footer-inner {
    flex-direction: column;
    gap: 28px;
  }
}

/* ---- Sign-up page ----
   Default branch uses checkout-* classes, ?test=true branch uses newSignup-*;
   both lost legacy style.css with the fsPortal opt-in, so this scope owns their
   styling entirely. Bindings, scripts and reCAPTCHA are untouched — style only. */

.fsp-page .site-body-title {
  text-align: center;
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 0 0 24px;
}

.fsp-page .signup-section {
  padding: 8px 24px 64px;
}

.fsp-page .signup-mainContent {
  max-width: 960px;
  margin: 0 auto;
}

.fsp-page .yourprofile-cardNew {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  padding: 36px;
}

.fsp-page .checkout-billingInfo,
.fsp-page .checkout-paymentContact {
  flex: 1 1 360px;
  min-width: 0;
}

.fsp-page .checkout-billingTitle,
.fsp-page .checkout-contactTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin-bottom: 18px;
}

.fsp-page .checkout-InputItem {
  margin-bottom: 14px;
}

.fsp-page .checkout-Label {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-font-medium);
  color: var(--fs-text-medium);
  margin-bottom: 4px;
}

.fsp-page .checkout-Input,
.fsp-page .checkout-InputFirst,
.fsp-page .checkout-InputSecond,
.fsp-page .checkout-Select,
.fsp-page .newSignup-Input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: var(--fs-text-base);
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
  transition: border-color var(--fs-transition);
}

.fsp-page .checkout-inputRow {
  display: flex;
  gap: 12px;
}

.fsp-page .checkout-cityState {
  flex: 1;
  min-width: 0;
}

.fsp-page .checkout-Input:focus-visible,
.fsp-page .checkout-InputFirst:focus-visible,
.fsp-page .checkout-InputSecond:focus-visible,
.fsp-page .checkout-Select:focus-visible,
.fsp-page .newSignup-Input:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

/* Submit: same Apple-blue pill as the login card */
.fsp-page .submitLink-link,
.fsp-page .newSignup-SubmitButton {
  width: 100%;
  padding: 14px 32px;
  border: none;
  border-radius: 980px;
  background: var(--fs-secondary);
  color: #fff;
  font-family: var(--fs-font-family);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fs-transition), transform var(--fs-transition);
}

.fsp-page .submitLink-link:hover,
.fsp-page .newSignup-SubmitButton:hover {
  background: #0077ED;
  transform: translateY(-1px);
}

.fsp-page .submitLink-link:disabled,
.fsp-page .newSignup-SubmitButton:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

.fsp-page .submitLink-link:focus-visible,
.fsp-page .newSignup-SubmitButton:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

.fsp-page .yourprofile-Error,
.fsp-page .yourprofile-error,
.fsp-page .yourprofile-Success,
.fsp-page .yourprofile-success {
  display: block;
  max-width: 960px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: var(--fs-text-sm);
}

.fsp-page .yourprofile-Error,
.fsp-page .yourprofile-error {
  background: #FDECEA;
  color: #b3261e;
  border: 1px solid #f5c6c0;
}

.fsp-page .yourprofile-Success,
.fsp-page .yourprofile-success {
  background: #E6F6EC;
  color: #0B7A3B;
  border: 1px solid #bfe6cd;
}

/* Fax-number honeypot: hidden via CSS (legacy onload hide stays as backup) */
.fsp-page #faxnumberfield {
  display: none;
}

.fsp-page .fsp-form-disclosure {
  margin: 14px auto 0;
  text-align: center;
  font-family: var(--fs-font-family);
  font-size: 13px;
  color: #86868B;
}

.fsp-page .fsp-form-disclosure a {
  color: var(--fs-secondary);
  text-decoration: none;
}

/* ?test=true floating-label branch: generic modernization (internal test URL) */
.fsp-page .newSignup-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

.fsp-page .newSignup-header {
  text-align: center;
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 0 0 24px;
}

.fsp-page .newSignup-InputItem {
  margin-bottom: 14px;
}

.fsp-page .newSignup-InputLabel {
  display: block;
  font-size: var(--fs-text-sm);
  color: var(--fs-text-medium);
  margin: 4px 0 0;
}

/* ---- Reseller Resources landing (PortalHome, migrated .fsp-page) ----
   Card visuals come from the #reseller-home anchor-card rules further down;
   this block owns the section layout + serif card titles per the typography
   grammar (editorial headings = Lora). */

.fsp-page .reseller-cardSection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

.fsp-page .reseller-cardFlexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}

/* Equal-width column cards: icon top, serif title, growing description,
   link pinned to the bottom. Overrides the legacy fixed-width card rule. */
.fsp-page #reseller-home .reseller-cardFlexContainer > a {
  width: auto;
  flex: 1 1 300px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 28px;
}

.fsp-page #reseller-home .reseller-cardIcon {
  width: 72px;
  height: 72px;
  display: block;
}

.fsp-page #reseller-home .reseller-cardFlexContainer > a .reseller-cardTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 21px;
  margin: 18px 0 8px;
}

.fsp-page #reseller-home .reseller-cardFlexContainer > a .reseller-cardDesc {
  font-size: 14px;
  line-height: 1.6;
  flex-grow: 1;
}

.fsp-page #reseller-home .reseller-cardFlexContainer > a .reseller-cardLink {
  margin-top: 18px;
}

/* ---- Purchase Center home (migrated .fsp-page; legacy style.css absent) ----
   Product tiles come from ShoppingCart categories; link hrefs carry the
   pre-existing reseller/AI-File-Pro override — template logic untouched. */

.fsp-page .purchaseCenter {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

.fsp-page .purchaseCenter-section {
  text-align: center;
  font-family: "Lora", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 0 0 24px;
}

.fsp-page .purchaseCenter-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}

.fsp-page .purchaseCenter-products .purchaseCenter-section {
  flex-basis: 100%;
}

.fsp-page .purchaseCenter-product {
  flex: 1 1 300px;
  max-width: 380px;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.fsp-page .purchaseCenter-product:hover {
  box-shadow: var(--fs-card-shadow-hover);
  transform: translateY(-3px);
}

.fsp-page .purchaseCenter-productLink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 28px;
  text-decoration: none;
  color: var(--fs-text-dark);
}

.fsp-page .purchaseCenter-productLink:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
  border-radius: 16px;
}

.fsp-page .purchaseCenter-productImage {
  max-width: 220px;
  max-height: 64px;
  width: auto;
  height: auto;
  display: block;
}

.fsp-page .purchaseCenter-productName {
  font-family: "Lora", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
}

.fsp-page .purchaseCenter-productText {
  font-family: var(--fs-font-family);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fs-text-medium);
  margin: 16px 0 0;
}

/* View-as-user admin widget (UserPanelComponent + BVSelect) in the white nav */
.fsp-page .fsp-nav-list .bv_mainselect,
.fsp-page .fsp-nav-list #viewAsUser,
.fsp-page .fsp-nav-list #viewAsUserData {
  font-family: var(--fs-font-family);
  font-size: 14px;
  min-width: 180px;
}

/* Header zones: brand + admin context on the left, navigation on the right.
   The ViewAs li (.ui-widget) takes margin-right:auto so everything after it
   groups cleanly right — no more lopsided cluster floating mid-header. */
.fsp-page .fsp-nav-list li.ui-widget {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.fsp-page .fsp-nav-list .bv_mainselect {
  margin: 0;
}

.fsp-page .fsp-nav-list .bv_atual {
  border-radius: 980px; /* pill, matching the Logout button beside it */
  border: 1px solid var(--fs-border-light);
  background: var(--fs-bg-white);
  padding: 10px 38px 10px 18px; /* right padding reserves the arrow slot */
  color: var(--fs-text-dark);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

/* bvselect's arrow is float:right, which drops below clipped text — pin it */
.fsp-page .fsp-nav-list .bv_atual .arrow {
  float: none;
  position: absolute;
  right: 17px;
  top: 50%;
  margin-top: -5px;
}

.fsp-page .fsp-nav-list .bv_ul_inner {
  border-radius: 12px; /* the open dropdown is a panel, not a button */
  border: 1px solid var(--fs-border-light);
  box-shadow: var(--fs-card-shadow-hover);
  overflow: hidden;
}

.fsp-page .fsp-nav-list .bv_input {
  border-radius: 8px;
  border: 1px solid var(--fs-border-light);
  padding: 8px 10px;
  font-family: var(--fs-font-family);
}

/* ---- App workbench (MasterCustomersAndOrders shell, migrated .fsp-page) ----
   The master renders this shell on ALL its children; these rules only apply
   once a child opts into fsPortal (body.fsp-page). Search/toggle/ViewAs
   scripts and compiled components are untouched — style only. */

.fsp-page #portal {
  /* Never narrower than the historical 1380px, but grow with the viewport up to
     1920px. The fixed cap held every portal list to ~1096px of usable table width
     on a 1920px monitor, which is what forced License Slots to scroll sideways. */
  max-width: clamp(1380px, calc(100% - 32px), 1920px);
  margin: 0 auto;
  padding: 16px 24px 64px;
}

.fsp-page .portalLayout-header {
  text-align: center;
  padding: 20px 0 0;
}

/* The legacy markup uses literal <br /> spacers between title/search/toggle */
.fsp-page .portalLayout-header > br,
.fsp-page .portalLayout-searchContainer > br {
  display: none;
}

.fsp-page .portalLayout-header h1 {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fs-text-dark);
  margin: 0 0 10px;
}

.fsp-page .portalLayout-searchContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fsp-page .portalLayout-search,
.fsp-page .portalLayout-advancedSearch {
  width: min(420px, 86vw);
  padding: 11px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: 15px;
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
}

.fsp-page .portalLayout-search:focus-visible,
.fsp-page .portalLayout-advancedSearch:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

/* Search action links (styled as filled blue pills; markup is <a class="nav-cta">) */
.fsp-page .portalLayout-searchContainer a.nav-cta,
.fsp-page .portalLayout-advancedSearchButton a.nav-cta {
  display: inline-block;
  background: var(--fs-secondary);
  color: #fff;
  padding: 11px 26px;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--fs-transition);
}

.fsp-page .portalLayout-searchContainer a.nav-cta:hover,
.fsp-page .portalLayout-advancedSearchButton a.nav-cta:hover {
  background: #0077ED;
}

.fsp-page #portalLayoutAdvancedSearch a,
.fsp-page #filterContainerToggle {
  color: var(--fs-secondary);
  font-family: var(--fs-font-family);
  font-size: 13px;
  text-decoration: none;
}

/* Advanced search panel (inline JS switches it to display:flex) */
.fsp-page .portalLayout-advancedSearchContainer {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 14px;
}

.fsp-page .portalLayout-advancedSearchFieldsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.fsp-page .portalLayout-advancedSearchFields {
  text-align: left;
  font-family: var(--fs-font-family);
}

.fsp-page .portalLayout-advancedSearchFields label {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-font-medium);
  color: var(--fs-text-medium);
  margin-bottom: 4px;
}

.fsp-page .portalLayout-advancedSearchFields .portalLayout-advancedSearch {
  width: 240px;
}

/* Your/All toggle (PortalShowToggleComponent: classic switch-button pattern) */
.fsp-page .portalLayout-toggle {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.fsp-page .switch-button {
  position: relative;
  display: inline-block;
  width: 200px;
  background: #E8E8ED;
  border-radius: 980px;
  text-align: center;
  padding-right: 100px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-text-dark);
}

.fsp-page .switch-button::before {
  content: "All";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6E6E73;
  pointer-events: none;
  z-index: 1; /* above the sliding knob — the knob must never hide the label */
}

/* Active-side emphasis (progressive: browsers without :has keep neutral colors) */
.fsp-page .switch-button:has(.switch-button-checkbox:checked)::before {
  color: var(--fs-text-dark);
}

.fsp-page .switch-button:has(.switch-button-checkbox:checked) .switch-button-label-span {
  color: #6E6E73;
}

.fsp-page .switch-button-checkbox {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  margin: 0;
}

.fsp-page .switch-button-label {
  position: relative;
  display: block;
  padding: 10px 0;
  pointer-events: none;
  user-select: none;
}

.fsp-page .switch-button-label::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 97px;
  background: var(--fs-bg-white);
  border-radius: 980px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease;
  z-index: 0;
}

.fsp-page .switch-button-checkbox:checked + .switch-button-label::before {
  transform: translateX(97px);
}

.fsp-page .switch-button-label-span {
  position: relative;
  z-index: 1;
}

/* Side menu + content area */
.fsp-page .portalLayout-mainContainer {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 20px;
}

/* Long tables: keep the section menu in view (thin, quiet scrollbar) */
.fsp-page .portalLayout-verticalMenu {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #D2D2D7 transparent;
  padding-right: 4px;
}

.fsp-page .portalLayout-verticalMenu::-webkit-scrollbar {
  width: 6px;
}

.fsp-page .portalLayout-verticalMenu::-webkit-scrollbar-thumb {
  background: #D2D2D7;
  border-radius: 3px;
}

.fsp-page .portalLayout-verticalMenu {
  flex: 0 0 212px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--fs-font-family);
}

.fsp-page .portalSidemenu-button,
.fsp-page .portalSidemenu-buttonSelected,
.fsp-page .productManagementSidemenu-button,
.fsp-page .productManagementSidemenu-buttonSelected {
  display: block;
  padding: 10px 16px;
  border-radius: 980px; /* one pill radius for every button-shaped control */
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--fs-text-dark);
  transition: background var(--fs-transition), color var(--fs-transition);
}

.fsp-page .portalSidemenu-button:hover,
.fsp-page .portalSidemenu-button:focus-visible,
.fsp-page .productManagementSidemenu-button:hover,
.fsp-page .productManagementSidemenu-button:focus-visible {
  background: #E8E8ED;
}

.fsp-page .portalSidemenu-buttonSelected,
.fsp-page .productManagementSidemenu-buttonSelected {
  background: var(--fs-secondary);
  color: #fff;
}

.fsp-page .portalLayout-mainContent {
  flex: 1;
  min-width: 0;
}

@media (max-width: 860px) {
  .fsp-page .portalLayout-mainContainer {
    flex-direction: column;
  }

  .fsp-page .portalLayout-verticalMenu {
    flex: 1 1 auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---- Data tables in the migrated workbench (orderList-* et al.) ---- */

.fsp-page .orderList-section {
  overflow-x: auto;
}

.fsp-page .portalLayout-mainContent table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-card-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--fs-card-shadow);
  font-family: var(--fs-font-family);
  font-size: 14px;
}

.fsp-page .portalLayout-mainContent th {
  background: var(--fs-bg-light);
  color: #6E6E73;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--fs-border-light);
  white-space: nowrap;
  vertical-align: middle;
}

.fsp-page .portalLayout-mainContent td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--fs-border-light);
  color: var(--fs-text-medium);
  vertical-align: middle;
  white-space: nowrap;
}

/* Company (3rd column of orderList tables) is the one column allowed to wrap —
   it gets the width. Scoped to .orderList-table: other tables (KPI year grids,
   pricing sheets) distribute width naturally. */
.fsp-page .portalLayout-mainContent .orderList-table:not(.licenseSlots-table):has(tr:first-child th.orderList-tableItemHeader:nth-child(3)) td:nth-child(3) {
  white-space: normal;
  min-width: 190px;
  width: 100%;
}

/* License Slots is the widest workbench table (8 columns) and the only one whose
   3rd column is Serial Number rather than Company — so the rule above would hand
   the spare width to a column that must stay on one line, while Application,
   License ID and Computer Name, the genuinely long values, stayed locked to
   nowrap and pushed the table past its container. Let them wrap instead.
   Requires class="orderList-table licenseSlots-table" (LicenseSlots.cshtml). */
.fsp-page .portalLayout-mainContent .licenseSlots-table th,
.fsp-page .portalLayout-mainContent .licenseSlots-table td {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ... except Serial Number, which is a single opaque token and reads badly broken. */
.fsp-page .portalLayout-mainContent .licenseSlots-table td:nth-child(3),
.fsp-page .portalLayout-mainContent .licenseSlots-table th:nth-child(3) {
  white-space: nowrap;
}


/* Headers right of the Price column head icon columns — center them */
.fsp-page .portalLayout-mainContent th.orderList-priceColumn ~ th {
  text-align: center;
}

.fsp-page .portalLayout-mainContent tr:last-child td {
  border-bottom: none;
}

.fsp-page .portalLayout-mainContent tbody tr:nth-child(even) td {
  background: #FAFAFC;
}

.fsp-page .portalLayout-mainContent tbody tr:hover td {
  background: var(--fs-bg-lighter);
}

.fsp-page .orderList-priceColumn {
  text-align: right;
  white-space: nowrap;
}

.fsp-page th.orderList-priceColumn {
  text-align: right;
}

.fsp-page .orderList-invoiceColumn,
.fsp-page .orderList-analyticsColumn {
  text-align: center;
}

.fsp-page .orderList-invoiceIcon,
.fsp-page .orderList-analyticsIcon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fsp-page .orderList-invoiceColumn a:hover .orderList-invoiceIcon,
.fsp-page .orderList-analyticsColumn a:hover .orderList-analyticsIcon {
  opacity: 1;
  transform: scale(1.15);
}

/* Analytics modal — legacy style.css owned the display:none default; keep it */
.fsp-page .analyticsModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  font-family: var(--fs-font-family);
}

.fsp-page .analyticsModal-content {
  position: relative;
  background: var(--fs-bg-white);
  max-width: 900px;
  margin: 6vh auto;
  padding: 28px;
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow-hover);
}

.fsp-page .analyticsModal-close {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 26px;
  line-height: 1;
  color: var(--fs-text-medium);
  cursor: pointer;
}

.fsp-page .analyticsModal-content h3 {
  display: inline;
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  margin: 0;
}

.fsp-page .analyticsModal-filterContainer {
  margin-top: 14px;
  padding: 14px;
  background: var(--fs-bg-light);
  border-radius: 12px;
}

.fsp-page .analyticsModal-filterStartDate,
.fsp-page .analyticsModal-filterEndDate,
.fsp-page .analyticsModal-filterOption {
  padding: 8px 10px;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  background: var(--fs-bg-white);
}

.fsp-page .analyticsModal-chartContainer {
  margin-top: 18px;
}

/* ---- C&O children batch (Licenses, History, Slots, Downloads, Profile, Company) ----
   These pages reuse the orderList- and checkout- class families (already styled). Below: their extra
   modals (MUST default hidden — legacy style.css owned that), column variants,
   totals rows, and in-content action buttons. */

/* Generic modal overlays. supportModal + simple-modal are DELIBERATELY excluded —
   their multi-step JS depends on the legacy layout, transplanted verbatim below. */
.fsp-page .addLicensesModal,
.fsp-page .usedLicensesModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  font-family: var(--fs-font-family);
}

.fsp-page .addLicensesModal-content,
.fsp-page .usedLicensesModal-content {
  position: relative;
  background: var(--fs-bg-white);
  max-width: 640px;
  margin: 8vh auto;
  padding: 28px;
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow-hover);
}

.fsp-page .addLicensesModal-close,
.fsp-page .usedLicensesModal-close {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 26px;
  line-height: 1;
  color: var(--fs-text-medium);
  cursor: pointer;
}

.fsp-page .company-newAccountInput {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: 15px;
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
}

/* Table variants */
.fsp-page .orderList-columnCenter,
.fsp-page .orderList-tableItemHeaderCenter,
.fsp-page .orderList-versionColumn {
  text-align: center;
}

.fsp-page .orderList-downloadsIcon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fsp-page .portalLayout-mainContent a:hover .orderList-downloadsIcon {
  opacity: 1;
  transform: scale(1.15);
}

.fsp-page .shoppingCart-footerTotalPrice {
  text-align: right;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-text-dark);
  padding: 12px 4px;
}

.fsp-page .checkout-footerTotalPriceAmount {
  color: var(--fs-text-dark);
}

/* In-content action buttons (Add Licenses, support, company account actions) */
.fsp-page .portalLayout-mainContent a.nav-cta,
.fsp-page .company-newAccountButton {
  display: inline-block;
  background: var(--fs-secondary);
  color: #fff;
  border: none;
  padding: 11px 26px;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fs-transition);
}

.fsp-page .portalLayout-mainContent a.nav-cta:hover,
.fsp-page .company-newAccountButton:hover {
  background: #0077ED;
}

/* Destructive action: quiet red outline, same pill */
.fsp-page .company-removeAccountButton {
  display: inline-block;
  background: transparent;
  color: var(--fs-accent);
  border: 2px solid rgba(196, 30, 58, 0.35);
  padding: 9px 24px;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fs-transition);
}

.fsp-page .company-removeAccountButton:hover {
  border-color: var(--fs-accent);
}

/* Forms inside the workbench content area: cap line length for ergonomics
   (Profile/Company render checkout-* fields without the sign-up card wrapper) */
.fsp-page .portalLayout-mainContent .checkout-InputItem,
.fsp-page .portalLayout-mainContent .checkout-inputRow {
  max-width: 560px;
}

.fsp-page .portalLayout-mainContent .checkout-billingTitle,
.fsp-page .portalLayout-mainContent .checkout-contactTitle {
  margin-top: 22px;
}

/* ---- Profile (customer-facing): card the form, column the sections ---- */

.fsp-page .portalLayout-mainContent .yourprofile-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 48px;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  padding: 32px 36px 36px;
}

.fsp-page .yourprofile-card > .checkout-paymentContact,
.fsp-page .yourprofile-card > .checkout-billingInfo {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 420px;
}

/* Titles: comfortable rhythm, no stray top gap at the card's first row */
.fsp-page .yourprofile-card .checkout-billingTitle,
.fsp-page .yourprofile-card .checkout-contactTitle {
  margin: 26px 0 14px;
}

.fsp-page .yourprofile-card > div > .checkout-billingTitle:first-child,
.fsp-page .yourprofile-card > div > .checkout-contactTitle:first-child {
  margin-top: 0;
}

/* "Same as Profile Information" — checkbox and label on one line */
.fsp-page .yourprofile-card .checkout-InputItem:has(.yourprofile-CheckboxInput) {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fsp-page .yourprofile-CheckboxInput {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--fs-secondary);
  flex: none;
}

.fsp-page .yourprofile-card .checkout-InputItem:has(.yourprofile-CheckboxInput) .checkout-Label {
  margin: 0;
  font-size: 14px;
  color: var(--fs-text-dark);
}

/* Short fields stay short (CVV) */
.fsp-page #txtCcCvv2 {
  max-width: 140px;
}

/* Disabled state (billing fields lock when "Same as Profile" is checked) */
.fsp-page .checkout-Input:disabled,
.fsp-page .checkout-Select:disabled,
.fsp-page .checkout-InputFirst:disabled,
.fsp-page .checkout-InputSecond:disabled {
  background: var(--fs-bg-light);
  color: var(--fs-text-medium);
}

/* Save button: a button, not a banner — content-width pill */
.fsp-page .portalLayout-mainContent .submitLink-link {
  width: auto;
  min-width: 240px;
  display: block;
  margin: 22px 0 0;
}

/* Company/Profile odds and ends */
.fsp-page .company-userSettingsTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 18px 0 12px;
}

.fsp-page .company-newAccountInputs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.fsp-page .company-newAccountInputs .company-newAccountInput {
  width: auto;
  flex: 1 1 180px;
  min-width: 0;
}

.fsp-page .company-newAccountButton {
  flex: none;
}

/* Current-accounts listbox (native select[multiple]) */
.fsp-page .portalLayout-mainContent select[multiple] {
  width: 100%;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  padding: 6px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
}

.fsp-page .portalLayout-mainContent select[multiple] option {
  padding: 6px 10px;
  border-radius: 6px;
}

.fsp-page .company-accountResult {
  font-family: var(--fs-font-family);
  font-size: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--fs-border-light);
}

.fsp-page .company-permissions,
.fsp-page .company-userPermission,
.fsp-page .oneLineCheck {
  font-family: var(--fs-font-family);
  font-size: 14px;
}

.fsp-page .company-userPermission,
.fsp-page .oneLineCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

/* Status labels that JS fills later: invisible while empty */
.fsp-page .yourprofile-Error:empty,
.fsp-page .yourprofile-error:empty,
.fsp-page .yourprofile-Success:empty,
.fsp-page .yourprofile-success:empty {
  display: none;
}

/* A card whose only content is an empty status label is a placeholder the JS
   fills later (Support error banner) — collapse it. Never hide cards that hold
   real form controls (Profile/Company). */
.fsp-page .yourprofile-card:not(:has(input, select, textarea, table, button)):has(.yourprofile-Error:empty, .yourprofile-error:empty, .yourprofile-Success:empty, .yourprofile-success:empty) {
  display: none;
}

/* Header-less tables are legacy LAYOUT tables, not data — no card treatment */
.fsp-page .portalLayout-mainContent table:not(:has(th)) {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ---- Support ticket wizard + simple-modal: legacy rules transplanted verbatim.
     The multi-step JS depends on this exact layout (width/height/flex); generic
     card styling collapsed the content to 0 height. Colors left legacy-blue on
     purpose — re-theming waits until the wizard flow is confirmed working. ---- */

.fsp-page .supportModal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(211, 210, 210, 0.796);
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
}

.fsp-page .supportModal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 315px;
  height: 80%;
  border-radius: 9px;
  overflow: auto;
}

.fsp-page .supportModal-close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.fsp-page .supportModal-title {
  text-align: center;
  padding-bottom: 32px;
}

.fsp-page .supportModal-close:hover,
.fsp-page .supportModal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.fsp-page .supportModal-fields {
  font-size: 16px;
}

.fsp-page .supportModal-info {
  font-size: 14px;
  line-height: 2;
  color: #555;
}

.fsp-page .supportModal-InputItem {
  padding-top: 10px;
}

.fsp-page .supportModal-Label {
  color: black;
  font-size: 14px;
  line-height: 1.8;
}

.fsp-page .supportModal-Input {
  display: block;
  width: 300px;
  background-color: #f7fdff;
  border-color: black;
  color: black;
  border-radius: 4px;
  border: 1px solid black;
  padding: 0.5rem;
  width: 98%;
}

.fsp-page .supportModal-prevNext {
  text-align: right;
}

.fsp-page .supportModal-prevNext {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
}

.fsp-page .supportModal-prevNext input {
  width: 100px;
}

.fsp-page .simple-modal {
  --gutter: 14px;
  --modal-color: #1864ab;
  --soft-color: #fafafa;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  padding-top: 2%;
}

.fsp-page .simple-modal__content {
  width: 95vw;
  height: 90vh;
  max-height: 700px;
  max-width: 600px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin: 0 auto;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.fsp-page .simple-modal__content header {
  min-height: 60px;
  height: 60px;
  color: #ffffff;
  background-color: var(--modal-color);
  display: grid;
  padding-left: var(--gutter);
  align-items: center;
  grid-template-columns: auto 60px;
}

.fsp-page .simple-modal__content header h4 {
  margin: 0;
  text-align: left;
}

.fsp-page .simple-modal__content header span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 20px;
  opacity: 0.8;
  cursor: pointer;
}

.fsp-page .simple-modal__content header span:hover {
  opacity: 1;
}

.fsp-page .simple-modal__content .modal-main {
  flex: 1;
  text-align: left;
  overflow: auto;
  padding: var(--gutter);
}

.fsp-page .simple-modal__content footer {
  height: auto;
  text-align: right;
  border-top: solid 1px #cccccc;
  padding: var(--gutter);
  background-color: #ffffff;
  background-color: var(--soft-color);
}

.fsp-page .simple-modal__content footer button,
.fsp-page .simple-modal__content footer input {
  margin: 0;
}

.fsp-page .simple-modal__content footer button:not(:last-child),
.fsp-page .simple-modal__content footer input:not(:last-child) {
  margin-right: var(--gutter);
}

/* ======================================================================
   Pricing Sheet — professional catalog for resellers + customers.
   Pure CSS over the priceSheet-* markup (one table per base product,
   grouped by category <h2>). Dual-audience: resellers get MSRP+Cost
   columns (showResellerCost), customers get a single Price column.
   ====================================================================== */

.fsp-page .priceSheet-main-div {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px 72px;
}

/* Effective-date chip, top-right */
.fsp-page .priceSheet-date {
  display: inline-block;
  float: right;
  margin: 0 0 8px;
  padding: 6px 14px;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-border-light);
  border-radius: 980px;
  font-family: var(--fs-font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fs-text-medium);
}

.fsp-page .priceSheet-date::before {
  content: "Effective ";
  color: #86868B;
  font-weight: 500;
}

/* Category = product family. Strong serif header with accent underline. */
.fsp-page .priceSheet-main-div h2 {
  clear: both;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fs-text-dark);
  margin: 44px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fs-border-light);
}

.fsp-page .priceSheet-main-div h2:first-of-type {
  margin-top: 20px;
}

/* Each base product renders as its own card. */
.fsp-page .priceSheet-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-card-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--fs-card-shadow);
  margin-bottom: 20px;
  font-family: var(--fs-font-family);
  font-size: 14px;
}

/* Column header row (Product | Price/MSRP+Cost | Item #) */
.fsp-page .priceSheet-header-table th {
  background: var(--fs-bg-light);
  color: #6E6E73;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 11px 18px;
  border-bottom: 1px solid var(--fs-border-light);
  white-space: nowrap;
}

.fsp-page .priceSheet-header-table th.msrp {
  text-align: right;
}

/* Generic cells */
.fsp-page .priceSheet-table td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--fs-border-light);
  color: var(--fs-text-medium);
  vertical-align: middle;
}

.fsp-page .priceSheet-table tbody:last-child tr:last-child td {
  border-bottom: none;
}

/* Product name column */
.fsp-page .priceSheet-table-product {
  color: var(--fs-text-dark);
  font-weight: 500;
  width: 100%;
}

/* The FIRST sub-table row after the header = the base product itself:
   make its name and price stand out (it's the headline SKU of the card). */
.fsp-page .priceSheet-header-table + .priceSheet-sub-table .priceSheet-table-product {
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
}

.fsp-page .priceSheet-header-table + .priceSheet-sub-table .priceSheet-table-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--fs-text-dark);
}

/* Price cells: right-aligned, tabular figures so columns line up */
.fsp-page .priceSheet-table-price,
.fsp-page td.msrp {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fs-text-dark);
}

/* Item # : muted monospace, right-aligned */
.fsp-page .priceSheet-table-itemNum {
  text-align: right;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: #86868B;
}

/* Sub-group banners: Included / Optional / Professional Services */
.fsp-page .priceSheet-sub-header-table td {
  background: #FAFAFC;
  color: #6E6E73;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 18px;
  border-top: 1px solid var(--fs-border-light);
  border-bottom: 1px solid var(--fs-border-light);
}

/* Bundled/optional/service rows: indent the product name to show hierarchy */
.fsp-page .priceSheet-sub-header-table ~ .priceSheet-sub-table .priceSheet-table-product,
.fsp-page .priceSheet-sub-table .priceSheet-table-product[data-label="Product/Plug-Ins"],
.fsp-page .priceSheet-sub-table .priceSheet-table-product[data-label="Optional Products/Plug-Ins"],
.fsp-page .priceSheet-sub-table .priceSheet-table-product[data-label="Professional Services"] {
  padding-left: 34px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--fs-text-medium);
  position: relative;
}

/* subtle row hover for scanning long tables */
.fsp-page .priceSheet-sub-table:hover td {
  background: var(--fs-bg-lighter);
}

.fsp-page .priceSheet-sub-header-table:hover td {
  background: #FAFAFC;
}

/* Subscription billing badge (added by the pricing-sheet annotator script) */
.fsp-page .fsp-sub-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 980px;
  background: #E8F1FC;
  border: 1px solid rgba(0, 113, 227, 0.25);
  color: var(--fs-secondary);
  font-family: var(--fs-font-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}

.fsp-page .fsp-sub-badge--legend {
  margin-left: 0;
  margin-right: 8px;
}

.fsp-page .priceSheet-sub-note {
  max-width: 1080px;
  margin: 22px auto 0;
  padding: 12px 18px;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-border-light);
  border-radius: 12px;
  font-family: var(--fs-font-family);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fs-text-medium);
}

.fsp-page .priceSheet-sub-note strong {
  color: var(--fs-text-dark);
}

/* Footer note */
.fsp-page .priceSheet-footer {
  margin-top: 28px;
  text-align: center;
}

.fsp-page .priceSheet-footer p {
  display: inline-block;
  margin: 0;
  padding: 8px 18px;
  background: var(--fs-bg-light);
  border-radius: 980px;
  font-family: var(--fs-font-family);
  font-size: 12.5px;
  color: #86868B;
}

@media (max-width: 600px) {
  .fsp-page .priceSheet-date { float: none; display: block; }
  .fsp-page .priceSheet-header-table th,
  .fsp-page .priceSheet-table td { padding-left: 12px; padding-right: 12px; }
}

/* ---- Tabbed panels (KPI): re-palette the template's inline tab styles ---- */
.fsp-page .tab {
  border: 1px solid var(--fs-border-light);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--fs-bg-light);
  color: var(--fs-text-medium);
  overflow: hidden;
}

.fsp-page .tab button,
.fsp-page .tablinks {
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--fs-text-medium);
  background: transparent;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
}

.fsp-page .tab button:hover,
.fsp-page .tablinks:hover {
  background: #E8E8ED;
  color: var(--fs-text-dark);
}

.fsp-page .tab button.active,
.fsp-page .tablinks.active {
  background: var(--fs-secondary);
  color: #fff;
}

.fsp-page .tabcontent {
  border: 1px solid var(--fs-border-light);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--fs-bg-white);
}

/* ---- Reseller Rebate (app-deployed view; rules transplanted from legacy style.css) ---- */

.fsp-page .rebate-icon {
  width: 15px;
}

.fsp-page .rebate-details {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin: auto;
}

.fsp-page .rebate-table {
  min-width: 200px;
  width: 400px;
}

.fsp-page .rebate-tableAmounts {
  text-align: right;
}

.fsp-page .rebate-periodSelection {
  color: #000000;
  font-size: 11pt;
  padding: 10px;
  border: 2px solid #1864ab;
  border-radius: 6px;
  cursor: pointer;
}

.fsp-page .rebate-chart {
  width: 100%;
}

.fsp-page .rebate-subHeadingContainer {
  text-align: center;
  padding: 20px 0 8px 0;
}

.fsp-page .rebate-subHeading {
  font-size: 18px;
  font-weight: 700;
}

.fsp-page .rebate-modal {
  display: none;
}

.fsp-page .rebate-modal__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s;
  will-change: opacity;
  background-color: #000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fsp-page .rebate-modal__header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.fsp-page .rebate-modal__close {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='16px' viewBox='0 0 15 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='2.-Menu' transform='translate(-15.000000, -13.000000)' stroke='%23000000'%3E%3Cg id='Group' transform='translate(15.000000, 13.521000)'%3E%3Cpath d='M0,0.479000129 L15,14.2971819' id='Path-3'%3E%3C/path%3E%3Cpath d='M0,14.7761821 L15,-1.24344979e-14' id='Path-3'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  width: 15px;
  height: 15px;
}

.fsp-page .rebate-modal__wrapper {
  width: 100%;
  z-index: 9999;
  overflow: auto;
  opacity: 0;
  max-width: 580px;
  max-height: 80vh;
  transition: transform 0.2s, opacity 0.2s;
  will-change: transform;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  -webkit-transform: translateY(5%);
  transform: translateY(5%);
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 6px #777;
  border-radius: 5px;
  margin: 20px;
}

.fsp-page .rebate-modal__content {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  flex-grow: 1;
  /* Optional */
  padding: 1.5rem;
}

.fsp-page .rebate-modal.is-active {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
}

.fsp-page .rebate-modal.is-visible .rebate-modal__wrapper {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.fsp-page .rebate-modal.is-visible .rebate-modal__overlay {
  opacity: 0.5;
}

/* Modernize the period selector to match portal selects */
.fsp-page .rebate-periodSelection {
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  background: var(--fs-bg-white);
}

/* ---- Product Management section (users, groups, workflows, settings) ----
   Reuses the #portal workbench (already styled). Below: PM-specific form
   controls, tables, group-membership dual-list, warnings. Style only. */

.fsp-page .productManagement-section {
  max-width: 1080px;
}

.fsp-page .productManagement-InputItem,
.fsp-page .settings-inputControls,
.fsp-page .groupMembership-Inputs {
  margin-bottom: 14px;
}

.fsp-page .settings-settingsInput,
.fsp-page .settings-searchInput,
.fsp-page .groupMembership-searchInput,
.fsp-page .groupMembership-groupUsersInput,
.fsp-page .groupMembership-allUsersInput,
.fsp-page .users-ImportTextArea,
.fsp-page .productManagement-warningInput {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: 15px;
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
}

.fsp-page .settings-settingsInput:focus-visible,
.fsp-page .settings-searchInput:focus-visible,
.fsp-page .groupMembership-searchInput:focus-visible,
.fsp-page .users-ImportTextArea:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

/* Dual-list group membership: side-by-side select boxes */
.fsp-page .groupMembership-allUsersInput,
.fsp-page .groupMembership-groupUsersInput {
  min-height: 220px;
}

.fsp-page .groupMembership-groupTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 8px 0 12px;
}

/* Add / remove buttons in the dual list */
.fsp-page .groupMembership-newAccountButtonAdd,
.fsp-page .groupMembershipAddDeleteUser,
.fsp-page .productManagementTable-button {
  display: inline-block;
  background: var(--fs-secondary);
  color: #fff;
  border: none;
  padding: 9px 20px;
  min-width: 92px;             /* beat legacy inline width:40px on some Save buttons */
  box-sizing: border-box;
  text-align: center;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fs-transition);
}

.fsp-page .groupMembership-newAccountButtonAdd:hover,
.fsp-page .groupMembershipAddDeleteUser:hover,
.fsp-page .productManagementTable-button:hover {
  background: #0077ED;
}

/* Remove button: red outline pill */
.fsp-page .groupMembership-newAccountButtonRemove {
  display: inline-block;
  background: transparent;
  color: var(--fs-accent);
  border: 2px solid rgba(196, 30, 58, 0.35);
  padding: 8px 18px;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fs-transition);
}

.fsp-page .groupMembership-newAccountButtonRemove:hover {
  border-color: var(--fs-accent);
}

/* Save-changes bar */
.fsp-page .groupMembership-saveChangesContainer {
  margin-top: 18px;
}

/* usersList table header uses its own class */
.fsp-page .usersList-tableItemHeader {
  background: var(--fs-bg-light);
  color: #6E6E73;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--fs-border-light);
  white-space: nowrap;
}

/* Settings radio rows */
.fsp-page .settings-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  margin-right: 18px;
}

.fsp-page .settings-radioSpacer { display: inline-block; width: 10px; }

/* Column layouts used across PM pages */
.fsp-page .productManagement-uiColumn,
.fsp-page .productManagement-innerColumn,
.fsp-page .productmanagement-outerColumn2 {
  min-width: 0;
}

/* Warning callout */
.fsp-page .productManagement-warning {
  background: #FDECEA;
  border: 1px solid #f5c6c0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 14px 0;
  font-family: var(--fs-font-family);
}

.fsp-page .productManagement-warningDescription {
  color: #b3261e;
  font-size: 14px;
  line-height: 1.5;
}

.fsp-page .productManagement-warningButton {
  display: inline-block;
  margin-top: 10px;
  background: var(--fs-accent);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 980px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ======================================================================
   Reseller Resources detail pages (deskconnect/mfdconnect/sysconnect,
   sales-support, sales-tools, support-tools). Marketing-style content:
   hero + resource cards + training-video grid + <details> accordions.
   Styled light/card to match the homepage aesthetic. Content-only.
   ====================================================================== */

/* Hero */
.fsp-page .section-hero {
  background: var(--fs-bg-white);
  padding: 0;
}

.fsp-page .salesSupport-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

.fsp-page .salesSupport-header .hero-text-box {
  flex: 1 1 420px;
  min-width: 0;
}

.fsp-page .section-hero .heading-primary {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fs-text-dark);
  margin: 0 0 16px;
}

.fsp-page .section-hero .hero-description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fs-text-medium);
}

.fsp-page .salesSupport-headerImage {
  max-width: 320px;
  height: auto;
}

/* Section bands */
.fsp-page .partner-landingPageCardSection {
  padding: 48px 24px;
}

.fsp-page .section-even {
  background: var(--fs-bg-light);
}

.fsp-page .section-odd {
  background: var(--fs-bg-white);
}

.fsp-page .section-p {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

/* Card rows */
.fsp-page .flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}

/* Resource cards */
.fsp-page .connect-items,
.fsp-page .card-shadow,
.fsp-page .productInformation-card,
.fsp-page .salesSupport-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  max-width: 380px;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  padding: 28px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.fsp-page .connect-items:hover,
.fsp-page .productInformation-card:hover,
.fsp-page .salesSupport-card:hover {
  box-shadow: var(--fs-card-shadow-hover);
  transform: translateY(-3px);
}

.fsp-page .card-categories,
.fsp-page .productInformation-title,
.fsp-page .salesSupport-card .heading-primary {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 0 0 12px;
  text-align: center;
}

.fsp-page .card-text,
.fsp-page .salesSupport-cardText,
.fsp-page .productInformation-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fs-text-medium);
  flex-grow: 1;
}

.fsp-page .icontop {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: block;
}

/* Resource buttons: blue pills, stacked */
.fsp-page .btn-video,
.fsp-page .salesSupport-button,
.fsp-page .categories-button {
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 22px;
  background: var(--fs-secondary);
  color: #fff;
  border: none;
  border-radius: 980px;
  text-align: center;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fs-transition), transform var(--fs-transition);
}

.fsp-page .btn-video:hover,
.fsp-page .salesSupport-button:hover,
.fsp-page .categories-button:hover {
  background: #0077ED;
  color: #fff;
  transform: translateY(-1px);
}

/* Category cards (training) */
.fsp-page .categories-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  max-width: 380px;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  padding: 24px;
  text-align: center;
}

.fsp-page .categories-image {
  max-width: 120px;
  height: auto;
  margin: 0 auto 14px;
}

.fsp-page .categories-text,
.fsp-page .categories-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fs-text-medium);
}

/* Training-video section */
.fsp-page .productInformation-trainingVideosTitle {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  color: var(--fs-text-dark);
  text-align: center;
  margin: 0 0 32px;
}

.fsp-page .productInformation-trainingVideosGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}

/* Links inside CMS rich-text card bodies render as pill buttons (they are
   plain <a> tags authored in the CMS — legacy style.css buttoned them). */
.fsp-page .productInformation-body a,
.fsp-page .salesSupport-cardText a,
.fsp-page .card-text a {
  display: inline-block;
  margin: 8px 0 0;
  padding: 10px 20px;
  background: var(--fs-secondary);
  color: #fff;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--fs-transition), transform var(--fs-transition);
}

.fsp-page .productInformation-body a:hover,
.fsp-page .salesSupport-cardText a:hover,
.fsp-page .card-text a:hover {
  background: #0077ED;
  color: #fff;
  transform: translateY(-1px);
}

/* Keep all imagery within its container (mfdconnect had a wide hero image) */
.fsp-page .section-hero img,
.fsp-page .partner-landingPageCardSection img,
.fsp-page .productInformation-trainingVideosGrid img {
  max-width: 100%;
  height: auto;
}

/* <details> accordion (support-tools / sales-tools) */
.fsp-page .section-p details {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 12px;
  box-shadow: var(--fs-card-shadow);
  margin-bottom: 12px;
  overflow: hidden;
}

.fsp-page .section-p summary {
  padding: 16px 20px;
  font-family: var(--fs-font-family);
  font-size: 15px;
  font-weight: 600;
  color: var(--fs-text-dark);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.fsp-page .section-p summary::-webkit-details-marker { display: none; }

.fsp-page .section-p summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  color: var(--fs-secondary);
  font-size: 20px;
  line-height: 1;
}

.fsp-page .section-p details[open] summary::after { content: "\2013"; }

.fsp-page .section-p details[open] summary {
  border-bottom: 1px solid var(--fs-border-light);
}

.fsp-page .section-p details > *:not(summary) {
  padding: 14px 20px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fs-text-medium);
}

/* ======================================================================
   Purchase Center — browse pages (products-listing comparison grid,
   product details, options). Transactional pages (cart/checkout/invoice)
   are styled from markup but need a real-cart visual check. Content-only;
   all BeginUmbracoForm / add-to-cart plumbing byte-preserved.
   ====================================================================== */

/* Products-listing intro copy */
.fsp-page .productsList-productsTitle,
.fsp-page #purchaseCenter-home .heading-primary {
  font-family: "Lora", Georgia, serif;
}

/* "Modify existing purchase" accordion at top */
.fsp-page .productList-grid-container > details {
  max-width: 1000px;
  margin: 0 auto 20px !important;
  background: var(--fs-card-bg) !important;
  border: 1px solid var(--fs-card-border);
  border-radius: 12px;
  box-shadow: var(--fs-card-shadow);
  padding: 4px 20px !important;
  width: auto !important;
}

/* Comparison grid: row-based flex, equal product columns, wider Features col */
.fsp-page .productList-grid-container {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  overflow: hidden;
}

.fsp-page .productList-header-row,
.fsp-page .productList-feature-row {
  display: flex;
  align-items: stretch;
}

.fsp-page .productList-griditem {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fsp-page .productList-header-row > .productList-griditem:first-child,
.fsp-page .productList-feature-row > .productList-griditem:first-child {
  flex: 1.4 1 0;
}

/* Product header columns */
.fsp-page .productList-header-row {
  border-bottom: 1px solid var(--fs-border-light);
}

.fsp-page .productList-header-container {
  text-align: center;
  padding: 20px 16px;
}

.fsp-page .productList-header-row > .productList-griditem:not(:first-child) .productList-header-container {
  background: #F0F6FF;
  height: 100%;
}

.fsp-page .productList-header-container p b {
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  color: var(--fs-text-dark);
}

.fsp-page .productList-header-container > a:first-child {
  text-decoration: none;
}

/* Add to cart pill */
.fsp-page .productList-add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px auto 8px;
  padding: 9px 20px;
  background: var(--fs-secondary);
  color: #fff;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--fs-transition), transform var(--fs-transition);
}

.fsp-page .productList-add-to-cart:hover {
  background: #0077ED;
  transform: translateY(-1px);
}

.fsp-page .productList-add-to-cart img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.fsp-page .productList-price {
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--fs-text-dark);
}

/* Feature rows: name left, checks centered, zebra */
.fsp-page .productList-feature-row {
  border-bottom: 1px solid var(--fs-border-light);
}

.fsp-page .productList-feature-row:nth-child(even) {
  background: #FAFAFC;
}

.fsp-page .productList-feature-row:last-child { border-bottom: none; }

.fsp-page .productList-product-container {
  padding: 12px 16px;
  font-family: var(--fs-font-family);
  font-size: 14px;
}

.fsp-page .productList-feature-row > .productList-griditem:first-child .productList-mid {
  text-align: left;
  color: var(--fs-text-dark);
  font-weight: 500;
}

.fsp-page .productList-feature-row > .productList-griditem:not(:first-child) .productList-mid {
  text-align: center;
  color: #00A053;
  font-weight: 700;
}

.fsp-page .productList-mid p { margin: 0; }

/* The responsive per-product card block is a mobile alternate — hide wide */
.fsp-page .productList-response-container { display: none; }

@media (max-width: 760px) {
  .fsp-page .productList-grid-container { display: none; }
  .fsp-page .productList-response-container {
    display: block;
    max-width: 460px;
    margin: 0 auto;
  }
  .fsp-page .productList-response-div {
    background: var(--fs-bg-white);
    border: 1px solid var(--fs-card-border);
    border-radius: 16px;
    box-shadow: var(--fs-card-shadow);
    padding: 20px;
    margin-bottom: 20px;
  }
}

/* Alternate productsList (image + description + price cards) */
.fsp-page .productsList-main,
.fsp-page .productsList-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}

.fsp-page .productsList-item {
  flex: 1 1 300px;
  max-width: 360px;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  padding: 24px;
  text-align: center;
}

.fsp-page .productsList-productImage { max-width: 120px; height: auto; margin: 0 auto 12px; }

.fsp-page .productsList-productTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin-bottom: 8px;
}

.fsp-page .productsList-productDescription {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fs-text-medium);
}

.fsp-page .productsList-price {
  font-weight: 700;
  color: var(--fs-text-dark);
  margin-top: 10px;
}

/* Serial-number "modify existing" options */
.fsp-page .serialNumberOptions-serialNumber,
.fsp-page .serialNumberOptions input {
  padding: 10px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: 15px;
}

.fsp-page .serialNumberOptions-link,
.fsp-page .serialNumberOptions-links a {
  color: var(--fs-secondary);
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
}

.fsp-page .serialNumberOptions-errorMessage {
  color: #b3261e;
  font-size: 13px;
}

/* ======================================================================
   Purchase Center — TRANSACTIONAL funnel (location, cart, checkout, order
   summary, invoice). Wrappers: #checkout, #shoppingCart,
   #purchaseCenter-ResellerLocation. All BeginUmbracoForm / postCartAction /
   clickOnce / place-order plumbing byte-preserved — CSS only.
   ====================================================================== */

.fsp-page #checkout,
.fsp-page #shoppingCart,
.fsp-page #purchaseCenter-ResellerLocation,
.fsp-page #orderSummary,
.fsp-page #invoice {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 24px 64px;
}

.fsp-page #checkout > h1,
.fsp-page #shoppingCart > h1,
.fsp-page #orderSummary > h1 {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fs-text-dark);
  text-align: center;
  margin: 12px 0 24px;
}

/* ---- Location form ---- */
.fsp-page .location {
  max-width: 720px;
  margin: 0 auto;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  overflow: hidden;
}

.fsp-page .locationForm-heading {
  background: var(--fs-gradient-dark);
  color: #fff;
  font-family: "Lora", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 20px 24px;
}

.fsp-page .locationForm-body { padding: 24px 28px; }

.fsp-page .locationForm-product {
  padding: 24px 28px 0;
  font-family: "Lora", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--fs-text-dark);
  border: none;
}

.fsp-page .locationForm-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.fsp-page .locationForm-textbox,
.fsp-page .locationForm-dropdown {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: 15px;
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
}

.fsp-page .locationForm-textbox:focus-visible,
.fsp-page .locationForm-dropdown:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

.fsp-page .locationForm-submitRow {
  display: flex;
  justify-content: flex-end;
  padding: 0 28px 28px;
}

.fsp-page .locationForm-submit input,
.fsp-page .checkout-placeOrder input,
.fsp-page .checkout-placeOrder .submitLink-link {
  display: inline-block;
  background: var(--fs-secondary);
  color: #fff;
  border: none;
  padding: 13px 34px;
  border-radius: 980px;
  font-family: var(--fs-font-family);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fsp-page .locationForm-submit input:hover,
.fsp-page .checkout-placeOrder input:hover,
.fsp-page .checkout-placeOrder .submitLink-link:hover {
  background: #0077ED;
  transform: translateY(-1px);
}

/* ---- Payment fields disabled variant (NET30 / saved-card) ---- */
.fsp-page .checkout-disabledLabel {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-font-medium);
  color: var(--fs-text-medium);
  margin-bottom: 4px;
}

.fsp-page .checkout-disabledInput,
.fsp-page .checkout-disabledSelect {
  width: 100%;
  max-width: 420px;
  padding: 11px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: 15px;
  color: var(--fs-text-medium);
  background: var(--fs-bg-light);
  cursor: not-allowed;
}

.fsp-page #checkout .checkout-InputItem { margin-bottom: 14px; }

/* ---- Cart + checkout order tables ---- */
.fsp-page #checkout table,
.fsp-page #shoppingCart table,
.fsp-page #orderSummary table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-card-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--fs-card-shadow);
  font-family: var(--fs-font-family);
  font-size: 14px;
}

.fsp-page #checkout th,
.fsp-page #shoppingCart th,
.fsp-page #orderSummary th {
  background: var(--fs-bg-light);
  color: #6E6E73;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fs-border-light);
  white-space: nowrap;
}

.fsp-page #checkout td,
.fsp-page #shoppingCart td,
.fsp-page #orderSummary td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--fs-border-light);
  color: var(--fs-text-medium);
  vertical-align: top;
}

.fsp-page .checkout-quantity,
.fsp-page .checkout-years {
  text-align: center;
  white-space: nowrap;
}

.fsp-page th.checkout-quantity,
.fsp-page th.checkout-years,
.fsp-page th.checkout-price {
  text-align: center;
}

.fsp-page th.checkout-price,
.fsp-page td.checkout-price {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fs-text-dark);
}

.fsp-page .shoppingCart-subcost {
  text-decoration: line-through;
  color: #A1A1A6;
  font-weight: 400;
  margin-right: 6px;
}

.fsp-page #checkout td a,
.fsp-page #shoppingCart td a {
  color: var(--fs-secondary);
  text-decoration: none;
}

.fsp-page #checkout td b,
.fsp-page #shoppingCart td b {
  font-family: "Lora", Georgia, serif;
  color: var(--fs-text-dark);
}

.fsp-page .shoppingCart-adjustNumeric {
  width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  text-align: center;
}

.fsp-page .shoppingCart-footerTotalPrice {
  text-align: right;
  font-family: var(--fs-font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--fs-text-dark);
  background: var(--fs-bg-light);
}

.fsp-page .shoppingCart-footerTotalPriceAmount {
  text-align: right;
  font-weight: 700;
  color: var(--fs-text-dark);
  font-variant-numeric: tabular-nums;
}

.fsp-page .orderCard-heading {
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  color: var(--fs-text-dark);
}

.fsp-page .orderInfromation-cardRow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.fsp-page .orderCard-left { color: var(--fs-text-medium); }
.fsp-page .orderCard-right {
  text-align: right;
  font-weight: 600;
  color: var(--fs-text-dark);
  font-variant-numeric: tabular-nums;
}

.fsp-page .checkout-placeOrder {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.fsp-page .printButton,
.fsp-page .invoiceViewLink {
  display: inline-block;
  background: var(--fs-secondary);
  color: #fff;
  padding: 9px 20px;
  border-radius: 980px;
  text-decoration: none;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.fsp-page .printButton:hover,
.fsp-page .invoiceViewLink:hover { background: #0077ED; color: #fff; }

.fsp-page .purchaseCenter-option,
.fsp-page .shoppingCart-option { font-family: var(--fs-font-family); }

.fsp-page .purchaseCenter-optionLink,
.fsp-page .shoppingCart-optionLink,
.fsp-page .purchaseCenter-reforment15Link {
  color: var(--fs-secondary);
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 600px) {
  .fsp-page .locationForm-row { flex-direction: column; gap: 0; }
}

/* ========================================
   2. AUTHENTICATED APP PAGES (.fsp-app)
   px-based; legacy style.css stays loaded
   ======================================== */

/* Header band picks up the brand gradient (was flat #1864ab) */
body.fsp-app .page-header {
  background: var(--fs-gradient-dark);
}

body.fsp-app footer {
  background: var(--fs-dark);
  color: var(--fs-text-white-subtle);
  padding: 20px;
  text-align: center;
  font-size: 13px;
  font-family: var(--fs-font-family);
}

body.fsp-app footer a {
  color: var(--fs-text-white-muted);
  text-decoration: none;
  margin: 0 10px;
}

/* ---- Reseller Resources landing cards (anchor cards; the legacy
        `> div` rules in style.css don't match `> a`, so this owns them) ---- */

#reseller-home .reseller-cardFlexContainer > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 340px;
  padding: 24px;
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  text-decoration: none;
  color: var(--fs-text-dark);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#reseller-home .reseller-cardFlexContainer > a:hover,
#reseller-home .reseller-cardFlexContainer > a:focus-visible {
  box-shadow: var(--fs-card-shadow-hover);
  transform: translateY(-3px);
}

#reseller-home .reseller-cardFlexContainer > a:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

#reseller-home .reseller-cardFlexContainer > a .reseller-cardTitle {
  font-family: var(--fs-font-family);
  font-size: 20px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin-bottom: 8px;
}

#reseller-home .reseller-cardFlexContainer > a .reseller-cardDesc {
  font-family: var(--fs-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fs-text-medium);
}

#reseller-home .reseller-cardFlexContainer > a .reseller-cardLink {
  margin-top: 16px;
  font-family: var(--fs-font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--fs-secondary);
}

/* ---- Purchase Center product tiles ---- */

body.fsp-app .purchaseCenter-header h2,
body.fsp-app .purchaseCenter-section {
  font-family: var(--fs-font-family);
  color: var(--fs-text-dark);
}

body.fsp-app .purchaseCenter-product {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 14px;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

body.fsp-app .purchaseCenter-product:hover {
  box-shadow: var(--fs-card-shadow-hover);
  transform: translateY(-3px);
}

body.fsp-app .purchaseCenter-productLink {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: var(--fs-text-dark);
}

body.fsp-app .purchaseCenter-productText {
  font-family: var(--fs-font-family);
  color: var(--fs-text-medium);
}

/* Trust + pricing reassurance strip under the purchase-center header */
body.fsp-app .fsp-purchase-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px auto 22px;
  padding: 0 20px;
  font-family: var(--fs-font-family);
}

body.fsp-app .fsp-purchase-trust span {
  display: inline-block;
  padding: 6px 14px;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-border-light);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fs-text-medium);
}

/* ---- Data tables (orders, licenses, invoices, quotes, users, cart) ----
   Generic uplift: modern spacing, hairline rules, hover rows. Scoped to
   main content so admin widgets/nav are untouched. */

body.fsp-app main table {
  border-collapse: collapse;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-border-light);
  border-radius: 12px;
  overflow: hidden;
}

body.fsp-app main th {
  background: var(--fs-bg-light);
  color: var(--fs-text-dark);
  font-family: var(--fs-font-family);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--fs-border-light);
}

body.fsp-app main td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--fs-border-light);
  font-family: var(--fs-font-family);
  color: var(--fs-text-medium);
}

body.fsp-app main tr:last-child td {
  border-bottom: none;
}

body.fsp-app main tbody tr:hover td {
  background: var(--fs-bg-lighter);
}

/* ======================================================================
   MSM #991753 — remaining fsPortal migration debt (2026-08-01)
   1. /sites/ Portal Sites landing (template opted in; this owns its layout —
      the generic .card-categories and .categories-button rules double as
      training-page title and pill styles, so the landing scopes overrides).
   2. sign-up ?test=true: the 8 structural newSignup classes that had no rules.
   3. var-overview (compiled view, self-styled inline): align its legacy
      #007BFF headings and links with the design system.
   ====================================================================== */

/* ---- 1. Portal Sites landing ---- */

.fsp-page .fsp-sitesLanding {
  max-width: 1140px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

.fsp-page .fsp-sitesLanding section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}

.fsp-page .fsp-sitesLanding .site-body-title {
  flex-basis: 100%;
}

.fsp-page .fsp-sitesLanding .card-categories {
  display: flex;
  flex: 1 1 300px;
  max-width: 380px;
  margin: 0;
}

.fsp-page .fsp-sitesLanding .categories-container {
  max-width: none;
  width: 100%;
}

.fsp-page .fsp-sitesLanding .categories-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fsp-page .fsp-sitesLanding .categories-text p:first-child {
  font-size: 20px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 0 0 8px;
}

.fsp-page .fsp-sitesLanding .video-selection-image {
  max-width: 100%;
  height: auto;
}

/* The shared .categories-button rule pill-styles this wrapper on training
   pages; here the inner .btn-video is the single pill. */
.fsp-page .fsp-sitesLanding .categories-button {
  margin-top: auto;
  width: auto;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ---- 2. Sign-up floating-label branch: structural classes ---- */

.fsp-page .newSignup-container {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-card-border);
  border-radius: 16px;
  box-shadow: var(--fs-card-shadow);
  padding: 32px 28px;
}

.fsp-page .newSignup-YourInfoSection,
.fsp-page .newSignup-accountInfo {
  margin: 0 0 24px;
}

.fsp-page .newSignup-title {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--fs-text-dark);
  margin: 0 0 16px;
}

.fsp-page .newSignup-InputContainer {
  margin: 0;
}

.fsp-page .newSignup-SelectWrapper {
  margin-bottom: 14px;
}

.fsp-page .newSignup-CountrySelect {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  font-family: var(--fs-font-family);
  font-size: var(--fs-text-base);
  color: var(--fs-text-dark);
  background: var(--fs-bg-white);
  transition: border-color var(--fs-transition);
}

.fsp-page .newSignup-CountrySelect:focus-visible {
  outline: 2px solid var(--fs-secondary);
  outline-offset: 2px;
}

.fsp-page .newSignup-SubmitContainer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ---- 3. var-overview heading and link recolor ---- */

.fsp-page .var-container h1,
.fsp-page .var-container h2 {
  color: var(--fs-text-dark);
}

.fsp-page .var-container a {
  color: var(--fs-secondary);
}

/* ════════════════════════════════════════════════════════════════════════════
   Signed-in portal header — mobile wrap. Appended 2026-08-06.
   Upstream report: fabsoft-upd/FS-Client-Portal-Umbraco#6

   THE BUG. Every signed-in portal page whose header renders the full navigation
   scrolls sideways on a phone. Measured on production at a 420px viewport:
   232px of horizontal overflow, and it scales with the viewport (7px at 900px,
   147px at 760px, 142px at 600px, 232px at 420px).

     page                                    overflow   .fsp-nav-list   items
     products-listing                          232px        883px         6
     purchase-center home                      232px        883px         6
     shopping-cart                              232px        883px         6
     checkout                                   232px        883px         6
     customers-and-orders                         0px        404px         1

   customers-and-orders is clean only BECAUSE its nav renders one item, not
   because it handles narrow viewports — so this is item-count-specific, not
   page-specific. Any page with the full menu overflows.

   THE CAUSE. `.fsp-nav` (fabsoft-portal.css:74) already sets `flex-wrap: wrap`,
   so the logo and the nav can drop onto separate lines. `.fsp-nav-list`
   (line 94) does NOT — `flex-wrap` is left at its initial `nowrap`, so the six
   items (the view-as select, four links and the Logout pill) measure 883px and
   simply extend past the viewport. The only existing media query touching the
   header (line 483) re-centres it, which changes alignment and not the overflow.

   WHY IT WAS NEVER CAUGHT. These pages are behind authentication, so no public
   crawl, uptime check or Lighthouse run reaches them. Signed-in mobile is
   effectively untested — the same blind spot that hid the query-param 500s.

   Deliberately a WRAP, not a hamburger. A disclosure menu is the nicer answer
   but it needs markup, JS and a design decision; wrapping is CSS-only, reversible,
   and stops the page sliding today. Also deliberately NOT `overflow-x: hidden` on
   the body: that hides the symptom and would mask the next occurrence.

   The 1000px breakpoint is measured, not chosen — overflow is 0 at 1000px and
   7px at 900px, so the list stops fitting just under 1000.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .fsp-page .fsp-nav-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }

  /* `li.ui-widget { margin-right: auto }` (line ~859) exists to push the view-as
     widget left and group everything after it right. That split only makes sense
     on a single line; once the list wraps it strands the remaining items on their
     own row against the left edge. */
  .fsp-page .fsp-nav-list li.ui-widget {
    margin-right: 0;
  }

  /* The logo and the nav are already free to wrap onto separate lines via
     .fsp-nav's own flex-wrap; centre them once they do, rather than leaving the
     logo hard left and the nav hard right on two ragged rows. */
  .fsp-page .fsp-nav {
    justify-content: center;
  }
}


/* licenseSlots-compact: below ~1500px the eight columns did not fit the content column
   and the table scrolled sideways inside its box. Reclaim the space from padding,
   the button and the checkbox column rather than from the data. */
.fsp-page .portalLayout-mainContent .licenseSlots-table th,
.fsp-page .portalLayout-mainContent .licenseSlots-table td {
  padding-left: 8px;
  padding-right: 8px;
}

/* The checkbox column only ever holds a checkbox. */
.fsp-page .portalLayout-mainContent .licenseSlots-table th:first-child,
.fsp-page .portalLayout-mainContent .licenseSlots-table td:first-child {
  padding-left: 8px;
  padding-right: 2px;
  width: 1%;
}

/* Deactivate is a row action, not a page CTA — it does not need nav-cta's bulk.
   143px -> 93px across the widest column after Application. */
.fsp-page .portalLayout-mainContent .licenseSlots-table .orderList-button {
  padding: 4px 10px;
  font-size: 12px;
}

/* Serial Number repeats the search term on nearly every row and is the one long
   value that can break cleanly. Allowing it to wrap is what buys the last ~45px;
   it stays on one line whenever the layout has room. */
.fsp-page .portalLayout-mainContent .licenseSlots-table td:nth-child(3),
.fsp-page .portalLayout-mainContent .licenseSlots-table th:nth-child(3) {
  white-space: normal;
  overflow-wrap: break-word;
}