/* colors.css imported globally via style.css */
/* ==========================================================================
   _omnibar.css – Styles for IDX Omnibar Search
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/**
 * 1.0 Omnibar Container
 * 1.1 Desktop Layout
 * 2.0 Omnibar Inputs
 * 2.1 Omnibar Submit Button
 * 2.2 Omnibar Select Dropdowns
 * 2.3 Omnibar States – Disabled, Error, Accessibility, Mobile
 * 3.0 Dark Mode Overrides
 * 4.0 Omnibar Extra Form Alignment
 * 4.1 Omnibar Labels – Refined
 * 4.2 Omnibar Labels – Focus Highlight
 * 5.0 Omnibar Extra Button
 */

/* ==========================================================================
   1.0 Omnibar Container
   ========================================================================== */

.idx-omnibar {
  padding: 1em;
  background: var(--color-omnibar-bg);
  border-radius: var(--radius-1, 6px);
}

/* ==========================================================================
   1.1 Desktop Layout
   ========================================================================== */
@media screen and (min-width: 768px) {

  .idx-omnibar-form.idx-omnibar-original-form,
  .idx-omnibar-form.idx-omnibar-extra-form {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Constrain omnibar width on desktop for a tighter look */
    max-width: clamp(560px, 62vw, 980px);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    gap: var(--space-1);
  }

  /* Ensure vendor defaults don't stretch the form full-width */
  .idx-omnibar-wrapper .idx-omnibar-form.idx-omnibar-original-form,
  .idx-omnibar-wrapper .idx-omnibar-form.idx-omnibar-extra-form {
    width: min(100%, clamp(560px, 62vw, 980px)) !important;
    max-width: clamp(560px, 62vw, 980px) !important;
    margin-right: auto;
    margin-left: auto;
  }

  .idx-omnibar-form.idx-omnibar-original-form :where(input[type="text"]),
  .idx-omnibar-form.idx-omnibar-extra-form :where(input[type="text"]) {
    flex-grow: 0;
    width: 100%;
    min-width: 250px;
  }

  .idx-omnibar-form.idx-omnibar-original-form :where(button[type="submit"]),
  .idx-omnibar-form.idx-omnibar-original-form :where(input[type="submit"]),
  .idx-omnibar-form.idx-omnibar-extra-form :where(button[type="submit"]),
  .idx-omnibar-form.idx-omnibar-extra-form :where(input[type="submit"]) {
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
    padding-right: calc(var(--space-2) + var(--space-1));
    padding-left: calc(var(--space-2) + var(--space-1));
    white-space: nowrap;
  }
}

/* ==========================================================================
   2.0 Omnibar Inputs
   ========================================================================== */

.idx-omnibar :where(input[type="text"]) {
  width: 100%;
  height: 2rem;
  /* compact height */
  /* align with select height */
  padding: 0.35rem 0.55rem;
  /* slightly tighter */
  background-color: var(--surface-soft);
  /* slightly darker than white for clearer boxes */
  border: 1.5px solid var(--color-omnibar-border);
  border-radius: var(--radius-1, 6px);
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  /* slightly smaller text */
  line-height: 1.2;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Light mode placeholder */
.idx-omnibar :where(input)::placeholder {
  color: var(--gray-600);
}

/* Hover & focus states for text inputs */
.idx-omnibar :where(input[type="text"]):hover {
  background-color: color-mix(in oklab, var(--kaplon-red) 8%, var(--white));
  border-color: var(--kaplon-red);
  /* subtle red-tinted hover to match selects */
}

.idx-omnibar :where(input[type="text"]):focus {
  background-color: var(--white);
  border-color: var(--kaplon-red);
  outline: 2px solid var(--kaplon-red);
  outline-offset: 1px;
}

/* ==========================================================================
   2.1 Omnibar Submit Button
   ========================================================================== */

.idx-omnibar-original-form button[type="submit"],
.idx-omnibar-original-form input[type="submit"],
.idx-omnibar-extra-form button[type="submit"],
.idx-omnibar-extra-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  /* match compact input height */
  padding: 0 0.9rem;
  /* compact horizontal padding */
  background-color: var(--kaplon-red);
  border: none;
  border-radius: var(--btn-radius, var(--radius-2, 8px));
  box-shadow: 0 0 0 1px var(--gray-border-light) inset;
  /* inner edge */
  /* visual edge handled via inset shadow above */
  color: var(--white);
  font-family: "Montserrat", sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  gap: 0.4rem;
}

