/*!
 * Marketing search trigger — unique filename (nginx caches /css/ immutable).
 *
 * The Search Elinom pill uses the same cyan → indigo → pink → amber
 * brand gradient as the login orb, wordmark, and hero CTAs.
 */

@keyframes mkt-search-shine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

html body.erp-body #navbar #util-bar #us-trigger,
html body.erp-body #navbar #util-bar .us-trigger,
html body.erp-body #navbar #util-bar .us-trigger.us-trigger--ai,
html body.erp-body #navbar #utilAiSearchSlot .us-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.7rem !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 1.15rem !important;
  border: 1.6px solid transparent !important;
  border-radius: 999px !important;
  color: #eef0ff !important;
  background:
    linear-gradient(#0b1224, #121a36) padding-box,
    linear-gradient(
      120deg,
      #38bdf8 0%,
      #6366f1 32%,
      #f472b6 66%,
      #f59e0b 100%
    )
    border-box !important;
  background-size: 100% 100%, 180% 100% !important;
  animation: mkt-search-shine 7s linear infinite alternate !important;
  box-shadow:
    0 0 0 1px rgb(192 193 255 / 14%) inset,
    0 8px 26px rgb(99 102 241 / 32%),
    0 0 18px rgb(56 189 248 / 22%) !important;
}

html body.erp-body #navbar #util-bar #us-trigger:hover,
html body.erp-body #navbar #util-bar .us-trigger:hover,
html body.erp-body #navbar #util-bar .us-trigger.us-trigger--ai:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 18%) inset,
    0 10px 32px rgb(99 102 241 / 42%),
    0 0 24px rgb(244 114 182 / 28%) !important;
}

html body.erp-body #navbar #util-bar #us-trigger > i,
html body.erp-body #navbar #util-bar .us-trigger > i {
  background: linear-gradient(
    120deg,
    #38bdf8 0%,
    #818cf8 40%,
    #f472b6 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 0.95rem !important;
}

html body.erp-body #navbar #util-bar .us-trigger-text,
html body.erp-body #navbar #util-bar #us-trigger .us-trigger-text {
  flex: 1 1 auto !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    #e0f2fe 0%,
    #c0c1ff 42%,
    #fbcfe8 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html body.erp-body #navbar #util-bar .us-trigger-kbd,
html body.erp-body #navbar #util-bar #us-trigger .us-trigger-kbd {
  background: rgb(15 23 42 / 55%) !important;
  border: 1px solid rgb(192 193 255 / 28%) !important;
  color: #c0c1ff !important;
  -webkit-text-fill-color: #c0c1ff !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  html body.erp-body #navbar #util-bar #us-trigger,
  html body.erp-body #navbar #util-bar .us-trigger {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 0.85rem !important;
  }
}