/*
  tpl_car_house — Smart Search UI variants (Joomla 6)
  - Wrapper injected by template: .ch-search + .ch-search--<variant>
  - Theme-aware defaults (light/dark) via body.site.theme-light / body.site.theme-dark
  - Optional overrides via template params (CSS variables)
*/

/* Defaults (auto theme) */

/* Theme inheritance (default): picks up template variables (--surface/--text/--muted/--line).
   This makes Search UI automatically match the selected Theme Mode (carbon/noir/neon/ice/etc.). */
body.site{
  --ch-search-bg: color-mix(in srgb, var(--surface) 74%, transparent);
  --ch-search-text: var(--text);
  --ch-search-placeholder: color-mix(in srgb, var(--muted) 88%, transparent);
  --ch-search-border: var(--line);
}

body.site.theme-light{
  --ch-search-bg: rgba(2,6,23,.04);
  --ch-search-text: rgba(2,6,23,.92);
  --ch-search-placeholder: rgba(2,6,23,.55);
  --ch-search-border: rgba(2,6,23,.12);
  --ch-search-focus: rgba(2,6,23,.28);
  --ch-search-btn-bg: rgba(2,6,23,.06);
  --ch-search-btn-text: rgba(2,6,23,.92);
}
body.site.theme-dark{
  --ch-search-bg: rgba(255,255,255,.06);
  --ch-search-text: rgba(237,237,237,.92);
  --ch-search-placeholder: rgba(237,237,237,.62);
  --ch-search-border: rgba(255,255,255,.16);
  --ch-search-focus: rgba(255,255,255,.28);
  --ch-search-btn-bg: rgba(255,255,255,.08);
  --ch-search-btn-text: rgba(237,237,237,.92);
}

/* System preference fallback (if theme class isn't present for some reason) */
@media (prefers-color-scheme: dark){
  body.site:not(.theme-light):not(.theme-dark){
    --ch-search-bg: rgba(255,255,255,.06);
    --ch-search-text: rgba(237,237,237,.92);
    --ch-search-placeholder: rgba(237,237,237,.62);
    --ch-search-border: rgba(255,255,255,.16);
    --ch-search-focus: rgba(255,255,255,.28);
    --ch-search-btn-bg: rgba(255,255,255,.08);
    --ch-search-btn-text: rgba(237,237,237,.92);
  }
}

/* Base */
.ch-search{
  --ch-search-gap: 10px;
  --ch-search-radius: 14px;
  --ch-search-pad-y: 10px;
  --ch-search-pad-x: 14px;
  --ch-search-font-family: inherit;
  --ch-search-font-size: 14px;
  --ch-search-font-weight: 400;
  /* Derived defaults (keeps custom themes coherent even if only bg/text/border are overridden) */
  --ch-search-focus: color-mix(in srgb, var(--ch-search-border) 72%, var(--ch-search-text));
  --ch-search-btn-bg: color-mix(in srgb, var(--ch-search-text) 8%, transparent);
  --ch-search-btn-text: var(--ch-search-text);
  --ch-search-btn-border: color-mix(in srgb, var(--ch-search-border) 70%, transparent);
  --ch-search-hover: color-mix(in srgb, var(--ch-search-text) 12%, transparent);
}


/* Seed (how strongly we inherit the theme) */
.ch-search--seed-auto{ /* balanced */ }
.ch-search--seed-surface{
  --ch-search-bg: color-mix(in srgb, var(--surface) 92%, transparent);
  --ch-search-border: color-mix(in srgb, var(--line) 90%, transparent);
}
.ch-search--seed-flat{
  --ch-search-bg: transparent;
  --ch-search-btn-bg: transparent;
  --ch-search-btn-border: color-mix(in srgb, var(--ch-search-border) 70%, transparent);
}
.ch-search--seed-strong{
  --ch-search-bg: color-mix(in srgb, var(--surface) 98%, transparent);
  --ch-search-border: color-mix(in srgb, var(--ch-search-text) 20%, transparent);
  --ch-search-focus: color-mix(in srgb, var(--ch-search-text) 42%, transparent);
}

/* Palette presets */
.ch-search--palette-theme{ /* use inherited vars */ }

.ch-search--palette-accent{ --_ch-p: var(--accent); }
.ch-search--palette-accent2{ --_ch-p: var(--accent2); }
.ch-search--palette-dual{ --_ch-p: var(--accent); --_ch-p2: var(--accent2); }

