.trip-search-form {
  --trip-search-field-gap: 1em;
  --search-tab-gap: 0.8em;
  --search-tab-overlap: 0.8em;
  padding: 1em;
  border: var(--border-width-1) solid var(--border-color-soft);
  background-color: var(--color-white);
  color: var(--color-ink);
  border-radius: 0.35em;
}

.trip-search-form form {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0 0.5em;
}

.trip-search-form form input:not([type="range"]):not([type="hidden"]):not(.form-select__input),
.trip-search-form form select,
.trip-search-form form textarea,
.trip-search-form form .form-date-picker__input {
  inline-size: 100%;
}

.trip-search-form form input:not([type="range"]):not([type="hidden"]):not(.form-select__input),
.trip-search-form form textarea,
.trip-search-form form .form-date-picker__input {
  block-size: var(--input-height-1);
  min-block-size: var(--input-height-1);
  padding: 0.3em 0.6em;
  border: var(--border-width-1) solid var(--form-control-border);
  border-radius: 0.35em;
  background-color: var(--form-control-bg);
  color: var(--form-control-color);
}

.trip-search-form form textarea:disabled {
  opacity: 1;
  cursor: not-allowed;
  background-color: color-mix(in srgb, var(--form-control-bg) 88%, var(--color-navy));
}

.trip-search-form form textarea:disabled::placeholder {
  color: var(--form-control-color);
  opacity: 0.72;
}

.trip-search-form .form-budget-slider {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3em;
  inline-size: 100%;
}

.trip-search-form .form-budget-slider__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  inline-size: 100%;
}

.trip-search-form .form-budget-slider__header output {
  font-size: 1.35em;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.trip-search-form .form-budget-slider input[type="range"] {
  --range-thumb-size: 0.8rem;
  --range-track-height: 0.65rem;
  --range-fill: var(--color-accent);
  --range-empty: var(--color-navy);
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  block-size: var(--range-thumb-size);
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.trip-search-form .form-budget-slider input[type="range"]::-webkit-slider-runnable-track {
  block-size: var(--range-track-height);
  background: linear-gradient(
    to right,
    var(--range-fill) 0%,
    var(--range-fill) var(--range-progress, 0%),
    var(--range-empty) var(--range-progress, 0%),
    var(--range-empty) 100%
  );
  border: none;
}

.trip-search-form .form-budget-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--range-thumb-size);
  block-size: var(--range-thumb-size);
  margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
  border: none;
  border-radius: 0;
  background-color: var(--range-fill);
  transform: rotate(45deg);
  cursor: pointer;
}

.trip-search-form .form-budget-slider input[type="range"]::-moz-range-track {
  block-size: var(--range-track-height);
  background: var(--range-empty);
  border: none;
}

.trip-search-form .form-budget-slider input[type="range"]::-moz-range-progress {
  block-size: var(--range-track-height);
  background: var(--range-fill);
  border: none;
}

.trip-search-form .form-budget-slider input[type="range"]::-moz-range-thumb {
  inline-size: var(--range-thumb-size);
  block-size: var(--range-thumb-size);
  border: none;
  border-radius: 0;
  background-color: var(--range-fill);
  transform: rotate(45deg);
  cursor: pointer;
}

.trip-search-form .form-budget-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.trip-search-form .form-budget-slider input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.trip-search-form form fieldset ul {
  display: grid;
  gap: 0.3em var(--trip-search-field-gap);
}

.trip-search-form form fieldset ul > li {
  display: flex;
  flex-direction: column;
}

.trip-search-form form fieldset:first-of-type ul {
  grid-template-columns: 1fr 1fr;
}

.trip-search-form__label-text {
  position: relative;
  display: inline-block;
  padding-inline-end: 0.55em;
}