.idx-omnibar-original-form :where(button[type="submit"]):hover,
.idx-omnibar-original-form :where(input[type="submit"]):hover,
.idx-omnibar-extra-form :where(button[type="submit"]):hover,
.idx-omnibar-extra-form :where(input[type="submit"]):hover {
  background-color: var(--kaplon-red-dark);
}

/* ==========================================================================
   2.2 Omnibar Select Dropdowns – Custom Styled
   ========================================================================== */

.idx-omnibar :where(select) {

  width: 100%;
  height: 2rem;
  /* compact height */
  padding: 0.35rem var(--space-5) 0.35rem 0.55rem;
  /* tighter paddings */
  /* map 2rem to token */
  background-color: var(--white);

  background-image: url("data:image/svg+xml;utf8,<svg fill='%23191944' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.75rem;

  border: 1.5px solid var(--color-omnibar-border);
  border-radius: var(--radius-1, 6px);
  color: var(--black);
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.2;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  appearance: none;
}

.idx-omnibar select:hover {
  background-color: color-mix(in oklab, var(--kaplon-red) 8%, var(--white));
  border-color: var(--kaplon-red);
}

.idx-omnibar select:focus {
  background-color: var(--white);
  border-color: var(--kaplon-red);
  outline: 2px solid var(--kaplon-red);
  outline-offset: 1px;
}

/* ==========================================================================
   2.3 Omnibar States – Disabled, Error, Accessibility, Mobile
   ========================================================================== */

/* Disabled & Readonly */
.idx-omnibar input[disabled],
.idx-omnibar select[disabled],
.idx-omnibar input[readonly] {
  opacity: 0.7;
  background-color: var(--surface-soft);
  cursor: not-allowed;
}

/* Error & Invalid */
.idx-omnibar input:invalid,
.idx-omnibar select:invalid,
.idx-omnibar [aria-invalid="true"] {
  border-color: var(--kaplon-red);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--kaplon-red) 25%, transparent) inset;
}

/* Mobile Stacking */
@media (max-width: 480px) {

  .idx-omnibar-form.idx-omnibar-original-form,
  .idx-omnibar-form.idx-omnibar-extra-form {
    max-width: 100%;
    gap: 0.5rem;
  }

  .idx-omnibar-form.idx-omnibar-extra-form>div,
  .idx-omnibar-form.idx-omnibar-extra-form>input,
  .idx-omnibar-form.idx-omnibar-extra-form>button {
    width: 100%;
  }

  .idx-omnibar select,
  .idx-omnibar input[type="text"] {
    min-width: 0;
    /* allow shrink in flex containers */
  }
}

/* Autocomplete Dropdown Safety (defined above) */
/* ==========================================================================
   2.4 Autocomplete Dropdown (Awesomplete)
   - Scoped to .idx-omnibar to avoid global leak
   - Uses brand tokens for surfaces, borders, and states
   ========================================================================== */

.idx-omnibar div.awesomplete,
.idx-omnibar-form div.awesomplete {
  position: relative;
  display: inline-block;
}

.idx-omnibar div.awesomplete>input,
.idx-omnibar-form div.awesomplete>input {
  display: block;
}

.idx-omnibar-form div.awesomplete>ul {
  position: absolute;
  left: 0;
  z-index: 1000;
  min-width: 100%;
  margin: 0.2em 0 0;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-1, 6px);
  box-shadow: var(--shadow-card-em);
  text-align: left;
  text-shadow: none;
  list-style: none;
  box-sizing: border-box;
}

.idx-omnibar div.awesomplete>ul:empty,
.idx-omnibar-form div.awesomplete>ul:empty,
.idx-omnibar div.awesomplete>ul[hidden],
.idx-omnibar-form div.awesomplete>ul[hidden] {
  display: block;
  opacity: 0;
  transition-timing-function: ease;
  transform: scale(0);
}

.idx-omnibar div.awesomplete>ul:before,
.idx-omnibar-form div.awesomplete>ul:before {
  position: absolute;
  top: -0.43em;
  left: 1em;
  width: 0;
  height: 0;
  padding: 0.4em;
  background: var(--white);
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  content: "";
  transform: rotate(45deg);
}

.idx-omnibar div.awesomplete>ul>li,
.idx-omnibar-form div.awesomplete>ul>li {
  position: relative;
  padding: 0.2em 0.5em;
  cursor: pointer;
}

