/*!
 * Zuto Search Elinom + unique-home search docks.
 *
 * Marketing pages load erp-marketing-chrome-20260911sg.css after the
 * gradient-border Search Elinom sheet, which fills the pill cyan. Zuto
 * verticals keep the platform recipe: dark inner field, cyan → indigo →
 * pink → amber border. Unique-home product docks use the same chrome so
 * Auto / Property / Biz / Classified no longer look like a blue text field.
 */

:root {
  --zuto-search-fill: linear-gradient(#0b1224, #0f172a);
  --zuto-search-fill-hover: linear-gradient(#111b33, #16203f);
  --zuto-search-border: linear-gradient(
    120deg,
    #38bdf8 0%,
    #6366f1 32%,
    #f472b6 66%,
    #f59e0b 100%
  );
}

/* ── Search Elinom (header util bar) ─────────────────────────────── */

html body.erp-body[data-zuto-vertical] #navbar #util-bar #us-trigger,
html body.erp-body[data-zuto-vertical] #navbar #util-bar .us-trigger,
html body.erp-body[data-zuto-vertical] #navbar #util-bar .us-trigger.us-trigger--ai,
html body.erp-body[data-zuto-vertical] #navbar #utilAiSearchSlot .us-trigger,
html body.erp-body[data-zuto-vertical] #util-bar #us-trigger,
html body.erp-body[data-zuto-vertical] #util-bar .us-trigger,
html body.erp-body .zuto-directory-navbar #util-bar #us-trigger,
html body.erp-body .zuto-directory-navbar #util-bar .us-trigger,
html body.erp-body .zuto-directory-navbar .util-ai-search-slot .us-trigger {
  isolation: isolate !important;
  overflow: visible !important;
  border: 1.6px solid transparent !important;
  border-radius: 999px !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  background:
    var(--zuto-search-fill) padding-box,
    var(--zuto-search-border) border-box !important;
  background-image:
    var(--zuto-search-fill),
    var(--zuto-search-border) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, 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(99 102 241 / 22%),
    0 0 18px rgb(56 189 248 / 28%) !important;
  filter: none !important;
}

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

html body.erp-body[data-zuto-vertical] #navbar #util-bar #us-trigger:hover,
html body.erp-body[data-zuto-vertical] #navbar #util-bar .us-trigger:hover,
html body.erp-body[data-zuto-vertical] #util-bar .us-trigger:hover,
html body.erp-body .zuto-directory-navbar .us-trigger:hover {
  filter: none !important;
  transform: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background:
    var(--zuto-search-fill-hover) padding-box,
    var(--zuto-search-border) border-box !important;
  background-image:
    var(--zuto-search-fill-hover),
    var(--zuto-search-border) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    0 0 0 1px rgb(165 243 252 / 32%),
    0 0 26px rgb(56 189 248 / 42%) !important;
}

html body.erp-body[data-zuto-vertical] #navbar #util-bar #us-trigger > i,
html body.erp-body[data-zuto-vertical] #navbar #util-bar .us-trigger > i,
html body.erp-body[data-zuto-vertical] #util-bar .us-trigger > i,
html body.erp-body .zuto-directory-navbar .us-trigger > i {
  background: var(--zuto-search-border) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: none !important;
}

html body.erp-body[data-zuto-vertical] #navbar #util-bar .us-trigger-text,
html body.erp-body[data-zuto-vertical] #navbar #util-bar #us-trigger .us-trigger-text,
html body.erp-body[data-zuto-vertical] #util-bar .us-trigger-text,
html body.erp-body .zuto-directory-navbar .us-trigger-text {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  background: none !important;
  text-shadow: none !important;
}

html body.erp-body[data-zuto-vertical] #navbar #util-bar .us-trigger-kbd,
html body.erp-body[data-zuto-vertical] #util-bar .us-trigger-kbd {
  background: rgb(15 23 42 / 62%) !important;
  border: 1px solid rgb(99 102 241 / 42%) !important;
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
}

html body.erp-body[data-zuto-vertical] #us-palette .us-input-row,
html body.erp-body[data-zuto-vertical] .us-palette .us-input-row {
  border: 1.6px solid transparent !important;
  background:
    var(--zuto-search-fill) padding-box,
    var(--zuto-search-border) border-box !important;
  background-image:
    var(--zuto-search-fill),
    var(--zuto-search-border) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  animation: none !important;
}

html body.erp-body[data-zuto-vertical] #us-palette .us-input,
html body.erp-body[data-zuto-vertical] .us-palette .us-input {
  color: #e2e8f0 !important;
  caret-color: #f472b6 !important;
}

/* ── Unique-home product search docks ─────────────────────────────── */

body[data-zuto-vertical] .za-spec,
body[data-zuto-vertical] .zp-search,
body[data-zuto-vertical] .zb-finder,
body[data-zuto-vertical] .zuto-classified-search,
body[data-zuto-vertical] .zh-search,
body[data-zuto-vertical] .ze-search {
  background:
    linear-gradient(#ffffff, #fff7ed) padding-box,
    var(--zuto-search-border) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1.6px solid transparent;
  box-shadow:
    0 0 0 1px rgb(251 146 60 / 18%),
    0 12px 32px rgb(234 88 12 / 12%);
  color: #1e293b;
}

/* Light search docks need dark labels — pale cyan/slate on white is unreadable. */
body[data-zuto-vertical] .za-spec label,
body[data-zuto-vertical] .zp-search label,
body[data-zuto-vertical] .zb-finder label,
body[data-zuto-vertical] .zuto-classified-search label,
body[data-zuto-vertical] .zh-search label,
body[data-zuto-vertical] .zh-search > label,
body[data-zuto-vertical] .zh-search legend,
body[data-zuto-vertical] .zh-includes legend,
body[data-zuto-vertical] .ze-search label,
body[data-zuto-vertical] .ze-search legend {
  color: #0f172a;
}

body[data-zuto-vertical] .za-spec input,
body[data-zuto-vertical] .za-spec select,
body[data-zuto-vertical] .zp-search input,
body[data-zuto-vertical] .zp-search select,
body[data-zuto-vertical] .zb-finder input,
body[data-zuto-vertical] .zb-finder select,
body[data-zuto-vertical] .zuto-classified-search input,
body[data-zuto-vertical] .zh-search input,
body[data-zuto-vertical] .zh-search select,
body[data-zuto-vertical] .ze-search input {
  background:
    linear-gradient(#ffffff, #fffaf5) padding-box,
    var(--zuto-search-border) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a;
  box-shadow: none;
}

body[data-zuto-vertical] .za-spec input::placeholder,
body[data-zuto-vertical] .zp-search input::placeholder,
body[data-zuto-vertical] .zb-finder input::placeholder,
body[data-zuto-vertical] .zuto-classified-search input::placeholder,
body[data-zuto-vertical] .zh-search input::placeholder,
body[data-zuto-vertical] .ze-search input::placeholder {
  color: #64748b;
  opacity: 1;
}

body[data-zuto-vertical] .za-spec input:focus,
body[data-zuto-vertical] .za-spec select:focus,
body[data-zuto-vertical] .zp-search input:focus,
body[data-zuto-vertical] .zp-search select:focus,
body[data-zuto-vertical] .zb-finder input:focus,
body[data-zuto-vertical] .zb-finder select:focus,
body[data-zuto-vertical] .zuto-classified-search input:focus,
body[data-zuto-vertical] .zh-search input:focus,
body[data-zuto-vertical] .ze-search input:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgb(165 243 252 / 28%);
}

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