/* ==========================================================================
   Smart Search — search bar (1.4.0-beta6)
   The pill bar designed for the Smart Search microsite, now shipped by the
   plugin for every template. Colours come from the merchant's settings via
   the :root variables printed by generate_custom_css():
     --smart-searchbar-bg-color     bar background (defaults to the title colour)
     --smart-searchbar-text-color   auto-contrast text on the bar
     --smart-secondary-color        submit circle, caret, AI sparkle
     --smart-title-color            active mode chip
     --smart-title-contrast-color   text on the active chip
   Design classes are `ssb-*`; the ids/classes the JS relies on are unchanged.
   ========================================================================== */

.ssb {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.ssb *,
.ssb *::before,
.ssb *::after {
  box-sizing: border-box;
}

.ssb-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ssb-icon {
  display: block;
  flex-shrink: 0;
}

/* --- Mode toggle (Keyword / AI) ------------------------------------------ */

.ssb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  align-self: flex-start;
  padding: 4px 32px 4px 6px;
  border-radius: 999px;
  background-color: rgba(47, 63, 143, 0.12);
}

@supports (background-color: color-mix(in srgb, red 15%, transparent)) {
  .ssb-toggle {
    background-color: color-mix(in srgb, var(--smart-title-color, #2F3F8F) 15%, transparent);
  }
}

.ssb-mode,
.ssb-mode:hover,
.ssb-mode:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--smart-title-color, #2F3F8F);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ssb-mode:hover {
  opacity: 0.85;
}

.ssb-mode.is-active,
.ssb-mode.is-active:hover,
.ssb-mode.is-active:focus {
  padding: 0.6875em 12px;
  background-color: var(--smart-title-color, #2F3F8F);
  color: var(--smart-title-contrast-color, #ffffff);
  opacity: 1;
}

.ssb-mode .ssb-icon {
  width: 1em;
  height: 1em;
}

.ssb-mode--ai .ssb-icon {
  color: var(--smart-secondary-color, #66B036);
}

.ssb-mode:focus-visible {
  outline: 2px solid var(--smart-title-color, #2F3F8F);
  outline-offset: 2px;
}

/* --- The bar ------------------------------------------------------------- */

.ssb-bar,
.search-bar-container.ssb-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 5px 5px 5px 20px;
  border-radius: 999px;
  background-color: var(--smart-searchbar-bg-color, #2F3F8F);
  color: var(--smart-searchbar-text-color, #ffffff);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.04em;
}

/* Scope (product category) */
.ssb-scope {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.ssb-bar #smart-search-category,
.ssb-bar select.ssb-scope-select {
  -webkit-appearance: none;
  appearance: none;
  width: auto;
  max-width: 220px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 26px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  cursor: pointer;
  outline: none;
}

.ssb-bar #smart-search-category:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Options are painted by the OS: give them readable colours of their own. */
.ssb-bar #smart-search-category option {
  color: #15236B;
  background-color: #ffffff;
  -webkit-text-fill-color: #15236B;
}

.ssb-caret {
  position: absolute;
  right: 26px;
  width: 12px;
  height: auto;
  color: var(--smart-secondary-color, #66B036);
  transform: rotate(180deg);
  pointer-events: none;
}

.ssb-divider {
  width: 1px;
  height: 2.25em;
  background-color: currentColor;
  opacity: 0.4;
}

/* --- Category dropdown (selectWoo / Select2, 1.4.1) --------------------------
   Only overrides of Select2's default theme. The closed control inherits the
   bar's font and colour like the native select did; the open panel uses the
   merchant's colours (--smart-*) and is appended to <body>. */

.ssb-scope .select2-container,
.ss-demo__scope .select2-container {
  display: inline-block;
  max-width: 220px;
  vertical-align: middle;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.select2-container .select2-selection.ssb-select2 {
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  outline: none;
}

.select2-container .ssb-select2 .select2-selection__rendered {
  padding: 0 26px 0 0;
  line-height: inherit;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Our own caret stays; Select2's arrow goes. */
.select2-container .ssb-select2 .select2-selection__arrow {
  display: none;
}

/* No focus ring on click; keyboard users still get one (:focus-visible). */
.select2-container .select2-selection.ssb-select2:focus {
  outline: none;
}

.select2-container .select2-selection.ssb-select2:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

.ssb-scope .select2-container--open ~ .ssb-caret,
.ss-demo__scope .select2-container--open ~ .ss-demo__caret {
  transform: rotate(0);
}

.ssb-select2-dropdown.select2-dropdown {
  /* The open Template 3 hero wrapper is fixed at z-index 2147483647; the
     dropdown container is appended to <body> after it, so an equal z-index
     paints on top. */
  z-index: 2147483647;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid rgba(47, 63, 143, 0.12);
  border-radius: 16px;
  background-color: var(--smart-results-bg-color, #ffffff);
  color: var(--smart-text-color, #15236B);
  box-shadow: 0 18px 40px rgba(2, 9, 42, 0.25);
  font-size: 15px;
  line-height: 1.3;
  overflow: hidden;
}

.ssb-select2-dropdown.select2-dropdown--above {
  margin-top: 0;
  margin-bottom: 8px;
}

.ssb-select2-dropdown .select2-results > .select2-results__options {
  max-height: 320px;
  scrollbar-width: thin;
}

.ssb-select2-dropdown .select2-results__option {
  position: relative;
  padding: 10px 40px 10px 14px;
  border-radius: 10px;
  color: inherit;
}

.ssb-select2-dropdown .select2-results__option--highlighted[aria-selected],
.ssb-select2-dropdown .select2-results__option--highlighted[data-selected] {
  background-color: rgba(47, 63, 143, 0.08);
  color: inherit;
}

@supports (background-color: color-mix(in srgb, red 15%, transparent)) {
  .ssb-select2-dropdown .select2-results__option--highlighted[aria-selected],
  .ssb-select2-dropdown .select2-results__option--highlighted[data-selected] {
    background-color: color-mix(in srgb, var(--smart-title-color, #2F3F8F) 8%, transparent);
  }
}

.ssb-select2-dropdown .select2-results__option[aria-selected="true"],
.ssb-select2-dropdown .select2-results__option[data-selected="true"] {
  background-color: transparent;
  color: inherit;
  font-weight: 600;
}

/* Check mark on the selected option, painted with the secondary colour. */
.ssb-select2-dropdown .select2-results__option[aria-selected="true"]::after,
.ssb-select2-dropdown .select2-results__option[data-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: var(--smart-secondary-color, #66B036);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ssb-select2-dropdown .select2-results__message {
  opacity: 0.7;
}

.ssb-select2-dropdown .select2-search--dropdown {
  padding: 4px 4px 8px;
}

.ssb-select2-dropdown .select2-search--dropdown .select2-search__field {
  padding: 8px 14px;
  border: 1px solid rgba(47, 63, 143, 0.2);
  border-radius: 999px;
  background-color: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}

.ssb-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--smart-title-color, #2F3F8F);
}

/* Compact variant: same box as the native select had. */
.ssb--compact .select2-container .ssb-select2 .select2-selection__rendered {
  min-width: 179px;
  height: 40px;
  line-height: 40px;
  padding-right: 22px;
}

/* Input */
.ssb-bar #smart-search-input,
.ssb-bar input.ssb-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  outline: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.ssb-bar #smart-search-input::placeholder {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  opacity: 0.85;
}

.ssb-bar #smart-search-input::-webkit-search-cancel-button,
.ssb-bar #smart-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Actions: mic + submit */
.ssb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ssb-bar #speech-to-text-button,
.ssb-bar .ssb-mic {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  transform: none;
  filter: none;
  flex-shrink: 0;
}

.ssb-bar #speech-to-text-button:hover {
  opacity: 0.8;
}

.ssb-bar #speech-to-text-button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.ssb-mic .ssb-icon {
  width: 13px;
  height: auto;
}

.ssb-submit,
.ssb-submit:hover,
.ssb-submit:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--smart-secondary-color, #66B036);
  box-shadow: none;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.2s ease;
}

.ssb-submit:hover {
  filter: brightness(1.06);
}

.ssb-submit .ssb-icon {
  width: 45%;
  height: auto;
}

.ssb-bar button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Labels must never inherit a host theme's button/span colour. */
.ssb .ssb-mode > span {
  color: inherit;
}

/* --- Templates 1 / 2: compact variant --------------------------------------
   Same bar, but: the mode toggle becomes an 80×40 icon-only switch sitting
   INSIDE the bar on the left, and the category scope and the input become
   separate dark pills. Ported from the microsite's Template 1/2 design. ---- */

.ssb--compact {
  position: relative;
  display: block;
}

.ssb--compact .ssb-bar,
.ssb--compact .search-bar-container.ssb-bar {
  gap: 8px;
  min-height: 60px;
  padding: 10px 16px 10px 10px;
}

.ssb--compact.ssb--has-toggle .ssb-bar {
  padding-left: 96px; /* room for the 80px switch + 8px inset */
}

.ssb--compact .ssb-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  isolation: isolate;
  gap: 0;
  width: 80px;
  height: 40px;
  padding: 0;
  border-radius: 20px;
  background-color: var(--smart-compact-pill-bg, rgba(2, 9, 42, 0.8));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* Sliding thumb */
.ssb--compact .ssb-toggle::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 5px;
  width: 32px;
  height: 32px;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ssb--compact .ssb-toggle:has(.ssb-mode--ai.is-active)::before {
  transform: translate3d(38px, 0, 0);
}

[dir="rtl"] .ssb--compact .ssb-toggle {
  left: auto;
  right: 8px;
}

[dir="rtl"] .ssb--compact .ssb-toggle:has(.ssb-mode--ai.is-active)::before {
  transform: translate3d(-38px, 0, 0);
}

.ssb--compact .ssb-mode,
.ssb--compact .ssb-mode:hover,
.ssb--compact .ssb-mode:focus,
.ssb--compact .ssb-mode.is-active,
.ssb--compact .ssb-mode.is-active:hover {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 20px;
  background: none;
  color: var(--smart-secondary-color, #66B036);
  opacity: 1;
  transition: none;
}

/* Icon-only in the compact switch. */
.ssb--compact .ssb-mode > span {
  display: none;
}

.ssb--compact .ssb-mode .ssb-icon {
  width: 16px;
  height: 16px;
  color: var(--smart-secondary-color, #66B036);
}

.ssb--compact .ssb-mode--ai .ssb-icon {
  width: 14px;
  height: 14px;
}

.ssb--compact .ssb-mode:focus-visible {
  outline: 2px solid var(--smart-searchbar-text-color, #ffffff);
  outline-offset: -2px;
}

/* Scope and input as separate dark pills. Colours come from the Appearance
   settings (--smart-compact-pill-bg / --smart-compact-input-bg); the
   fallbacks are the defaults. */
.ssb--compact .ssb-scope {
  gap: 0;
  height: 40px;
  padding: 0 16px 0 20px;
  border-radius: 20px;
  background-color: var(--smart-compact-pill-bg, rgba(2, 9, 42, 0.8));
}

.ssb--compact .ssb-bar #smart-search-category,
.ssb--compact .ssb-bar select.ssb-scope-select {
  min-width: 179px;
  height: 40px;
  line-height: 40px;
  padding-right: 22px;
}

.ssb--compact .ssb-caret {
  right: 16px;
  color: currentColor;
}

.ssb--compact .ssb-divider {
  display: none;
}

.ssb--compact .ssb-bar #smart-search-input,
.ssb--compact .ssb-bar input.ssb-input {
  height: 40px;
  line-height: 40px;
  padding: 0 40px;
  border-radius: 20px;
  background-color: var(--smart-compact-input-bg, rgba(2, 9, 42, 0.4));
}

.ssb--compact .ssb-actions {
  gap: 16px;
}

.ssb--compact .ssb-submit,
.ssb--compact .ssb-submit:hover,
.ssb--compact .ssb-submit:focus {
  width: 50px;
  height: 40px;
}

/* --- Template 3 (hero) ---------------------------------------------------- */

.hero-search-wrapper .hero-search-bar {
  position: relative;
  z-index: 999;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  background: none;
}

.hero-search-wrapper .ssb {
  width: 100%;
}

.hero-search-wrapper #site-search {
  width: 100%;
}

/* The hero container is dark: keep the idle chip readable on it. */
.hero-search-wrapper .ssb-toggle {
  background-color: rgba(255, 255, 255, 0.14);
}

.hero-search-wrapper .ssb-mode {
  color: var(--smart-searchbar-text-color, #ffffff);
}

.hero-search-wrapper .ssb-mode.is-active {
  color: var(--smart-title-contrast-color, #ffffff);
}

/* --- Template 1 / 2: open-search overlay ----------------------------------
   smart-search.js lifts the .ssb bar into .ssb-overlay__card while a search is
   open and renders the results inside the card, under the bar. -------------- */

.ssb-slot {
  width: 100%;
}

.ssb-overlay__glass {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: rgba(2, 9, 42, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ssb-overlay__card {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 1505px;
  max-height: calc(100dvh - 32px);
  padding: 16px 24px;
  border-radius: 20px;
  background-color: var(--smart-results-bg-color, #ffffff);
  box-shadow: 0 18px 40px rgba(2, 9, 42, 0.25);
  transform: translateX(-50%);
  overflow: hidden;
}

.ssb-overlay__card .ssb {
  flex-shrink: 0;
}

.ssb-overlay__results {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.ssb-overlay__results:empty {
  display: none;
}

/* The results panel becomes a normal-flow, scrolling block inside the card. */
.ssb-overlay__card .smart-search-results,
body.template1-active .ssb-overlay__card .smart-search-results {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  min-height: 0;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: auto;
}

.ssb-overlay__card .smart-search-results > .smart-search-inner {
  width: 100%;
  margin: 0;
  padding-top: 0 !important;
}

/* Column lists scroll on their own, like in the fixed dropdown. The JS
   (updateResultsPosition) measures the room from each list's top edge down to
   the card's bottom edge and sets it as --ssb-col-max on the list; without a
   cap the card (100dvh - 32px, overflow hidden) simply cut long lists off.
   !important is needed to beat the generic 350px cap in the base sheet. */
.ssb-overlay .ssb-overlay__card .smart-search-results .smart-search-inner .column ul {
  /* one class more than the responsive sheet's phone caps (.ss-tabbed .ss-col-active ul, 60vh), which load later */
  max-height: var(--ssb-col-max, none) !important;
  overflow-y: auto;
}

.ssb-overlay__card .smart-search-results > .close-btn {
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
  margin: 0 0 8px auto;
  padding: 0; /* themes' default button padding would inflate the × */
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 768px) {
  .ssb-bar,
  .search-bar-container.ssb-bar {
    gap: 8px;
    min-height: 46px;
    padding: 4px 4px 4px 14px;
    font-size: 14px;
  }

  .ssb-scope {
    gap: 10px;
  }

  /*
   * The select would otherwise take the width of its longest category
   * (often 250px+) and push the input off the row. Cap it; the caret stays.
   * min/max carry !important because smart-search-responsive.css sets them
   * with !important on .hero-search-wrapper (Template 3).
   */
  .ssb-bar #smart-search-category,
  .ssb-bar select.ssb-scope-select {
    width: 5.5em;
    min-width: 0 !important;
    max-width: 5.5em !important;
    padding-right: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ssb-caret {
    right: 18px;
    width: 10px;
  }

  /* selectWoo control: same cap as the native select. */
  .ssb-scope .select2-container {
    max-width: 5.5em;
  }

  .select2-container .ssb-select2 .select2-selection__rendered {
    padding-right: 20px;
  }

  /* Phones: the panel spans the screen with a 16px gutter instead of hanging
     off the pill's left edge and touching the viewport border. */
  .select2-container--open:has(> .ssb-select2-dropdown) {
    left: 16px !important;
    width: calc(100vw - 32px) !important;
  }

  .ssb-select2-dropdown.select2-dropdown {
    width: 100% !important;
    max-width: calc(100vw - 32px);
  }

  .ssb-bar #smart-search-input,
  .ssb-bar input.ssb-input {
    flex: 1 1 0;
    min-width: 0;
  }

  .ssb-actions {
    gap: 6px;
  }

  .ssb-bar #speech-to-text-button,
  .ssb-bar .ssb-mic {
    width: 24px;
    height: 24px;
  }

  .ssb-submit,
  .ssb-submit:hover,
  .ssb-submit:focus {
    width: 44px;
    height: 32px;
  }

  .ssb-toggle {
    gap: 8px;
    padding: 4px 10px 4px 4px;
  }

  .ssb-mode {
    font-size: 14px;
    white-space: nowrap;
  }

  .ssb-mode.is-active {
    padding: 0.6em 10px;
  }

  .ssb-overlay__card {
    top: 8px;
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    padding: 10px 12px;
    border-radius: 16px;
  }

  /*
   * Compact variant on phones (same structure as the Smart Search microsite):
   * the bar stays on ONE row; the 80×40 mode switch does not fit inside it,
   * so it sits above the bar as the same chip. Scope pill, input, mic and
   * submit share the row with small gaps.
   */
  .ssb--compact .ssb-bar,
  .ssb--compact .search-bar-container.ssb-bar {
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 46px;
    padding: 6px 6px 6px 6px;
  }

  .ssb--compact.ssb--has-toggle .ssb-bar {
    padding-left: 6px;
  }

  .ssb--compact .ssb-toggle {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 8px;
  }

  [dir="rtl"] .ssb--compact .ssb-toggle {
    right: auto;
  }

  .ssb--compact .ssb-scope {
    gap: 0;
    padding: 0 8px 0 12px;
  }

  .ssb--compact .ssb-bar #smart-search-category,
  .ssb--compact .ssb-bar select.ssb-scope-select {
    width: 5em;
    max-width: 5em !important;
    height: 34px;
    line-height: 34px;
  }

  .ssb--compact .ssb-scope .select2-container {
    max-width: 5em;
  }

  .ssb--compact .select2-container .ssb-select2 .select2-selection__rendered {
    min-width: 0;
    height: 34px;
    line-height: 34px;
    padding-right: 22px;
  }

  .ssb--compact .ssb-caret {
    right: 8px;
  }

  .ssb--compact .ssb-bar #smart-search-input,
  .ssb--compact .ssb-bar input.ssb-input {
    height: 34px;
    line-height: 34px;
    padding: 0 12px;
  }

  .ssb--compact .ssb-actions {
    gap: 6px;
  }

  .ssb--compact .ssb-submit,
  .ssb--compact .ssb-submit:hover,
  .ssb--compact .ssb-submit:focus {
    width: 40px;
    height: 32px;
  }
}

/* --- AI cue inside the results (1.5.0) --------------------------------------
   Shown when the AI chip is selected but the visible results are the instant
   keyword pass: the chip's own label + ⏎ + the arrow, as a button that runs
   the AI. After an AI pass it becomes "label ✓". No text of its own, so it
   reads the same in every language. */

.ssb-ai-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background-color: rgba(47, 63, 143, 0.08);
  color: var(--smart-text-color, #15236B);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: start;
}

@supports (background-color: color-mix(in srgb, red 15%, transparent)) {
  .ssb-ai-hint {
    background-color: color-mix(in srgb, var(--smart-title-color, #2F3F8F) 8%, transparent);
  }
}

button.ssb-ai-hint {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button.ssb-ai-hint:hover {
  background-color: rgba(47, 63, 143, 0.14);
}

button.ssb-ai-hint:focus-visible {
  outline: 2px solid var(--smart-title-color, #2F3F8F);
  outline-offset: 2px;
}

.ssb-ai-hint .ssb-icon--sparkle {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--smart-secondary-color, #66B036);
}

.ssb-ai-hint__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.ssb-ai-hint__keys {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.ssb-ai-hint__keys .ssb-icon--arrow {
  width: 30px;
  height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background-color: var(--smart-secondary-color, #66B036);
  color: #ffffff;
}

.ssb-ai-hint--done {
  padding: 4px 2px 0;
  background-color: transparent;
}

.ssb-ai-hint--done .ssb-ai-hint__label {
  flex: 0 0 auto;
}

.ssb-ai-hint--done .ssb-icon--check {
  width: 16px;
  height: 16px;
  color: var(--smart-secondary-color, #66B036);
}

/* Template 3 hero: the inner is a wrapping flex row of fixed-width columns;
   the cue takes its own full-width line above them. */
.hero-search-wrapper .smart-search-inner .ssb-ai-hint {
  flex: 0 0 100%;
  width: 100%;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .ssb-ai-hint,
  .hero-search-wrapper .smart-search-inner .ssb-ai-hint {
    flex-basis: auto;
    width: auto;
    margin: 8px 16px 4px;
  }
}