.tab-btn {
  position: relative;
  @apply transition-all duration-300 relative;
}

.tab-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #dc2626;
  transition: all 0.3s ease;
  transform: translateX(-50%);
  @apply absolute bottom-0 left-0 w-full h-0.5 bg-red-600 transform scale-x-0 transition-transform duration-300;
}

.tab-btn:hover::after,
.tab-btn.active::after {
  width: 80%;
  @apply scale-x-100;
}

.tab-content {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.tab-content.active {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .tab-btn {
    @apply min-w-[140px] px-3 py-3;
  }

  .tab-btn div {
    @apply text-sm;
  }

  .tab-btn p {
    @apply text-xs;
  }
}

/* Hide scrollbar but keep functionality */
[role="tablist"] {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

[role="tablist"]::-webkit-scrollbar {
  display: none;
}