/**
 * Utility icons: one padded 40px circle, one 12px gap.
 * Globe is a matching circle; ENG sits after it on the same 12px rhythm.
 * Unique filename: nginx caches /css/ immutable.
 */

@media (min-width: 901px) {
  html[data-active-module="landing"] {
    --erp-util-size: 40px;
    --erp-util-gap: 12px;
    --erp-util-icon: 1rem;
    --erp-util-ring: 0 0 0 2px rgb(255 255 255 / 20%);
  }

  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.75rem !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 .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,
  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 {
    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;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !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 {
    box-shadow:
      0 0 0 2px rgb(56 189 248 / 30%),
      0 4px 10px rgb(99 102 241 / 22%) !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navUserChip .nav-user-avatar {
    box-shadow: 0 0 0 2px rgb(236 72 153 / 35%) !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navNotifBell {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: var(--erp-util-ring) !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: flex-start !important;
    height: var(--erp-util-size) !important;
    min-height: var(--erp-util-size) !important;
    max-height: var(--erp-util-size) !important;
    padding: 0 !important;
    gap: var(--erp-util-gap) !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
  }

  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;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: var(--erp-util-ring) !important;
    color: #fff !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 #navUserChip .nav-user-avatar {
    font-size: var(--erp-util-icon) !important;
    line-height: 1 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #navNotifBell i {
    width: 1em !important;
    height: 1em !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;
  }
}