/* TabBar - Spray Wall Navigation Tabs */
/* Subtle, minimal design that integrates with dark theme */

.spray-wall-tab-bar {
  display: flex;
  padding: 0 16px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-bar-container {
  display: flex;
  gap: 4px;
}

/* Tab Button - Subtle navigation style */
.tab-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
}

.tab-button:hover:not(.loading) {
  color: rgba(255, 255, 255, 0.8);
}

/* Active Tab - Rumble red text with underline indicator */
.tab-button.active {
  color: #E53935;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #E53935;
  border-radius: 1px 1px 0 0;
}

/* Loading State */
.tab-button.loading {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tab Icon */
.tab-icon {
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0.8;
}

.tab-button.active .tab-icon {
  opacity: 1;
}

/* Tab Label */
.tab-label {
  flex-shrink: 0;
}

/* Tab Count - Subtle inline count */
.tab-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 2px;
}

.tab-button.active .tab-count {
  color: #E53935;
}

/* Wishlist count - subtle red tint */
.wishlist-count {
  color: rgba(229, 57, 53, 0.7);
}

.tab-button.active .wishlist-count {
  color: #E53935;
}

/* Sends count - subtle green tint */
.sends-count {
  color: rgba(185, 255, 102, 0.7);
}

.tab-button.active .sends-count {
  color: #b9ff66;
}

/* My Boulders count - subtle orange tint */
.my-boulders-count {
  color: rgba(255, 159, 64, 0.7);
}

.tab-button.active .my-boulders-count {
  color: #ff9f40;
}

/* ==========================================
   Responsive Styles
   ========================================== */

/* Mobile */
@media (max-width: 480px) {
  .spray-wall-tab-bar {
    padding: 0 12px;
  }

  .tab-button {
    padding: 10px 12px;
    font-size: 12px;
    gap: 5px;
  }

  .tab-icon {
    font-size: 11px;
  }

  .tab-count {
    font-size: 10px;
  }
}

/* Very small screens - keep labels visible but smaller */
@media (max-width: 360px) {
  .tab-label {
    font-size: 11px;
  }

  .tab-button {
    padding: 10px 8px;
  }

  .tab-icon {
    font-size: 11px;
  }

  .tab-count {
    font-size: 9px;
  }
}