/* Compact homepage hand-off widget. Uses the same design tokens as the hostel explorer. */
.hi-home-location-search,
.hi-home-location-search * { box-sizing: border-box; }

.hi-home-location-search {
  --hi-home-surface: var(--_user-mode---light--simp-bg, #fff);
  --hi-home-ink: var(--_user-mode---light--text, #1f2430);
  --hi-home-muted: var(--_user-mode---light--alt-text, #665f57);
  --hi-home-line: var(--_user-mode---light--border, #eae4d8);
  --hi-home-brand: var(--_user-mode---primary--brand-600, #e87722);
  --hi-home-brand-hover: var(--_user-mode---primary--brand-400, #ff9b3d);
  --hi-home-brand-soft: var(--_user-mode---primary--brand-100, color-mix(in srgb, var(--hi-home-brand), white 80%));
  --hi-home-accent: var(--_user-mode---accent--accent-500, #008a73);
  --hi-home-field: var(--_user-mode---light--bg, #fff8f2);
  --hi-home-radius: var(--radius--main, 1rem);
  --hi-home-radius-small: var(--radius--small, .5rem);
  --_text-style---font-family: var(--_typography---font--primary-family, Inter, system-ui, sans-serif);
  --_text-style---font-size: var(--_typography---font-size--body, 1rem);
  --_text-style---line-height: var(--_typography---line-height--body, 1.5);
  --_text-style---font-weight: var(--_typography---font--primary-regular, 400);
  --_text-style---letter-spacing: var(--_typography---letter-spacing--normal, 0);
  color: var(--hi-home-ink);
  font-family: var(--_text-style---font-family);
  font-size: var(--_text-style---font-size);
  font-weight: var(--_text-style---font-weight);
  letter-spacing: var(--_text-style---letter-spacing);
  line-height: var(--_text-style---line-height);
  container-name: hi-home-search;
  container-type: inline-size;
}

.hi-home-location-search__form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; max-width: 48rem; margin-inline: auto; }
.hi-home-location-search__search-row { min-width: 0; }
.hi-home-location-search__field { align-items: center; background: var(--hi-home-surface); border: 1px solid var(--hi-home-line); border-radius: var(--radius--round, 100vw); display: grid; gap: .75rem; grid-template-columns: 1.25rem auto minmax(0, 1fr); min-height: 3.5rem; padding: 0 1.15rem; position: relative; }
.hi-home-location-search__input { grid-column: 2 / 4; width: 100%; min-height: 3.25rem; min-width: 0; border: 0; border-radius: 0; background: transparent; color: var(--hi-home-ink); font: inherit; outline: 0; padding: 0; }
.hi-home-location-search__search-icon { border: 2px solid var(--hi-home-accent); border-radius: 50%; height: 17px; pointer-events: none; position: relative; width: 17px; z-index: 1; }
.hi-home-location-search__search-icon::after { background: var(--hi-home-accent); content: ''; height: 8px; left: 12px; position: absolute; top: 12px; transform: rotate(-45deg); width: 2px; }
.hi-home-location-search__sr { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; }
.hi-home-location-search__field:focus-within { outline: 3px solid color-mix(in srgb, var(--hi-home-brand) 35%, transparent); outline-offset: 3px; }
.hi-home-location-search__selected { display: flex; min-width: 0; }
.hi-home-location-search__selected:empty { display: none; }
.hi-home-location-search__selected-chip {
  --_text-style---font-size: var(--_typography---font-size--tag, .75rem);
  --_text-style---line-height: var(--_typography---line-height--medium, 1.2);
  --_text-style---font-weight: var(--_typography---font--primary-bold, 700);
  align-items: center;
  background: var(--hi-home-brand-soft);
  border: 1px solid color-mix(in srgb, var(--hi-home-brand) 45%, var(--hi-home-line));
  border-radius: var(--radius--round, 100vw);
  color: var(--hi-home-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 1 auto;
  font-family: var(--_text-style---font-family);
  font-size: var(--_text-style---font-size);
  font-weight: var(--_text-style---font-weight);
  gap: .35rem;
  line-height: var(--_text-style---line-height);
  max-width: 15rem;
  min-height: 1.875rem;
  padding: 0 .625rem;
}
.hi-home-location-search__selected-chip span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-home-location-search__selected-chip:focus-visible { outline: 2px solid var(--hi-home-accent); outline-offset: 2px; }
.hi-home-location-search.has-selection .hi-home-location-search__input { grid-column: 3; }
.hi-home-location-search.has-selection .hi-home-location-search__input::placeholder { color: transparent; }
.hi-home-location-search__choices { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.hi-home-location-search__choice { flex: 0 0 auto; }
.hi-home-location-search__choice .button_standard_element { min-height: 2.75rem; }
.hi-home-location-search__close { display: none; }
.hi-home-location-search__search-prompt { display: none; }
.hi-home-location-search.hi-home-location-search__overlay-portal { background: transparent; height: 0; inset: 0 auto auto 0; margin: 0; min-height: 0; overflow: visible; pointer-events: none; position: fixed; width: 0; z-index: 0; }
.hi-home-location-search__suggestions { position: fixed; z-index: 2147483000; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--hi-home-line, #eae4d8); border-radius: var(--radius--small, .5rem); background: var(--hi-home-surface, #fff); box-shadow: 0 .8rem 2rem rgba(31,36,48,.15); color: var(--hi-home-ink, #1f2430); font-family: var(--_typography---font--primary-family, Inter, system-ui, sans-serif); -webkit-overflow-scrolling: touch; }
.hi-home-location-search__suggestion { display: grid; grid-template-columns: 1.7rem 1fr; gap: .65rem; width: 100%; border: 0; border-bottom: 1px solid var(--hi-home-line); background: transparent; color: inherit; cursor: pointer; font: inherit; padding: .7rem .85rem; text-align: left; }
.hi-home-location-search__suggestion:last-child { border-bottom: 0; }
.hi-home-location-search__suggestion:hover { background: color-mix(in srgb, var(--hi-home-brand-soft) 42%, transparent); }
.hi-home-location-search__suggestion[aria-selected="true"] { background: color-mix(in srgb, var(--hi-home-brand-soft) 42%, transparent); outline: none; }
.hi-home-location-search__pin { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--hi-home-accent) 13%, white); color: var(--hi-home-accent); font-size: .7rem; font-weight: 800; }
.hi-home-location-search__suggestion small { display: block; margin-top: .1rem; color: var(--hi-home-muted); }
.hi-home-location-search__suggestion em { color: var(--hi-home-muted); display: none; font-size: .75rem; font-style: normal; }
.hi-home-location-search__suggestion-group h3 { display: none; }
.hi-home-location-search__empty { padding: 1rem 1.15rem; }
.hi-home-location-search__empty strong,
.hi-home-location-search__empty span { display: block; }
.hi-home-location-search__empty span { margin-top: .2rem; color: var(--hi-home-muted, #665f57); font-size: .875rem; }
.hi-home-location-search [hidden],
.hi-home-location-search__suggestions[hidden] { display: none !important; }

@container hi-home-search (max-width: 36rem) {
  .hi-home-location-search__form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .hi-home-location-search__form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .hi-home-location-search__overlay-portal.is-search-open {
    pointer-events: auto;
    z-index: 2147483647;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__form {
    background: var(--hi-home-surface, #fff);
    color: var(--hi-home-ink, #1f2430);
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100vh;
    inset: 0;
    margin: 0;
    max-width: none;
    min-height: 100lvh;
    padding: max(.5rem, env(safe-area-inset-top, 0px)) var(--site--margin, 1rem) max(.5rem, env(safe-area-inset-bottom, 0px));
    position: fixed;
    transform: none;
    width: 100vw;
    z-index: 2147483647;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__search-row {
    align-items: center;
    border-bottom: 1px solid var(--hi-home-line, #eae4d8);
    display: grid;
    flex: 0 0 auto;
    gap: .375rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: .25rem 0 .75rem;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.5rem;
    height: 2.75rem;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
    position: relative;
    touch-action: manipulation;
    width: 2.75rem;
    z-index: 2;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__close:focus-visible { outline: 2px solid var(--hi-home-accent, #008a73); outline-offset: 2px; }
  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__field {
    align-items: center;
    background: var(--hi-home-field, #fff8f2);
    border: 1px solid var(--hi-home-line, #eae4d8);
    border-radius: var(--radius--round, 100vw);
    display: grid;
    gap: .5rem;
    grid-template-columns: 1rem auto minmax(0, 1fr);
    min-height: 2.75rem;
    padding: 0 .875rem;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__search-icon {
    grid-column: 1;
    left: auto;
    position: relative;
    top: auto;
    transform: none;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__input {
    --_text-style---font-size: var(--_typography---font-size--body-sm, .875rem);
    --_text-style---line-height: var(--_typography---line-height--medium, 1.35);
    --_text-style---font-weight: var(--_typography---font--primary-regular, 400);
    --_text-style---letter-spacing: var(--_typography---letter-spacing--normal, 0);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--_text-style---font-family);
    font-size: var(--_text-style---font-size);
    font-weight: var(--_text-style---font-weight);
    grid-column: 2 / 4;
    letter-spacing: var(--_text-style---letter-spacing);
    line-height: var(--_text-style---line-height);
    min-height: 2.625rem;
    min-width: 0;
    outline: 0;
    padding: 0;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__selected {
    grid-column: 2;
  }

  .hi-home-location-search__overlay-portal.is-search-open.has-selection .hi-home-location-search__input {
    grid-column: 3;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__selected-chip {
    max-width: min(13rem, 48vw);
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestions {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 0 1 auto;
    height: calc(var(--hi-home-mobile-viewport-height, 100dvh) - 4.75rem);
    margin: 0;
    max-height: calc(var(--hi-home-mobile-viewport-height, 100dvh) - 4.75rem);
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 0;
    position: static;
    width: 100%;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestion-group h3 {
    --_text-style---font-size: var(--_typography---font-size--caption, .75rem);
    --_text-style---line-height: var(--_typography---line-height--large, 1.45);
    --_text-style---font-weight: var(--_typography---font--primary-bold, 700);
    --_text-style---letter-spacing: var(--_typography---letter-spacing--eyebrow, .08em);
    color: var(--hi-home-muted);
    display: block;
    font-family: var(--_text-style---font-family);
    font-size: var(--_text-style---font-size);
    font-weight: var(--_text-style---font-weight);
    letter-spacing: var(--_text-style---letter-spacing);
    line-height: var(--_text-style---line-height);
    margin: .25rem .625rem .5rem;
    text-transform: uppercase;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestion {
    align-items: center;
    border: 0;
    border-radius: var(--hi-home-radius, 1rem);
    gap: .75rem;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: .625rem;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__pin {
    --_text-style---font-size: var(--_typography---font-size--tag, .75rem);
    --_text-style---line-height: var(--_typography---line-height--medium, 1.2);
    --_text-style---font-weight: var(--_typography---font--primary-bold, 700);
    --_text-style---letter-spacing: var(--_typography---letter-spacing--tag, .04em);
    background: color-mix(in srgb, var(--hi-home-accent) 11%, var(--hi-home-surface));
    border: 2px solid var(--hi-home-accent);
    border-radius: var(--hi-home-radius-small, .5rem);
    font-family: var(--_text-style---font-family);
    font-size: var(--_text-style---font-size);
    font-weight: var(--_text-style---font-weight);
    height: 44px;
    letter-spacing: var(--_text-style---letter-spacing);
    line-height: var(--_text-style---line-height);
    width: 44px;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestion strong {
    --_text-style---font-size: var(--_typography---font-size--label, .875rem);
    --_text-style---line-height: var(--_typography---line-height--ui, 1.25);
    --_text-style---font-weight: var(--_typography---font--primary-medium, 500);
    --_text-style---letter-spacing: var(--_typography---letter-spacing--label, 0);
    display: block;
    font-family: var(--_text-style---font-family);
    font-size: var(--_text-style---font-size);
    font-weight: var(--_text-style---font-weight);
    letter-spacing: var(--_text-style---letter-spacing);
    line-height: var(--_text-style---line-height);
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestion small,
  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestion em {
    --_text-style---font-size: var(--_typography---font-size--meta, .75rem);
    --_text-style---line-height: var(--_typography---line-height--meta, 1.25);
    --_text-style---font-weight: var(--_typography---font--primary-regular, 400);
    --_text-style---letter-spacing: var(--_typography---letter-spacing--normal, 0);
    font-family: var(--_text-style---font-family);
    font-size: var(--_text-style---font-size);
    font-weight: var(--_text-style---font-weight);
    letter-spacing: var(--_text-style---letter-spacing);
    line-height: var(--_text-style---line-height);
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestion em { display: block; }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__search-prompt {
    color: var(--hi-home-muted);
    display: block;
    margin: 1.25rem .625rem;
  }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__suggestions:not([hidden]) + .hi-home-location-search__search-prompt { display: none; }

  .hi-home-location-search__overlay-portal.is-search-open .hi-home-location-search__choices {
    display: none;
  }

  html.hi-home-location-search-open,
  body.hi-home-location-search-open { overflow: hidden; overscroll-behavior: none; }
}