/* Hotel search layout - sidebar, header, grid */

.hotel-search {
  display: flex;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Sidebar with filters */

.hotel-search__sidebar {
  width: 260px;
  flex-shrink: 0;
}

.filter-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.filter-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-sidebar__heading {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-sidebar__amenity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
  cursor: pointer;
}

.filter-sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

/* Content area */

.hotel-search__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Results header */

.hotel-search__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.hotel-search__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.hotel-search__date-range {
  white-space: nowrap;
}

.hotel-search__toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  /* The header is space-between, so the toolbar must be allowed to shrink
     below its content width - without min-width:0 the flex items bottom out at
     min-content and the Search button overflows the viewport edge. */
  min-width: 0;
}

.hotel-search__toolbar-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  min-width: 0;
  flex: 1 1 auto;
}

.hotel-search__toolbar-form wa-select[name="sort"] {
  min-width: 140px;
  flex: 0 0 auto;
}

/* Name suggestions.

   The wrapper is the positioning context; the list hangs under the field rather
   than pushing the toolbar down, because a toolbar that grows on every keystroke
   moves the Search button out from under the pointer.

   Colours come from --wa-* tokens. A brand hex here is a bug and there is a test
   asserting it. */

.hotel-search__suggest {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The only flexible piece of the toolbar form: it absorbs whatever width the
     sort select and Search button leave, instead of the row overflowing. */
  flex: 1 1 auto;
  min-width: 0;
}

.hotel-search__suggest wa-input {
  width: 100%;
}

.hotel-search__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-fill-normal);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--wa-shadow-m);
}

/* [hidden] loses to `display: flex`/`block` on specificity ties, and the
   controller toggles the property rather than a class. Stated explicitly so an
   empty list cannot render as an empty box. */
.hotel-search__suggestions[hidden] {
  display: none;
}

.hotel-search__suggestion {
  padding: 0.5rem 0.625rem;
  border-radius: var(--wa-border-radius-s);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
}

.hotel-search__suggestion:hover,
.hotel-search__suggestion:focus {
  background: var(--wa-color-neutral-fill-quiet);
  outline: none;
}

/* Responsive grid - 3-up desktop, 2-up tablet, 1-up mobile */

.hotel-search__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .hotel-search__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hotel-search__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet: collapse sidebar into a top filter bar */

@media (max-width: 1023px) {
  .hotel-search {
    flex-direction: column;
  }

  .hotel-search__sidebar {
    width: 100%;
  }
}

/* Narrow desktop / tablet: keep the toolbar from overflowing the content area
   while the sidebar is still visible. With the 260px sidebar beside it, the
   header does not fit the title plus the full toolbar until the ~1400px
   container cap is reached - the collision band runs 640–1400px, not just to
   1200px. Above the cap the search input shrinks instead (see min-width:0 on
   .hotel-search__suggest). */

@media (max-width: 1400px) and (min-width: 640px) {
  .hotel-search__header {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hotel-search__toolbar {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Mobile: simplify header */

@media (max-width: 639px) {
  .hotel-search {
    padding: 1rem;
  }

  .hotel-search__header {
    flex-direction: column;
    align-items: stretch;
  }

  /* The toolbar row (view toggle + Filters + search form) is wider than a 390px
     viewport laid side by side. Let the form drop to its own full-width row. */
  .hotel-search__toolbar {
    flex-wrap: wrap;
  }

  .hotel-search__toolbar-form {
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 100%;
  }
}

/* View toggle */

.hotel-search__view-toggle-group {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--wa-color-surface-raised);
  border-radius: var(--wa-border-radius-m);
}

.hotel-search__view-toggle {
  padding: 0.5rem 0.75rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
  text-decoration: none;
  white-space: nowrap;
}

.hotel-search__view-toggle--active {
  background: var(--wa-color-surface-default);
  font-weight: 600;
}

.hotel-search__mobile-filter-button {
  display: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--wa-border-radius-s);
  border: 1px solid var(--wa-color-neutral-fill-normal);
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
  font-size: 0.875rem;
  cursor: pointer;
}

.hotel-search__filter-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0;
  background: var(--wa-color-surface-default);
}

/* HMS-117 - sponsored listings are separated above organic results. */
.hotel-search__sponsored {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hotel-search__sponsored-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

.hotel-search__recommended {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-search__recommended-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

.hotel-search__recommended-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.hotel-search__filter-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.hotel-search__filter-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--wa-color-neutral-fill-quiet);
}

.hotel-search__filter-dialog-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.hotel-search__filter-dialog-close {
  padding: 0.375rem 0.75rem;
  border: none;
  background: transparent;
  /* fill-normal resolves to brand-90 (#d9e4eb): ~1.3:1 on white — see
     portal_header.css. Text links use --wa-color-text-link. */
  color: var(--wa-color-text-link);
  font-size: 0.875rem;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .hotel-search__sidebar--desktop {
    display: none;
  }

  .hotel-search__mobile-filter-button {
    display: inline-flex;
  }
}

/* Map view */

.hotel-search__map {
  min-height: 500px;
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
}

.hotel-map-popup {
  min-width: 180px;
}

.hotel-map-popup__image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--wa-border-radius-s);
  margin-bottom: 0.5rem;
}

.hotel-map-popup__name {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.hotel-map-popup__rate {
  margin: 0 0 0.5rem;
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

.hotel-map-popup__link {
  /* fill-normal resolves to brand-90 (#d9e4eb): ~1.3:1 on the white popup. */
  color: var(--wa-color-text-link);
  text-decoration: none;
  font-weight: 600;
}

.hotel-search__map-error {
  padding: 2rem;
  text-align: center;
  color: var(--wa-color-text-quiet);
}

/* Empty state */

.hotel-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 2rem;
  text-align: center;
}

.hotel-search__empty h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-search__empty p {
  margin: 0;
  color: var(--wa-color-text-quiet);
  max-width: 320px;
}

/* Was three inline style attributes in the markup. Moved here so style-src-attr
   can stay strict in the CSP: the only inline styles left on the page are the
   <style> blocks Web Awesome injects, which we cannot remove and do not control. */
.filter-sidebar__actions wa-button {
  width: 100%;
}

.hotel-search__empty > i {
  font-size: 3rem;
  color: var(--wa-color-text-quiet);
}