/* Tab controls: segmented toggle (destinations) and pill tabs (home). */

.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--color-action);
  border-radius: var(--radius-btn);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.seg-toggle__btn {
  padding: 10px 36px;
  background: var(--color-surface);
  border: 0;
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text);
}

.seg-toggle__btn.is-active {
  background: var(--color-action);
  color: #fff;
}

/* pill tabs (home destinations selector) */
.pill-tabs {
  display: inline-flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
}

.pill-tabs__btn {
  padding: 8px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text);
}

.pill-tabs__btn.is-active {
  background: var(--color-primary);
  color: #fff;
}