/**
 * Desktop landing chrome: one utility group + requested tab order.
 * Unique filename: nginx caches /css/ immutable.
 *
 * Product → Solutions → Zuto Marketplace → Entertainment → Capital →
 * Elinom Wallet → Elinom Connect → Partners → About → Help Centre
 */

@media (min-width: 901px) {
  html[data-active-module="landing"] {
    --erp-util-size: 40px;
    --erp-util-gap: 0.75rem;
    --erp-util-icon: 0.95rem;
  }

  html[data-active-module="landing"] body.erp-body #navbar.navbar .container.nav-container,
  html[data-active-module="landing"] body.erp-body #navbar .container.nav-container,
  html[data-active-module="landing"] body.erp-body #navbar .nav-container {
    padding-right: 17.25rem !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner {
    gap: var(--erp-util-gap) !important;
    align-items: center !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > .nav-auth-buttons,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #navUserChip,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #navNotifWrap,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > .util-lang-wrap,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #utilLangWrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--erp-nav-main-h) !important;
    min-height: var(--erp-nav-main-h) !important;
    max-height: var(--erp-nav-main-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Login orb already toggles to Logout. Keep the legacy Security/Logout
     row out of the utility group so icon gaps stay even. */
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-bar-inner > #navUserProfile {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar .nav-auth-buttons #loginBtn.util-btn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navUserChip .nav-user-avatar,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navNotifBell {
    width: var(--erp-util-size) !important;
    height: var(--erp-util-size) !important;
    min-width: var(--erp-util-size) !important;
    min-height: var(--erp-util-size) !important;
    max-width: var(--erp-util-size) !important;
    max-height: var(--erp-util-size) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 var(--erp-util-size) !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar .nav-auth-buttons #loginBtn.util-btn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn {
    border-radius: 50% !important;
  }

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

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navUserChip {
    width: var(--erp-util-size) !important;
    min-width: var(--erp-util-size) !important;
    max-width: var(--erp-util-size) !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navUserChip .nav-user-name {
    display: none !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navUserChip .nav-user-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 0.72rem !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navNotifBell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navNotifBell i,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn .erp-login-lock,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #loginBtn .fa-lock,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .elinom-lang-btn .fa-globe,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-lang-btn .fa-globe {
    font-size: var(--erp-util-icon) !important;
    line-height: 1 !important;
    width: 1em !important;
    height: 1em !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar .elinom-lang-btn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-lang-btn,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #currentLangDisplay {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--erp-util-size) !important;
    min-height: var(--erp-util-size) !important;
    max-height: var(--erp-util-size) !important;
    padding: 0 0.65rem !important;
    gap: 0.4rem !important;
    line-height: 1 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #currentLangText,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .elinom-lang-label {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
  }

  /* Search stays wider, but shares the 40px control height. */
  html[data-active-module="landing"] body.erp-body #navbar #util-bar #us-trigger,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .us-trigger,
  html[data-active-module="landing"] body.erp-body #navbar #utilAiSearchSlot .us-trigger {
    height: var(--erp-util-size) !important;
    min-height: var(--erp-util-size) !important;
    max-height: var(--erp-util-size) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Requested desktop tab order                                                 */
/* -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.zuto-li {
    order: 4 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.entertainment-li {
    order: 5 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.capital-li {
    order: 6 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li.wallet-li {
    order: 7 !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 {
    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 {
    order: 9 !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 {
    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 {
    order: 11 !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 {
    order: 12 !important;
  }

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

@media (min-width: 1280px) and (max-width: 1399px) {
  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[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: none !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[data-active-module="landing"] body.erp-body #navbar #navMenu > li.nav-end-link.help-li:not(.connect-li) {
    display: flex !important;
  }

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

@media (min-width: 1440px) {
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li > a,
  html[data-active-module="landing"] body.erp-body #navbar .nav-menu > li > a {
    padding: 0 0.4rem !important;
  }
}

@media (min-width: 1600px) {
  html[data-active-module="landing"] body.erp-body #navbar #navMenu > li > a,
  html[data-active-module="landing"] body.erp-body #navbar .nav-menu > li > a {
    padding: 0 0.55rem !important;
  }
}