/* Modern Responsive Navigation - Replaces Swiper.js */

.es-profile-header-nav,
.es-tab-nav {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.es-profile-header-nav::-webkit-scrollbar,
.es-tab-nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.es-profile-header-nav__list,
.es-tab-nav__list {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  list-style: none;
  margin: 0;
}

.es-profile-header-nav__item,
.es-tab-nav__item {
  flex-shrink: 0;
}

.es-profile-header-nav__link,
.es-tab-nav__link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  font-weight: 500;
  color: #6b7280;
}

.es-profile-header-nav__link:hover,
.es-tab-nav__link:hover {
  background: #f9fafb;
  color: #111827;
}

.es-profile-header-nav__link.active,
.is-active .es-profile-header-nav__link,
.is-active .es-tab-nav__link {
  background: #eef2ff;
  color: #4f46e5;
}

/* Hide the old bubble decoration */
.es-profile-header-nav__link-bubble {
  display: none !important;
}

/* Mobile: Add scroll hint indicators */
@media (max-width: 768px) {
  .es-profile-header-nav,
  .es-tab-nav {
    position: relative;
  }
  
  .es-profile-header-nav::after,
  .es-tab-nav::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, white);
    pointer-events: none;
  }
}