.ch-search--palette-red{ --_ch-p: #EF4444; }
.ch-search--palette-blue{ --_ch-p: #3B82F6; }
.ch-search--palette-green{ --_ch-p: #22C55E; }
.ch-search--palette-amber{ --_ch-p: #F59E0B; }
.ch-search--palette-purple{ --_ch-p: #A855F7; }
.ch-search--palette-mono{ --_ch-p: color-mix(in srgb, var(--ch-search-text) 70%, transparent); }

.ch-search[class*="ch-search--palette-"]{
  --ch-search-focus: color-mix(in srgb, var(--_ch-p, var(--accent)) 68%, var(--ch-search-border));
  --ch-search-btn-bg: color-mix(in srgb, var(--_ch-p, var(--accent)) 16%, transparent);
  --ch-search-btn-border: color-mix(in srgb, var(--_ch-p, var(--accent)) 46%, transparent);
  --ch-search-hover: color-mix(in srgb, var(--_ch-p, var(--accent)) 20%, transparent);
}
.ch-search--palette-dual{
  --ch-search-border: color-mix(in srgb, var(--_ch-p2, var(--accent2)) 46%, var(--ch-search-border));
  --ch-search-focus: color-mix(in srgb, var(--_ch-p2, var(--accent2)) 70%, var(--ch-search-border));
}

/*
  Normalize Joomla Smart Search (mod_finder) markup.
  The module often outputs Bootstrap input-group/form-control/btn.
  We force a consistent layout so ALL style variants (split, underline, stack, etc.) work.
*/
.ch-search form,
.ch-search .mod-finder__search,
.ch-search .mod-finder__search form{ display:flex; gap: var(--ch-search-gap); align-items:center; margin:0; }

.ch-search .input-group{ display:flex; gap: var(--ch-search-gap); align-items:stretch; width:auto; flex-wrap:nowrap; }
.ch-search .input-group > *{ margin:0; }
.ch-search .input-group-text{ display:none; }

.ch-search input[type="search"],
.ch-search input[type="text"]{
  width: min(360px, 56vw);
  padding: var(--ch-search-pad-y) var(--ch-search-pad-x);
  border-radius: var(--ch-search-radius);
  border: 1px solid var(--ch-search-border);
  background: var(--ch-search-bg);
  color: var(--ch-search-text);
  outline: none;
  font-family: var(--ch-search-font-family);
  font-size: var(--ch-search-font-size);
  font-weight: var(--ch-search-font-weight);
  box-shadow: none;
}

/* Bootstrap form-control inside Smart Search */
.ch-search .form-control[type="search"],
.ch-search .form-control[type="text"],
.ch-search input.form-control[type="search"],
.ch-search input.form-control[type="text"]{
  width: min(360px, 56vw);
  padding: var(--ch-search-pad-y) var(--ch-search-pad-x);
  border-radius: var(--ch-search-radius);
  border: 1px solid var(--ch-search-border);
  background: var(--ch-search-bg);
  color: var(--ch-search-text);
  outline: none;
  font-family: var(--ch-search-font-family);
  font-size: var(--ch-search-font-size);
  font-weight: var(--ch-search-font-weight);
  box-shadow: none;
}

.ch-search input[type="search"]::placeholder,
.ch-search input[type="text"]::placeholder{
  color: var(--ch-search-placeholder);
  opacity: 1;
}

.ch-search .form-control::placeholder{ color: var(--ch-search-placeholder); opacity: 1; }

.ch-search input[type="search"]:focus,
.ch-search input[type="text"]:focus{
  border-color: var(--ch-search-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-search-focus) 28%, transparent);
}

.ch-search .form-control:focus{
  border-color: var(--ch-search-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-search-focus) 28%, transparent);
}

.ch-search button,
.ch-search input[type="submit"],
.ch-search .btn{
  padding: var(--ch-search-pad-y) var(--ch-search-pad-x);
  border-radius: var(--ch-search-radius);
  background: var(--ch-search-btn-bg);
  color: var(--ch-search-btn-text);
  border: 1px solid var(--ch-search-btn-border);
  line-height: 1;
  box-shadow: none;
}

.ch-search button:hover,
.ch-search input[type="submit"]:hover,
.ch-search .btn:hover{ background: var(--ch-search-hover); }

.ch-search button:focus,
.ch-search input[type="submit"]:focus,
.ch-search .btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-search-focus) 26%, transparent);
}

/* Keep the button from stretching weirdly inside nav/topbar */
.ch-search button,
.ch-search input[type="submit"],
.ch-search .btn{ white-space: nowrap; }

/* Place helpers */
.ch-search--place-topbar { margin-top: 10px; }
.ch-search--place-header { margin-top: 4px; }
.ch-search--place-header-inline { margin: 0 0 10px; }
.ch-search--place-under-nav { margin-bottom: 6px; }
.ch-search--place-breadcrumbs { margin: 0; }
.ch-search--place-top { margin: 0; }
.ch-search--place-above-component { margin: 0; }
.ch-search--place-below-component { margin: 0; }
.ch-search--place-bottom { margin: 0; }
.ch-search--place-footer { margin: 0; }

.ch-search--place-sidebar { margin-bottom: 14px; }
.ch-search--place-nav{ margin: 0; }

