/* ============================================================
   Search bar: rounded liquid-glass pill
   ============================================================ */
.search-module {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  transition:0.3s;
}

.search-bar {
  display: flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  gap: 1px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--glass-bg-top), var(--glass-bg-bottom));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 24px 60px -18px rgba(var(--ink-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.search-fields {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
}

.search-field {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 14px 20px;
  min-width: 200px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s var(--ease), width 0.32s var(--ease);
  background: none;
  border:none;
  /* border: 1px solid #eeeeee48; */
  text-align: left;
}

.search-field:hover,
.search-field.is-active {
  background: var(--glass-field-hover);
}

.search-field__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-field__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-field__icon {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  font-size: 0.85rem;
  color: var(--nav-text-soft);
  flex-shrink: 0;
}

.search-field__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nav-text-soft);
}

.search-field__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nav-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s var(--ease), width 0.32s var(--ease);
}

.search-field__badge {
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nav-text);
  max-width: 0;
  margin-left: 0;
  padding: 3px 0;
  opacity: 0;
  transition: max-width 0.32s var(--ease), margin-left 0.32s var(--ease),
    padding 0.32s var(--ease), border-color 0.2s var(--ease), opacity 0.22s var(--ease);
}

.search-field__badge.is-visible {
  max-width: 160px;
  margin-left: 20px;
  padding: 3px 9px;
  border-color: rgba(255, 255, 255, 0.28);
  opacity: 1;
}

.search-field__badge.is-bump {
  animation: stepperBump 0.28s var(--ease);
}

.search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  height: 58px;
  padding: 0 26px;
  margin-left: 8px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--nav-text);
  color: var(--dusk-deep);
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.15s var(--ease);
}

.search-submit:hover {
  background: rgba(255, 255, 255, 0.85);
}

.search-submit .icon {
  font-size: 1.1rem;
}

/* ============================================================
   Field panels: shared shell
   ============================================================ */
.field-panel {
  position: fixed;
  top: 0;
  left: 0;
  /* Above .price-sheet (z-index: 90): the mobile price-details sheet's
     own Dates/Guests rows open this same panel (see openDatePanelFrom()
     in script.js), and it needs to render on top of the sheet it was
     triggered from, not behind it. Confirmed via live testing: without
     this the calendar opened and worked (clicks landed, state updated)
     but was invisible, stacked under the sheet. */
  z-index: 95;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--panel-glass-top), var(--panel-glass-bottom));
  color: var(--ink);
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-glass-border);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
  pointer-events: none;
}

.field-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.field-panel--location {
  width: 380px;
}

.field-panel--guests {
  width: 320px;
}

/* ---- Property list (Field 1) ---- */
.property-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.property-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.15s var(--ease);
}

.property-item:hover {
  background: var(--border-soft);
}

.property-item.is-selected {
  background: var(--range-bg);
}

.property-item__name {
  font-weight: 600;
  font-size: 0.9rem;
}

.property-item__meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.property-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ---- Date range picker (Field 2) ---- */
.date-panel__topbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: var(--panel-control-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s var(--ease), opacity 0.15s var(--ease);
}

.cal-nav-btn .icon {
  width: 16px;
  height: 16px;
}

.cal-nav-btn:hover:not(:disabled) {
  background: var(--paper-elevated);
}

.cal-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.date-panel__months {
  display: flex;
  gap: 32px;
}

.cal-month {
  width: 280px;
}

.cal-month__title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.cal-weekdays span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

.cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  transition: background 0.12s var(--ease);
}

.cal-cell.is-in-range {
  background: var(--range-bg);
}

.cal-cell.is-start {
  background: var(--range-bg);
  border-radius: var(--control-radius) 0 0 var(--control-radius);
}

.cal-cell.is-end {
  background: var(--range-bg);
  border-radius: 0 var(--control-radius) var(--control-radius) 0;
}

.cal-cell.is-start.is-end {
  border-radius: var(--control-radius);
}

.cal-day {
  width: 36px;
  height: 36px;
  border-radius: var(--control-radius);
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.cal-day:hover:not(:disabled) {
  background: rgba(var(--ink-rgb), 0.08);
}

.cal-cell.is-start .cal-day,
.cal-cell.is-end .cal-day {
  background: var(--accent);
  color: var(--accent-contrast);
}

.cal-cell.is-start .cal-day:hover,
.cal-cell.is-end .cal-day:hover {
  background: var(--accent);
}

.cal-day.is-today {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.cal-day:disabled {
  color: #cbcbcb;
  cursor: not-allowed;
}

/* Blocked (booked / host-held) dates, once a property with real synced
   availability is selected: visually distinct from an ordinary disabled
   past date. Same treatment as the property detail page's own booking
   calendar (see 19-price-sheet-lightbox-tour.css), duplicated here since
   that file isn't loaded on the search bar's pages. */
.cal-day.is-blocked:disabled {
  color: var(--ink-soft);
  text-decoration: line-through;
  background: var(--border-soft);
}

.date-panel__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.date-panel__legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--border);
}

.date-panel__legend-swatch.is-blocked {
  background: repeating-linear-gradient(45deg, var(--border) 0 3px, transparent 3px 6px);
}

/* Attention-grabbing burst when a click would otherwise silently produce a
   too-short range (see flashMinNightsWarning() in property-detail.js and
   03-search-fields.js): the class is added and removed on each attempt, so
   the color/weight below only apply for the moment the shake plays. */
.date-panel__legend--min-nights.is-invalid {
  color: #dc2626;
  font-weight: 700;
  animation: date-panel-legend-shake 0.4s ease;
}

@keyframes date-panel-legend-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.date-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.link-btn {
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  color: var(--ink);
  cursor: pointer;
}

.link-btn:disabled {
  color: var(--ink-soft);
  text-decoration: none;
  cursor: not-allowed;
}

.btn-primary-sm {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}

.btn-primary-sm:hover {
  opacity: 0.85;
}

/* ---- Guests panel (Field 3) ---- */
.guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.guest-row:last-of-type {
  border-bottom: none;
}

.guest-row__label {
  font-weight: 600;
  font-size: 0.92rem;
}

.guest-row__sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.guest-panel__max {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.stepper__btn {
  width: 30px;
  height: 30px;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: var(--panel-control-bg);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), opacity 0.15s var(--ease);
}

.stepper__btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.stepper__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stepper__value {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-block;
}

.stepper__value.is-bump {
  animation: stepperBump 0.28s var(--ease);
}

@keyframes stepperBump {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.segmented {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.segmented__btn {
  border: none;
  background: transparent;
  padding: 6px 16px;
  border-radius: calc(var(--radius-md) - 4px);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.segmented__btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
}

@media (max-width: 720px) {
  .field-panel--date .cal-month {
    width: 272px;
  }
}

@media (max-width: 900px) {
  .search-bar {
    flex-wrap: wrap;
    width: 100%;
  }
  .search-fields {
    flex-direction: column;
    width: 100%;
  }
  .search-field {
    width: 100%;
  }
  .search-field + .search-field {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .search-submit {
    width: 100%;
    height: 48px;
    margin-left: 0;
    margin-top: 8px;
    border-radius: var(--radius-md);
  }
}