.idx-omnibar div.awesomplete>ul>li:hover,
.idx-omnibar-form div.awesomplete>ul>li:hover {
  background: var(--kaplon-blue);
  color: var(--white);
}

.idx-omnibar div.awesomplete>ul>li[aria-selected="true"],
.idx-omnibar-form div.awesomplete>ul>li[aria-selected="true"] {
  background: var(--kaplon-blue);
  color: var(--white);
}

.idx-omnibar div.awesomplete mark,
.idx-omnibar-form div.awesomplete mark {
  background: transparent;
}

.idx-omnibar div.awesomplete li:hover mark,
.idx-omnibar-form div.awesomplete li:hover mark {
  background: transparent;
}

.idx-omnibar div.awesomplete li[aria-selected="true"] mark,
.idx-omnibar-form div.awesomplete li[aria-selected="true"] mark {
  background: transparent;
  color: inherit;
}

/* Safari/Firefox Select Polish (defined above) */

/* Reduced Motion duplicate removed */

/* Button Line-height Fix (already applied earlier) */

/* ==========================================================================
   3.0 Dark Mode Overrides
   ========================================================================== */

/* ==========================================================================
   4.0 Omnibar Extra Form Alignment
   ========================================================================== */

.idx-omnibar-form.idx-omnibar-extra-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.idx-omnibar-form.idx-omnibar-extra-form>div,
.idx-omnibar-form.idx-omnibar-extra-form>input,
.idx-omnibar-form.idx-omnibar-extra-form>button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.idx-omnibar-form.idx-omnibar-extra-form>.idx-omnibar-extra-button {
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
}

.idx-omnibar-form.idx-omnibar-extra-form>button {
  align-self: flex-end;
}

/* ==========================================================================
   4.1 Omnibar Labels – Refined
   ========================================================================== */

.idx-omnibar-form.idx-omnibar-extra-form :where(label) {
  margin-bottom: 0.25rem;
  color: var(--kaplon-blue-dark, var(--kaplon-blue));
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease-in-out);
}

/* ==========================================================================
   4.2 Omnibar Labels – Focus Highlight
   ========================================================================== */

.idx-omnibar-form.idx-omnibar-extra-form :where(div):focus-within> :where(label) {
  color: var(--kaplon-red);
}

/* ==========================================================================
   5.0 Omnibar Extra Button
   ========================================================================== */

.idx-omnibar-extra-button {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  order: 99;
  padding: 0.5rem 1.25rem;
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: middle;
  gap: 0.4rem;
}

.idx-omnibar-extra-button i {
  display: inline-block;
  margin: 0;
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
}

