/* Search capsule: every field is its own pill; popovers for destination, dates, stay and travellers. */

.search-widget { position: relative; color: var(--ink); }

/* Phones, search view only: the summary pill stands in for the folded form (see responsive.css). */
.sw-summary { display: none; }

.sw-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
  gap: 8px;
  padding: 10px;
  /* Concentric with the 56px pills inside: pill radius + padding. */
  border-radius: calc(28px + 10px);
  background: var(--tile);
  box-shadow: var(--shadow-float);
}
.sw-field { position: relative; min-width: 0; }

.sw-from,
.sw-to,
.sw-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 56px;
  padding: 0 var(--space-5) 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--sunk);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sw-button:hover,
.sw-to:hover { background: var(--line); }
.sw-button[aria-expanded='true'],
.sw-to:focus-within { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sw-icon { width: 18px; height: 18px; color: var(--ink-3); }
.sw-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.sw-label { color: var(--ink-3); font-size: var(--fs-xs); }
.sw-value { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sw-input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; font-weight: 500; text-overflow: ellipsis; }
.sw-input::placeholder { color: var(--ink-3); font-weight: 400; }
/* The input has no outline of its own; the pill shows focus instead. */
.sw-to:has(.sw-input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.sw-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 56px;
  padding: 0 var(--space-8) 0 var(--space-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease);
}
.sw-submit:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.sw-submit .icon { width: 18px; height: 18px; }

.sw-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); margin-top: var(--space-4); padding: 0 var(--space-4); color: var(--ink-2); font-size: var(--fs-sm); }
.sw-check { display: inline-grid; grid-template-columns: 20px auto; padding: 0; }
.sw-check .check-text { font-size: inherit; }
.sw-note { margin-left: auto; }

/* ---------- Popovers ---------- */

.sw-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  left: 0;
  min-width: 100%;
  border-radius: 24px;
  background: var(--tile);
  box-shadow: var(--shadow-float);
  animation: rise-in var(--t-base) var(--ease);
}
.sw-pop-list { width: 26rem; padding: var(--space-2); }
.sw-pop-cal { width: min(46rem, calc(100vw - 2 * var(--gutter))); }
.sw-pop-small { width: 22rem; }
.sw-pop-right { left: auto; right: 0; }
.pop-inner { display: grid; gap: var(--space-5); padding: var(--space-5); }
.pop-stack { display: grid; gap: var(--space-2); }
.pop-note { color: var(--ink-3); font-size: var(--fs-xs); }
.pop-empty { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-2) 0; color: var(--ink-2); }
.pop-done { justify-self: end; }
.pop-tabs { justify-self: start; }