/* Nav 3-zone support (left/center/right) */
.navbar-car .nav-center{ flex: 1 1 auto; display:flex; justify-content:center; align-items:center; min-width: 0; }
.navbar-car .nav-left{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.navbar-car .nav-right{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.ch-search--place-nav-left{ margin-left: 6px; }
.ch-search--place-nav-center{ margin: 0; }
.ch-search--place-nav-right{ margin: 0; }

/* Placement tuning */
.ch-search--place-nav,
.ch-search--place-topbar{
  --ch-search-gap: 8px;
  --ch-search-pad-y: 8px;
  --ch-search-pad-x: 12px;
  --ch-search-radius: 12px;
}
.ch-search--place-nav input[type="search"],
.ch-search--place-nav input[type="text"],
.ch-search--place-nav .form-control{ width: min(320px, 46vw); }

/* Sidebar should be full-width and stack nicely */
.ch-search--place-sidebar form,
.ch-search--place-sidebar .input-group{ width: 100%; flex: 1 1 auto; }
.ch-search--place-sidebar input[type="search"],
.ch-search--place-sidebar input[type="text"],
.ch-search--place-sidebar .form-control{ width: 100%; min-width: 0; }

/* Header inline: slightly more compact to fit near CTA */
.ch-search--place-header-inline{
  --ch-search-gap: 8px;
  --ch-search-pad-y: 8px;
  --ch-search-pad-x: 12px;
  --ch-search-radius: 12px;
}
.ch-search--place-header-inline input[type="search"],
.ch-search--place-header-inline input[type="text"],
.ch-search--place-header-inline .form-control{ width: min(320px, 42vw); }

/* Floating / Mobile bottom placements */
.ch-search--place-floating{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  margin: 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}
.ch-search--place-floating input[type="search"],
.ch-search--place-floating input[type="text"],
.ch-search--place-floating .form-control{ width: 260px; }

.ch-search--place-mobile-bottom{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  margin: 0;
}
.ch-search--place-mobile-bottom input[type="search"],
.ch-search--place-mobile-bottom input[type="text"],
.ch-search--place-mobile-bottom .form-control{ width: 100%; }

@media (min-width: 992px){
  .ch-search--place-mobile-bottom{ display:none; }
}

/* Pin (sticky / fixed) */
.ch-search--pin{ position: relative; }
.ch-search--pin-sticky{ position: sticky; top: var(--ch-search-sticky-top, 0px); z-index: 1200; }
.ch-search--pin-fixed.is-fixed{ position: fixed; z-index: 1400; }
.ch-search__spacer{ height: 0px; }

/* Robust pin bar (JS moves the search into this bar on scroll)
   This guarantees visibility even if the original section (header/topbar) scrolls away. */
.ch-search__pinbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1600;
  pointer-events: none; /* allows clicks only on inner */
}
.ch-search__pinbar-inner{
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 16px 0;
  width: 100%;
  max-width: 100%;
}
.ch-search__pinbar.has-pinned-module .ch-search__pinbar-inner{ padding-left: 16px; padding-right: 16px; padding-top: 0; }
.ch-search__pinbar .moduletable,
.ch-search__pinbar .module,
.ch-search__pinbar .mod-finder,
.ch-search__pinbar .finder,
.ch-search__pinbar .finder-search,
.ch-search__pinbar form[id^="mod-finder-searchform"],
.ch-search__pinbar #mod-finder-searchform{ margin-left: 0; margin-right: 0; }
.ch-search__pinbar .moduletable,
.ch-search__pinbar .module{ margin-top: 0 !important; margin-bottom: 0 !important; }
.ch-search__pinbar .ch-search{ margin-top: 0 !important; }
.ch-search.is-pinned{ width: 100%; }

/* Sticky position + width overrides */
.ch-search__pinbar[data-ch-search-pin-position="left"] .ch-search__pinbar-inner{ justify-content: flex-start !important; }
.ch-search__pinbar[data-ch-search-pin-position="center"] .ch-search__pinbar-inner{ justify-content: center !important; }
.ch-search__pinbar[data-ch-search-pin-position="right"] .ch-search__pinbar-inner{ justify-content: flex-end !important; }
.ch-search__pinbar[data-ch-search-pin-position="content"] .ch-search__pinbar-inner{ justify-content: center !important; }
.ch-search__pinbar[data-ch-search-pin-position="full"] .ch-search__pinbar-inner{ justify-content: stretch !important; padding-left: 0 !important; padding-right: 0 !important; }

.ch-search__pinbar[data-ch-search-pin-width="narrow"] .moduletable,
.ch-search__pinbar[data-ch-search-pin-width="narrow"] .module,
.ch-search__pinbar[data-ch-search-pin-width="narrow"] .mod-finder,
.ch-search__pinbar[data-ch-search-pin-width="narrow"] .finder,
.ch-search__pinbar[data-ch-search-pin-width="narrow"] .finder-search{ width: min(360px, calc(100vw - 32px)) !important; max-width: 100%; }

.ch-search__pinbar[data-ch-search-pin-width="medium"] .moduletable,
.ch-search__pinbar[data-ch-search-pin-width="medium"] .module,
.ch-search__pinbar[data-ch-search-pin-width="medium"] .mod-finder,
.ch-search__pinbar[data-ch-search-pin-width="medium"] .finder,
.ch-search__pinbar[data-ch-search-pin-width="medium"] .finder-search{ width: min(560px, calc(100vw - 32px)) !important; max-width: 100%; }

.ch-search__pinbar[data-ch-search-pin-width="wide"] .moduletable,
.ch-search__pinbar[data-ch-search-pin-width="wide"] .module,
.ch-search__pinbar[data-ch-search-pin-width="wide"] .mod-finder,
.ch-search__pinbar[data-ch-search-pin-width="wide"] .finder,
.ch-search__pinbar[data-ch-search-pin-width="wide"] .finder-search{ width: min(840px, calc(100vw - 32px)) !important; max-width: 100%; }

.ch-search__pinbar[data-ch-search-pin-width="content"] .moduletable,
.ch-search__pinbar[data-ch-search-pin-width="content"] .module,
.ch-search__pinbar[data-ch-search-pin-width="content"] .mod-finder,
.ch-search__pinbar[data-ch-search-pin-width="content"] .finder,
.ch-search__pinbar[data-ch-search-pin-width="content"] .finder-search{ width: min(var(--container-max, 1180px), calc(100vw - 32px)) !important; max-width: 100%; }

.ch-search__pinbar[data-ch-search-pin-width="full"] .moduletable,
.ch-search__pinbar[data-ch-search-pin-width="full"] .module,
.ch-search__pinbar[data-ch-search-pin-width="full"] .mod-finder,
.ch-search__pinbar[data-ch-search-pin-width="full"] .finder,
.ch-search__pinbar[data-ch-search-pin-width="full"] .finder-search{ width: 100% !important; max-width: none !important; }

/* Keep pinned search aligned similarly to the configured Search (UI) location */
.ch-search__pinbar[data-ch-search-origin="nav-left"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="topbar"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="header-inline"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="header"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="breadcrumbs"] .ch-search__pinbar-inner{ justify-content: flex-start; }

.ch-search__pinbar[data-ch-search-origin="nav-center"] .ch-search__pinbar-inner{ justify-content: center; }

.ch-search__pinbar[data-ch-search-origin="nav-right"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="sidebar"] .ch-search__pinbar-inner{ justify-content: flex-end; }

.ch-search__pinbar[data-ch-search-origin="under-nav"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="top"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="above-component"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="below-component"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="bottom"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="footer"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="floating"] .ch-search__pinbar-inner,
.ch-search__pinbar[data-ch-search-origin="mobile-bottom"] .ch-search__pinbar-inner{ justify-content: stretch; }

.ch-search__pinbar[data-ch-search-origin="nav-left"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="nav-left"] .module,
.ch-search__pinbar[data-ch-search-origin="nav-center"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="nav-center"] .module,
.ch-search__pinbar[data-ch-search-origin="nav-right"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="nav-right"] .module,
.ch-search__pinbar[data-ch-search-origin="topbar"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="topbar"] .module,
.ch-search__pinbar[data-ch-search-origin="header-inline"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="header-inline"] .module,
.ch-search__pinbar[data-ch-search-origin="breadcrumbs"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="breadcrumbs"] .module{
  width: auto;
  max-width: calc(100vw - 32px);
}

.ch-search__pinbar[data-ch-search-origin="sidebar"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="sidebar"] .module,
.ch-search__pinbar[data-ch-search-origin="sidebar"] .mod-finder,
.ch-search__pinbar[data-ch-search-origin="sidebar"] .finder,
.ch-search__pinbar[data-ch-search-origin="sidebar"] .finder-search{
  width: min(420px, calc(100vw - 32px));
  max-width: 100%;
}

.ch-search__pinbar[data-ch-search-origin="under-nav"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="under-nav"] .module,
.ch-search__pinbar[data-ch-search-origin="top"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="top"] .module,
.ch-search__pinbar[data-ch-search-origin="header"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="header"] .module,
.ch-search__pinbar[data-ch-search-origin="above-component"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="above-component"] .module,
.ch-search__pinbar[data-ch-search-origin="below-component"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="below-component"] .module,
.ch-search__pinbar[data-ch-search-origin="bottom"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="bottom"] .module,
.ch-search__pinbar[data-ch-search-origin="footer"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="footer"] .module,
.ch-search__pinbar[data-ch-search-origin="floating"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="floating"] .module,
.ch-search__pinbar[data-ch-search-origin="mobile-bottom"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="mobile-bottom"] .module,
.ch-search__pinbar[data-ch-search-origin="default"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="default"] .module{
  width: 100%;
  max-width: none;
}

/* Pin styles */
.ch-search--pin-style-glass{
  margin-top: 0;
  backdrop-filter: saturate(120%) blur(10px);
  background: color-mix(in srgb, var(--ch-search-bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ch-search-border) 80%, transparent);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 14px 44px rgba(0,0,0,.10);
}
body.site.theme-dark .ch-search--pin-style-glass{ box-shadow: 0 18px 60px rgba(0,0,0,.34); }

.ch-search--pin-style-solid{
  margin-top: 0;
  background: color-mix(in srgb, var(--ch-search-bg) 92%, #fff 8%);
  border: 1px solid var(--ch-search-border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 38px rgba(0,0,0,.10);
}
body.site.theme-dark .ch-search--pin-style-solid{ background: color-mix(in srgb, var(--ch-search-bg) 92%, #000 8%); box-shadow: 0 18px 60px rgba(0,0,0,.34); }

@media (max-width: 560px){
  .ch-search--place-floating{ right: 12px; bottom: 12px; }
  .ch-search--place-floating input[type="search"],
  .ch-search--place-floating input[type="text"],
  .ch-search--place-floating .form-control{ width: 220px; }
}

/* 1) PILL */
.ch-search--pill{ --ch-search-radius: 999px; }

/* 2) EXPAND ON FOCUS */
.ch-search--expand{ --ch-search-radius: 999px; }
.ch-search--expand input[type="search"],
.ch-search--expand input[type="text"]{
  width: 180px;
  transition: width .2s ease, background .2s ease;
}
.ch-search--expand input[type="search"]:focus,
.ch-search--expand input[type="text"]:focus{ width: min(420px, 62vw); }

/* 3) GLASS */
.ch-search--glass{
  --ch-search-radius: 16px;
  --ch-search-pad-y: 12px;
  --ch-search-bg: color-mix(in srgb, var(--ch-search-bg) 80%, transparent);
}
.ch-search--glass input[type="search"],
.ch-search--glass input[type="text"]{
  backdrop-filter: blur(10px);
  width: min(420px, 62vw);
}

/* 4) CHIP */
.ch-search--chip{ --ch-search-radius: 999px; }
.ch-search--chip input[type="search"],
.ch-search--chip input[type="text"]{ width: 210px; padding: 10px 12px; }

/* 5) UNDERLINE */
.ch-search--underline input[type="search"],
.ch-search--underline input[type="text"]{
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--ch-search-border);
  background: transparent;
  padding: 10px 0;
}

.ch-search--underline .form-control{
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--ch-search-border);
  background: transparent;
  padding: 10px 0;
}

/* 6) CONTRAST (force light look) */
.ch-search--contrast{
  --ch-search-bg: #fff;
  --ch-search-text: #111;
  --ch-search-placeholder: rgba(0,0,0,.55);
  --ch-search-border: rgba(0,0,0,.14);
  --ch-search-focus: rgba(0,0,0,.26);
  --ch-search-btn-bg: rgba(0,0,0,.06);
  --ch-search-btn-text: rgba(0,0,0,.9);
}
.ch-search--contrast input[type="search"],
.ch-search--contrast input[type="text"]{ width: min(420px, 62vw); padding: 12px 14px; }

/* 7) STACK */
.ch-search--stack form,
.ch-search--stack .mod-finder__search,
.ch-search--stack .mod-finder__search form{ display:block; }
.ch-search--stack input[type="search"],
.ch-search--stack input[type="text"]{ width: 100%; margin-bottom: 10px; }
.ch-search--stack button,
.ch-search--stack input[type="submit"]{ width: 100%; border-radius: 12px; padding: 12px 14px; }

.ch-search--stack .form-control{ width: 100%; margin-bottom: 10px; }
.ch-search--stack .btn{ width: 100%; border-radius: 12px; padding: 12px 14px; }

/* 8) HERO */
.ch-search--hero form{ max-width: 760px; margin: 0 auto; }
.ch-search--hero input[type="search"],
.ch-search--hero input[type="text"]{
  width: 100%;
  padding: 16px 16px;
  border-radius: 18px;
  font-size: 16px;
}

/* 9) TOPBAR COMPACT */
.ch-search--topbar{ --ch-search-radius: 12px; --ch-search-pad-y: 8px; --ch-search-pad-x: 12px; }
.ch-search--topbar input[type="search"],
.ch-search--topbar input[type="text"]{ width: min(320px, 55vw); font-size: 14px; }
.ch-search--topbar button,
.ch-search--topbar input[type="submit"]{ font-size: 14px; }

/* 10) FULLBAR */
.ch-search--fullbar { width:100%; }
.ch-search--fullbar form{ max-width: 980px; margin: 0 auto; }
.ch-search--fullbar input[type="search"],
.ch-search--fullbar input[type="text"]{
  flex:1;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
}

.ch-search--fullbar .input-group{ width: 100%; }
.ch-search--fullbar .form-control{ flex: 1 1 auto; width: 100%; padding: 14px 16px; border-radius: 14px; }
.ch-search--fullbar button,
.ch-search--fullbar input[type="submit"]{ padding: 14px 16px; border-radius: 14px; white-space: nowrap; }

/* 11) STICKY MOBILE */
@media (max-width: 720px){
  .ch-search--sticky-mobile{
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 9999;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.14);
  }
  .ch-search--sticky-mobile input[type="search"],
  .ch-search--sticky-mobile input[type="text"]{ width: 100%; }
}

/* 12) SOFT */
.ch-search--soft input[type="search"],
.ch-search--soft input[type="text"]{
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
body.site.theme-dark .ch-search--soft input[type="search"],
body.site.theme-dark .ch-search--soft input[type="text"]{ box-shadow: 0 12px 32px rgba(0,0,0,.30); }

/* 13) SQUARE */
.ch-search--square{ --ch-search-radius: 6px; }

/* 14) OUTLINE */
.ch-search--outline{
  --ch-search-bg: transparent;
  --ch-search-btn-bg: transparent;
}
.ch-search--outline input[type="search"],
.ch-search--outline input[type="text"]{ border-width: 2px; }
.ch-search--outline button,
.ch-search--outline input[type="submit"]{ border: 2px solid var(--ch-search-border); }

/* 15) FILLED */
.ch-search--filled{
  --ch-search-bg: color-mix(in srgb, var(--ch-search-text) 8%, transparent);
  --ch-search-border: transparent;
}
.ch-search--filled input[type="search"],
.ch-search--filled input[type="text"]{ border-width: 1px; }

/* 16) SPLIT (connected input + button) */
.ch-search--split{
  --ch-search-gap: 0px;
}
.ch-search--split input[type="search"],
.ch-search--split input[type="text"]{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ch-search--split button,
.ch-search--split input[type="submit"],
.ch-search--split .btn{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.ch-search--split .input-group{ gap: 0; }
.ch-search--split .form-control{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ch-search--split .btn{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

/* 17) NEON (accent glow)
   Uses template accent as fallback if available (var(--accent) from template.css).
*/
.ch-search--neon{
  --_glow: color-mix(in srgb, var(--accent, #00B3FF) 70%, transparent);
}
.ch-search--neon input[type="search"],
.ch-search--neon input[type="text"]{
  border-color: var(--_glow);
  box-shadow: 0 0 0 1px var(--_glow), 0 0 18px color-mix(in srgb, var(--_glow) 55%, transparent);
}
.ch-search--neon button,
.ch-search--neon input[type="submit"]{
  border: 1px solid var(--_glow);
  box-shadow: 0 0 18px color-mix(in srgb, var(--_glow) 55%, transparent);
}

/* 18) GLASS PRO (more premium frosted) */
.ch-search--glass-pro{
  --ch-search-radius: 18px;
  --ch-search-pad-y: 12px;
  --ch-search-pad-x: 16px;
  --ch-search-bg: color-mix(in srgb, var(--ch-search-bg) 58%, transparent);
  --ch-search-border: color-mix(in srgb, var(--ch-search-border) 72%, transparent);
}
.ch-search--glass-pro input[type="search"],
.ch-search--glass-pro input[type="text"],
.ch-search--glass-pro .form-control{
  backdrop-filter: blur(14px) saturate(120%);
  width: min(460px, 66vw);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
}
body.site.theme-dark .ch-search--glass-pro input[type="search"],
body.site.theme-dark .ch-search--glass-pro input[type="text"],
body.site.theme-dark .ch-search--glass-pro .form-control{ box-shadow: 0 22px 74px rgba(0,0,0,.40); }

/* 19) MINIMAL (borderless, subtle focus) */
.ch-search--minimal{
  --ch-search-bg: transparent;
  --ch-search-btn-bg: transparent;
  --ch-search-border: color-mix(in srgb, var(--ch-search-text) 18%, transparent);
}
.ch-search--minimal input[type="search"],
.ch-search--minimal input[type="text"],
.ch-search--minimal .form-control{
  border-width: 1px;
  border-radius: 12px;
  background: transparent;
}
.ch-search--minimal button,
.ch-search--minimal input[type="submit"],
.ch-search--minimal .btn{ border: 1px solid transparent; }

/* 20) ELEVATED (card-like) */
.ch-search--elevated{
  --ch-search-radius: 16px;
  --ch-search-bg: color-mix(in srgb, var(--ch-search-bg) 92%, #fff 8%);
  --ch-search-border: color-mix(in srgb, var(--ch-search-border) 72%, transparent);
}
.ch-search--elevated input[type="search"],
.ch-search--elevated input[type="text"],
.ch-search--elevated .form-control{
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
body.site.theme-dark .ch-search--elevated input[type="search"],
body.site.theme-dark .ch-search--elevated input[type="text"],
body.site.theme-dark .ch-search--elevated .form-control{ box-shadow: 0 26px 80px rgba(0,0,0,.42); }

/* 21) iOS (pill + compact button) */
.ch-search--ios{ --ch-search-radius: 999px; --ch-search-pad-y: 10px; --ch-search-pad-x: 16px; }
.ch-search--ios input[type="search"],
.ch-search--ios input[type="text"],
.ch-search--ios .form-control{ width: min(420px, 62vw); }
.ch-search--ios button,
.ch-search--ios input[type="submit"],
.ch-search--ios .btn{ border-radius: 999px; padding: 10px 14px; }

/* 22) BRUTAL (high-contrast, trendy editorial) */
.ch-search--brutal{
  --ch-search-radius: 10px;
  --ch-search-bg: #fff;
  --ch-search-text: #111;
  --ch-search-border: #111;
  --ch-search-btn-bg: #111;
  --ch-search-btn-text: #fff;
}
body.site.theme-dark .ch-search--brutal{
  --ch-search-bg: #0b0f16;
  --ch-search-text: #f3f6ff;
  --ch-search-border: #f3f6ff;
  --ch-search-btn-bg: #f3f6ff;
  --ch-search-btn-text: #0b0f16;
}
.ch-search--brutal input[type="search"],
.ch-search--brutal input[type="text"],
.ch-search--brutal .form-control{ border-width: 2px; }
.ch-search--brutal button,
.ch-search--brutal input[type="submit"],
.ch-search--brutal .btn{ border: 2px solid var(--ch-search-border); }

/* 23) MATERIAL (Material 3-like) */
.ch-search--material{
  --ch-search-radius: 999px;
  --ch-search-pad-y: 12px;
  --ch-search-pad-x: 16px;
  --ch-search-bg: color-mix(in srgb, var(--ch-search-bg) 94%, #fff 6%);
  --ch-search-border: color-mix(in srgb, var(--ch-search-border) 55%, transparent);
}
.ch-search--material input[type="search"],
.ch-search--material input[type="text"],
.ch-search--material .form-control{
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 28px rgba(0,0,0,.08);
}
.ch-search--material input[type="search"]:focus,
.ch-search--material input[type="text"]:focus,
.ch-search--material .form-control:focus{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-search-focus) 45%, transparent), 0 12px 32px rgba(0,0,0,.10);
}

/* 24) BORDERGRAD (gradient border, trendy) */
.ch-search--bordergrad{
  --ch-search-radius: 16px;
  --_g1: color-mix(in srgb, var(--accent, #00B3FF) 60%, #fff 40%);
  --_g2: color-mix(in srgb, var(--accent2, #E10600) 60%, #fff 40%);
}
.ch-search--bordergrad input[type="search"],
.ch-search--bordergrad input[type="text"],
.ch-search--bordergrad .form-control{
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ch-search-bg), var(--ch-search-bg)) padding-box,
    linear-gradient(90deg, var(--_g1), var(--_g2)) border-box;
}

/* 25) NEUMORPH (soft in/out shadows) */
.ch-search--neumorph{
  --ch-search-radius: 18px;
  --ch-search-border: transparent;
  --ch-search-bg: color-mix(in srgb, var(--ch-search-bg) 94%, #fff 6%);
}
.ch-search--neumorph input[type="search"],
.ch-search--neumorph input[type="text"],
.ch-search--neumorph .form-control{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 18px 44px rgba(0,0,0,.10);
}
body.site.theme-dark .ch-search--neumorph input[type="search"],
body.site.theme-dark .ch-search--neumorph input[type="text"],
body.site.theme-dark .ch-search--neumorph .form-control{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 26px 80px rgba(0,0,0,.46);
}

/* 26) MONO (ultra clean, monochrome) */
.ch-search--mono{
  --ch-search-radius: 12px;
  --ch-search-bg: transparent;
  --ch-search-btn-bg: transparent;
  --ch-search-border: color-mix(in srgb, var(--ch-search-text) 28%, transparent);
}
.ch-search--mono input[type="search"],
.ch-search--mono input[type="text"],
.ch-search--mono .form-control{
  background: transparent;
  border-width: 1px;
}
.ch-search--mono button,
.ch-search--mono input[type="submit"],
.ch-search--mono .btn{
  border: 1px solid color-mix(in srgb, var(--ch-search-text) 22%, transparent);
  background: color-mix(in srgb, var(--ch-search-text) 6%, transparent);
}


/* === Extra modern variants === */

/* 25) ICON (adds a subtle magnifier icon inside the field) */
.ch-search--icon input[type="search"],
.ch-search--icon input[type="text"],
.ch-search--icon .form-control{
  padding-left: calc(var(--ch-search-pad-x) + 28px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M10 4a6 6 0 104.472 10.01l3.259 3.258a1 1 0 001.414-1.414l-3.258-3.259A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 12px 50%;
}
body.site.theme-dark .ch-search--icon input[type="search"],
body.site.theme-dark .ch-search--icon input[type="text"],
body.site.theme-dark .ch-search--icon .form-control{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M10 4a6 6 0 104.472 10.01l3.259 3.258a1 1 0 001.414-1.414l-3.258-3.259A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E");
  opacity:.92;
}

/* 26) INSET (inner depth like modern dashboards) */
.ch-search--inset input[type="search"],
.ch-search--inset input[type="text"],
.ch-search--inset .form-control{
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ch-search-text) 10%, transparent),
    inset 0 -10px 18px color-mix(in srgb, var(--ch-search-text) 8%, transparent);
}

/* 27) GLOWLINE (underline accent gradient) */
.ch-search--glowline{
  --ch-search-bg: transparent;
  --ch-search-btn-bg: transparent;
}
.ch-search--glowline input[type="search"],
.ch-search--glowline input[type="text"],
.ch-search--glowline .form-control{
  border-radius: 0;
  border: none;
  border-bottom: 2px solid color-mix(in srgb, var(--_ch-p, var(--accent)) 60%, var(--ch-search-border));
  background: transparent;
  padding: 10px 0;
}
.ch-search--glowline input[type="search"]:focus,
.ch-search--glowline input[type="text"]:focus,
.ch-search--glowline .form-control:focus{
  box-shadow: 0 8px 22px color-mix(in srgb, var(--_ch-p, var(--accent)) 26%, transparent);
}

/* 28) SOFTSPLIT (connected input+button, softer) */
.ch-search--softsplit{ --ch-search-gap: 0px; }
.ch-search--softsplit input[type="search"],
.ch-search--softsplit input[type="text"],
.ch-search--softsplit .form-control{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.10);
}
.ch-search--softsplit button,
.ch-search--softsplit input[type="submit"],
.ch-search--softsplit .btn{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.10);
}
body.site.theme-dark .ch-search--softsplit input[type="search"],
body.site.theme-dark .ch-search--softsplit input[type="text"],
body.site.theme-dark .ch-search--softsplit .form-control,
body.site.theme-dark .ch-search--softsplit button,
body.site.theme-dark .ch-search--softsplit input[type="submit"],
body.site.theme-dark .ch-search--softsplit .btn{ box-shadow: 0 22px 70px rgba(0,0,0,.44); }

/* 29) FILLED ACCENT (button uses palette/accent) */
.ch-search--filled-accent{
  --ch-search-btn-bg: color-mix(in srgb, var(--_ch-p, var(--accent)) 92%, #000 8%);
  --ch-search-btn-border: color-mix(in srgb, var(--_ch-p, var(--accent)) 60%, transparent);
  --ch-search-btn-text: #fff;
  --ch-search-hover: color-mix(in srgb, var(--_ch-p, var(--accent)) 100%, #000 0%);
}

/* 30) OUTLINE GLOW (premium outline + soft glow) */
.ch-search--outline-glow{
  --ch-search-bg: transparent;
  --ch-search-btn-bg: transparent;
}
.ch-search--outline-glow input[type="search"],
.ch-search--outline-glow input[type="text"],
.ch-search--outline-glow .form-control{
  border-width: 2px;
  border-color: color-mix(in srgb, var(--_ch-p, var(--accent)) 55%, var(--ch-search-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--_ch-p, var(--accent)) 24%, transparent),
              0 18px 60px color-mix(in srgb, var(--_ch-p, var(--accent)) 14%, transparent);
}

/* Sidebar-specific pinned alignment */
.ch-search--place-sidebar-left{ --ch-search-side-width: min(420px, calc(100vw - 32px)); }
.ch-search--place-sidebar-right{ --ch-search-side-width: min(420px, calc(100vw - 32px)); }

.ch-search__pinbar[data-ch-search-origin="sidebar-left"] .ch-search__pinbar-inner{ justify-content: flex-start; }
.ch-search__pinbar[data-ch-search-origin="sidebar-right"] .ch-search__pinbar-inner{ justify-content: flex-end; }
.ch-search__pinbar[data-ch-search-origin="sidebar-left"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="sidebar-left"] .module,
.ch-search__pinbar[data-ch-search-origin="sidebar-left"] .mod-finder,
.ch-search__pinbar[data-ch-search-origin="sidebar-left"] .finder,
.ch-search__pinbar[data-ch-search-origin="sidebar-left"] .finder-search,
.ch-search__pinbar[data-ch-search-origin="sidebar-right"] .moduletable,
.ch-search__pinbar[data-ch-search-origin="sidebar-right"] .module,
.ch-search__pinbar[data-ch-search-origin="sidebar-right"] .mod-finder,
.ch-search__pinbar[data-ch-search-origin="sidebar-right"] .finder,
.ch-search__pinbar[data-ch-search-origin="sidebar-right"] .finder-search{
  width: min(420px, calc(100vw - 32px));
  max-width: 100%;
}

/* Extra visual styles */
.ch-search--ribbon{
  --ch-search-radius: 18px;
  --ch-search-pad-y: 12px;
  --ch-search-pad-x: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--_ch-p, var(--accent)) 10%, transparent), transparent 45%, color-mix(in srgb, var(--_ch-p2, var(--accent2, var(--accent))) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--_ch-p, var(--accent)) 24%, var(--ch-search-border));
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.08);
}
.ch-search--ribbon .btn,
.ch-search--ribbon button{ border-radius: 16px; }

.ch-search--command{
  --ch-search-radius: 14px;
  --ch-search-pad-y: 12px;
  --ch-search-pad-x: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--ch-search-text) 18%, transparent);
  border-radius: 18px;
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.08);
}
.ch-search--command input[type="search"],
.ch-search--command input[type="text"],
.ch-search--command .form-control{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .01em;
}
.ch-search--command .btn,
.ch-search--command button{
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ch-search--aurora{
  --ch-search-radius: 20px;
  position: relative;
  padding: 10px;
  border-radius: 24px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--_ch-p, var(--accent)) 80%, white 20%), color-mix(in srgb, var(--_ch-p2, var(--accent2, var(--accent))) 82%, white 18%)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--_ch-p, var(--accent)) 16%, transparent);
}
.ch-search--aurora .btn,
.ch-search--aurora button{
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ch-p, var(--accent)) 22%, var(--ch-search-btn-bg)), color-mix(in srgb, var(--_ch-p2, var(--accent2, var(--accent))) 18%, var(--ch-search-btn-bg)));
}