.idx-omnibar-extra-button span {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

/* (Duplicate dark-mode label overrides removed; merged into primary dark block) */

/* ===========================================================================
   Mobile Omnibar Fixes (Full Width Inputs & Reduced Margins)
   ========================================================================== */
@media screen and (max-width: 767px) {

  .idx-omnibar,
  .idx-omnibar-form.idx-omnibar-original-form,
  .idx-omnibar-form.idx-omnibar-extra-form {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    box-sizing: border-box;
  }

  .idx-omnibar :where(input[type="text"], input[type="number"], select) {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  .idx-omnibar-form.idx-omnibar-original-form :where(button[type="submit"], input[type="submit"]),
  .idx-omnibar-form.idx-omnibar-extra-form :where(button[type="submit"], input[type="submit"]) {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    white-space: normal;
  }
}

/* ==========================================================================
   Banner Omnibar Input Styling (Homepage Hero)
   ========================================================================== */

/* Force banner input visibility - override forms.css hiding rules */
.idx-omnibar-wrapper .idx-omnibar-input {
  position: relative !important;
  z-index: 9999 !important;
  display: block !important;
  width: 100%;
  height: 50px !important;
  padding: var(--space-2);
  background-color: var(--white) !important;
  border: 2px solid var(--kaplon-red) !important;
  border-radius: var(--radius-1, 6px);
  box-shadow: var(--shadow-card-em) !important;
  color: var(--kaplon-black) !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.idx-omnibar-wrapper .idx-omnibar-input:focus {
  border-color: var(--kaplon-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--kaplon-red) 30%, transparent) !important;
  outline: none !important;
}

@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .page-content-wrap .idx-carousel-gallery,html[data-kaplon-color-mode=system] 
  .page-content-wrap .wp-block-shortcode,html[data-kaplon-color-mode=system] 
  .page-content-wrap .idx-omnibar-form.idx-omnibar-extra-form {
    background: var(--gray-900);
    border: 1px solid var(--gray-border-dark);
    box-shadow: var(--shadow-dark-lg);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar-form.idx-omnibar-extra-form :where(input, select) {
    background: var(--gray-dark);
    border-color: var(--gray-border-dark);
    color: var(--white-90);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar-form.idx-omnibar-extra-form input::placeholder {
    color: var(--white-60);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar {
    background: var(--color-omnibar-bg-dark);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar :where(input[type="text"]) {
    /* colors-only in dark mode; size/typography handled in defaults */
    background: var(--dark-surface);
    border: 1.5px solid var(--color-omnibar-border-dark);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar :where(input[type="text"]):hover {
    background-color: var(--gray-850);
    border-color: var(--kaplon-red);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar :where(input[type="text"]):focus {
    background-color: var(--dark-surface);
    border-color: var(--kaplon-red);
    outline: 2px solid var(--kaplon-red);
    outline-offset: 1px;
  }

  html[data-kaplon-color-mode=system] .idx-omnibar :where(input)::placeholder {
    color: var(--gray-400);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar-original-form :where(button[type="submit"], input[type="submit"]),html[data-kaplon-color-mode=system] 
  .idx-omnibar-extra-form :where(button[type="submit"], input[type="submit"]) {
    /* colors-only in dark mode; size handled in defaults */
    background-color: var(--kaplon-red-dark);
    box-shadow: 0 0 0 1px var(--gray-border-dark) inset;
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar-original-form :where(button[type="submit"], input[type="submit"]):hover,html[data-kaplon-color-mode=system] 
  .idx-omnibar-extra-form :where(button[type="submit"], input[type="submit"]):hover {
    background-color: var(--kaplon-red);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar :where(select) {
    /* colors-only in dark mode; size/typography handled in defaults */
    background-color: var(--dark-surface);
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    border: 1.5px solid var(--gray-border-dark);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar :where(select):hover {
    background-color: var(--gray-850);
    border-color: var(--kaplon-red);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar :where(select):focus {
    background-color: var(--dark-surface);
    border-color: var(--kaplon-red);
    outline: 2px solid var(--kaplon-red);
    outline-offset: 1px;
  }

  /* Awesomplete dropdown in dark mode */
  html[data-kaplon-color-mode=system] .idx-omnibar div.awesomplete>ul,html[data-kaplon-color-mode=system] 
  .idx-omnibar-form div.awesomplete>ul {
    background: var(--dark-surface);
    border-color: var(--gray-border-dark);
    box-shadow: 0 6px 16px color-mix(in oklab, var(--black) 50%, transparent);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar div.awesomplete>ul:before,html[data-kaplon-color-mode=system] 
  .idx-omnibar-form div.awesomplete>ul:before {
    background: var(--dark-surface);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar div.awesomplete>ul>li:hover,html[data-kaplon-color-mode=system] 
  .idx-omnibar-form div.awesomplete>ul>li:hover {
    background: color-mix(in oklab, var(--kaplon-blue) 20%, var(--dark-surface));
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-omnibar div.awesomplete>ul>li[aria-selected="true"],html[data-kaplon-color-mode=system] 
  .idx-omnibar-form div.awesomplete>ul>li[aria-selected="true"] {
    background: var(--kaplon-blue);
    color: var(--white);
  }

  /* Labels white in dark mode for max contrast */
  html[data-kaplon-color-mode=system] .idx-omnibar-form.idx-omnibar-extra-form :where(label) {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .idx-omnibar-form.idx-omnibar-extra-form :where(div):focus-within> :where(label) {
    color: var(--kaplon-red) !important;
  }

  html[data-kaplon-color-mode=system] .idx-omnibar-wrapper .idx-omnibar-input {
    background-color: var(--dark-bg) !important;
    border-color: var(--kaplon-red) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .idx-omnibar-wrapper .idx-omnibar-input:focus {
    border-color: var(--kaplon-blue) !important;
  }

  @media (max-width: 600px) {
    html[data-kaplon-color-mode=system] .idx-omnibar {
      /* Match mobile dark surfaces with site-wide palette */
      background: var(--dark-bg);
    }
  }
}

/* Awesomplete dropdown in dark mode */

/* Labels white in dark mode for max contrast */

html[data-kaplon-color-mode=dark] .page-content-wrap .idx-carousel-gallery,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .wp-block-shortcode,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .idx-omnibar-form.idx-omnibar-extra-form {
    background: var(--gray-900);
    border: 1px solid var(--gray-border-dark);
    box-shadow: var(--shadow-dark-lg);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar-form.idx-omnibar-extra-form :where(input, select) {
    background: var(--gray-dark);
    border-color: var(--gray-border-dark);
    color: var(--white-90);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar-form.idx-omnibar-extra-form input::placeholder {
    color: var(--white-60);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar {
    background: var(--color-omnibar-bg-dark);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar :where(input[type="text"]) {
    /* colors-only in dark mode; size/typography handled in defaults */
    background: var(--dark-surface);
    border: 1.5px solid var(--color-omnibar-border-dark);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar :where(input[type="text"]):hover {
    background-color: var(--gray-850);
    border-color: var(--kaplon-red);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar :where(input[type="text"]):focus {
    background-color: var(--dark-surface);
    border-color: var(--kaplon-red);
    outline: 2px solid var(--kaplon-red);
    outline-offset: 1px;
  }

html[data-kaplon-color-mode=dark] .idx-omnibar :where(input)::placeholder {
    color: var(--gray-400);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar-original-form :where(button[type="submit"], input[type="submit"]),html[data-kaplon-color-mode=dark] 
  .idx-omnibar-extra-form :where(button[type="submit"], input[type="submit"]) {
    /* colors-only in dark mode; size handled in defaults */
    background-color: var(--kaplon-red-dark);
    box-shadow: 0 0 0 1px var(--gray-border-dark) inset;
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar-original-form :where(button[type="submit"], input[type="submit"]):hover,html[data-kaplon-color-mode=dark] 
  .idx-omnibar-extra-form :where(button[type="submit"], input[type="submit"]):hover {
    background-color: var(--kaplon-red);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar :where(select) {
    /* colors-only in dark mode; size/typography handled in defaults */
    background-color: var(--dark-surface);
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    border: 1.5px solid var(--gray-border-dark);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar :where(select):hover {
    background-color: var(--gray-850);
    border-color: var(--kaplon-red);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar :where(select):focus {
    background-color: var(--dark-surface);
    border-color: var(--kaplon-red);
    outline: 2px solid var(--kaplon-red);
    outline-offset: 1px;
  }

/* Awesomplete dropdown in dark mode */

html[data-kaplon-color-mode=dark] .idx-omnibar div.awesomplete>ul,html[data-kaplon-color-mode=dark] 
  .idx-omnibar-form div.awesomplete>ul {
    background: var(--dark-surface);
    border-color: var(--gray-border-dark);
    box-shadow: 0 6px 16px color-mix(in oklab, var(--black) 50%, transparent);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar div.awesomplete>ul:before,html[data-kaplon-color-mode=dark] 
  .idx-omnibar-form div.awesomplete>ul:before {
    background: var(--dark-surface);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar div.awesomplete>ul>li:hover,html[data-kaplon-color-mode=dark] 
  .idx-omnibar-form div.awesomplete>ul>li:hover {
    background: color-mix(in oklab, var(--kaplon-blue) 20%, var(--dark-surface));
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-omnibar div.awesomplete>ul>li[aria-selected="true"],html[data-kaplon-color-mode=dark] 
  .idx-omnibar-form div.awesomplete>ul>li[aria-selected="true"] {
    background: var(--kaplon-blue);
    color: var(--white);
  }

/* Labels white in dark mode for max contrast */

html[data-kaplon-color-mode=dark] .idx-omnibar-form.idx-omnibar-extra-form :where(label) {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .idx-omnibar-form.idx-omnibar-extra-form :where(div):focus-within> :where(label) {
    color: var(--kaplon-red) !important;
  }

html[data-kaplon-color-mode=dark] .idx-omnibar-wrapper .idx-omnibar-input {
    background-color: var(--dark-bg) !important;
    border-color: var(--kaplon-red) !important;
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .idx-omnibar-wrapper .idx-omnibar-input:focus {
    border-color: var(--kaplon-blue) !important;
  }

@media (max-width: 600px) {
    html[data-kaplon-color-mode=dark] .idx-omnibar {
      /* Match mobile dark surfaces with site-wide palette */
      background: var(--dark-bg);
    }
  }