/* Shared search controls for flights, hotels and airport trains. */
.vf-product .vf-search-surface {
  --query-ink:#183653;
  --query-muted:#506981;
  --query-focus:#446e9d;
  --query-height:60px;
  --query-gap:8px;
  border:0;
}
.vf-product .vf-search-surface .vf-query-top {
  box-sizing:border-box; height:36px; min-height:36px; display:flex; align-items:center; flex-wrap:nowrap;
  margin:0 0 8px; padding:0; color:var(--query-muted);
}
.vf-product .vf-search-surface :is(.vf-query-kicker,.shell-label) {
  font:750 13px/1.25 var(--vf-font); color:var(--query-muted);
}
.vf-product .vf-search-surface :is(#search,.vf-query-grid) {
  display:grid; align-items:stretch;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1.05fr) minmax(0,.69fr) minmax(128px,.53fr);
  gap:var(--query-gap);
}
.vf-product .vf-search-surface :is(#search,.vf-query-grid) > * { grid-column:auto; grid-row:auto; min-width:0; }
.vf-product .vf-search-surface :is(.vf-query-route,.vf-query-dates) {
  position:relative; display:grid; grid-template-columns:none; grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr); gap:var(--query-gap); min-width:0;
}
.vf-product .vf-search-surface .vf-query-field {
  position:relative; box-sizing:border-box; display:flex; flex-direction:column; align-items:stretch;
  justify-content:center; width:100%; min-width:0; height:var(--query-height); min-height:var(--query-height);
  text-align:left; gap:3px; padding:7px 12px;
  border:1px solid var(--vf-line); border-radius:10px; background:var(--vf-field);
  color:var(--query-ink); font-family:var(--vf-font);
}
.vf-product .vf-search-surface .vf-query-field:hover { border-color:#aebfd4; }
.vf-product .vf-search-surface .vf-query-field:focus-within {
  border-color:var(--query-focus); background:#fff; box-shadow:0 0 0 1px var(--query-focus);
}
.vf-product .vf-query-field > .vf-query-label {
  display:block; margin:0; font:700 12px/1.15 var(--vf-font); color:var(--query-muted);
}
.vf-product .vf-query-field > .vf-query-value {
  display:block; box-sizing:border-box; min-width:0; width:100%; max-width:100%; margin:0;
  min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  text-align:start; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  font:800 16px/1.3 var(--vf-font); color:var(--query-ink);
}
.vf-product .vf-query-field > .vf-query-value[hidden] { display:none; }
.vf-product .vf-query-field > .vf-query-value::placeholder { color:var(--query-muted); font-weight:650; }
.vf-product .vf-query-field > .vf-query-value:focus { outline:none; }
.vf-product .vf-query-field > input[type=date] {
  appearance:none; -webkit-appearance:none; min-inline-size:0; cursor:pointer;
}
.vf-product .vf-query-field > input[type=date]::-webkit-date-and-time-value { text-align:start; margin:0; }
.vf-product .vf-query-field > input[type=date]::-webkit-datetime-edit { padding:0; }
.vf-product .vf-query-field > input[type=date]::-webkit-calendar-picker-indicator { padding:0; margin:0; }
.vf-product .vf-query-field > .vf-choice-trigger {
  position:relative; padding-inline-end:17px; cursor:pointer;
}
.vf-product .vf-query-field > .vf-choice-trigger::after {
  content:""; position:absolute; right:2px; top:40%; width:6px; height:6px;
  border-right:1.5px solid var(--query-muted); border-bottom:1.5px solid var(--query-muted);
  transform:translateY(-50%) rotate(45deg);
}
.vf-product .vf-query-has-swap .swap {
  left:50%; right:auto; top:50%; width:26px; height:26px; transform:translate(-50%,-50%);
}
.vf-product .vf-query-field.city-field:has(.code:not(:empty)) { padding-right:34px; }
.vf-product .vf-query-field.city-field .code {
  position:absolute; top:auto; bottom:11px; right:9px; color:var(--query-muted);
  font:750 11px/1.3 var(--vf-font); pointer-events:none;
}
.vf-product .vf-query-dates .return-date-wrap { min-width:0; width:100%; }
.vf-product .vf-query-dates .return-date-wrap:has(.clear-return-date:not([hidden])) #inbound { padding-right:34px; }
.vf-product .vf-search-surface .vf-query-submit {
  box-sizing:border-box; display:block; width:100%; height:var(--query-height); min-height:var(--query-height);
  margin:0; padding:0 8px; border:0; border-radius:10px; background:var(--vf-action);
  color:#fff; font:800 15px/1.2 var(--vf-font); text-align:center; cursor:pointer;
}
.vf-product .vf-search-surface .vf-query-submit:hover { background:#a82522; }
.vf-product .vf-search-surface .vf-query-submit:focus-visible { outline:2px solid var(--query-focus); outline-offset:2px; }
.vf-product .vf-search-surface .vf-query-footer {
  min-height:44px; display:flex; flex-wrap:wrap; align-content:center; align-items:center;
  justify-content:space-between; column-gap:12px; row-gap:2px; margin-top:6px;
}
.vf-product .vf-query-footer .search-bottom { min-height:0; margin:0; padding:0; }
.vf-product .vf-query-footer :is(.search-note,#form-error,.vf-demo-search-note) { margin:0; }
.vf-product .vf-query-footer .search-note { font-size:13px; }
.vf-product .vf-query-footer #form-error:empty { display:none; }

.vf-product .vf-query-menu {
  box-sizing:border-box; list-style:none; margin:0; padding:5px;
  color:var(--query-ink); background:#fff; border:1px solid var(--vf-line); border-radius:12px;
  box-shadow:0 12px 30px #102b472b; overscroll-behavior:contain;
}
.vf-product .vf-query-menu[hidden] { display:none; }
.vf-product #city-options.vf-query-menu { width:320px; max-width:calc(100vw - 24px); }
.vf-product .vf-choice-menu {
  position:absolute; inset-inline-start:-1px; top:calc(100% + 8px); width:max(100%,196px);
  max-width:calc(100vw - 24px); z-index:45;
}
.vf-product .vf-choice-menu[data-search] { width:320px; }
.vf-product .vf-choice-menu ul { list-style:none; padding:0; margin:0; max-height:246px; overflow:auto; }
.vf-product .vf-choice-menu .vf-choice-search {
  display:block; box-sizing:border-box; width:100%; min-height:42px; margin:0 0 4px;
  padding:8px 9px; border:1px solid var(--vf-line); border-radius:7px;
  color:var(--query-ink); background:var(--vf-field); font:700 16px/1.2 var(--vf-font);
}
.vf-product .vf-choice-menu .vf-choice-empty { margin:0; padding:10px 9px; font-size:14px; }
.vf-product .vf-query-menu .vf-choice-option,
.vf-product #city-options.vf-query-menu [role=option] button {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1px 8px;
  width:100%; box-sizing:border-box; min-height:44px; padding:8px 10px; border:0; border-radius:7px;
  text-align:left; color:var(--query-ink); font:750 15px/1.25 var(--vf-font); cursor:pointer;
}
.vf-product .vf-query-menu .vf-choice-option[hidden] { display:none; }
.vf-product .vf-query-menu .vf-choice-option b { color:var(--query-muted); font:750 11px/1.3 var(--vf-font); }
.vf-product .vf-query-menu :is(.vf-choice-option:hover,.vf-choice-option:focus,.vf-choice-option[aria-selected=true]),
.vf-product #city-options.vf-query-menu [role=option] button:is(:hover,:focus) { background:var(--vf-result-selected); }
.vf-product .vf-query-menu .vf-choice-option:focus-visible { outline:2px solid var(--query-focus); outline-offset:-2px; }

@media (max-width:900px) {
  .vf-product .vf-search-surface :is(#search,.vf-query-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vf-product .vf-search-surface :is(#search,.vf-query-grid) > :is(.vf-query-route,.vf-query-dates) { grid-column:1/-1; }
}
@media (max-width:650px) {
  .vf-product .vf-search-surface .vf-query-field { padding-inline:9px; }
  .vf-product .vf-query-field.city-field:has(.code:not(:empty)) { padding-right:9px; }
  .vf-product .vf-query-field.city-field .code { top:9px; bottom:auto; }
  .vf-product .vf-query-field.city-field:first-child { padding-right:13px; }
  .vf-product .vf-query-field.city-field:last-child { padding-left:12px; }
  .vf-product #city-options.vf-query-menu,
  .vf-product .vf-choice-menu,
  .vf-product .vf-choice-menu[data-search] {
    position:fixed; inset-inline:12px; width:auto; max-width:none; z-index:45;
  }
  .vf-product .vf-choice-menu {
    top:var(--query-menu-top); max-height:var(--query-menu-height); overflow:auto;
  }
  .vf-product .vf-query-field > input.vf-query-value::placeholder { font-size:14px; }
  .vf-product .vf-search-surface .vf-query-footer { justify-content:flex-start; }
}

/* Keep the frame aligned when only flights have an assistant and test shortcuts. */
.vf-product .vf-search-surface .vf-search-tabs { margin-bottom:12px; }
.vf-product .vf-search-surface .vf-search-tabs .vf-search-tab {
  box-sizing:border-box; height:44px; min-height:44px;
}
.vf-product .vf-product-intro {
  box-sizing:border-box; min-height:112px; height:112px; align-content:center;
}
.vf-product .vf-product-intro p { margin:0; }
.vf-product .vf-query-support {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:2px 12px; margin-top:8px;
}
.vf-product .vf-query-support .va-anchor { margin:0; padding:0; }
.vf-product .vf-query-support .vf-demo-search-note { color:#edf5ff; }
.vf-product .vf-query-support #vf-example-flight { color:#fff; }
.vf-product .vf-query-dates .return-date-wrap:has(.clear-return-date[hidden]) #inbound { padding-inline-end:9px; }
.vf-product .vf-query-field > .vf-query-label {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:650px) {
  .vf-product .vf-product-intro { min-height:110px; height:110px; }
}
.vf-product #home .vf-query-top,
.vf-product #home .vf-query-footer .search-bottom { padding:0; }
.vf-product #home .vf-query-support .va-anchor > .va-entry {
  padding:7px 12px; background:#edf3fa; border-color:#cddbeb; border-radius:10px;
}
.vf-product #home .vf-query-support .va-anchor > .va-entry:hover { background:#e2ebf7; }