.ch-search--frameless{
  --ch-search-radius: 16px;
  --ch-search-pad-y: 12px;
  --ch-search-pad-x: 4px;
}
.ch-search--frameless input[type="search"],
.ch-search--frameless input[type="text"],
.ch-search--frameless .form-control{
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.ch-search--frameless .btn,
.ch-search--frameless button{
  border-radius: 999px;
}

.ch-search--compact{
  --ch-search-gap: 6px;
  --ch-search-radius: 11px;
  --ch-search-pad-y: 7px;
  --ch-search-pad-x: 10px;
}
.ch-search--compact input[type="search"],
.ch-search--compact input[type="text"],
.ch-search--compact .form-control{
  min-height: 38px;
}
.ch-search--compact .btn,
.ch-search--compact button{
  padding: 7px 12px;
  min-height: 38px;
}

.ch-search--premium{
  --ch-search-radius: 22px;
  --ch-search-pad-y: 13px;
  --ch-search-pad-x: 18px;
  padding: 12px;
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--ch-search-border) 86%, transparent);
  box-shadow: 0 20px 50px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.12);
}
body.site.theme-dark .ch-search--premium{
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, black 10%), color-mix(in srgb, var(--surface) 96%, transparent));
  box-shadow: 0 26px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.ch-search--premium .btn,
