/* DOCHIFOOD PUBLIC V5.2.4 — SEARCH POPUP + MOVING ICON
   Collapsed: search icon sits at the right edge.
   Expanded: the icon slides left together with the opening search field. */

.v522-search-form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Put icon before the field visually. Because the dock is fixed to the right,
   widening the field makes the whole form grow left and carries the icon with it. */
.v522-search-toggle {
  order: 0;
  transition:
    transform .24s cubic-bezier(.22,.8,.2,1),
    border-radius .2s ease,
    background-color .2s ease;
  will-change: transform;
}

.v522-search-field {
  order: 1;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-8px);
  transition:
    width .26s cubic-bezier(.22,.8,.2,1),
    opacity .16s ease,
    transform .26s cubic-bezier(.22,.8,.2,1);
  will-change: width, opacity, transform;
}

.v522-search-dock.is-open .v522-search-field {
  width: min(280px, calc(100vw - 84px)) !important;
  opacity: 1;
  transform: translateX(0);
}

/* Keep the whole control inside the screen on narrow iPhones. */
@media (max-width: 420px) {
  .v522-search-dock.is-open .v522-search-field {
    width: min(260px, calc(100vw - 84px)) !important;
  }
}

@media (min-width: 900px) {
  .v522-search-dock.is-open .v522-search-field {
    width: 340px !important;
  }
}