/**
 * Mobile navigation tabs and category buttons.
 * Mobile-specific navigation elements for the homepage.
 */

/* Mobile Navigation Tabs */
.mobile-nav-tabs {
  display: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
  padding: 0 var(--space-sm);
}

/* Show when sidebar disappears (1024px) */
@media (max-width: 1024px) {
  .mobile-nav-tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-xs);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.mobile-nav-tabs__item {
  flex: 1;
  min-width: 0; /* allow flex items to shrink instead of overflowing */
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-tabs__item {
  --ui-hover-transform: scale(1.02);
  --ui-active-transform: scale(0.98);
}

.mobile-nav-tabs__item:hover {
  color: var(--color-primary);
}

.mobile-nav-tabs__item--active {
  color: #d40101; /* Red color for active tab */
  border-bottom-color: #d40101; /* Red border for active tab */
  font-weight: var(--font-weight-semibold);
}

/* Mobile Category Buttons */
.mobile-category-buttons {
  display: none;
  padding: var(--space-md) var(--space-sm);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Show when sidebar disappears (1024px) */
@media (max-width: 1024px) {
  .mobile-category-buttons {
    display: block;
    border-bottom: none;
    border-top: 1px solid var(--color-border);
  }
}

.mobile-category-buttons__row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.mobile-category-button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  /* Transform handled by base micro-interactions */
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden; /* keep click bubble clipped inside */
}

.mobile-category-button {
  --ui-hover-transform: scale(1.02);
  --ui-active-transform: scale(0.95);
}

/* Full width buttons (for genres and regions outside the row) */
.mobile-category-buttons .sidebar__dropdown-container {
  margin-bottom: var(--space-sm);
  width: 100%;
}

.mobile-category-buttons .sidebar__dropdown-container:last-child {
  margin-bottom: 0;
}

.mobile-category-buttons .sidebar__dropdown-container .mobile-category-button {
  flex: none;
  width: 100%;
}

.mobile-category-button:hover {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-sm);
}

.mobile-category-button__icon {
  flex-shrink: 0;
  opacity: 0.8;
}

.mobile-category-button__text {
  flex: 1;
  text-align: left;
}

.mobile-category-button__arrow {
  flex-shrink: 0;
  opacity: 0.6;
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.mobile-category-button--expandable {
  cursor: pointer;
}

.mobile-category-button--expandable.active .mobile-category-button__arrow {
  transform: rotate(90deg);
}