/* Sync customer portal: fixed navigation based on the approved account reference. */
.sync-client-portal { --portal-nav-ink: #f4f4f5; --portal-nav-muted: #acaeb6; --portal-nav-accent: #ff791a; display: contents; color: var(--portal-nav-ink); }
.sync-portal-mobile-header, .sync-portal-backdrop { display: none; }
.sync-portal-drawer { position: fixed; z-index: 45; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 256px; max-width: 100%; min-width: 0; padding: 31px 17px 20px; border-right: 1px solid #202022; background: #000; color: var(--portal-nav-ink); }
.sync-portal-drawer__top { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 52px; padding: 0 15px; margin-bottom: 43px; }
.sync-portal-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #f7f7f8; font-size: 27px; font-weight: 650; line-height: 1; letter-spacing: .015em; text-decoration: none; }
.sync-portal-brand img { display: block; flex: none; width: 48px; height: 48px; object-fit: contain; }
.sync-portal-drawer__close { display: none; }
.sync-portal-nav { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #353538 transparent; }
.sync-client-portal .sync-portal-nav__link { position: relative; display: flex; align-items: center; gap: 18px; flex: none; min-height: 56px; padding: 15px 22px; overflow: hidden; border: 0; border-radius: 11px; background: transparent; color: var(--portal-nav-muted); font-size: 12.5px; font-weight: 450; line-height: 1.6; text-decoration: none; transition: background .18s ease, color .18s ease; }
.sync-client-portal .sync-portal-nav__link svg { display: block; flex: none; width: 22px; height: 22px; }
.sync-portal-nav__link > span { min-width: 0; overflow-wrap: anywhere; }
.sync-client-portal .sync-portal-nav__link:hover { background: #181819; color: #fff; }
.sync-client-portal .sync-portal-nav__link[aria-current='page'] { background: linear-gradient(100deg,#3a2213 0%,#1a1715 64%,#171717 100%); color: var(--portal-nav-accent); font-weight: 600; }
.sync-portal-nav__link[aria-current='page']::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 8px; background: var(--portal-nav-accent); }
.sync-portal-drawer__bottom { flex: none; min-width: 0; margin: auto 15px 0; padding-top: 30px; }
.sync-client-portal .sync-portal-account-menu { position: relative; width: 100%; border-top: 1px solid #303033; }
.sync-client-portal .sync-portal-account-menu > .sync-portal-account-trigger { display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; height: auto; min-height: 83px; padding: 14px 0; border: 0; border-radius: 0; background: transparent; color: #f4f4f5; text-align: left; }
.sync-client-portal .sync-portal-account-menu > .sync-portal-account-trigger:hover { background: transparent; color: #fff; }
.sync-portal-avatar { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border: 1px solid #3b3c3e; border-radius: 50%; background: #2b2c2e; color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.sync-portal-profile-copy { flex: 1; min-width: 0; }
.sync-portal-profile-copy strong { display: block; color: #ededf0; font-size: 11px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.sync-portal-profile-copy > span { display: block; margin-top: 3px; color: #a1a3ac; font-size: 11px; font-weight: 400; line-height: 1.5; }
.sync-portal-profile-chevron { flex: none; width: 16px; height: 16px; color: #a3a5ad; }
.sync-client-portal .sync-portal-account-menu > div[x-show='menuOpen'] { position: absolute; z-index: 55; top: auto; bottom: calc(100% + 9px); left: 0; right: auto; width: 228px; max-width: calc(100vw - 44px); padding: 5px; border: 1px solid #333337; border-radius: 9px; background: #161617; box-shadow: 0 18px 42px #0008; }
.sync-client-portal .sync-portal-account-menu > div > button { display: flex; align-items: center; min-height: 44px; padding: 10px 11px; border-radius: 5px; color: #b6b6be; font-size: 12px; line-height: 1.5; text-align: left; }
.sync-client-portal .sync-portal-account-menu > div > button:hover { background: #242426; color: #fff; }
.sync-client-portal .sync-portal-account-menu > div > button.text-error { color: #e2958e; }
.sync-client-portal .sync-portal-logout { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 59px; padding: 13px 7px; border-top: 1px solid #242426; background: transparent; color: #b3b5be; font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; cursor: pointer; transition: color .18s ease; }
.sync-client-portal .sync-portal-logout:hover { color: #fff; }
.sync-portal-logout svg { flex: none; width: 22px; height: 22px; }
.sync-client-portal :is(a,button):focus-visible { outline: 2px solid #ff791a; outline-offset: 3px; }

/* Customer page headings share the same uncluttered portal hierarchy. */
.sa-customer-header.sync-client-page-heading { display: flex; align-items: flex-end; justify-content: space-between; min-width: 0; gap: 24px; margin: 0 0 25px; padding: 0; }
.sync-client-page-heading__copy { min-width: 0; }
.sa-customer-header.sync-client-page-heading .sa-customer-header-title { margin: 0; color: #f5f5f5; font-size: clamp(28px,2.8vw,36px); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.sa-customer-header.sync-client-page-heading .sa-customer-header-subtitle { max-width: 650px; margin: 7px 0 0; color: #a1a4ae; font-size: 14px; line-height: 1.65; }
.sa-customer-header.sync-client-page-heading .sync-client-page-heading__action { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 12px; min-height: 44px; max-width: 100%; padding: 10px 15px; border: 1px solid #363639; border-radius: 8px; background: #121213; box-shadow: none; color: #e5e5e7; font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: none; }
.sa-customer-header.sync-client-page-heading .sync-client-page-heading__action:hover { border-color: #ff791a; color: #ff791a; }
.sync-client-page-heading__action svg { flex: none; width: 16px; height: 16px; }
@media (max-height: 760px) and (min-width: 1024px) {
  .sync-portal-drawer { padding-top: 20px; padding-bottom: 12px; }
  .sync-portal-drawer__top { margin-bottom: 25px; }
  .sync-client-portal .sync-portal-nav__link { min-height: 49px; padding-block: 11px; }
  .sync-portal-drawer__bottom { padding-top: 20px; }
}
@media (max-width: 1023px) {
  .sync-portal-mobile-header { position: fixed; z-index: 44; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; padding: 0 18px; border-bottom: 1px solid #252528; background: #000; }
  .sync-portal-mobile-header .sync-portal-brand { gap: 8px; font-size: 23px; }
  .sync-portal-mobile-header .sync-portal-brand img { width: 37px; height: 37px; }
  .sync-portal-mobile-toggle, .sync-portal-drawer__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #d9d9de; }
  .sync-portal-mobile-toggle svg, .sync-portal-drawer__close svg { width: 23px; height: 23px; }
  .sync-portal-mobile-toggle:hover, .sync-portal-drawer__close:hover { background: #222224; }
  .sync-portal-backdrop { position: fixed; z-index: 48; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000b; cursor: default; touch-action: none; }
  .sync-portal-drawer { z-index: 49; width: 286px; max-width: calc(100vw - 26px); padding: 19px 15px 14px; visibility: hidden; transform: translateX(-100%); transition: transform .22s ease, visibility .22s ease; }
  .sync-portal-drawer.is-open { visibility: visible; transform: translateX(0); }
  .sync-portal-drawer__top { gap: 10px; min-height: 48px; margin-bottom: 28px; padding: 0 9px; }
  .sync-portal-drawer__top .sync-portal-brand { font-size: 24px; }
  .sync-portal-drawer__top .sync-portal-brand img { width: 42px; height: 42px; }
  .sync-client-portal .sync-portal-nav__link { gap: 16px; min-height: 54px; padding: 13px 22px; font-size: 13px; }
  .sync-portal-drawer__bottom { margin-inline: 13px; padding-top: 25px; }
  .sync-portal-profile-copy strong { font-size: 12px; }
}
@media (max-width: 600px) {
  .sa-customer-header.sync-client-page-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 22px; }
  .sa-customer-header.sync-client-page-heading .sa-customer-header-title { font-size: 29px; }
  .sa-customer-header.sync-client-page-heading .sa-customer-header-subtitle { font-size: 13px; }
  .sa-customer-header.sync-client-page-heading .sync-client-page-heading__action { justify-content: center; width: auto; min-height: 44px; }
}
@media (max-height: 620px) and (max-width: 1023px) {
  .sync-portal-drawer { padding-top: 10px; padding-bottom: 8px; }
  .sync-portal-drawer__top { margin-bottom: 12px; }
  .sync-client-portal .sync-portal-nav__link { min-height: 47px; padding-block: 10px; }
  .sync-portal-drawer__bottom { padding-top: 12px; }
  .sync-client-portal .sync-portal-account-menu > .sync-portal-account-trigger { min-height: 68px; padding-block: 10px; }
  .sync-client-portal .sync-portal-logout { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .sync-client-portal *, .sync-portal-drawer { transition: none !important; } }