/* Track button styles */
.track-button {
  position: relative;
  margin: 0;
  flex-shrink: 0;
  flex-grow: 0;
  width: 66px;
  height: 15.4px;
  background: #ffcf25;
  border: none;
  border-radius: 9.2px;
  color: white;
  font-size: 9.3px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-button span {
  width: 100%;
  height: 100%;
  text-align: center;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  font-weight: inherit;
  transition: all 0.3s ease;
  pointer-events: none;
}

.track-button .track-text {
  display: flex;
}

.track-button.tracking .track-text {
  display: none;
}

.track-button.tracking .tracking-text {
  display: flex;
}

.track-button.tracking:hover .tracking-text {
  display: none;
}

.track-button.tracking:hover .untrack-text {
  display: flex;
}

.track-button .tracking-text,
.track-button .untrack-text {
  display: none;
}

.track-button.tracking .tracking-text {
  display: flex;
}

.track-button.tracking:hover .untrack-text {
  display: flex;
}

.track-button.tracking:hover .tracking-text {
  display: none;
}

.track-button .untrack-text {
  display: none;
}

.track-button:hover {
  background-color: #f6df24;
}

.track-button {
  position: static;
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
  flex-grow: 0;
  width: 66px;
  height: 15.4px;
  background: #ffcf25;
  border: none;
  border-radius: 9.2px;
  color: white;
  font-size: 9.3px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-button span {
  position: static;
  width: 100%;
  text-align: center;
  line-height: 15.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  font-weight: inherit;
  transition: all 0.3s ease;
}

.track-text,
.tracking-text,
.untrack-text {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0); /* Start in normal position */
  opacity: 1; /* Default to visible */
}

/* Hide tracking and untrack by default */
.tracking-text,
.untrack-text {
  opacity: 0;
  transform: translateY(100%); /* Move down and out of view */
}

/* When tracking class is active, show tracking text and hide track text */
.track-button.tracking .track-text {
  opacity: 0;
  transform: translateY(-100%); /* Move up and out of view */
}

.track-button.tracking .tracking-text {
  opacity: 1;
  transform: translateY(0); /* Move to normal position */
}

/* When tracking + hover, prepare to show untrack */
.track-button.tracking:hover .tracking-text {
  opacity: 0;
  transform: translateY(-100%); /* Move up and out of view */
}

.track-button.tracking:hover .untrack-text {
  opacity: 1;
  transform: translateY(0); /* Move to normal position */
}

/* Default (not tracking) - Yellow button with brown text */
.track-button {
  background: #ffcf25;
  color: #90773c;
}

.track-button:hover {
  background-color: #f6df24;
}

/* TRACKING state - Brown button with yellow text */
.track-button.tracking {
  background: #90773c;
  color: #ffcf25;
}

.track-button.tracking:hover {
  background: #c7a3a3;
  color: #fff;
}