.tab-bar {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ccc;
  z-index: 10;
}

.tab-bar-detail {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 10;
}

.tab-item {
  flex: 1;
  text-align: center;
  background: none;
  border: none;
  padding: 10px 0;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.3s ease;
  border-radius: 10px 10px 0 0;
}

.tab-item-detail {
  flex: 1;
  text-align: center;
  background: none;
  border: none;
  padding: 10px 0 !important;
  cursor: pointer;
  gap: 10px;
  transition: all 0.3s ease;
  color: #fff;
}

.tab-item i {
  font-size: 1.8rem;
  order: 0;
  filter: invert(74%) sepia(7%) saturate(232%) hue-rotate(182deg) brightness(92%) contrast(86%);
}

.tab-label {
  font-size: 14px;
  order: 1;
  color: var(--gray);
}

/* Saat aktif */
.tab-item.active {
  background: var(--secondary);
  color: var(--primary);
  gap: 6px;
}

.tab-item.active i {
  order: 0; /* icon dulu */
  filter: invert(36%) sepia(94%) saturate(6786%) hue-rotate(256deg) brightness(95%) contrast(101%);
}

.tab-item.active .tab-label {
  display: inline;
  order: 1; /* label setelah icon */
  color: var(--primary);
}