.combo-list { margin: 0; padding: 0; list-style: none; }
.combo-option { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: 16px; cursor: pointer; }
.combo-option:hover,
.combo-option.is-active { background: var(--sunk); }
.combo-icon { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; background: var(--sunk); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
.combo-option:hover .combo-icon,
.combo-option.is-active .combo-icon { background: var(--line); }
.combo-icon .icon { width: 18px; height: 18px; }
.combo-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.combo-text { display: grid; min-width: 0; line-height: 1.3; }
.combo-text strong { font-size: var(--fs-sm); font-weight: 500; }
.combo-text span { overflow: hidden; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; text-overflow: ellipsis; }
.combo-price { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Price calendar: 44px day circles, tier-coloured prices, a sunk band for a range ---------- */

.pc { position: relative; display: grid; gap: var(--space-4); }
.pc-nav { position: absolute; inset: -4px 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.pc-arrow { pointer-events: auto; }
.pc-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.pc-title { margin-bottom: var(--space-3); font-weight: 500; line-height: 24px; text-align: center; }
.pc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 0; }
.pc-dow { padding-bottom: var(--space-1); color: var(--ink-3); font-size: var(--fs-xs); text-align: center; }
.pc-day {
  position: relative;
  isolation: isolate;
  display: grid;
  place-content: center;
  justify-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  line-height: 1.05;
}
/* The circle: hover, selected and range ends. */
.pc-day::before { content: ''; position: absolute; z-index: -1; inset: 0; width: 44px; height: 44px; margin: auto; border-radius: 50%; transition: background-color var(--t-fast) var(--ease); }
.pc-day:disabled { color: var(--ink-4); }
.pc-num { font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.pc-price { font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pc-day.tier-1 .pc-price { color: var(--cheap); }
.pc-day.tier-2 .pc-price { color: var(--mid); }
.pc-day.tier-3 .pc-price { color: var(--high); }
.pc-day:not(:disabled):hover::before { background: var(--line); }
.pc-day:focus-visible { outline: none; }
.pc-day:focus-visible::before { outline: 2px solid var(--ink); outline-offset: 2px; }
.pc-day.in-range { background: var(--sunk); }
.pc-day.is-row-start { border-top-left-radius: 22px; border-bottom-left-radius: 22px; }
.pc-day.is-row-end { border-top-right-radius: 22px; border-bottom-right-radius: 22px; }
/* Half a band behind each end of a range, so band + circles read as one pill. */
.pc-day.is-range-end::after { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; background: var(--sunk); }
.pc-day.is-start.is-range-end::after { left: 50%; right: 0; }
.pc-day.is-selected.is-range-end::after { left: 0; right: 50%; }
.pc-day.is-start::before,
.pc-day.is-selected::before { background: var(--black); }
.pc-day.is-start,
.pc-day.is-selected,
.pc-day.is-start .pc-price,
.pc-day.is-selected .pc-price { color: #fff; }
.pc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-xs); }
.pc-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.pc-swatch { width: 8px; height: 8px; border-radius: 50%; }
.pc-swatch.tier-1 { background: var(--cheap); }
.pc-swatch.tier-2 { background: var(--mid); }
.pc-swatch.tier-3 { background: var(--high); }
.pc-note { margin-left: auto; color: var(--ink-3); }

/* ---------- Month chips, stay presets, travellers ---------- */

.month-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.month-chip { height: 44px; padding: 0 var(--space-5); }
.month-chip strong { font-weight: 500; }
.month-chip span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.month-chip[aria-pressed='true'] span { color: rgb(255 255 255 / 0.75); }

.preset-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.stepper:last-of-type { border-bottom: 0; }
.stepper-label { font-weight: 500; }
.stepper-hint { color: var(--ink-3); font-size: var(--fs-xs); }
.stepper-controls { display: flex; align-items: center; gap: var(--space-3); }
.stepper-btn { width: 40px; height: 40px; font-size: 1.25rem; line-height: 1; }
.stepper-value { min-width: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }

/* ---------- "Ask" box: a white pill input with a black button (REF-3) ---------- */

/* minmax(0, 1fr): the text input's intrinsic width must not widen the column on small phones. */
.ask-block { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-3); max-width: 46rem; margin: var(--space-8) auto 0; }
.ask {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 56px;
  padding: 6px 6px 6px var(--space-5);
  border-radius: var(--r-pill);
  background: var(--tile);
  transition: box-shadow var(--t-fast) var(--ease);
}
.ask:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ask:has(.ask-input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ask-icon { width: 18px; height: 18px; color: var(--ink-3); }
.ask-input { flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; text-overflow: ellipsis; }
.ask-input::placeholder { color: var(--ink-3); }
.ask-submit { height: 44px; padding: 0 var(--space-6); border: 0; border-radius: var(--r-pill); background: var(--black); color: #fff; font-weight: 500; transition: background-color var(--t-fast) var(--ease); }
.ask-submit:hover { background: #2c2c30; }
.ask.is-busy .ask-submit { background: var(--ink-2); }
.ask-meta { display: grid; justify-items: center; gap: var(--space-3); width: 100%; }
.ask-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ask-engine { color: var(--ink-3); font-size: var(--fs-xs); }
.ask-status:not(:empty) { width: 100%; padding: var(--space-3) var(--space-5); border-radius: var(--r-card); background: var(--tile); color: var(--ink-2); font-size: var(--fs-sm); }

body[data-view='search'] .ask-meta { display: none; }
body[data-view='search'] .ask-block { max-width: none; margin-top: var(--space-4); }

.ask-chip { background: var(--tile); }
.ask-chip:hover { background: var(--line); }