/*!
 * Marketing Search Elinom bar — unique filename (nginx caches /css/ immutable).
 *
 * Filled cyan → indigo → violet → pink → amber brand gradient on the
 * navbar trigger and the overlay input, matching hero CTAs.
 */

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

@keyframes mkt-search-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 22%) inset,
      0 8px 28px rgb(99 102 241 / 48%),
      0 0 22px rgb(34 211 238 / 38%),
      0 0 16px rgb(236 72 153 / 28%);
  }
  50% {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 32%) inset,
      0 10px 34px rgb(236 72 153 / 42%),
      0 0 26px rgb(99 102 241 / 40%),
      0 0 18px rgb(245 158 11 / 28%);
  }
}

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: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(
    105deg,
    #22d3ee 0%,
    #38bdf8 16%,
    #6366f1 38%,
    #a855f7 55%,
    #ec4899 74%,
    #f59e0b 100%
  ) !important;
  background-image: linear-gradient(
    105deg,
    #22d3ee 0%,
    #38bdf8 16%,
    #6366f1 38%,
    #a855f7 55%,
    #ec4899 74%,
    #f59e0b 100%
  ) !important;
  background-size: 220% 100% !important;
  animation:
    mkt-search-flow 6.5s linear infinite alternate,
    mkt-search-glow 4.8s ease-in-out infinite !important;
}

html body.erp-body #navbar #util-bar #us-trigger::before,
html body.erp-body #navbar #util-bar .us-trigger::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    105deg,
    rgb(255 255 255 / 0) 18%,
    rgb(255 255 255 / 28%) 48%,
    rgb(255 255 255 / 0) 78%
  ) !important;
  background-size: 180% 100% !important;
  animation: mkt-search-flow 4.2s linear infinite alternate !important;
  pointer-events: none !important;
  z-index: 0 !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: brightness(1.08) saturate(1.08);
  transform: none !important;
  background: linear-gradient(
    105deg,
    #67e8f9 0%,
    #818cf8 34%,
    #e879f9 62%,
    #fbbf24 100%
  ) !important;
  background-image: linear-gradient(
    105deg,
    #67e8f9 0%,
    #818cf8 34%,
    #e879f9 62%,
    #fbbf24 100%
  ) !important;
  background-size: 220% 100% !important;
}

html body.erp-body #navbar #util-bar #us-trigger > i,
html body.erp-body #navbar #util-bar .us-trigger > i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 55%));
  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: 800 !important;
  letter-spacing: 0.02em !important;
  opacity: 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow: 0 1px 8px rgb(15 23 42 / 35%);
}

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 / 42%) !important;
  border: 1px solid rgb(255 255 255 / 38%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 6px !important;
  padding: 1px 7px !important;
  font-weight: 700 !important;
}

/* Overlay search field — same brand gradient ring */
html body.erp-body #us-palette .us-input-row,
html body.erp-body .us-palette .us-input-row {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  background:
    linear-gradient(#0b1224, #121a36) padding-box,
    linear-gradient(
      105deg,
      #22d3ee 0%,
      #6366f1 32%,
      #ec4899 68%,
      #f59e0b 100%
    )
    border-box !important;
  background-image:
    linear-gradient(#0b1224, #121a36),
    linear-gradient(
      105deg,
      #22d3ee 0%,
      #6366f1 32%,
      #ec4899 68%,
      #f59e0b 100%
    ) !important;
  background-size: 100% 100%, 220% 100% !important;
  animation: mkt-search-flow 6.5s linear infinite alternate !important;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%) inset,
    0 8px 28px rgb(99 102 241 / 28%) !important;
}

html body.erp-body #us-palette .us-input-icon,
html body.erp-body .us-palette .us-input-icon {
  background: linear-gradient(120deg, #22d3ee, #a855f7, #ec4899) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html body.erp-body #us-palette .us-input,
html body.erp-body .us-palette .us-input {
  color: #eef2ff !important;
  caret-color: #f472b6 !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;
  }
}