.trip-search-form__required {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  transform: translate(100%, -0.12em);
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers .form-select__container {
  width: fit-content;
  min-inline-size: 4.75em;
  align-self: end;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers .form-select__control {
  inline-size: auto;
  min-inline-size: 4.75em;
  gap: 0.45em;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers .form-select__single-value {
  text-align: right;
}

.trip-search-form .trip-search-form__dates {
  grid-column: 1 / -1;
  inline-size: 100%;
  padding-block: 0.3em;
}

.trip-search-form .trip-search-form__dates .form-date-picker__wrapper,
.trip-search-form .trip-search-form__dates .react-datepicker-wrapper {
  display: block;
  inline-size: 100%;
}

.trip-search-form .trip-search-form__budget-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: calc(85% - 1em) 1fr;
  gap: 2.1em;
}

.trip-search-form .trip-search-form__budget,
.trip-search-form .trip-search-form__travelers {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trip-search-form .trip-search-form__budget .form-budget-slider {
  align-self: stretch;
}

.trip-search-form .trip-search-form__travelers .form-select__container {
  inline-size: auto;
  min-inline-size: 4.5em;
}

.trip-search-form form fieldset:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.trip-search-form section.category-tabs {
  display: flex;
  flex-direction: row;
  gap: 0;
  padding-top: 0.5em;
}

.trip-search-form section[role="tablist"] button {
  position: relative;
  z-index: 1;
  inline-size: auto;
  white-space: nowrap;
  padding: 0.5em calc(0.8em + var(--search-tab-gap));
  border: var(--border-width-1) solid var(--color-navy);
  border-bottom: none;
  border-top-right-radius: var(--radius-tab);
  background-color: var(--color-navy);
  color: var(--color-white);
}

.trip-search-form section[role="tablist"] button:first-child {
  margin-inline-start: 0;
}

.trip-search-form section[role="tablist"] button[aria-selected="true"] {
  z-index: 2;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.trip-search-form section[role="tabpanel"] .preference-chips {
  min-height: 210px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em;
  inline-size: 100%;
  padding: 0.8em;
  border: var(--border-width-1) solid var(--form-control-border);
  background-color: var(--color-white);
  color: var(--color-ink);
}

.trip-search-form section[role="tabpanel"] .preference-chips > li {
  display: block;
  flex: 0 0 auto;
}

.trip-search-form section[role="tabpanel"] .preference-chips button {
  padding: 0.3em 1.3em;
  inline-size: auto;
  white-space: nowrap;
  border: var(--border-width-1) solid var(--color-navy);
  background-color: transparent;
  color: var(--color-navy);
}

.trip-search-form section[role="tabpanel"] .preference-chips button[aria-pressed="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.trip-search-form section.form-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.8em;
}

.trip-search-form section.form-actions button {
  width: calc(50% - 0.4em);
}

.trip-search-form__notes {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.trip-search-form textarea#trip-notes,
.trip-search-form textarea#demo-notes,
.trip-search-form .trip-search-form__notes textarea {
  inline-size: 100%;
  block-size: auto;
  min-block-size: 3em;
}

.trip-search-form small.trip-search-form-note {
  display: block;
  text-align: center;
  padding-top: 1.5em;
  color: color-mix(in srgb, var(--color-ink) 62%, transparent);
}

@media screen and (max-width: 699px) {
.trip-search-form {
  --search-tab-gap: 0.3em;
  --search-tab-overlap: 0.3em;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.trip-search-form form {
  gap: 1.25em;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.trip-search-form form fieldset {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.trip-search-form form fieldset:first-of-type ul {
  grid-template-columns: 1fr;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__budget-row {
  grid-template-columns: minmax(0, 1fr) 3.4em;
  gap: 0.65em;
  align-items: end;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__budget {
  min-inline-size: 0;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers {
  text-align: end;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers .form-select__container {
  align-self: end;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 2.6em;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers .form-select__control {
  inline-size: 100%;
  min-inline-size: 0;
  padding-inline: 0.2em;
  justify-content: center;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers .form-select__single-value {
  text-align: center;
}

.trip-search-form form fieldset:first-of-type ul .trip-search-form__travelers .form-select__indicators {
  display: none;
}

.trip-search-form form fieldset:nth-of-type(2) {
  margin-block-start: 0.25em;
}

.trip-search-form form fieldset:nth-of-type(2) section.category-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: 0;
}

.trip-search-form form fieldset:nth-of-type(2) section.category-tabs::-webkit-scrollbar {
  display: none;
}

.trip-search-form form fieldset:nth-of-type(2) section[role="tablist"] button {
  flex: 0 0 auto;
  inline-size: auto;
  padding-inline: calc(0.45em + var(--search-tab-gap));
  padding-block: 0.45em;
  white-space: nowrap;
  text-align: center;
}

.trip-search-form section[role="tabpanel"] .preference-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45em;
  min-height: auto;
  padding: 0.65em;
  justify-content: stretch;
}

.trip-search-form section[role="tabpanel"] .preference-chips > li {
  min-inline-size: 0;
}

.trip-search-form section[role="tabpanel"] .preference-chips button {
  inline-size: 100%;
  padding: 0.35em 0.25em;
  white-space: normal;
  text-align: center;
}

.trip-search-form section.form-actions {
  flex-direction: column;
  margin-block-start: 0.25em;
}

.trip-search-form section.form-actions button {
  width: 100%;
}
}