/*!
 * Marketing Search Elinom bar — unique filename (nginx caches /css/ immutable).
 *
 * Dark glass / slate pill on the navy header. The previous cyan fill and
 * animated rainbow ring fought the chrome; login orb and hero CTAs keep
 * the brand gradient. Overlay field matches the trigger.
 */

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 {
  position: relative !important;
  isolation: isolate !important;
  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.2rem !important;
  overflow: hidden !important;
  border: 1px solid rgb(148 163 184 / 28%) !important;
  border-radius: 999px !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  background: rgb(15 23 42 / 72%) !important;
  background-image: linear-gradient(
    180deg,
    rgb(30 41 59 / 78%) 0%,
    rgb(15 23 42 / 86%) 100%
  ) !important;
  background-size: 100% 100% !important;
  animation: none !important;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 6%) inset,
    0 8px 24px rgb(2 6 23 / 35%) !important;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  filter: none !important;
}

html body.erp-body #navbar #util-bar #us-trigger::before,
html body.erp-body #navbar #util-bar .us-trigger::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}

html body.erp-body #navbar #util-bar #us-trigger > *,
html body.erp-body #navbar #util-bar .us-trigger > * {
  position: relative !important;
  z-index: 1 !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: none !important;
  transform: none !important;
  border-color: rgb(203 213 225 / 42%) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: rgb(30 41 59 / 86%) !important;
  background-image: linear-gradient(
    180deg,
    rgb(51 65 85 / 82%) 0%,
    rgb(15 23 42 / 90%) 100%
  ) !important;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%) inset,
    0 10px 28px rgb(2 6 23 / 42%) !important;
}

html body.erp-body #navbar #util-bar #us-trigger > i,
html body.erp-body #navbar #util-bar .us-trigger > i {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  background: none !important;
  filter: none !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: 650 !important;
  letter-spacing: 0.01em !important;
  opacity: 1 !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  background: none !important;
  text-shadow: none !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(2 6 23 / 45%) !important;
  border: 1px solid rgb(148 163 184 / 28%) !important;
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
  font-weight: 700 !important;
}

html body.erp-body #us-palette .us-input-row,
html body.erp-body .us-palette .us-input-row {
  border: 1px solid rgb(148 163 184 / 32%) !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  background: rgb(15 23 42 / 88%) !important;
  background-image: linear-gradient(#0b1220, #111827) !important;
  background-size: 100% 100% !important;
  animation: none !important;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 6%) inset,
    0 8px 24px rgb(2 6 23 / 28%) !important;
}

html body.erp-body #us-palette .us-input-icon,
html body.erp-body .us-palette .us-input-icon {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  color: #cbd5e1 !important;
}

html body.erp-body #us-palette .us-input,
html body.erp-body .us-palette .us-input {
  color: #e2e8f0 !important;
  caret-color: #94a3b8 !important;
  outline: none !important;
  box-shadow: none !important;
}

html body.erp-body #us-palette .us-input:focus,
html body.erp-body #us-palette .us-input:focus-visible,
html body.erp-body .us-palette .us-input:focus,
html body.erp-body .us-palette .us-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-radius: inherit !important;
}

html body.erp-body #us-palette .us-input-row:focus-within,
html body.erp-body .us-palette .us-input-row:focus-within {
  border-color: rgb(203 213 225 / 48%) !important;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%) inset,
    0 0 0 3px rgb(148 163 184 / 22%) !important;
}

html body.erp-body #navbar #navMenu .mobile-util-action--search {
  border: 1px solid rgb(148 163 184 / 28%) !important;
  border-radius: 999px !important;
  color: #e2e8f0 !important;
  background: rgb(15 23 42 / 72%) !important;
  background-image: linear-gradient(
    180deg,
    rgb(30 41 59 / 78%) 0%,
    rgb(15 23 42 / 86%) 100%
  ) !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;
  }
}