/**
 * Platform nav parity — unique filename (nginx caches /css/ immutable).
 *
 * 1. Desktop hero is a little taller than the 14rem-offset cut.
 * 2. Login is the same circular brand orb on every navbar, including the
 *    phone drawer (no more full-width mobile pill).
 * 3. Phone drawer order: Connect → Copilot → Wallet → Capital → Insurance
 *    → Partners → About, then Language as a separated last utility.
 * 4. Elinom Copilot is a first-class nav tab on every width.
 * 5. Notification bell default colour is red on every navbar.
 */

/* ── Hero: a bit taller on desktop ─────────────────────────────────── */
@media (min-width: 901px) {
  html[data-active-module="landing"] {
    --erp-hero-min-offset: 6rem;
  }

  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center,
  html[data-active-module="landing"] #landing .erp-hero.erp-hero--command-center {
    min-height: calc(100vh - var(--erp-hero-min-offset, 6rem)) !important;
    padding-bottom: 2.75rem !important;
  }

  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row {
    grid-auto-rows: 176px !important;
  }

  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card {
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
  }
}

/* ── Desktop tab order: Copilot sits after Connect ─────────────────── */
@media (min-width: 1280px) {
  /* Reserve util-bar overlay room on ERP home only — do not indent Zuto/module navs */
  html[data-active-module="landing"] body.erp-body #navbar .container.nav-container {
    padding-right: 23.5rem !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li > a,
  html body.erp-body #navbar #navMenu > li > a {
    padding: 0 0.28rem !important;
  }

  html body #navbar #navMenu > li.product-li { order: 1 !important; }
  html body #navbar #navMenu > li.solutions-li { order: 2 !important; }
  html body #navbar #navMenu > li.platform-li { order: 3 !important; display: none !important; }
  html body #navbar #navMenu > li.zuto-li { order: 4 !important; }
  html body #navbar #navMenu > li.entertainment-li { order: 5 !important; }
  html body #navbar #navMenu > li.capital-li { order: 6 !important; }
  html body #navbar #navMenu > li.wallet-li { order: 7 !important; }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.insurance-li,
  html body #navbar #navMenu > li.insurance-li {
    order: 3 !important;
    display: none !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.connect-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.connect-li,
  html body #navbar #navMenu > li.connect-li,
  html body #navbar #navMenu > li.nav-end-link.connect-li {
    order: 8 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.copilot-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.copilot-li,
  html body #navbar #navMenu > li.copilot-li,
  html body #navbar #navMenu > li.nav-end-link.copilot-li {
    order: 9 !important;
    display: flex !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.partners-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.partners-li,
  html body #navbar #navMenu > li.partners-li,
  html body #navbar #navMenu > li.nav-end-link.partners-li {
    order: 10 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.about-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.about-li,
  html body #navbar #navMenu > li.about-li,
  html body #navbar #navMenu > li.nav-end-link.about-li {
    order: 11 !important;
    display: flex !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.help-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.help-li,
  html body #navbar #navMenu > li.help-li,
  html body #navbar #navMenu > li.nav-end-link.help-li {
    order: 12 !important;
    display: flex !important;
  }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li > a,
  html body.erp-body #navbar #navMenu > li > a {
    padding: 0 0.12rem !important;
    font-size: 0.76rem !important;
    letter-spacing: -0.015em !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.help-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.help-li,
  html body #navbar #navMenu > li.help-li,
  html body #navbar #navMenu > li.nav-end-link.help-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.about-li,
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.about-li {
    display: flex !important;
  }

  html body #navbar #navMenu > li.copilot-li,
  html body #navbar #navMenu > li.nav-end-link.copilot-li {
    display: flex !important;
  }
}

/* ── Login orb: same circle on every navbar / every viewport ───────── */
#loginBtn.erp-login-orb,
#navbar #loginBtn.erp-login-orb,
#navbar #util-bar #loginBtn.erp-login-orb,
#navbar #util-bar .nav-auth-buttons #loginBtn.erp-login-orb,
a#loginBtn.erp-login-orb,
button#loginBtn.erp-login-orb,
#navMenu .erp-login-orb,
#navMenu .mobile-login-orb,
#navMenu .mobile-util-action--primary.erp-login-orb {
  --erp-login-grad: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%);
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--erp-login-grad) !important;
  background-image: var(--erp-login-grad) !important;
  background-size: 100% 100% !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow:
    0 0 0 2px rgb(56 189 248 / 28%),
    0 8px 18px rgb(99 102 241 / 28%),
    0 4px 12px rgb(245 158 11 / 22%) !important;
  overflow: hidden !important;
  gap: 0 !important;
  flex: 0 0 48px !important;
  letter-spacing: 0 !important;
  font-size: 0 !important;
}