.ch-search--premium button{
  border-radius: 18px;
  font-weight: 600;
}


/* Additional search styles */
.ch-search--spotlight{--ch-search-radius:22px;padding:10px;border:1px solid color-mix(in srgb, var(--_ch-p, var(--accent)) 34%, var(--ch-search-border));background:linear-gradient(135deg, color-mix(in srgb, var(--_ch-p, var(--accent)) 14%, var(--ch-search-bg)), color-mix(in srgb, var(--_ch-p2, var(--accent2, var(--accent))) 10%, var(--ch-search-bg)));box-shadow:0 18px 44px color-mix(in srgb, var(--_ch-p, var(--accent)) 14%, transparent);}
.ch-search--capsule-pro{--ch-search-radius:999px;padding:8px;border:1px solid color-mix(in srgb, var(--ch-search-border) 78%, transparent);background:color-mix(in srgb, var(--ch-search-bg) 94%, #fff 6%);box-shadow:0 12px 34px rgba(0,0,0,.08);}
.ch-search--toolbar{--ch-search-radius:16px;padding:8px;background:color-mix(in srgb, var(--ch-search-bg) 90%, #fff 10%);border:1px solid color-mix(in srgb, var(--ch-search-border) 88%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 10px 28px rgba(0,0,0,.08);}
.ch-search--floating-card{--ch-search-radius:24px;padding:12px;background:color-mix(in srgb, var(--ch-search-bg) 84%, transparent);backdrop-filter:blur(14px) saturate(120%);border:1px solid color-mix(in srgb, var(--ch-search-border) 70%, transparent);box-shadow:0 24px 54px rgba(0,0,0,.14);}
.ch-search--slimline{padding:2px 0 8px;border:0;border-bottom:2px solid color-mix(in srgb, var(--_ch-p, var(--accent)) 42%, var(--ch-search-border));border-radius:0;background:transparent;box-shadow:none;}
.ch-search--slimline .btn,.ch-search--slimline button{border-radius:999px;}
.ch-search--tech{--ch-search-radius:14px;padding:8px;border:1px solid color-mix(in srgb, var(--_ch-p, var(--accent)) 40%, var(--ch-search-border));background:linear-gradient(180deg, color-mix(in srgb, var(--_ch-p, var(--accent)) 6%, transparent), transparent 40%), color-mix(in srgb, var(--ch-search-bg) 94%, #0b1220 6%);box-shadow:0 0 0 1px color-mix(in srgb, var(--_ch-p, var(--accent)) 18%, transparent), 0 18px 44px rgba(0,0,0,.12);}
body.site.theme-dark .ch-search--capsule-pro,body.site.theme-dark .ch-search--toolbar,body.site.theme-dark .ch-search--tech{box-shadow:0 20px 54px rgba(0,0,0,.30);}