/* HMS-1115 — the shared stay-range picker: two field buttons that open one
   two-month wa-date-picker inside a wa-popup. The buttons are styled like the
   wa-* form controls they replaced (same border/radius/height tokens). */

.stay-range__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}

.stay-range__field {
  display: flex;
  align-items: center;
  /* A global button rule sets justify-content: center — a field reads like an
     input, so its icon and text anchor to the start edge. */
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0 0.75rem;
  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style)
    var(--wa-form-control-border-color);
  border-radius: var(--wa-form-control-border-radius);
  background: var(--wa-form-control-background-color);
  color: var(--wa-color-text-normal);
  min-height: var(--wa-form-control-height);
  text-align: start;
  cursor: pointer;
  font: inherit;
}

.stay-range__field > i { color: var(--wa-color-text-quiet); flex: 0 0 auto; }

.stay-range__field:hover,
.stay-range__field[data-active] {
  border-color: var(--wa-color-brand-border-loud);
}

.stay-range__field-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.375rem 0;
}

.stay-range__label {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  line-height: 1.2;
}

.stay-range__value {
  font-size: var(--wa-font-size-m);
  color: var(--wa-color-text-normal);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stay-range__value--placeholder { color: var(--wa-color-text-quiet); }

.stay-range__panel {
  /* wa-date-picker has no intrinsic width: its day grid is table-layout fixed
     at 100%, so a shrink-wrapped popup would collapse it to min-content. Give
     the panel a definite width — 38rem keeps it over the component's own 32em
     container breakpoint, where two months sit side-by-side. */
  width: min(38rem, calc(100vw - 2rem));
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  box-shadow: var(--wa-shadow-l);
  padding: 0.75rem;
  /* Above the sticky toolbar (hotel_search.css z-index: 900). Only matters in
     the non-Popover-API fallback; normally the panel paints in the top layer. */
  z-index: 1000;
}

.stay-range__prompt {
  margin: 0 0 0.25rem;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.stay-range__error {
  margin: 0 0 0.375rem;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-danger-on-quiet);
}

.stay-range__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.375rem;
}

/* Today stands out in the stay calendar — moved here from the old
   wa-date-input::part(date-picker__day-today) rules in hotel_search.css. */
.stay-range wa-date-picker::part(day-today) {
  font-weight: var(--wa-font-weight-bold);
  border: var(--wa-border-width-m) solid var(--wa-color-brand-border-loud);
}

/* HMS-1366 — the market-dates caption above the fields: body-size and full
   weight, not the small quiet label the ticket rejected. */
.stay-range__market {
  margin: 0 0 0.375rem;
  font-size: var(--wa-font-size-m);
  font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-normal);
}