#loginBtn.erp-login-orb--out,
#navbar #loginBtn.erp-login-orb--out,
#navMenu .erp-login-orb--out {
  --erp-login-grad: linear-gradient(120deg, #fb7185 0%, #e879f9 48%, #f59e0b 100%);
}

#loginBtn.erp-login-orb::before,
#navbar #loginBtn.erp-login-orb::before,
#navMenu .erp-login-orb::before,
#navMenu .mobile-login-orb::before {
  content: "" !important;
  position: absolute !important;
  inset: 11px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 18%) !important;
  z-index: 1 !important;
}

#loginBtn.erp-login-orb .erp-login-orb-label,
#navMenu .erp-login-orb .erp-login-orb-label {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#loginBtn.erp-login-orb .erp-login-lock,
#loginBtn.erp-login-orb .fa-lock,
#loginBtn.erp-login-orb .fa-lock-open,
#loginBtn.erp-login-orb .fa-sign-out-alt,
#navMenu .erp-login-orb .erp-login-lock,
#navMenu .erp-login-orb .fa-lock,
#navMenu .mobile-login-orb .erp-login-lock {
  position: relative !important;
  z-index: 3 !important;
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
}

#loginBtn.erp-login-orb .erp-login-orb-text,
#navMenu .erp-login-orb .erp-login-orb-text,
#navMenu .erp-login-orb .mobile-util-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

@media (min-width: 901px) {
  #loginBtn.erp-login-orb,
  #navbar #loginBtn.erp-login-orb,
  #navbar #util-bar #loginBtn.erp-login-orb,
  a#loginBtn.erp-login-orb,
  button#loginBtn.erp-login-orb {
    display: inline-flex !important;
  }

  html[data-active-module="landing"] #loginBtn.erp-login-orb,
  html[data-active-module="landing"] #navbar #util-bar #loginBtn.erp-login-orb {
    width: var(--erp-util-size, 40px) !important;
    height: var(--erp-util-size, 40px) !important;
    min-width: var(--erp-util-size, 40px) !important;
    min-height: var(--erp-util-size, 40px) !important;
    max-width: var(--erp-util-size, 40px) !important;
    max-height: var(--erp-util-size, 40px) !important;
    flex: 0 0 var(--erp-util-size, 40px) !important;
  }

  html[data-active-module="landing"] #loginBtn.erp-login-orb::before,
  html[data-active-module="landing"] #navbar #util-bar #loginBtn.erp-login-orb::before {
    inset: 9px !important;
  }
}

/* ── Bell: red is the default on every navbar ──────────────────────── */
#navNotifBell,
#navNotifBell i,
#navbar #navNotifBell,
#navbar #navNotifBell i,
#navbar #util-bar #navNotifBell,
#navbar #util-bar #navNotifBell i {
  color: #ef4444 !important;
}

#navNotifBell:hover,
#navNotifBell:hover i,
#navbar #navNotifBell:hover,
#navbar #navNotifBell:hover i {
  color: #f87171 !important;
}

#navNotifBell.nav-bell--unread,
#navNotifBell.nav-bell--unread i,
#navNotifBell.nav-bell--critical,
#navNotifBell.nav-bell--critical i {
  color: #ef4444 !important;
}

#navNotifBell.nav-bell--warning,
#navNotifBell.nav-bell--warning i {
  color: #f59e0b !important;
}

#navNotifBell.nav-bell--success,
#navNotifBell.nav-bell--success i,
#navNotifBell.nav-bell--info,
#navNotifBell.nav-bell--info i {
  color: #22c55e !important;
}

#navbar #navNotifBell,
#navbar #util-bar #navNotifBell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--erp-util-size, 40px);
  height: var(--erp-util-size, 40px);
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

/* ── Copilot tab chrome ────────────────────────────────────────────── */
#navbar #navMenu > li.copilot-li > a.nav-link {
  cursor: pointer;
}

