/* Flights and Hotels share one row with the trip type, on every screen width.
   The kind switch shrinks to two gradient icon buttons and the three trip types
   take the rest, as quiet chips. With no trip type (hotels) the switch spreads
   out and shows its words again. Loaded after app.css. */

.classic-tools {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5rem;
}

.classic-tools .classic-kinds {
  flex: none;
  width: auto;
  padding: 3px;
}

.classic-tools .classic-kind {
  min-height: 2rem;
  padding: 0 0.65rem;
}

/* The words stay for screen readers; the icons carry the meaning. */
.classic-tools .classic-kind > span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.classic-tools:has(> .classic-switch[hidden]) .classic-kinds {
  flex: 1 1 auto;
  grid-auto-columns: minmax(0, 1fr);
}

.classic-tools:has(> .classic-switch[hidden]) .classic-kind > span:last-child {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.classic-tools .classic-switch {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.classic-tools .classic-switch::before {
  display: none;
}

.classic-tools .classic-switch-option {
  min-width: 0;
  min-height: 2rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid rgba(16, 40, 90, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: #6b7a9c;
  font-size: 0.72rem;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.classic-tools .classic-switch-option[aria-checked="true"] {
  border-color: rgba(61, 107, 255, 0.35);
  background: #eaf0ff;
  color: #2a52d8;
}