/* Destination search box + suggestion dropdown (home hero, destinations,
   search results). */

.dest-search {
  position: relative;
  max-width: 100%;
}

/* The box: picked destinations (pills) and the text input share one row that
   wraps, so the border lives on the field, not on the input. */
.dest-search__field {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.dest-search__field:focus-within {
  outline: 2px solid var(--color-action);
  outline-offset: -1px;
}

.dest-search__input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 6px;
  text-overflow: ellipsis;
  border: none;
  background: transparent;
  color: var(--ink-900);
  font-size: var(--text-body);
}

.dest-search__input::placeholder {
  color: var(--color-text-soft);
}

.dest-search__input:focus {
  outline: none;
}

.dest-search__pills {
  display: contents;
}

.dest-search__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text);
  white-space: nowrap;
}

.dest-search__pill .fi {
  width: 20px;
  height: 15px;
  flex: none;
}

.dest-search__pill button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
}

.dest-search__pill button:hover,
.dest-search__pill button:focus {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ONE search control (owner, 2026-10-15/16), the same on every page: the
   Search button at the end of the box, so the box shows no icon of its own.
   While the box is
   in use (focused, or destinations picked) the label gives way to the search
   icon: both share one cell and cross-fade while the button narrows to a
   circle (width: auto animates where interpolate-size is supported; elsewhere
   it switches at once). It follows the input, so when picks wrap the box onto
   several lines it sits bottom right, beside the input. */
.dest-search__submit {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  justify-content: center;
  overflow: hidden;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--so-grad-btn);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  interpolate-size: allow-keywords;
  transition: width 0.25s ease, padding 0.25s ease;
}

.dest-search__submit:hover,
.dest-search__submit:focus {
  color: #fff;
  text-decoration: none;
}

.dest-search__submit-label,
.dest-search__submit-icon {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.dest-search__submit-icon {
  opacity: 0;
  font-size: var(--text-lg);
}

.dest-search:is(:focus-within, .has-picks) .dest-search__submit {
  width: 40px;
  padding: 0;
}

.dest-search:is(:focus-within, .has-picks) .dest-search__submit-label {
  opacity: 0;
}

.dest-search:is(:focus-within, .has-picks) .dest-search__submit-icon {
  opacity: 1;
}

/* Phones: the button is always the round search icon, leaving the input its
   width; once picked, the pills fill their own lines and the input starts a
   new one beside the button (owner, 2026-10-16: as in the top-up picker). */
@media (max-width: 640px) {
  .dest-search .dest-search__submit {
    width: 40px;
    padding: 0;
  }

  .dest-search.has-picks .dest-search__pills::after {
    content: "";
    flex-basis: 100%;
  }

  .dest-search__submit-label {
    opacity: 0;
  }

  .dest-search__submit-icon {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dest-search__submit,
  .dest-search__submit-label,
  .dest-search__submit-icon {
    transition: none;
  }
}

/* Suggestions dropdown. A responsive grid (multiple columns on a wide box like
   the home hero, a single column when narrow) with compact rows, so the panel
   uses its width instead of a tall list of short "flag + name" rows with dead
   space to the right. Shared by every search bar (home hero + destinations). */
.dest-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  align-content: start;
}

/* `display: grid` above overrides the `hidden` attribute's UA `display: none`,
   so re-assert it — otherwise the empty results box shows before any typing. */
.dest-search__results[hidden] {
  display: none;
}

.dest-search__results a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 10px;
  border-radius: var(--radius-btn);
  color: var(--color-text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dest-search__results a:hover,
.dest-search__results a:focus {
  background: var(--color-bg-alt);
  text-decoration: none;
}

.dest-search__results .fi {
  width: 22px;
  height: 16px;
  flex: none;
}

.dest-search__empty {
  grid-column: 1 / -1;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-soft);
}