/* ── Phone / tablet drawer: curated product list + orb + language last ── */
@media (max-width: 1279px) {
  html body #navbar #navMenu.mobile-open > li.product-li,
  html body #navbar #navMenu.mobile-open > li:has(> a#productBtn),
  html body #navbar #navMenu.mobile-open > li.solutions-li,
  html body #navbar #navMenu.mobile-open > li:has(> a#solutionsBtn),
  html body #navbar #navMenu.mobile-open > li.platform-li,
  html body #navbar #navMenu.mobile-open > li:has(> a#platformBtn),
  html body #navbar #navMenu.mobile-open > li.zuto-li,
  html body #navbar #navMenu.mobile-open > li.entertainment-li,
  html body #navbar #navMenu.mobile-open > li.help-li,
  html body #navbar #navMenu.mobile-open > li.nav-fin-head {
    display: none !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li > a > i.nav-row-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.connect-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.connect-li > a > i.nav-row-icon {
    color: #fb923c !important;
    -webkit-text-fill-color: #fb923c !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.copilot-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.copilot-li > a > i.nav-row-icon {
    color: #a78bfa !important;
    -webkit-text-fill-color: #a78bfa !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.wallet-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.wallet-li > a > i.nav-row-icon {
    color: #2dd4bf !important;
    -webkit-text-fill-color: #2dd4bf !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.capital-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.capital-li > a > i.nav-row-icon {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.insurance-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.insurance-li > a > i.nav-row-icon {
    color: #38bdf8 !important;
    -webkit-text-fill-color: #38bdf8 !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.partners-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.partners-li > a > i.nav-row-icon {
    color: #34d399 !important;
    -webkit-text-fill-color: #34d399 !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.about-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.about-li > a > i.nav-row-icon {
    color: #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li.help-li > a > i.nav-row-icon,
  html body #navbar #navMenu.mobile-open > li.help-li > a > i.nav-row-icon {
    color: #f472b6 !important;
    -webkit-text-fill-color: #f472b6 !important;
  }

  html body #navbar #mobileMenuBtn,
  html body.erp-body #navbar #mobileMenuBtn,
  html body.erp-body #navbar .mobile-menu-btn {
    border: 1.5px solid transparent !important;
    background:
      linear-gradient(#0b1220, #0b1220) padding-box,
      linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%) border-box !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px rgb(99 102 241 / 18%) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-action--signup {
    justify-content: stretch !important;
    justify-items: start !important;
    column-gap: 14px !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .erp-signup-avatar,
  html body #navbar #navMenu.mobile-open .erp-signup-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 2px rgb(99 102 241 / 28%) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .erp-signup-avatar svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
  }

  html body #navbar #navMenu.mobile-open .mobile-util-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-util-action.mobile-util-action--primary.erp-login-orb,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-util-action.mobile-login-orb,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-util-action--primary.erp-login-orb,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-login-orb,
  html body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-util-action--primary.erp-login-orb,
  html body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-login-orb {
    order: 0 !important;
    display: inline-flex !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 32px !important;
  }

  html body #navbar #navMenu.mobile-open .mobile-util-action--signup {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body #navbar #navMenu.mobile-open .mobile-lang-select {
    order: 90 !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgb(148 163 184 / 28%) !important;
    box-shadow:
      0 -1px 0 rgb(148 163 184 / 16%),
      var(--erp-mnav-shadow, 0 1px 2px rgb(2 6 18 / 55%), 0 6px 16px rgb(2 6 18 / 38%)) !important;
  }

  html body #navbar #navMenu.mobile-open > li.mobile-lang-footer,
  html body #navbar #navMenu.mobile-open > li#mobileLangFooter {
    order: 90 !important;
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgb(148 163 184 / 28%) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-util-action.erp-login-orb,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-pair .erp-login-orb,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-login-orb,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-action.erp-login-orb,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-login-orb,
  html body #navbar #navMenu.mobile-open .mobile-login-pair .erp-login-orb,
  html body #navbar #navMenu.mobile-open .mobile-login-pair .mobile-login-orb {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 32px !important;
  }

  html.erp-explore-open body.erp-body #loginBtn,
  html.erp-explore-open body.erp-body #loginBtn.erp-login-orb,
  html.erp-explore-open body.erp-body #navbar #util-bar #loginBtn,
  html.erp-explore-open body.erp-body #navbar #util-bar #loginBtn.erp-login-orb {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Injected global navbar on pages that previously had no #navbar */
nav#navbar.erp-global-navbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  width: 100%;
  background: #0b1220;
}

html body #navbar #createAccountBtn,
html body #navbar #util-bar #createAccountBtn {
  display: none !important;
}

@media (max-width: 1279px) {
  html body #navbar #mobileMenuBtn,
  html body.erp-body #navbar #mobileMenuBtn,
  html body.erp-body #navbar .mobile-menu-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 6 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    border: 1.5px solid transparent !important;
    background:
      linear-gradient(#0b1220, #0b1220) padding-box,
      linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%) border-box !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px rgb(99 102 241 / 18%) !important;
  }
}